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

export const Route = createFileRoute("/_public/account/orders")({
  head: () => ({ meta: [
    { title: "Orders — Purple Zone Account" },
    { name: "description", content: "Your purchase history and invoices." },
  ]}),
  component: OrdersPage,
});

type Order = { id: string; date: string; product: string; qty: number; total: number; status: "paid" | "refunded" | "pending" | "failed"; method: string };

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

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 OrdersPage() {
  const [q, setQ] = useState("");
  const [status, setStatus] = useState("all");
  const filtered = useMemo(
    () => rows.filter((r) => (status === "all" || r.status === status) && (q === "" || r.id.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: "date", header: "Date", cell: (r) => <span className="text-muted-foreground">{r.date}</span> },
    { key: "prod", 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: "total", header: "Total", cell: (r) => <span className="font-mono">{formatGEL(r.total)}</span> },
    { key: "m", header: "Method", cell: (r) => r.method },
    { key: "st", header: "Status", cell: (r) => <Badge variant="outline" className={`capitalize ${STATUS[r.status]}`}>{r.status}</Badge> },
  ];

  return (
    <div>
      <PageHeader title="Orders" description="Your purchase history across Purple Zone." />
      <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="refunded">Refunded</SelectItem>
              <SelectItem value="pending">Pending</SelectItem>
              <SelectItem value="failed">Failed</SelectItem>
            </SelectContent>
          </Select>
        }
        rowActions={(r) => (
          <div className="flex justify-end gap-1">
            <Button size="sm" variant="outline"><Download className="mr-1 h-3.5 w-3.5" /> Invoice</Button>
            <Button size="sm" variant="ghost">Details</Button>
          </div>
        )}
      />
    </div>
  );
}