import { createFileRoute } from "@tanstack/react-router";
import { useEffect, 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 { Switch } from "@/components/ui/switch";
import { promoService } from "@/services/api/promo";
import type { PromoCode } from "@/types";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/promo-codes")({
  head: () => ({ meta: [{ title: "Promo codes — Admin" }] }),
  component: AdminPromoPage,
});

function AdminPromoPage() {
  const [rows, setRows] = useState<PromoCode[]>([]);
  const [q, setQ] = useState("");
  useEffect(() => { promoService.listAdmin().then(setRows); }, []);

  const filtered = useMemo(() => rows.filter((c) =>
    q === "" || c.code.toLowerCase().includes(q.toLowerCase()) || (c.description ?? "").toLowerCase().includes(q.toLowerCase())
  ), [rows, q]);

  async function toggle(c: PromoCode) {
    const next = await promoService.update(c.id, { enabled: !c.enabled });
    setRows((rs) => rs.map((r) => r.id === next.id ? next : r));
  }
  async function duplicate(id: string) {
    const copy = await promoService.duplicate(id);
    if (copy) { setRows((rs) => [...rs, copy]); toast.success(`Duplicated as ${copy.code}`); }
  }
  async function remove(id: string) {
    await promoService.remove(id);
    setRows((rs) => rs.filter((r) => r.id !== id));
    toast.success("Deleted");
  }

  const cols: Column<PromoCode>[] = [
    { key: "code", header: "Code", cell: (c) => <span className="font-mono text-xs">{c.code}</span> },
    { key: "desc", header: "Description", cell: (c) => c.description ?? "—" },
    { key: "disc", header: "Discount", cell: (c) => c.discountType === "percentage" ? `${c.discountValue}%` : c.discountType === "fixed" ? `$${c.discountValue}` : "Free item" },
    { key: "scope", header: "Scope", cell: (c) => <Badge variant="outline" className="capitalize">{c.scope.replace("_", " ")}{c.scopeValue ? `: ${c.scopeValue}` : ""}</Badge> },
    { key: "use", header: "Uses", cell: (c) => `${c.usedCount}${c.usageLimit ? ` / ${c.usageLimit}` : ""}` },
    { key: "rev", header: "Revenue", cell: (c) => <span className="font-mono">${c.revenue.toFixed(2)}</span> },
    { key: "on", header: "Enabled", cell: (c) => <Switch checked={c.enabled} onCheckedChange={() => toggle(c)} /> },
  ];

  return (
    <div>
      <PageHeader title="Promo codes" description="Manage discount codes used at checkout." actions={<Button className="gradient-primary text-primary-foreground">New code</Button>} />
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        rowActions={(c) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline" onClick={() => duplicate(c.id)}>Duplicate</Button>
            <Button size="sm" variant="ghost" onClick={() => remove(c.id)}>Delete</Button>
          </div>
        )}
      />
    </div>
  );
}