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 { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { products } from "@/features/_mock/data";
import type { StoreProduct } from "@/types";
import { formatGEL } from "@/lib/currency";
import { Plus } from "lucide-react";

export const Route = createFileRoute("/admin/store")({
  head: () => ({ meta: [{ title: "Store — Admin" }, { name: "description", content: "Manage store catalog and pricing." }] }),
  component: AdminStorePage,
});

type Row = StoreProduct & { enabled: boolean; stock: number | "∞"; sold: number };
const rows: Row[] = products.map((p, i) => ({ ...p, enabled: i !== 5, stock: p.category === "Balance" ? "∞" : 500 - i * 40, sold: 120 - i * 8 }));

function AdminStorePage() {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("all");
  const [items, setItems] = useState<Row[]>(rows);
  const cats = [...new Set(rows.map((r) => r.category))];
  const filtered = useMemo(() => items.filter((r) => (cat === "all" || r.category === cat) && (q === "" || r.name.toLowerCase().includes(q.toLowerCase()))), [q, cat, items]);

  const cols: Column<Row>[] = [
    { key: "img", header: "", cell: (r) => <div className="grid h-10 w-10 place-items-center rounded-md bg-surface-elevated text-lg">{r.image}</div> },
    { key: "n", header: "Product", cell: (r) => <div><div className="font-medium">{r.name}</div><div className="text-xs text-muted-foreground line-clamp-1">{r.description}</div></div> },
    { key: "c", header: "Category", cell: (r) => <Badge variant="outline">{r.category}</Badge> },
    { key: "p", header: "Price", cell: (r) => <span className="font-mono">{formatGEL(r.price)}</span> },
    { key: "d", header: "Duration", cell: (r) => <span className="text-muted-foreground">{r.duration}</span> },
    { key: "st", header: "Stock", cell: (r) => <span className="font-mono">{r.stock}</span> },
    { key: "so", header: "Sold", cell: (r) => <span className="font-mono">{r.sold}</span> },
    { key: "on", header: "Active", cell: (r) => <Switch checked={r.enabled} onCheckedChange={(v) => setItems((xs) => xs.map((x) => x.id === r.id ? { ...x, enabled: v } : x))} /> },
  ];

  return (
    <div>
      <PageHeader title="Store" description="Manage products, categories and stock." actions={<Button className="gradient-primary text-primary-foreground"><Plus className="mr-1 h-4 w-4" /> New product</Button>} />
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={cat} onValueChange={setCat}>
            <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
            <SelectContent><SelectItem value="all">All categories</SelectItem>{cats.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}</SelectContent>
          </Select>
        }
        rowActions={(r) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline">Edit</Button>
            <Button size="sm" variant="ghost">Duplicate</Button>
          </div>
        )}
      />
    </div>
  );
}