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 { Files, HardDrive, Upload, Download } from "lucide-react";
import { mockFiles, uploadTrend } from "@/lib/mock-data";
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { Bar, BarChart, XAxis, YAxis, CartesianGrid } from "recharts";

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

const metrics = [
  { label: "Total files", value: "12,847", icon: Files },
  { label: "Total storage", value: "412 GB", icon: HardDrive },
  { label: "Uploads today", value: "287", icon: Upload },
  { label: "Downloads today", value: "3,128", icon: Download },
];

function Overview() {
  return (
    <AppShell variant="admin" title="Admin · Overview">
      <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>
              </CardContent>
            </Card>
          ))}
        </div>

        <Card>
          <CardContent className="p-5">
            <h2 className="text-sm font-medium">Activity (last 7 days)</h2>
            <ChartContainer
              config={{
                uploads: { label: "Uploads", color: "hsl(var(--chart-1))" },
                downloads: { label: "Downloads", color: "hsl(var(--chart-2))" },
              }}
              className="mt-4 h-[240px] w-full"
            >
              <BarChart data={uploadTrend}>
                <CartesianGrid vertical={false} strokeDasharray="3 3" />
                <XAxis dataKey="day" tickLine={false} axisLine={false} />
                <YAxis tickLine={false} axisLine={false} width={32} />
                <ChartTooltip content={<ChartTooltipContent />} />
                <Bar dataKey="uploads" fill="var(--color-primary)" radius={4} />
                <Bar dataKey="downloads" fill="var(--color-muted-foreground)" radius={4} />
              </BarChart>
            </ChartContainer>
          </CardContent>
        </Card>

        <div className="grid gap-4 lg:grid-cols-2">
          <Card>
            <CardContent className="p-0">
              <div className="border-b p-4 text-sm font-medium">Recent uploads</div>
              <Table>
                <TableHeader><TableRow><TableHead>File</TableHead><TableHead>Owner</TableHead><TableHead>Size</TableHead></TableRow></TableHeader>
                <TableBody>
                  {mockFiles.slice(0, 5).map((f) => (
                    <TableRow key={f.id}>
                      <TableCell className="font-medium">{f.name}</TableCell>
                      <TableCell className="text-muted-foreground">{f.owner}</TableCell>
                      <TableCell>{f.size}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="p-0">
              <div className="border-b p-4 text-sm font-medium">Recent flags</div>
              <Table>
                <TableHeader><TableRow><TableHead>File</TableHead><TableHead>Reason</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
                <TableBody>
                  <TableRow><TableCell className="font-medium">screen-recording.mp4</TableCell><TableCell className="text-muted-foreground">TOS report</TableCell><TableCell><Badge variant="destructive">Open</Badge></TableCell></TableRow>
                  <TableRow><TableCell className="font-medium">archive-z.zip</TableCell><TableCell className="text-muted-foreground">Auto-scan</TableCell><TableCell><Badge variant="secondary">Reviewing</Badge></TableCell></TableRow>
                  <TableRow><TableCell className="font-medium">doc-final.pdf</TableCell><TableCell className="text-muted-foreground">Manual</TableCell><TableCell><Badge variant="outline">Dismissed</Badge></TableCell></TableRow>
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </div>
      </div>
    </AppShell>
  );
}