feat: new frontend

frontend-v2/app/admin/page.tsx

@@ -0,0 +1,264 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { RefreshCw, Trash2, Server, FileText, Database, CheckCircle, XCircle, Loader2 } from "lucide-react"
+import { getApiBaseUrl } from "../../lib/utils";
+import { Toaster, toast } from "sonner";
+
+interface CacheStatus {
+  files: number;
+  status: string;
+  total_size: number;
+}
+
+interface LogEntry {
+  time: string;
+  level: string;
+  msg: string;
+  attrs?: Record<string, any>;
+}
+
+export default function AdminPage() {
+  const [cacheStatus, setCacheStatus] = useState<CacheStatus | null>(null)
+  const [logs, setLogs] = useState<LogEntry[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isClearingCache, setIsClearingCache] = useState(false)
+  const [status, setStatus] = useState<{
+    type: "success" | "error" | "info" | null
+    message: string
+  }>({ type: null, message: "" })
+
+  const fetchCacheStatus = async () => {
+    try {
+      const response = await fetch(`${getApiBaseUrl()}/d/cache/status`)
+      if (response.ok) {
+        const data = await response.json()
+        setCacheStatus(data)
+      } else {
+        toast.error("Failed to fetch cache status")
+      }
+    } catch (error) {
+      toast.error("Network error while fetching cache status")
+    }
+  }
+
+  const fetchLogs = async () => {
+    try {
+      const response = await fetch(`${getApiBaseUrl()}/d/logs`)
+      if (response.ok) {
+        const data = await response.json()
+        setLogs(data.logs || [])
+      } else {
+        toast.error("Failed to fetch logs")
+      }
+    } catch (error) {
+      toast.error("Network error while fetching logs")
+    }
+  }
+
+  const refreshData = async () => {
+    setIsLoading(true)
+
+    try {
+      await Promise.all([fetchCacheStatus(), fetchLogs()])
+      toast.success("Data refreshed successfully")
+    } catch (error) {
+      toast.error("Failed to refresh data")
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const clearCache = async () => {
+    setIsClearingCache(true)
+    toast.loading("Clearing cache...")
+
+    try {
+      const response = await fetch(`${getApiBaseUrl()}/d/cache/delete`, { method: "DELETE" })
+      if (response.ok) {
+        toast.success("Cache cleared successfully")
+        await fetchCacheStatus()
+      } else {
+        const errorData = await response.json()
+        toast.error(errorData.error || "Failed to clear cache")
+      }
+    } catch (error) {
+      toast.error("Network error while clearing cache")
+    } finally {
+      setIsClearingCache(false)
+    }
+  }
+
+  const formatFileSize = (bytes: number) => {
+    if (!bytes) return "0 Bytes"
+    const k = 1024
+    const sizes = ["Bytes", "KB", "MB", "GB"]
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+  }
+
+  const getLogLevelColor = (level: string) => {
+    switch (level.toLowerCase()) {
+      case "error":
+        return "bg-red-100/80 text-red-800 border-red-200/60"
+      case "warn":
+        return "bg-amber-100/80 text-amber-800 border-amber-200/60"
+      case "info":
+        return "bg-blue-100/80 text-blue-800 border-blue-200/60"
+      default:
+        return "bg-slate-100/80 text-slate-800 border-slate-200/60"
+    }
+  }
+
+  useEffect(() => {
+    refreshData()
+  }, [])
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
+      <div className="max-w-7xl mx-auto px-4 py-8 md:py-8">
+        {/* Header */}
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-6 md:mb-10 gap-4 md:gap-0">
+          <div>
+            <div className="flex items-center space-x-4 mb-2">
+              <div className="inline-flex items-center justify-center w-12 h-12 bg-white rounded-xl shadow-lg shadow-slate-200/50 border border-slate-200/60">
+                <Server className="h-6 w-6 text-slate-700" />
+              </div>
+              <h1 className="text-2xl sm:text-3xl font-semibold text-slate-900 tracking-tight">Admin Dashboard</h1>
+            </div>
+            <p className="text-slate-600 font-medium ml-0 md:ml-16 text-sm sm:text-base">Manage cache and monitor system logs</p>
+          </div>
+          <Button
+            onClick={refreshData}
+            disabled={isLoading}
+            className="bg-white hover:bg-slate-50 text-slate-700 border border-slate-200/60 shadow-lg shadow-slate-200/50 rounded-xl font-medium transition-all duration-200 hover:shadow-xl w-full md:w-auto h-12"
+          >
+            {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <RefreshCw className="mr-2 h-4 w-4" />}
+            Refresh
+          </Button>
+        </div>
+
+        {/* Status Message */}
+        {status.type && (
+          <div
+            className={`p-4 rounded-xl border mb-8 ${
+              status.type === "success"
+                ? "bg-emerald-50/80 border-emerald-200/60 text-emerald-800"
+                : status.type === "error"
+                  ? "bg-red-50/80 border-red-200/60 text-red-800"
+                  : "bg-blue-50/80 border-blue-200/60 text-blue-800"
+            } backdrop-blur-sm`}
+          >
+            <div className="flex items-center">
+              {status.type === "success" && <CheckCircle className="h-4 w-4 mr-2 text-emerald-600" />}
+              {status.type === "error" && <XCircle className="h-4 w-4 mr-2 text-red-600" />}
+              {status.type === "info" && <Loader2 className="h-4 w-4 mr-2 text-blue-600 animate-spin" />}
+              <span className="text-sm font-medium">{status.message}</span>
+            </div>
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
+          {/* Cache Status */}
+          <Card className="bg-white/70 backdrop-blur-xl border-0 shadow-xl shadow-slate-200/20 rounded-2xl overflow-hidden mb-4 md:mb-0">
+            <CardHeader className="pb-4">
+              <CardTitle className="flex items-center space-x-3 text-slate-900">
+                <div className="p-2 bg-slate-100/80 rounded-lg">
+                  <Database className="h-5 w-5 text-slate-700" />
+                </div>
+                <div>
+                  <div className="font-semibold text-base sm:text-lg">Cache Status</div>
+                  <div className="text-xs sm:text-sm text-slate-600 font-normal">Current cache information and management</div>
+                </div>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              {cacheStatus ? (
+                <div className="space-y-6">
+                  <div className="grid grid-cols-2 gap-2 sm:gap-4">
+                    <div className="bg-slate-50/80 rounded-xl p-4 border border-slate-200/60">
+                      <div className="text-2xl font-semibold text-slate-900 mb-1">
+                        {formatFileSize(cacheStatus.total_size)}
+                      </div>
+                      <div className="text-sm text-slate-600 font-medium">Cache Size</div>
+                    </div>
+                    <div className="bg-slate-50/80 rounded-xl p-4 border border-slate-200/60">
+                      <div className="text-2xl font-semibold text-slate-900 mb-1">{cacheStatus.files}</div>
+                      <div className="text-sm text-slate-600 font-medium">Files</div>
+                    </div>
+                  </div>
+                  <div className="space-y-4">
+                    <div className="flex justify-between items-center">
+                      <span className="text-sm font-medium text-slate-700">Status</span>
+                      <Badge className={`${cacheStatus.status === "enabled" ? "bg-emerald-100/80 text-emerald-800 border-emerald-200/60" : "bg-red-100/80 text-red-800 border-red-200/60"} font-medium`}>
+                        {cacheStatus.status}
+                      </Badge>
+                    </div>
+                  </div>
+                  <Button
+                    onClick={clearCache}
+                    disabled={isClearingCache}
+                    className="w-full h-11 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-xl shadow-lg shadow-red-600/25 transition-all duration-200 hover:shadow-xl hover:shadow-red-600/30 text-sm sm:text-base"
+                  >
+                    {isClearingCache ? (
+                      <>
+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                        Clearing...
+                      </>
+                    ) : (
+                      <>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Clear Cache
+                      </>
+                    )}
+                  </Button>
+                </div>
+              ) : (
+                <div className="text-slate-500 text-sm">No cache data available.</div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Logs */}
+          <Card className="bg-white/70 backdrop-blur-xl border-0 shadow-xl shadow-slate-200/20 rounded-2xl overflow-hidden">
+            <CardHeader className="pb-4">
+              <CardTitle className="flex items-center space-x-3 text-slate-900">
+                <div className="p-2 bg-slate-100/80 rounded-lg">
+                  <FileText className="h-5 w-5 text-slate-700" />
+                </div>
+                <div className="font-semibold text-base sm:text-lg">Logs</div>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="pt-0">
+              <ScrollArea className="h-64 sm:h-80 md:h-96">
+                {logs.length > 0 ? (
+                  <ul className="space-y-2">
+                    {logs.map((log, idx) => (
+                      <li key={idx} className={`p-3 rounded-lg border ${getLogLevelColor(log.level)}`}> 
+                        <div className="flex items-center space-x-2">
+                          <span className="font-mono text-xs text-slate-500">{new Date(log.time).toLocaleString()}</span>
+                          <span className="font-semibold text-xs uppercase">{log.level}</span>
+                        </div>
+                        <div className="mt-1 text-sm text-slate-800 break-words whitespace-pre-line">{log.msg}</div>
+                        {log.attrs && (
+                          <pre className="mt-1 text-xs text-slate-600 bg-slate-100 rounded p-2 overflow-x-auto max-w-full break-words whitespace-pre-wrap">{JSON.stringify(log.attrs, null, 2)}</pre>
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <div className="text-slate-500 text-sm">No logs available.</div>
+                )}
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </div>
+        <Toaster richColors position="top-center" closeButton duration={7000} />
+      </div>
+    </div>
+    )
+  }

frontend-v2/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend-v2/app/layout.tsx

@@ -0,0 +1,67 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "DownLink",
+  description: "Download videos from YouTube and Instagram with ease.",
+  keywords: [
+    "DownLink",
+    "video downloader",
+    "YouTube downloader",
+    "Instagram downloader"
+  ],
+  authors: [{ name: "DownLink" }],
+  openGraph: {
+    title: "DownLink",
+    description: "Download videos from YouTube and Instagram with ease.",
+    url: "https://downlink.webark.in",
+    siteName: "DownLink",
+    images: [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+        alt: "DownLink Open Graph Image"
+      }
+    ],
+    type: "website"
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "DownLink",
+    description: "Download videos from YouTube and Instagram with ease.",
+    images: ["/twitter-card.png"]
+  },
+  icons: {
+    icon: "/favicon.ico",
+    apple: "/logo192.png"
+  },
+  manifest: "/manifest.json"
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

frontend-v2/app/page.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Download,
+  Link,
+  Loader2,
+  CheckCircle,
+  XCircle,
+  Activity,
+  SlidersHorizontal,
+} from "lucide-react";
+import { getApiBaseUrl } from "../lib/utils";
+import { Toaster, toast } from "sonner";
+
+export default function HomePage() {
+  const [videoUrl, setVideoUrl] = useState("");
+  const [quality, setQuality] = useState("");
+  const [isDownloading, setIsDownloading] = useState(false);
+  const [status, setStatus] = useState<{
+    type: "success" | "error" | "info" | null;
+    message: string;
+  }>({ type: null, message: "" });
+
+  const handleDownload = async () => {
+    if (!videoUrl.trim()) {
+      toast.error("Please enter a video URL");
+      return;
+    }
+
+    if (!quality) {
+      toast.error("Please select a quality");
+      return;
+    }
+
+    setIsDownloading(true);
+    
+    try {
+      const response = await fetch(`${getApiBaseUrl()}/d/download`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          url: videoUrl,
+          quality: quality,
+        }),
+      });
+
+      if (response.ok) {
+        const contentType = response.headers.get("content-type");
+        if (contentType && (contentType.includes("application/octet-stream") || contentType.includes("video/mp4"))) {
+          const blob = await response.blob();
+          const url = window.URL.createObjectURL(blob);
+          // Try to get filename from Content-Disposition header
+          const contentDisposition = response.headers.get("content-disposition");
+          let filename = `video_${quality}.mp4`;
+          if (contentDisposition) {
+            const match = contentDisposition.match(/filename="?([^";]+)"?/);
+            if (match && match[1]) {
+              filename = match[1];
+            }
+          }
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = filename;
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+          document.body.removeChild(a);
+          toast.success("Download completed successfully!");
+        } else {
+          const data = await response.json();
+          toast.success(data.message || "Download initiated successfully!");
+        }
+      } else {
+        const errorData = await response.json();
+        toast.error(errorData.error || "Download failed");
+      }
+    } catch (error) {
+      toast.error("Network error. Please try again.");
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  const checkHealth = async () => {
+    try {
+      const response = await fetch(`${getApiBaseUrl()}/d/`);
+      if (response.ok) {
+        toast.success("Service is healthy and running!");
+      } else {
+        toast.error("Service health check failed");
+      }
+    } catch (error) {
+      toast.error("Unable to connect to service");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 flex items-center justify-center p-6">
+      <Toaster richColors position="top-center" closeButton duration={7000} />
+      <div className="w-full max-w-lg">
+        {/* Header */}
+        <div className="text-center mb-12">
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-white rounded-2xl shadow-lg shadow-slate-200/50 mb-6 border border-slate-200/60">
+            <Download className="h-7 w-7 text-slate-700" />
+          </div>
+          <h1 className="text-4xl font-semibold text-slate-900 mb-3 tracking-tight">
+            DownLink
+          </h1>
+          <p className="text-slate-600 text-lg font-medium">
+            Download Your Links With Ease
+          </p>
+        </div>
+
+        {/* Main Card */}
+        <Card className="bg-white/70 backdrop-blur-xl border-0 shadow-xl shadow-slate-200/20 rounded-3xl overflow-hidden">
+          <CardContent className="p-8">
+            <div className="space-y-6">
+              {/* URL Input */}
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2 mb-2">
+                  <Link className="h-4 w-4 text-slate-600" />
+                  <label className="text-sm font-semibold text-slate-700">
+                    Video URL
+                  </label>
+                </div>
+                <Input
+                  type="url"
+                  placeholder="https://example.com/video"
+                  value={videoUrl}
+                  onChange={(e) => setVideoUrl(e.target.value)}
+                  className="h-12 bg-slate-50/80 border-slate-200/60 rounded-xl text-slate-900 placeholder:text-slate-500 focus:bg-white focus:border-slate-300 transition-all duration-200"
+                />
+              </div>
+
+              {/* Quality Selector */}
+              <div className="space-y-3">
+                <div className="flex items-center space-x-2 mb-2">
+                  <SlidersHorizontal className="h-4 w-4 text-slate-600" />
+                  <label className="text-sm font-semibold text-slate-700">
+                    Quality
+                  </label>
+                </div>
+                <Select value={quality} onValueChange={setQuality}>
+                  <SelectTrigger className="h-12 bg-slate-50/80 border-slate-200/60 rounded-xl text-slate-900 focus:bg-white focus:border-slate-300 transition-all duration-200">
+                    <SelectValue placeholder="Select quality" />
+                  </SelectTrigger>
+                  <SelectContent className="bg-white/95 backdrop-blur-xl border-slate-200/60 rounded-xl shadow-xl">
+                    <SelectItem value="144p" className="rounded-lg">
+                      144p
+                    </SelectItem>
+                    <SelectItem value="240p" className="rounded-lg">
+                      240p
+                    </SelectItem>
+                    <SelectItem value="360p" className="rounded-lg">
+                      360p
+                    </SelectItem>
+                    <SelectItem value="480p" className="rounded-lg">
+                      480p
+                    </SelectItem>
+                    <SelectItem value="720p" className="rounded-lg">
+                      720p (HD)
+                    </SelectItem>
+                    <SelectItem value="1080p" className="rounded-lg">
+                      1080p (Full HD)
+                    </SelectItem>
+                    <SelectItem value="1440p" className="rounded-lg">
+                      1440p (2K)
+                    </SelectItem>
+                    <SelectItem value="2160p" className="rounded-lg">
+                      2160p (4K)
+                    </SelectItem>
+                    <SelectItem value="best" className="rounded-lg">
+                      Best Available
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              {/* Download Button */}
+              <Button
+                onClick={handleDownload}
+                disabled={isDownloading}
+                className="w-full h-12 bg-slate-900 hover:bg-slate-800 text-white font-semibold rounded-xl shadow-lg shadow-slate-900/25 transition-all duration-200 hover:shadow-xl hover:shadow-slate-900/30 disabled:opacity-60 disabled:cursor-not-allowed"
+              >
+                {isDownloading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Downloading...
+                  </>
+                ) : (
+                  <>
+                    <Download className="mr-2 h-4 w-4" />
+                    Start Download
+                  </>
+                )}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Health Check */}
+        <div className="text-center mt-8">
+          <Button
+            variant="ghost"
+            onClick={checkHealth}
+            className="text-slate-600 hover:text-slate-900 hover:bg-white/60 rounded-xl font-medium transition-all duration-200"
+          >
+            <Activity className="mr-2 h-4 w-4" />
+            Check Service Status
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}