import { createFileRoute, Link } from "@tanstack/react-router";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { useState, useMemo } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { punishments } from "@/features/_mock/data";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { usePagination, Pager } from "@/components/common/DataPager";

export const Route = createFileRoute("/_public/punishments/")({
  head: () => ({ meta: [{ title: "Punishments — Purple Zone" }, { name: "description", content: "Public log of bans, mutes and warnings across servers." }] }),
  component: PunishmentsPage,
});

const TYPES = ["all", "ban", "mute", "gag", "silence", "warning"] as const;

function PunishmentsPage() {
  const [type, setType] = useState<typeof TYPES[number]>("all");
  const [q, setQ] = useState("");
  const filtered = useMemo(
    () =>
      punishments.filter((p) => {
        if (type !== "all" && p.type !== type) return false;
        if (q && !`${p.playerName} ${p.reason} ${p.admin}`.toLowerCase().includes(q.toLowerCase())) return false;
        return true;
      }),
    [type, q],
  );
  const { paged, page, setPage, totalPages, total } = usePagination(filtered, 15);
  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <PageHeader
        title="Punishment logs"
        description="Transparent moderation across the network."
      />
      <div className="mb-3 flex flex-wrap items-center gap-2">
        <Tabs value={type} onValueChange={(v) => { setType(v as typeof TYPES[number]); setPage(1); }}>
          <TabsList>{TYPES.map((t) => <TabsTrigger key={t} value={t} className="capitalize">{t}</TabsTrigger>)}</TabsList>
        </Tabs>
        <div className="relative ml-auto w-full max-w-xs">
          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input placeholder="Search player, reason, admin…" value={q} onChange={(e) => { setQ(e.target.value); setPage(1); }} className="pl-9" />
        </div>
      </div>
      <div className="overflow-hidden rounded-xl border border-border bg-card">
            <table className="w-full text-sm">
              <thead className="bg-surface text-left text-xs uppercase text-muted-foreground">
                <tr><th className="px-3 py-2.5">ID</th><th className="px-3 py-2.5">Player</th><th className="px-3 py-2.5">Type</th><th className="px-3 py-2.5">Reason</th><th className="px-3 py-2.5">Admin</th><th className="px-3 py-2.5">Server</th><th className="px-3 py-2.5">Duration</th><th className="px-3 py-2.5">Status</th><th className="px-3 py-2.5" /></tr>
              </thead>
              <tbody className="divide-y divide-border/40">
                {paged.map((p) => (
                  <tr key={p.id} className="hover:bg-accent/40">
                    <td className="px-3 py-2.5 font-mono text-xs text-muted-foreground">{p.id}</td>
                    <td className="px-3 py-2.5 font-medium">{p.playerName}</td>
                    <td className="px-3 py-2.5"><Badge variant="outline" className={`capitalize ${p.type === "ban" ? "border-destructive/40 text-destructive" : p.type === "mute" ? "border-warning/40 text-warning" : "border-border text-muted-foreground"}`}>{p.type}</Badge></td>
                    <td className="px-3 py-2.5 text-muted-foreground">{p.reason}</td>
                    <td className="px-3 py-2.5">{p.admin}</td>
                    <td className="px-3 py-2.5 text-muted-foreground">{p.server}</td>
                    <td className="px-3 py-2.5 font-mono">{p.duration}</td>
                    <td className="px-3 py-2.5"><Badge variant="outline" className="capitalize">{p.status}</Badge></td>
                    <td className="px-3 py-2.5"><Button size="sm" variant="ghost" asChild><Link to="/punishments/$id" params={{ id: p.id }}>View</Link></Button></td>
                  </tr>
                ))}
                {paged.length === 0 && (
                  <tr><td colSpan={9} className="px-3 py-10 text-center text-muted-foreground">No punishments match your filters.</td></tr>
                )}
              </tbody>
            </table>
      </div>
      <Pager page={page} totalPages={totalPages} onChange={setPage} total={total} />
    </div>
  );
}