"use client";

import * as React from "react";
import { CheckCircle2, XCircle } from "lucide-react";
import { TRANSACTION_TYPES } from "@spinza/shared";
import { useAdminQuery } from "@/components/admin/use-query";
import type { EconomyResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, DataTable, ErrorState, TileSkeleton, TableSkeleton, StatGrid, StatTile, SegmentedControl, Pill, type Column } from "@/components/admin/primitives";
import { Bars, ChartFrame, CHART, Histogram, type Series } from "@/components/admin/charts";
import { compact, int, isoDay, num, pct, sc, shortDate, signedSC } from "@/components/admin/format";
import { cn } from "@/lib/utils";

const DAYS = [7, 30, 90] as const;

/** 9 ledger types folded into 5 legible series (the table below keeps every type). */
const GROUPS: { key: string; label: string; color: string; types: string[] }[] = [
  { key: "bet", label: "Bets", color: CHART.grey2, types: ["BET"] },
  { key: "win", label: "Wins", color: CHART.accent, types: ["WIN"] },
  { key: "rewards", label: "Rewards", color: CHART.info, types: ["DAILY_REWARD", "ACHIEVEMENT", "MISSION", "LEVEL_UP"] },
  { key: "grants", label: "Grants", color: CHART.success, types: ["INITIAL_GRANT", "RESCUE_CREDITS"] },
  { key: "admin", label: "Admin", color: CHART.danger, types: ["ADMIN_ADJUSTMENT"] },
];
const SERIES: Series[] = GROUPS.map((g) => ({ key: g.key, label: g.label, color: g.color }));
const groupOf = (type: string) => GROUPS.find((g) => g.types.includes(type))?.key ?? "grants";

const TYPE_TONE: Record<string, "muted" | "accent" | "info" | "success" | "warn" | "neutral"> = { BET: "muted", WIN: "accent", DAILY_REWARD: "info", ACHIEVEMENT: "info", MISSION: "info", LEVEL_UP: "info", INITIAL_GRANT: "success", RESCUE_CREDITS: "success", ADMIN_ADJUSTMENT: "warn" };

interface TypeRow {
  type: string;
  n: number;
  total: number;
}

const typeCols: Column<TypeRow>[] = [
  { key: "type", header: "Type", render: (r) => <Pill tone={TYPE_TONE[r.type] ?? "neutral"}>{r.type}</Pill> },
  { key: "group", header: "Group", render: (r) => <span className="text-fg-3">{GROUPS.find((g) => g.key === groupOf(r.type))?.label}</span> },
  { key: "n", header: "Transactions", align: "right", render: (r) => int(r.n) },
  { key: "total", header: "Signed total", align: "right", render: (r) => <span className={cn("font-medium", r.total > 0 ? "text-success" : r.total < 0 ? "text-fg-2" : "text-fg-3")}>{signedSC(r.total)}</span> },
  { key: "avg", header: "Avg / txn", align: "right", render: (r) => (r.n ? signedSC(Math.round(r.total / r.n)) : "—") },
];

