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 { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { players, products } from "@/features/_mock/data";
import { formatGEL } from "@/lib/currency";
import { ShoppingBag, DollarSign, Undo2, RefreshCw } from "lucide-react";
import { toast } from "sonner";

export const Route = createFileRoute("/admin/orders")({
  head: () => ({ meta: [{ title: "Orders — Admin" }, { name: "description", content: "All platform orders and their fulfillment state." }] }),
  component: AdminOrdersPage,
});

type Order = { id: string; user: string; product: string; qty: number; total: number; status: "paid" | "refunded" | "pending" | "failed"; method: string; date: string };
const rows: Order[] = Array.from({ length: 40 }, (_, i) => ({
  id: `PZ-${99000 + i}`,
  user: players[i % players.length].name,
  product: products[i % products.length].name,
  qty: 1 + (i % 3),
  total: products[i % products.length].price * (1 + (i % 3)),
  status: (["paid", "paid", "paid", "paid", "pending", "refunded", "failed"] as const)[i % 7],
  method: (["Card", "Balance", "Crypto", "PayPal"])[i % 4],
  date: `2026-07-${(24 - (i % 24)).toString().padStart(2, "0")}`,
}));

const STATUS: Record<Order["status"], string> = { paid: "border-success/40 text-success", refunded: "border-muted-foreground/40 text-muted-foreground", pending: "border-warning/40 text-warning", failed: "border-destructive/40 text-destructive" };

function AdminOrdersPage() {
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("all");
  const filtered = useMemo(() => rows.filter((r) => (status === "all" || r.status === status) && (q === "" || r.id.includes(q) || r.user.toLowerCase().includes(q.toLowerCase()) || r.product.toLowerCase().includes(q.toLowerCase()))), [q, status]);

  const cols: Column<Order>[] = [
    { key: "id", header: "Order", cell: (r) => <span className="font-mono text-xs">{r.id}</span> },
    { key: "u", header: "User", cell: (r) => r.user },
    { key: "p", header: "Product", cell: (r) => <div><div className="font-medium">{r.product}</div><div className="text-xs text-muted-foreground">Qty {r.qty}</div></div> },
    { key: "t", header: "Total", cell: (r) => <span className="font-mono">{formatGEL(r.total)}</span> },
    { key: "m", header: "Method", cell: (r) => r.method },
    { key: "s", header: "Status", cell: (r) => <Badge variant="outline" className={`capitalize ${STATUS[r.status]}`}>{r.status}</Badge> },
    { key: "d", header: "Date", cell: (r) => <span className="text-muted-foreground">{r.date}</span> },
  ];

  const total = rows.filter((r) => r.status === "paid").reduce((a, b) => a + b.total, 0);
  return (
    <div>
      <PageHeader title="Orders" description="All platform orders." actions={<Button variant="outline"><RefreshCw className="mr-1 h-4 w-4" /> Refresh</Button>} />
      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="Orders (mo)" value={rows.length} icon={<ShoppingBag className="h-4 w-4" />} />
        <StatCard label="Revenue (mo)" value={formatGEL(total)} tone="success" icon={<DollarSign className="h-4 w-4" />} />
        <StatCard label="Refunded" value={rows.filter((r) => r.status === "refunded").length} tone="warning" icon={<Undo2 className="h-4 w-4" />} />
        <StatCard label="Failed" value={rows.filter((r) => r.status === "failed").length} tone="destructive" />
      </div>
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={status} onValueChange={setStatus}>
            <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
            <SelectContent><SelectItem value="all">All statuses</SelectItem><SelectItem value="paid">Paid</SelectItem><SelectItem value="pending">Pending</SelectItem><SelectItem value="refunded">Refunded</SelectItem><SelectItem value="failed">Failed</SelectItem></SelectContent>
          </Select>
        }
        rowActions={(r) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline">Details</Button>
            <Button size="sm" variant="ghost" onClick={() => toast.success(`Refunded ${r.id}`)}>Refund</Button>
          </div>
        )}
      />
    </div>
  );
}