import { createFileRoute } from "@tanstack/react-router";
import { AppShell } from "@/components/layout/AppShell";
import { Card, CardContent } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Upload, HardDrive, FileText, Download } from "lucide-react";
import { mockFiles } from "@/lib/mock-data";

export const Route = createFileRoute("/app/dashboard")({
  head: () => ({ meta: [{ title: "Dashboard — warpbox.dev" }] }),
  component: Dashboard,
});

const metrics = [
  { label: "Storage used", value: "4.2 GB", sub: "of 50 GB", icon: HardDrive },
  { label: "Total files", value: "184", sub: "+12 this week", icon: FileText },
  { label: "Downloads (7d)", value: "1,238", sub: "+18%", icon: Download },
  { label: "Active links", value: "27", sub: "3 expire soon", icon: Upload },
];

function Dashboard() {
  return (
    <AppShell variant="user" title="Dashboard">
      <div className="space-y-6">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {metrics.map((m) => (
            <Card key={m.label}>
              <CardContent className="p-5">
                <div className="flex items-center justify-between text-muted-foreground">
                  <span className="text-xs uppercase tracking-wide">{m.label}</span>
                  <m.icon className="h-4 w-4" />
                </div>
                <div className="mt-2 text-2xl font-semibold">{m.value}</div>
                <div className="text-xs text-muted-foreground">{m.sub}</div>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card>
          <CardContent className="p-0">
            <div className="flex items-center justify-between border-b p-4">
              <h2 className="text-sm font-medium">Recent uploads</h2>
              <Button size="sm" className="gap-1.5"><Upload className="h-3.5 w-3.5" /> Upload</Button>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Name</TableHead>
                  <TableHead>Size</TableHead>
                  <TableHead>Uploaded</TableHead>
                  <TableHead>Expires</TableHead>
                  <TableHead>Downloads</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mockFiles.slice(0, 5).map((f) => (
                  <TableRow key={f.id}>
                    <TableCell className="font-medium">{f.name}</TableCell>
                    <TableCell>{f.size}</TableCell>
                    <TableCell className="text-muted-foreground">{f.uploaded}</TableCell>
                    <TableCell className="text-muted-foreground">{f.expires}</TableCell>
                    <TableCell>{f.downloads}</TableCell>
                    <TableCell>
                      <Badge variant={f.status === "Active" ? "secondary" : f.status === "Expired" ? "outline" : "destructive"}>
                        {f.status}
                      </Badge>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </AppShell>
  );
}