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 { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Copy, Trash2 } from "lucide-react";
import { mockFiles } from "@/lib/mock-data";

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

function Shared() {
  return (
    <AppShell variant="user" title="Shared links">
      <Card>
        <CardContent className="p-0">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Link</TableHead>
                <TableHead>File</TableHead>
                <TableHead>Downloads</TableHead>
                <TableHead>Expires</TableHead>
                <TableHead>Protection</TableHead>
                <TableHead className="w-32"></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {mockFiles.map((f) => (
                <TableRow key={f.id}>
                  <TableCell><code className="font-mono text-xs">/d/{f.id}</code></TableCell>
                  <TableCell className="font-medium">{f.name}</TableCell>
                  <TableCell>{f.downloads}</TableCell>
                  <TableCell className="text-muted-foreground">{f.expires}</TableCell>
                  <TableCell>
                    <Badge variant="outline">{f.id.length % 2 ? "Password" : "Public"}</Badge>
                  </TableCell>
                  <TableCell>
                    <div className="flex justify-end gap-1">
                      <Button variant="ghost" size="icon" className="h-7 w-7"><Copy className="h-3.5 w-3.5" /></Button>
                      <Button variant="ghost" size="icon" className="h-7 w-7 text-destructive"><Trash2 className="h-3.5 w-3.5" /></Button>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </CardContent>
      </Card>
    </AppShell>
  );
}