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 { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { players } from "@/features/_mock/data";
import { formatGEL } from "@/lib/currency";
import { Ban, ShieldCheck } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/users")({
  head: () => ({ meta: [{ title: "Users — Admin" }, { name: "description", content: "Manage user accounts, roles and status." }] }),
  component: AdminUsersPage,
});

type Row = { id: string; name: string; avatar: string; email: string; role: "user" | "vip" | "moderator" | "admin"; status: "active" | "banned" | "muted" | "pending"; spend: number; joined: string; last: string };
const rows: Row[] = players.map((p, i) => ({
  id: p.id, name: p.name, avatar: p.avatar,
  email: `${p.name.toLowerCase().replace(/[^a-z0-9]/g, "")}@purplezone.gg`,
  role: (["user", "vip", "moderator", "admin"] as const)[i % 4 === 3 ? 2 : i % 4],
  status: (["active", "active", "active", "muted", "banned", "pending"] as const)[i % 6],
  spend: 25 + (i * 13.37) % 400, joined: `2024-${((i % 12) + 1).toString().padStart(2, "0")}-15`, last: p.lastSeen,
}));

const ROLE: Record<Row["role"], string> = { user: "", vip: "border-secondary/40 text-secondary", moderator: "border-primary/40 text-primary", admin: "border-warning/40 text-warning" };
const STATUS: Record<Row["status"], string> = { active: "border-success/40 text-success", banned: "border-destructive/40 text-destructive", muted: "border-warning/40 text-warning", pending: "border-muted-foreground/40 text-muted-foreground" };

function AdminUsersPage() {
  const [q, setQ] = useState("");
  const [role, setRole] = useState("all");
  const [status, setStatus] = useState("all");
  const filtered = useMemo(() => rows.filter((r) => (role === "all" || r.role === role) && (status === "all" || r.status === status) && (q === "" || r.name.toLowerCase().includes(q.toLowerCase()) || r.email.toLowerCase().includes(q.toLowerCase()))), [q, role, status]);

  const cols: Column<Row>[] = [
    { key: "u", header: "User", cell: (r) => (
      <div className="flex items-center gap-2.5">
        <Avatar className="h-8 w-8"><AvatarImage src={r.avatar} /><AvatarFallback>{r.name[0]}</AvatarFallback></Avatar>
        <div><div className="font-medium">{r.name}</div><div className="text-xs text-muted-foreground">{r.email}</div></div>
      </div>
    )},
    { key: "role", header: "Role", cell: (r) => <Badge variant="outline" className={`capitalize ${ROLE[r.role]}`}>{r.role}</Badge> },
    { key: "st", header: "Status", cell: (r) => <Badge variant="outline" className={`capitalize ${STATUS[r.status]}`}>{r.status}</Badge> },
    { key: "sp", header: "Spend", cell: (r) => <span className="font-mono">{formatGEL(r.spend)}</span> },
    { key: "j", header: "Joined", cell: (r) => <span className="text-muted-foreground">{r.joined}</span> },
    { key: "l", header: "Last seen", cell: (r) => <span className="text-muted-foreground">{r.last}</span> },
  ];

  return (
    <div>
      <PageHeader title="Users" description={`${rows.length} accounts across the platform.`} actions={<Button className="gradient-primary text-primary-foreground">Export CSV</Button>} />
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <>
            <Select value={role} onValueChange={setRole}><SelectTrigger className="w-[140px]"><SelectValue /></SelectTrigger>
              <SelectContent><SelectItem value="all">All roles</SelectItem><SelectItem value="user">User</SelectItem><SelectItem value="vip">VIP</SelectItem><SelectItem value="moderator">Moderator</SelectItem><SelectItem value="admin">Admin</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="muted">Muted</SelectItem><SelectItem value="banned">Banned</SelectItem><SelectItem value="pending">Pending</SelectItem></SelectContent>
            </Select>
          </>
        }
        rowActions={(r) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => toast.success(`Verified ${r.name}`)}><ShieldCheck className="mr-1 h-3.5 w-3.5" /> Verify</Button>
            <Button size="sm" variant="ghost" className="text-destructive" onClick={() => toast.warning(`Banned ${r.name}`)}><Ban className="mr-1 h-3.5 w-3.5" /> Ban</Button>
          </div>
        )}
      />
    </div>
  );
}