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 { StatCard } from "@/components/common/StatCard";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { LifeBuoy, Clock, CheckCircle2 } from "lucide-react";
import { players } from "@/features/_mock/data";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/support")({
  head: () => ({ meta: [{ title: "Support — Admin" }, { name: "description", content: "Player support tickets and assignments." }] }),
  component: AdminSupportPage,
});

type Ticket = { id: string; subject: string; user: string; category: string; status: "open" | "waiting" | "resolved" | "closed"; priority: "low" | "normal" | "high" | "urgent"; assigned?: string; updated: string };
const rows: Ticket[] = Array.from({ length: 22 }, (_, i) => ({
  id: `TK-${3200 + i}`,
  subject: ["Purchase not credited", "Skin sync broken", "Ban appeal", "Refund request", "Cannot connect", "Password reset", "Missing WGC"][i % 7],
  user: players[i % players.length].name,
  category: (["Billing", "Technical", "Punishments", "Account"])[i % 4],
  status: (["open", "waiting", "open", "resolved", "closed"] as const)[i % 5],
  priority: (["low", "normal", "high", "urgent"] as const)[i % 4],
  assigned: i % 3 === 0 ? "PurpleAdmin" : i % 3 === 1 ? "Nyxa" : undefined,
  updated: `${(i % 24) + 1}h ago`,
}));

const STATUS: Record<Ticket["status"], string> = { open: "border-primary/40 text-primary", waiting: "border-warning/40 text-warning", resolved: "border-success/40 text-success", closed: "border-muted-foreground/40 text-muted-foreground" };
const PRI: Record<Ticket["priority"], string> = { low: "", normal: "", high: "border-warning/40 text-warning", urgent: "border-destructive/40 text-destructive" };

function AdminSupportPage() {
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("all");
  const filtered = useMemo(() => rows.filter((r) => (status === "all" || r.status === status) && (q === "" || r.subject.toLowerCase().includes(q.toLowerCase()) || r.user.toLowerCase().includes(q.toLowerCase()) || r.id.includes(q))), [q, status]);

  const cols: Column<Ticket>[] = [
    { key: "id", header: "Ticket", cell: (r) => <span className="font-mono text-xs">{r.id}</span> },
    { key: "s", header: "Subject", cell: (r) => <div><div className="font-medium">{r.subject}</div><div className="text-xs text-muted-foreground">{r.category}</div></div> },
    { key: "u", header: "User", cell: (r) => r.user },
    { key: "p", header: "Priority", cell: (r) => <Badge variant="outline" className={`capitalize ${PRI[r.priority]}`}>{r.priority}</Badge> },
    { key: "a", header: "Assigned", cell: (r) => r.assigned ?? <span className="text-muted-foreground">—</span> },
    { key: "st", header: "Status", cell: (r) => <Badge variant="outline" className={`capitalize ${STATUS[r.status]}`}>{r.status}</Badge> },
    { key: "up", header: "Updated", cell: (r) => <span className="text-muted-foreground">{r.updated}</span> },
  ];

  return (
    <div>
      <PageHeader title="Support" description="Player support queue and assignments." />
      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="Open" value={rows.filter((r) => r.status === "open").length} tone="primary" icon={<LifeBuoy className="h-4 w-4" />} />
        <StatCard label="Waiting" value={rows.filter((r) => r.status === "waiting").length} tone="warning" icon={<Clock className="h-4 w-4" />} />
        <StatCard label="Resolved (24h)" value={4} tone="success" icon={<CheckCircle2 className="h-4 w-4" />} />
        <StatCard label="Unassigned" value={rows.filter((r) => !r.assigned).length} />
      </div>
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={status} onValueChange={setStatus}>
            <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
            <SelectContent><SelectItem value="all">All statuses</SelectItem><SelectItem value="open">Open</SelectItem><SelectItem value="waiting">Waiting</SelectItem><SelectItem value="resolved">Resolved</SelectItem><SelectItem value="closed">Closed</SelectItem></SelectContent>
          </Select>
        }
        rowActions={(r) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => toast.success(`Assigned to you: ${r.id}`)}>Assign me</Button>
            <Button size="sm" variant="ghost" onClick={() => toast.success(`Resolved ${r.id}`)}>Resolve</Button>
          </div>
        )}
      />
    </div>
  );
}