import { createFileRoute } from "@tanstack/react-router";
import { useEffect, useMemo, useState } from "react";
import { PageHeader } from "@/components/common/PageHeader";
import { AdminDataTable, type Column } from "@/components/common/AdminDataTable";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { reportsService } from "@/services/api/reports";
import type { PlayerReport, ReportStatus } from "@/types";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/reports")({
  head: () => ({ meta: [{ title: "Reports — Admin" }] }),
  component: AdminReportsPage,
});

const STATUSES: ReportStatus[] = ["submitted", "pending_review", "investigating", "more_info", "resolved", "rejected"];

function AdminReportsPage() {
  const [rows, setRows] = useState<PlayerReport[]>([]);
  const [q, setQ] = useState("");
  const [status, setStatus] = useState<string>("all");
  useEffect(() => { reportsService.list().then(setRows); }, []);

  const filtered = useMemo(() => rows.filter((r) =>
    (status === "all" || r.status === status) &&
    (q === "" || r.reportedPlayerName.toLowerCase().includes(q.toLowerCase()) || r.id.includes(q))
  ), [rows, q, status]);

  async function setSt(id: string, s: ReportStatus) {
    const next = await reportsService.setStatus(id, s);
    setRows((rs) => rs.map((r) => r.id === next.id ? next : r));
    toast.success(`Marked ${s.replace("_", " ")}`);
  }

  const cols: Column<PlayerReport>[] = [
    { key: "id", header: "ID", cell: (r) => <span className="font-mono text-xs">{r.id}</span> },
    { key: "player", header: "Reported", cell: (r) => r.reportedPlayerName },
    { key: "cat", header: "Category", cell: (r) => <span className="capitalize">{r.category.replace("_", " ")}</span> },
    { key: "pri", header: "Priority", cell: (r) => <Badge variant="outline" className="capitalize">{r.priority}</Badge> },
    { key: "status", header: "Status", cell: (r) => <Badge variant="outline" className="capitalize">{r.status.replace("_", " ")}</Badge> },
    { key: "when", header: "Submitted", cell: (r) => <span className="text-muted-foreground">{r.createdAt}</span> },
  ];

  return (
    <div>
      <PageHeader title="Player reports" description="Investigate and resolve reports submitted by players." />
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={status} onValueChange={setStatus}>
            <SelectTrigger className="w-[180px]"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All statuses</SelectItem>
              {STATUSES.map((s) => <SelectItem key={s} value={s} className="capitalize">{s.replace("_", " ")}</SelectItem>)}
            </SelectContent>
          </Select>
        }
        rowActions={(r) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => setSt(r.id, "investigating")}>Investigate</Button>
            <Button size="sm" variant="outline" onClick={() => setSt(r.id, "resolved")}>Resolve</Button>
            <Button size="sm" variant="ghost" onClick={() => setSt(r.id, "rejected")}>Reject</Button>
          </div>
        )}
      />
    </div>
  );
}