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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { formatGEL, formatWGC, LariMark, WGCMark } from "@/lib/currency";
import { ArrowDownRight, ArrowUpRight, RefreshCw } from "lucide-react";

export const Route = createFileRoute("/_public/account/transactions")({
  head: () => ({ meta: [
    { title: "Transactions — Purple Zone Account" },
    { name: "description", content: "Balance and coin movements: top-ups, purchases and conversions." },
  ]}),
  component: TransactionsPage,
});

type Tx = { id: string; date: string; kind: "topup" | "purchase" | "convert" | "refund" | "reward"; currency: "GEL" | "WGC"; amount: number; note: string };
const rows: Tx[] = [
  { id: "tx-1", date: "2026-07-22 14:03", kind: "topup", currency: "GEL", amount: 25, note: "Top-up via Card" },
  { id: "tx-2", date: "2026-07-22 14:05", kind: "purchase", currency: "GEL", amount: -4.99, note: "VIP — 30 days" },
  { id: "tx-3", date: "2026-07-21 20:12", kind: "convert", currency: "WGC", amount: 500, note: "Converted 5 ₾ → 500 WGC" },
  { id: "tx-4", date: "2026-07-21 20:12", kind: "convert", currency: "GEL", amount: -5, note: "Converted 5 ₾ → 500 WGC" },
  { id: "tx-5", date: "2026-07-20 09:44", kind: "reward", currency: "WGC", amount: 120, note: "Daily reward" },
  { id: "tx-6", date: "2026-07-18 12:00", kind: "purchase", currency: "WGC", amount: -80, note: "Marketplace: AK skin" },
  { id: "tx-7", date: "2026-07-15 10:00", kind: "refund", currency: "GEL", amount: 9.99, note: "Refund: Premium — 30 days" },
];

const TONE: Record<Tx["kind"], string> = {
  topup: "border-success/40 text-success",
  purchase: "border-destructive/40 text-destructive",
  convert: "border-secondary/40 text-secondary",
  refund: "border-warning/40 text-warning",
  reward: "border-primary/40 text-primary",
};

function TransactionsPage() {
  const [q, setQ] = useState("");
  const [kind, setKind] = useState("all");
  const filtered = useMemo(() => rows.filter((r) => (kind === "all" || r.kind === kind) && (q === "" || r.note.toLowerCase().includes(q.toLowerCase()) || r.id.includes(q))), [q, kind]);

  const cols: Column<Tx>[] = [
    { key: "date", header: "When", cell: (r) => <span className="text-muted-foreground">{r.date}</span> },
    { key: "note", header: "Description", cell: (r) => <div className="font-medium">{r.note}</div> },
    { key: "kind", header: "Type", cell: (r) => <Badge variant="outline" className={`capitalize ${TONE[r.kind]}`}>{r.kind}</Badge> },
    { key: "amt", header: "Amount", className: "text-right",
      cell: (r) => (
        <div className={`flex items-center justify-end gap-1 font-mono ${r.amount < 0 ? "text-destructive" : "text-success"}`}>
          {r.amount < 0 ? <ArrowUpRight className="h-3.5 w-3.5" /> : <ArrowDownRight className="h-3.5 w-3.5" />}
          {r.currency === "GEL" ? formatGEL(Math.abs(r.amount)) : formatWGC(Math.abs(r.amount))}
        </div>
      )
    },
  ];

  return (
    <div>
      <PageHeader title="Transactions" description="All balance and coin movements on your account." />
      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-4">
        <StatCard label="Balance" value={<span className="inline-flex items-center gap-1">42.50 <LariMark /></span>} tone="primary" />
        <StatCard label="Coins" value={<span className="inline-flex items-center gap-1">1,250 <WGCMark /></span>} tone="primary" />
        <StatCard label="Spent (30d)" value="34.98 ₾" tone="destructive" />
        <StatCard label="Rewards (30d)" value="620 WGC" tone="success" />
      </div>
      <AdminDataTable
        rows={filtered} columns={cols} search={q} onSearchChange={setQ}
        filters={
          <Select value={kind} onValueChange={setKind}>
            <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All types</SelectItem>
              <SelectItem value="topup">Top-up</SelectItem>
              <SelectItem value="purchase">Purchase</SelectItem>
              <SelectItem value="convert">Convert</SelectItem>
              <SelectItem value="refund">Refund</SelectItem>
              <SelectItem value="reward">Reward</SelectItem>
            </SelectContent>
          </Select>
        }
      />
    </div>
  );
}