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 { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { mockFiles } from "@/lib/mock-data";

export const Route = createFileRoute("/admin/files")({
  head: () => ({ meta: [{ title: "Admin · Files — warpbox.dev" }] }),
  component: AdminFiles,
});

function AdminFiles() {
  return (
    <AppShell variant="admin" title="Admin · Files">
      <div className="space-y-4">
        <Card>
          <CardContent className="grid gap-3 p-4 sm:grid-cols-2 lg:grid-cols-5">
            <div className="space-y-1"><Label className="text-xs">Search</Label><Input placeholder="Name or ID" /></div>
            <div className="space-y-1">
              <Label className="text-xs">Status</Label>
              <Select defaultValue="all"><SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All</SelectItem>
                  <SelectItem value="active">Active</SelectItem>
                  <SelectItem value="expired">Expired</SelectItem>
                  <SelectItem value="flagged">Flagged</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1">
              <Label className="text-xs">Owner</Label>
              <Select defaultValue="any"><SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="any">Any</SelectItem>
                  <SelectItem value="anon">Anonymous</SelectItem>
                  <SelectItem value="auth">Authenticated</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-1"><Label className="text-xs">From</Label><Input type="date" /></div>
            <div className="space-y-1"><Label className="text-xs">To</Label><Input type="date" /></div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-0">
            <div className="flex items-center justify-between border-b p-4">
              <h2 className="text-sm font-medium">{mockFiles.length} files</h2>
              <div className="flex gap-2">
                <Button size="sm" variant="outline">Export CSV</Button>
                <Button size="sm" variant="destructive">Bulk delete</Button>
              </div>
            </div>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>ID</TableHead>
                  <TableHead>Name</TableHead>
                  <TableHead>Owner</TableHead>
                  <TableHead>Size</TableHead>
                  <TableHead>Downloads</TableHead>
                  <TableHead>Status</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mockFiles.map((f) => (
                  <TableRow key={f.id}>
                    <TableCell><code className="font-mono text-xs">{f.id}</code></TableCell>
                    <TableCell className="font-medium">{f.name}</TableCell>
                    <TableCell className="text-muted-foreground">{f.owner}</TableCell>
                    <TableCell>{f.size}</TableCell>
                    <TableCell>{f.downloads}</TableCell>
                    <TableCell><Badge variant={f.status === "Flagged" ? "destructive" : f.status === "Expired" ? "outline" : "secondary"}>{f.status}</Badge></TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      </div>
    </AppShell>
  );
}