initial commit

app/page.tsx

@@ -1,65 +1,335 @@
-import Image from "next/image";
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Download, Loader2, Play, Music, Sparkles, Zap, Check } from 'lucide-react';
+import { isValidYouTubeUrl } from '@/lib/utils';
+import type { VideoInfo, DownloadResponse, VideoFormat, AudioFormat } from '@/lib/types';
 
 export default function Home() {
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [videoInfo, setVideoInfo] = useState<VideoInfo | null>(null);
+  const [videoFormat, setVideoFormat] = useState<VideoFormat>('mp4');
+  const [audioFormat, setAudioFormat] = useState<AudioFormat>('mp3');
+  const [formatType, setFormatType] = useState<'video' | 'audio'>('video');
+  const [downloadResult, setDownloadResult] = useState<DownloadResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleGetInfo = async () => {
+    if (!url.trim()) {
+      setError('Please enter a YouTube URL');
+      return;
+    }
+
+    if (!isValidYouTubeUrl(url)) {
+      setError('Please enter a valid YouTube URL');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setVideoInfo(null);
+    setDownloadResult(null);
+
+    try {
+      const response = await fetch('/api/info', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url }),
+      });
+
+      const data = await response.json();
+
+      if (data.success && data.videoInfo) {
+        setVideoInfo(data.videoInfo);
+      } else {
+        setError(data.error || 'Failed to get video information');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to fetch video info');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDownload = async () => {
+    if (!url.trim()) {
+      setError('Please enter a YouTube URL');
+      return;
+    }
+
+    if (!isValidYouTubeUrl(url)) {
+      setError('Please enter a valid YouTube URL');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setDownloadResult(null);
+
+    try {
+      const response = await fetch('/api/download', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          url,
+          format: formatType === 'video' ? videoFormat : audioFormat,
+          formatType,
+        }),
+      });
+
+      const data: DownloadResponse = await response.json();
+
+      if (data.success) {
+        setDownloadResult(data);
+        if (data.videoInfo) {
+          setVideoInfo(data.videoInfo);
+        }
+      } else {
+        setError(data.error || 'Failed to download video');
+      }
+    } catch (err: any) {
+      setError(err.message || 'Failed to download video');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDuration = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
+    <div className="min-h-screen relative">
+      {/* Animated background */}
+      <div className="animated-bg" />
+      <div className="floating-orb floating-orb-1" />
+      <div className="floating-orb floating-orb-2" />
+      <div className="floating-orb floating-orb-3" />
+
+      <div className="container mx-auto px-4 py-12 md:py-20 max-w-2xl relative z-10">
+        {/* Header */}
+        <div className="text-center mb-10 md:mb-14 slide-up">
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
+            <Sparkles className="w-4 h-4" />
+            Fast & Free Downloads
+          </div>
+          <h1 className="text-4xl md:text-6xl font-bold mb-4 gradient-text tracking-tight">
+            Downlink
           </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
+          <p className="text-muted-foreground text-base md:text-lg max-w-md mx-auto">
+            Download YouTube videos and audio in any format. No limits, no ads, just downloads.
           </p>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+
+        {/* URL Input Card */}
+        <Card className="mb-6 glass-card slide-up slide-up-delay-1 border-0">
+          <CardContent className="pt-6 pb-6">
+            <div className="flex flex-col sm:flex-row gap-3">
+              <div className="flex-1 relative">
+                <Input
+                  type="url"
+                  placeholder="Paste YouTube URL here..."
+                  value={url}
+                  onChange={(e) => setUrl(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !loading) {
+                      handleGetInfo();
+                    }
+                  }}
+                  className="h-12 px-4 text-base bg-background/50 border-white/10 input-glow rounded-xl placeholder:text-muted-foreground/50"
+                />
+              </div>
+              <Button
+                onClick={handleGetInfo}
+                disabled={loading}
+                className="h-12 px-6 glow-button text-white border-0 rounded-xl font-medium"
+              >
+                {loading ? (
+                  <Loader2 className="h-5 w-5 animate-spin" />
+                ) : (
+                  <>
+                    <Zap className="h-4 w-4 mr-2" />
+                    Fetch
+                  </>
+                )}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Error Display */}
+        {error && (
+          <Card className="mb-6 slide-up border-destructive/30 bg-destructive/10 backdrop-blur-xl">
+            <CardContent className="py-4">
+              <p className="text-destructive text-sm font-medium text-center">{error}</p>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Video Info Card */}
+        {videoInfo && (
+          <Card className="mb-6 glass-card slide-up slide-up-delay-2 border-0 overflow-hidden">
+            <CardContent className="p-0">
+              {videoInfo.thumbnail && (
+                <div className="thumbnail-container aspect-video w-full bg-muted">
+                  <img
+                    src={videoInfo.thumbnail}
+                    alt={videoInfo.title}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              )}
+              <div className="p-5">
+                <h3 className="font-semibold text-base md:text-lg mb-2 line-clamp-2 leading-snug">
+                  {videoInfo.title}
+                </h3>
+                <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                  <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium">
+                    <Play className="w-3 h-3" />
+                    {formatDuration(videoInfo.duration)}
+                  </span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Download Options Card */}
+        {videoInfo && (
+          <Card className="mb-6 glass-card slide-up slide-up-delay-3 border-0">
+            <CardHeader className="pb-4">
+              <CardTitle className="text-lg font-semibold">Download Options</CardTitle>
+              <CardDescription>
+                Choose your format and quality
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-5">
+              {/* Format Type Toggle */}
+              <div className="grid grid-cols-2 gap-2 p-1 bg-background/30 rounded-xl">
+                <button
+                  onClick={() => setFormatType('video')}
+                  className={`flex items-center justify-center gap-2 py-2.5 px-4 rounded-lg text-sm font-medium transition-all ${
+                    formatType === 'video'
+                      ? 'bg-primary text-white shadow-lg shadow-primary/25'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-white/5'
+                  }`}
+                >
+                  <Play className="h-4 w-4" />
+                  Video
+                </button>
+                <button
+                  onClick={() => setFormatType('audio')}
+                  className={`flex items-center justify-center gap-2 py-2.5 px-4 rounded-lg text-sm font-medium transition-all ${
+                    formatType === 'audio'
+                      ? 'bg-primary text-white shadow-lg shadow-primary/25'
+                      : 'text-muted-foreground hover:text-foreground hover:bg-white/5'
+                  }`}
+                >
+                  <Music className="h-4 w-4" />
+                  Audio
+                </button>
+              </div>
+
+              {/* Format Selection */}
+              <div className="space-y-2">
+                <Label className="text-sm text-muted-foreground">
+                  {formatType === 'video' ? 'Video Format' : 'Audio Format'}
+                </Label>
+                {formatType === 'video' ? (
+                  <Select
+                    value={videoFormat}
+                    onValueChange={(value: VideoFormat) => setVideoFormat(value)}
+                  >
+                    <SelectTrigger className="h-11 bg-background/50 border-white/10 rounded-xl">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent className="glass-card border-white/10">
+                      <SelectItem value="mp4">MP4 (Recommended)</SelectItem>
+                      <SelectItem value="webm">WebM</SelectItem>
+                      <SelectItem value="mkv">MKV</SelectItem>
+                      <SelectItem value="avi">AVI</SelectItem>
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <Select
+                    value={audioFormat}
+                    onValueChange={(value: AudioFormat) => setAudioFormat(value)}
+                  >
+                    <SelectTrigger className="h-11 bg-background/50 border-white/10 rounded-xl">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent className="glass-card border-white/10">
+                      <SelectItem value="mp3">MP3 (Recommended)</SelectItem>
+                      <SelectItem value="m4a">M4A</SelectItem>
+                      <SelectItem value="wav">WAV</SelectItem>
+                      <SelectItem value="opus">Opus</SelectItem>
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+
+              {/* Download Button */}
+              <Button
+                onClick={handleDownload}
+                disabled={loading}
+                className="w-full h-12 glow-button text-white border-0 rounded-xl font-medium text-base"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    Processing...
+                  </>
+                ) : (
+                  <>
+                    <Download className="mr-2 h-5 w-5" />
+                    Download {formatType === 'video' ? videoFormat.toUpperCase() : audioFormat.toUpperCase()}
+                  </>
+                )}
+              </Button>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Success Card */}
+        {downloadResult?.success && downloadResult.downloadUrl && (
+          <Card className="slide-up success-glow backdrop-blur-xl border-0">
+            <CardContent className="py-6">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-10 h-10 rounded-full bg-green-500/20 flex items-center justify-center">
+                  <Check className="w-5 h-5 text-green-400" />
+                </div>
+                <div>
+                  <h3 className="font-semibold text-green-400">Ready to Download</h3>
+                  <p className="text-sm text-muted-foreground">Your file has been prepared</p>
+                </div>
+              </div>
+              <a
+                href={downloadResult.downloadUrl}
+                download={downloadResult.filename}
+                className="block"
+              >
+                <Button className="w-full h-12 bg-green-600 hover:bg-green-500 text-white border-0 rounded-xl font-medium text-base shadow-lg shadow-green-600/25 transition-all hover:shadow-green-500/30 hover:-translate-y-0.5">
+                  <Download className="mr-2 h-5 w-5" />
+                  Save File
+                </Button>
+              </a>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Footer */}
+        <div className="text-center mt-12 text-sm text-muted-foreground/60">
+          <p>Free and open source. No tracking, no ads.</p>
         </div>
-      </main>
+      </div>
     </div>
   );
 }