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 { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { players } from "@/features/_mock/data";
import { UserPlus, Shield, Crown, Wrench } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/administrators")({
  head: () => ({ meta: [{ title: "Administrators — Admin" }, { name: "description", content: "Manage staff accounts and permissions." }] }),
  component: AdminAdministratorsPage,
});

type Role = "owner" | "admin" | "moderator" | "developer" | "support";
type Row = { id: string; name: string; avatar: string; email: string; role: Role; scope: string[]; lastActive: string; twofa: boolean };

const rows: Row[] = [
  { id: "a1", name: "PurpleAdmin", avatar: players[0].avatar, email: "purple@purplezone.gg", role: "owner", scope: ["*"], lastActive: "now", twofa: true },
  { id: "a2", name: "Nyxa", avatar: players[1].avatar, email: "nyxa@purplezone.gg", role: "admin", scope: ["Users", "Punishments", "Store"], lastActive: "12m ago", twofa: true },
  { id: "a3", name: "s1lentwolf", avatar: players[2].avatar, email: "s1lent@purplezone.gg", role: "moderator", scope: ["Punishments", "Support"], lastActive: "1h ago", twofa: false },
  { id: "a4", name: "K1NG_Ash", avatar: players[4].avatar, email: "king@purplezone.gg", role: "developer", scope: ["Servers", "Content"], lastActive: "3h ago", twofa: true },
  { id: "a5", name: "ghostbyte", avatar: players[6].avatar, email: "ghost@purplezone.gg", role: "support", scope: ["Support"], lastActive: "1d ago", twofa: false },
];

const ROLE_TONE: Record<Role, string> = { owner: "border-warning/40 text-warning", admin: "border-destructive/40 text-destructive", moderator: "border-secondary/40 text-secondary", developer: "border-primary/40 text-primary", support: "" };
const ROLE_ICON: Record<Role, any> = { owner: Crown, admin: Shield, moderator: Shield, developer: Wrench, support: Shield };

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

  const cols: Column<Row>[] = [
    { key: "u", header: "Administrator", cell: (r) => {
      const Ic = ROLE_ICON[r.role];
      return (
        <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="flex items-center gap-1 font-medium"><Ic className="h-3.5 w-3.5 text-muted-foreground" /> {r.name}</div><div className="text-xs text-muted-foreground">{r.email}</div></div>
        </div>
      );
    }},
    { key: "r", header: "Role", cell: (r) => <Badge variant="outline" className={`capitalize ${ROLE_TONE[r.role]}`}>{r.role}</Badge> },
    { key: "sc", header: "Scope", cell: (r) => (
      <div className="flex flex-wrap gap-1">
        {r.scope.map((s) => <Badge key={s} variant="outline" className="text-xs">{s}</Badge>)}
      </div>
    )},
    { key: "2fa", header: "2FA", cell: (r) => r.twofa ? <Badge variant="outline" className="border-success/40 text-success">On</Badge> : <Badge variant="outline" className="border-warning/40 text-warning">Off</Badge> },
    { key: "l", header: "Last active", cell: (r) => <span className="text-muted-foreground">{r.lastActive}</span> },
  ];

  return (
    <div>
      <PageHeader
        title="Administrators"
        description="Staff accounts and their permissions."
        actions={
          <Dialog open={open} onOpenChange={setOpen}>
            <DialogTrigger asChild><Button className="gradient-primary text-primary-foreground"><UserPlus className="mr-1 h-4 w-4" /> Invite</Button></DialogTrigger>
            <DialogContent>
              <DialogHeader><DialogTitle>Invite administrator</DialogTitle></DialogHeader>
              <div className="grid gap-3">
                <div className="space-y-1.5"><Label>Email</Label><Input placeholder="name@purplezone.gg" /></div>
                <div className="space-y-1.5"><Label>Role</Label>
                  <Select defaultValue="moderator"><SelectTrigger><SelectValue /></SelectTrigger>
                    <SelectContent><SelectItem value="admin">Admin</SelectItem><SelectItem value="moderator">Moderator</SelectItem><SelectItem value="developer">Developer</SelectItem><SelectItem value="support">Support</SelectItem></SelectContent>
                  </Select>
                </div>
              </div>
              <DialogFooter>
                <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
                <Button className="gradient-primary text-primary-foreground" onClick={() => { setOpen(false); toast.success("Invite sent"); }}>Send invite</Button>
              </DialogFooter>
            </DialogContent>
          </Dialog>
        }
      />
      <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="owner">Owner</SelectItem><SelectItem value="admin">Admin</SelectItem><SelectItem value="moderator">Moderator</SelectItem><SelectItem value="developer">Developer</SelectItem><SelectItem value="support">Support</SelectItem></SelectContent>
          </Select>
        }
        rowActions={(r) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline">Edit</Button>
            <Button size="sm" variant="ghost" className="text-destructive">Revoke</Button>
          </div>
        )}
      />
    </div>
  );
}