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 { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { punishments } from "@/features/_mock/data";
import type { Punishment } from "@/types";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/punishments")({
  head: () => ({ meta: [{ title: "Punishments — Admin" }, { name: "description", content: "Review and manage bans, mutes and warnings." }] }),
  component: AdminPunishmentsPage,
});

const TYPE: Record<Punishment["type"], string> = { ban: "border-destructive/40 text-destructive", mute: "border-warning/40 text-warning", gag: "border-warning/40 text-warning", silence: "border-warning/40 text-warning", warning: "border-muted-foreground/40 text-muted-foreground" };
const STATUS: Record<Punishment["status"], string> = { active: "border-destructive/40 text-destructive", expired: "border-muted-foreground/40 text-muted-foreground", removed: "border-success/40 text-success", appealed: "border-primary/40 text-primary", review: "border-primary/40 text-primary" };

function AdminPunishmentsPage() {
  const [q, setQ] = useState("");
  const [type, setType] = useState("all");
  const [status, setStatus] = useState("all");
  const filtered = useMemo(() => punishments.filter((p) => (type === "all" || p.type === type) && (status === "all" || p.status === status) && (q === "" || p.playerName.toLowerCase().includes(q.toLowerCase()) || p.reason.toLowerCase().includes(q.toLowerCase()) || p.id.includes(q))), [q, type, status]);

  const cols: Column<Punishment>[] = [
    { key: "id", header: "ID", cell: (p) => <span className="font-mono text-xs">{p.id}</span> },
    { key: "u", header: "Player", cell: (p) => <div><div className="font-medium">{p.playerName}</div><div className="text-xs text-muted-foreground">{p.steamId}</div></div> },
    { key: "t", header: "Type", cell: (p) => <Badge variant="outline" className={`capitalize ${TYPE[p.type]}`}>{p.type}</Badge> },
    { key: "r", header: "Reason", cell: (p) => p.reason },
    { key: "s", header: "Server", cell: (p) => <span className="text-muted-foreground">{p.server}</span> },
    { key: "a", header: "Admin", cell: (p) => p.admin },
    { key: "d", header: "Duration", cell: (p) => p.duration },
    { key: "st", header: "Status", cell: (p) => <Badge variant="outline" className={`capitalize ${STATUS[p.status]}`}>{p.status}</Badge> },
  ];

  return (
    <div>
      <PageHeader title="Punishments" description="Manage bans, mutes and warnings across all servers." actions={<Button className="gradient-primary text-primary-foreground">Issue punishment</Button>} />
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <>
            <Select value={type} onValueChange={setType}><SelectTrigger className="w-[140px]"><SelectValue /></SelectTrigger>
              <SelectContent><SelectItem value="all">All types</SelectItem><SelectItem value="ban">Ban</SelectItem><SelectItem value="mute">Mute</SelectItem><SelectItem value="gag">Gag</SelectItem><SelectItem value="warning">Warning</SelectItem></SelectContent>
            </Select>
            <Select value={status} onValueChange={setStatus}><SelectTrigger className="w-[140px]"><SelectValue /></SelectTrigger>
              <SelectContent><SelectItem value="all">All statuses</SelectItem><SelectItem value="active">Active</SelectItem><SelectItem value="appealed">Appealed</SelectItem><SelectItem value="expired">Expired</SelectItem><SelectItem value="removed">Removed</SelectItem></SelectContent>
            </Select>
          </>
        }
        rowActions={(p) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => toast.success(`Reduced ${p.id}`)}>Reduce</Button>
            <Button size="sm" variant="ghost" onClick={() => toast.success(`Removed ${p.id}`)}>Remove</Button>
          </div>
        )}
      />
    </div>
  );
}