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 { Switch } from "@/components/ui/switch";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Palette, Plus, Star, Users } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/skins")({
  head: () => ({ meta: [{ title: "Skins — Admin" }, { name: "description", content: "Skin catalog available in the online loadout editor." }] }),
  component: AdminSkinsPage,
});

type Skin = { id: string; name: string; weapon: string; rarity: "consumer" | "industrial" | "milspec" | "restricted" | "classified" | "covert" | "knife"; enabled: boolean; usage: number; featured: boolean };
const RARITY: Record<Skin["rarity"], string> = {
  consumer: "border-muted-foreground/40 text-muted-foreground",
  industrial: "border-info/40 text-info",
  milspec: "border-primary/40 text-primary",
  restricted: "border-secondary/40 text-secondary",
  classified: "border-warning/40 text-warning",
  covert: "border-destructive/40 text-destructive",
  knife: "border-warning/40 text-warning",
};

const seed: Skin[] = [
  { id: "sk1", name: "Fire Serpent", weapon: "AK-47", rarity: "covert", enabled: true, usage: 3812, featured: true },
  { id: "sk2", name: "Hyper Beast", weapon: "M4A1-S", rarity: "covert", enabled: true, usage: 2914, featured: true },
  { id: "sk3", name: "Dragon Lore", weapon: "AWP", rarity: "covert", enabled: true, usage: 4210, featured: true },
  { id: "sk4", name: "Kill Confirmed", weapon: "USP-S", rarity: "classified", enabled: true, usage: 1820, featured: false },
  { id: "sk5", name: "Fade", weapon: "Glock-18", rarity: "restricted", enabled: true, usage: 1440, featured: false },
  { id: "sk6", name: "Blaze", weapon: "Desert Eagle", rarity: "restricted", enabled: true, usage: 1102, featured: false },
  { id: "sk7", name: "★ Karambit | Fade", weapon: "Knife", rarity: "knife", enabled: true, usage: 940, featured: true },
  { id: "sk8", name: "Asiimov", weapon: "AWP", rarity: "covert", enabled: false, usage: 620, featured: false },
  { id: "sk9", name: "Neon Rider", weapon: "AK-47", rarity: "covert", enabled: true, usage: 812, featured: false },
  { id: "sk10", name: "Printstream", weapon: "USP-S", rarity: "classified", enabled: true, usage: 704, featured: false },
];

function AdminSkinsPage() {
  const [items, setItems] = useState<Skin[]>(seed);
  const [q, setQ] = useState("");
  const [rarity, setRarity] = useState("all");
  const filtered = useMemo(() => items.filter((s) => (rarity === "all" || s.rarity === rarity) && (q === "" || s.name.toLowerCase().includes(q.toLowerCase()) || s.weapon.toLowerCase().includes(q.toLowerCase()))), [q, rarity, items]);

  const cols: Column<Skin>[] = [
    { key: "n", header: "Skin", cell: (s) => <div className="flex items-center gap-2"><div className="grid h-9 w-9 place-items-center rounded-md bg-surface-elevated text-secondary"><Palette className="h-4 w-4" /></div><div><div className="font-medium">{s.name}</div><div className="text-xs text-muted-foreground">{s.weapon}</div></div></div> },
    { key: "r", header: "Rarity", cell: (s) => <Badge variant="outline" className={`capitalize ${RARITY[s.rarity]}`}>{s.rarity}</Badge> },
    { key: "u", header: "In use", cell: (s) => <span className="inline-flex items-center gap-1 font-mono"><Users className="h-3 w-3" /> {s.usage.toLocaleString()}</span> },
    { key: "f", header: "Featured", cell: (s) => s.featured ? <Badge variant="outline" className="border-warning/40 text-warning"><Star className="mr-1 h-3 w-3" /> Featured</Badge> : "—" },
    { key: "on", header: "Enabled", cell: (s) => <Switch checked={s.enabled} onCheckedChange={(v) => setItems((xs) => xs.map((x) => x.id === s.id ? { ...x, enabled: v } : x))} /> },
  ];

  return (
    <div>
      <PageHeader title="Skins" description="Skin catalog available in the loadout editor." actions={<Button className="gradient-primary text-primary-foreground"><Plus className="mr-1 h-4 w-4" /> Add skin</Button>} />
      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="Total skins" value={items.length} />
        <StatCard label="Enabled" value={items.filter((s) => s.enabled).length} tone="success" />
        <StatCard label="Featured" value={items.filter((s) => s.featured).length} tone="warning" />
        <StatCard label="Total in use" value={items.reduce((a, b) => a + b.usage, 0).toLocaleString()} tone="primary" />
      </div>
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={rarity} onValueChange={setRarity}>
            <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
            <SelectContent><SelectItem value="all">All rarities</SelectItem>{Object.keys(RARITY).map((r) => <SelectItem key={r} value={r} className="capitalize">{r}</SelectItem>)}</SelectContent>
          </Select>
        }
        rowActions={(s) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => setItems((xs) => xs.map((x) => x.id === s.id ? { ...x, featured: !x.featured } : x))}>{s.featured ? "Unfeature" : "Feature"}</Button>
            <Button size="sm" variant="ghost" className="text-destructive" onClick={() => { setItems((xs) => xs.filter((x) => x.id !== s.id)); toast.success("Removed"); }}>Delete</Button>
          </div>
        )}
      />
    </div>
  );
}