import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { UploadCloud, Copy, Check, ChevronDown, Lock, Clock, Hash } from "lucide-react";
import { PublicHeader, Footer } from "@/components/layout/PublicHeader";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "warpbox.dev — Self-hosted file transfer" },
      { name: "description", content: "Drop a file, share a link. Anonymous, encrypted, self-hosted." },
    ],
  }),
  component: Index,
});

const sampleUploads = [
  { name: "design-spec-v4.pdf", size: "2.1 MB", url: "https://warpbox.dev/d/a1b2c3" },
  { name: "team-photo.jpg", size: "5.8 MB", url: "https://warpbox.dev/d/d4e5f6" },
];

function Index() {
  const [copied, setCopied] = useState<string | null>(null);

  const copy = (url: string) => {
    navigator.clipboard?.writeText(url);
    setCopied(url);
    setTimeout(() => setCopied(null), 1500);
  };

  return (
    <div className="flex min-h-screen flex-col bg-background">
      <PublicHeader />
      <main className="mx-auto flex w-full max-w-3xl flex-1 flex-col items-center justify-center px-4 py-10">
        <div className="mb-8 text-center">
          <h1 className="text-3xl font-semibold tracking-tight">Send a file. Get a link.</h1>
          <p className="mt-2 text-sm text-muted-foreground">
            Anonymous, encrypted, self-hosted. No account required.
          </p>
        </div>

        <Card className="w-full">
          <CardContent className="p-6">
            <div className="flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-border bg-muted/40 p-12 text-center transition-colors hover:border-primary hover:bg-muted/60">
              <UploadCloud className="mb-3 h-10 w-10 text-muted-foreground" />
              <p className="text-base font-medium">Drop files to upload</p>
              <p className="mt-1 text-sm text-muted-foreground">or click to browse</p>
              <div className="mt-4 flex gap-4 text-xs text-muted-foreground">
                <span>Max file size: 5 GB</span>
                <span>·</span>
                <span>Link expires in 7 days</span>
              </div>
            </div>

            <Collapsible className="mt-4">
              <CollapsibleTrigger asChild>
                <Button variant="ghost" size="sm" className="gap-1">
                  <ChevronDown className="h-4 w-4" />
                  Advanced options
                </Button>
              </CollapsibleTrigger>
              <CollapsibleContent className="mt-3 grid gap-4 rounded-md border bg-muted/30 p-4 md:grid-cols-3">
                <div className="space-y-2">
                  <Label className="flex items-center gap-1.5 text-xs"><Clock className="h-3.5 w-3.5" /> Expires in</Label>
                  <Select defaultValue="7">
                    <SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent>
                      <SelectItem value="1">1 day</SelectItem>
                      <SelectItem value="7">7 days</SelectItem>
                      <SelectItem value="30">30 days</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
                <div className="space-y-2">
                  <Label className="flex items-center gap-1.5 text-xs"><Hash className="h-3.5 w-3.5" /> Max downloads</Label>
                  <Input type="number" placeholder="Unlimited" />
                </div>
                <div className="space-y-2">
                  <Label className="flex items-center gap-1.5 text-xs"><Lock className="h-3.5 w-3.5" /> Password</Label>
                  <Input type="password" placeholder="Optional" />
                </div>
              </CollapsibleContent>
            </Collapsible>
          </CardContent>
        </Card>

        {/* Post-upload summary mock */}
        <Card className="mt-6 w-full border-primary/30 bg-primary/5">
          <CardContent className="p-5">
            <div className="mb-3 flex items-center justify-between">
              <div>
                <div className="flex items-center gap-2">
                  <Check className="h-4 w-4 text-primary" />
                  <span className="font-medium">Upload complete</span>
                </div>
                <p className="mt-0.5 text-xs text-muted-foreground">
                  2 files · expires in 7 days · 10 downloads max
                </p>
              </div>
              <div className="flex gap-2">
                <Button variant="outline" size="sm">Copy all</Button>
                <Button size="sm">Upload more</Button>
              </div>
            </div>
            <div className="space-y-2">
              {sampleUploads.map((f) => (
                <div key={f.name} className="flex items-center gap-3 rounded-md border bg-background p-3">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <span className="truncate text-sm font-medium">{f.name}</span>
                      <Badge variant="secondary" className="text-xs">{f.size}</Badge>
                    </div>
                    <code className="mt-1 block truncate font-mono text-xs text-muted-foreground">{f.url}</code>
                  </div>
                  <Button variant="outline" size="sm" onClick={() => copy(f.url)} className="gap-1.5">
                    {copied === f.url ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
                    {copied === f.url ? "Copied" : "Copy"}
                  </Button>
                </div>
              ))}
              <div className="flex items-center gap-3 rounded-md border bg-background p-3">
                <div className="flex-1">
                  <div className="flex items-center justify-between">
                    <span className="text-sm font-medium">backup-2026-05.tar.gz</span>
                    <span className="text-xs text-muted-foreground">62%</span>
                  </div>
                  <Progress value={62} className="mt-2 h-1.5" />
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </main>
      <Footer />
    </div>
  );
}