export default function AdminEconomyPage() {
  const [days, setDays] = React.useState<(typeof DAYS)[number]>(30);
  const q = useAdminQuery<EconomyResponse>(`/api/admin/economy?days=${days}`);
  const d = q.data;

  const byType = React.useMemo<TypeRow[]>(() => {
    const m = new Map((d?.byType ?? []).map((r) => [r.type, { type: r.type, n: num(r.n), total: num(r.total) }]));
    return TRANSACTION_TYPES.map((t) => m.get(t) ?? { type: t, n: 0, total: 0 });
  }, [d]);

  const anchor = q.updatedAt;
  const daily = React.useMemo(() => {
    const rows = new Map<string, Record<string, number | string>>();
    for (let i = days - 1; i >= 0; i--) {
      const day = new Date(anchor - i * 86400_000).toISOString().slice(0, 10);
      rows.set(day, { day, bet: 0, win: 0, rewards: 0, grants: 0, admin: 0 });
    }
    for (const r of d?.daily ?? []) {
      const day = isoDay(r.day);
      const row = rows.get(day);
      if (!row) continue;
      const k = groupOf(r.type);
      row[k] = num(row[k]) + num(r.total);
    }
    return Array.from(rows.values());
  }, [d, days, anchor]);

  const net = byType.reduce((a, r) => a + r.total, 0);
  const mismatches = d ? num(d.invariant.mismatches) : 0;

  const distribution = React.useMemo(() => {
    const m = new Map((d?.balanceDistribution ?? []).map((r) => [num(r.bucket), num(r.n)]));
    return Array.from({ length: 11 }, (_, i) => {
      const b = i + 1;
      const label = b === 11 ? "100K+" : `${(b - 1) * 10}K–${b * 10}K`;
      return { bucket: b, label, n: m.get(b) ?? 0 };
    });
  }, [d]);

  return (
    <>
      <PageHeader
        title="Economy"
        description="Supply of Spinza Credits, ledger flows by type and the wallet invariant. Every figure is fictional currency."
        actions={
          <>
            <SegmentedControl value={days} onChange={setDays} items={DAYS.map((v) => ({ value: v, label: `${v}d` }))} />
            <RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />
          </>
        }
      />

      {q.error && !d ? (
        <ErrorState error={q.error} onRetry={() => void q.refresh()} />
      ) : !d ? (
        <div className="space-y-4">
          <TileSkeleton count={5} cols={5} />
          <Panel>
            <TableSkeleton rows={9} cols={5} />
          </Panel>
        </div>
      ) : (
        <div className={cn("space-y-4", q.stale && "opacity-70")}>
          <StatGrid cols={5}>
            <StatTile label="Circulating supply" value={compact(d.supply.circulating)} sub={sc(d.supply.circulating)} tone="accent" />
            <StatTile label="Lifetime granted" value={compact(d.supply.granted)} sub={sc(d.supply.granted)} />
            <StatTile label="Lifetime wagered" value={compact(d.supply.wagered)} sub={sc(d.supply.wagered)} />
            <StatTile label="Lifetime won" value={compact(d.supply.won)} sub={`${sc(d.supply.won)} · RTP ${pct(num(d.supply.wagered) ? num(d.supply.won) / num(d.supply.wagered) : null)}`} />
            <StatTile
              label="Wallet invariant"
              value={
                <span className="inline-flex items-center gap-1.5">
                  {mismatches === 0 ? <CheckCircle2 className="h-5 w-5" /> : <XCircle className="h-5 w-5" />}
                  {mismatches === 0 ? "OK" : `${int(mismatches)} off`}
                </span>
              }
              tone={mismatches === 0 ? "success" : "danger"}
              sub={mismatches === 0 ? "Σ ledger = balance for every wallet" : "wallets whose ledger ≠ balance"}
            />
          </StatGrid>

          <div className="grid gap-4 xl:grid-cols-[1.4fr_1fr]">
            <Panel title={`Daily ledger flow · last ${days} days`} description="Signed SC per day; bets sit below the baseline">
              <ChartFrame series={SERIES} height={260}>
                <Bars data={daily} x="day" series={SERIES} stacked xFormat={(v) => shortDate(String(v))} yFormat={(v) => compact(v)} barSize={days > 30 ? 6 : 14} tooltipLabel={(l) => shortDate(String(l))} />
              </ChartFrame>
            </Panel>
            <Panel title="Balance distribution" description="Wallets per 10K SC band">
              <ChartFrame height={260}>
                <Histogram data={distribution} x="label" y="n" yFormat={(v) => int(v)} />
              </ChartFrame>
            </Panel>
          </div>

          <Panel title={`Ledger by type · last ${days} days`} description={`Net flow ${signedSC(net)} across ${int(byType.reduce((a, r) => a + r.n, 0))} transactions`} padded={false}>
            <DataTable
              columns={typeCols}
              rows={byType}
              rowKey={(r) => r.type}
              dense
              footer={
                <tr className="border-t border-line text-[13px] font-semibold">
                  <td className="px-3 py-2" colSpan={2}>
                    Net
                  </td>
                  <td className="px-3 py-2 text-right tabular">{int(byType.reduce((a, r) => a + r.n, 0))}</td>
                  <td className={cn("px-3 py-2 text-right tabular", net >= 0 ? "text-success" : "text-danger")}>{signedSC(net)}</td>
                  <td />
                </tr>
              }
            />
          </Panel>
        </div>
      )}
    </>
  );
}