import { createFileRoute, Link } from "@tanstack/react-router";
import { Download, FileText, Lock, Clock, Box } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { MockupNav } from "@/components/layout/MockupNav";

export const Route = createFileRoute("/d/$id")({
  head: () => ({ meta: [{ title: "Download — warpbox.dev" }] }),
  component: DownloadPage,
});

function DownloadPage() {
  const { id } = Route.useParams();
  return (
    <div className="flex min-h-screen flex-col bg-muted/30">
      <header className="flex h-14 items-center border-b bg-background px-4">
        <Link to="/" className="flex items-center gap-2 font-semibold">
          <Box className="h-5 w-5 text-primary" /> warpbox.dev
        </Link>
        <div className="ml-auto"><MockupNav /></div>
      </header>
      <main className="mx-auto flex w-full max-w-xl flex-1 items-center justify-center px-4 py-10">
        <div className="w-full space-y-4">
          <Card>
            <CardContent className="p-6 text-center">
              <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-lg bg-muted">
                <FileText className="h-7 w-7 text-muted-foreground" />
              </div>
              <h1 className="text-lg font-semibold">design-spec-v4.pdf</h1>
              <p className="mt-1 text-sm text-muted-foreground">2.1 MB · PDF document</p>
              <div className="mt-4 flex items-center justify-center gap-2">
                <Badge variant="secondary" className="gap-1"><Clock className="h-3 w-3" /> Expires in 6d</Badge>
                <Badge variant="secondary">12 / 50 downloads</Badge>
              </div>
              <Button size="lg" className="mt-6 w-full gap-2">
                <Download className="h-4 w-4" /> Download file
              </Button>
              <p className="mt-2 text-xs text-muted-foreground">Bucket id: {id}</p>
            </CardContent>
          </Card>

          <Card className="border-dashed">
            <CardContent className="p-5">
              <div className="mb-3 flex items-center gap-2 text-sm font-medium">
                <Lock className="h-4 w-4" /> Password protected (variant)
              </div>
              <div className="space-y-3">
                <div className="space-y-1.5">
                  <Label htmlFor="pw">Enter download password</Label>
                  <Input id="pw" type="password" />
                </div>
                <Button className="w-full">Unlock</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>
    </div>
  );
}