import { createFileRoute } from "@tanstack/react-router";
import { useMemo, useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { AdminDataTable, type Column } from "@/components/common/AdminDataTable";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Download } from "lucide-react";

export const Route = createFileRoute("/admin/audit-logs")({
  head: () => ({ meta: [{ title: "Audit logs — Admin" }, { name: "description", content: "Every action performed by staff, chronologically." }] }),
  component: AdminAuditLogsPage,
});

type Log = { id: string; when: string; actor: string; action: string; target: string; ip: string; result: "success" | "denied" | "error" };
const rows: Log[] = Array.from({ length: 40 }, (_, i) => ({
  id: `log-${20000 + i}`,
  when: `2026-07-${(24 - (i % 24)).toString().padStart(2, "0")} ${(9 + (i % 12)).toString().padStart(2, "0")}:${((i * 13) % 60).toString().padStart(2, "0")}`,
  actor: (["PurpleAdmin", "Nyxa", "s1lentwolf", "K1NG_Ash"])[i % 4],
  action: (["punishment.create", "punishment.remove", "user.ban", "user.unban", "promo.create", "server.restart", "settings.update", "content.publish", "role.change", "session.signin"])[i % 10],
  target: (["p-3", "srv-2", "pc1", "u-42", "TOS", "moderator", "-"])[i % 7],
  ip: `185.204.${20 + (i % 20)}.${100 + i}`,
  result: (["success", "success", "success", "denied", "error"] as const)[i % 5],
}));

const RES: Record<Log["result"], string> = { success: "border-success/40 text-success", denied: "border-warning/40 text-warning", error: "border-destructive/40 text-destructive" };

function AdminAuditLogsPage() {
  const [q, setQ] = useState("");
  const [actor, setActor] = useState("all");
  const [result, setResult] = useState("all");
  const filtered = useMemo(() => rows.filter((r) => (actor === "all" || r.actor === actor) && (result === "all" || r.result === result) && (q === "" || r.action.includes(q.toLowerCase()) || r.target.includes(q) || r.id.includes(q))), [q, actor, result]);
  const actors = [...new Set(rows.map((r) => r.actor))];

  const cols: Column<Log>[] = [
    { key: "w", header: "When", cell: (r) => <span className="font-mono text-xs text-muted-foreground">{r.when}</span> },
    { key: "a", header: "Actor", cell: (r) => <span className="font-medium">{r.actor}</span> },
    { key: "ac", header: "Action", cell: (r) => <span className="font-mono text-xs">{r.action}</span> },
    { key: "t", header: "Target", cell: (r) => <span className="font-mono text-xs">{r.target}</span> },
    { key: "ip", header: "IP", cell: (r) => <span className="font-mono text-xs text-muted-foreground">{r.ip}</span> },
    { key: "res", header: "Result", cell: (r) => <Badge variant="outline" className={`capitalize ${RES[r.result]}`}>{r.result}</Badge> },
  ];

  return (
    <div>
      <PageHeader title="Audit logs" description="Every staff action, chronologically." actions={<Button variant="outline"><Download className="mr-1 h-4 w-4" /> Export</Button>} />
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ} pageSize={15}
        filters={
          <>
            <Select value={actor} onValueChange={setActor}><SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
              <SelectContent><SelectItem value="all">All actors</SelectItem>{actors.map((a) => <SelectItem key={a} value={a}>{a}</SelectItem>)}</SelectContent>
            </Select>
            <Select value={result} onValueChange={setResult}><SelectTrigger className="w-[140px]"><SelectValue /></SelectTrigger>
              <SelectContent><SelectItem value="all">All results</SelectItem><SelectItem value="success">Success</SelectItem><SelectItem value="denied">Denied</SelectItem><SelectItem value="error">Error</SelectItem></SelectContent>
            </Select>
          </>
        }
      />
    </div>
  );
}