"use client";
import { useQuery } from "@tanstack/react-query";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useCallback, useMemo, useState } from "react";
import { CandleChart, Sparkline } from "@/components/charts";
import { useSystemStatus } from "@/components/shell";
import { Badge, Card, Empty, ErrorBox, Input, PageHeader, Select, Spinner, Table, Td, Th, cx } from "@/components/ui";
import { api, qs } from "@/lib/api";
import { fmtAge, fmtBps, fmtDate, fmtNum, fmtPct, fmtPrice, fmtTs } from "@/lib/format";
import { useMarketStream } from "@/lib/sse";
import type { Book, Candle, Gap, Pair, Quality, Trade } from "@/lib/types";

const INTERVALS = [{ v: 1, l: "1 min" }, { v: 5, l: "5 min" }, { v: 60, l: "1 hour" }, { v: 1440, l: "1 day" }];

function MarketExplorer() {
  const params = useSearchParams();
  const sys = useSystemStatus();
  const universe = useMemo(() => sys.data?.universe ?? [], [sys.data]);
  const symbol = params.get("symbol") ?? universe[0] ?? "BTC/USD";
  const interval = Number(params.get("interval") ?? 60);
  if (!sys.data) return <Spinner />;
  return <MarketView key={`${symbol}|${interval}`} symbol={symbol} interval={interval} universe={universe} intervals={sys.data.intervals} />;
}

function MarketView({ symbol, interval, universe, intervals }: { symbol: string; interval: number; universe: string[]; intervals: number[] }) {
  const params = useSearchParams();
  const router = useRouter();
  const [search, setSearch] = useState("");
  const setParam = useCallback((k: string, v: string) => {
    const p = new URLSearchParams(params.toString());
    p.set(k, v);
    router.replace(`/market?${p.toString()}`);
  }, [params, router]);

  const pairs = useQuery({ queryKey: ["pairs", search], queryFn: () => api<{ items: Pair[] }>(`/api/pairs?${qs({ q: search || undefined, all: !!search })}`), enabled: search.length >= 2 });
  const candles = useQuery({ queryKey: ["candles", symbol, interval], queryFn: () => api<{ items: Candle[] }>(`/api/market/candles?${qs({ symbol, interval, limit: 1500 })}`), refetchInterval: interval * 60_000 });
  const bookQ = useQuery({ queryKey: ["book", symbol], queryFn: () => api<Book>(`/api/market/book?symbol=${encodeURIComponent(symbol)}`), retry: false });
  const tradesQ = useQuery({ queryKey: ["trades", symbol], queryFn: () => api<{ items: Trade[] }>(`/api/market/trades?${qs({ symbol, limit: 60 })}`) });
  const micro = useQuery({ queryKey: ["micro", symbol], queryFn: () => api<{ items: { ts: number; spread_bps: number | null; imbalance: number | null; best_bid: number | null; best_ask: number | null }[] }>(`/api/market/microstructure?${qs({ symbol, seconds: 3600 })}`), refetchInterval: 30_000 });
  const quality = useQuery({ queryKey: ["quality"], queryFn: () => api<{ items: Quality[]; gaps: Gap[] }>("/api/market/quality"), refetchInterval: 60_000 });
  const pairMeta = useQuery({ queryKey: ["pair-meta", symbol], queryFn: async () => (await api<{ items: Pair[] }>(`/api/pairs?${qs({ q: symbol.split("/")[0], all: true })}`)).items.find((p) => p.wsname === symbol) ?? null });

  const [ticker, setTicker] = useState<Record<string, unknown> | null>(null);
  const [liveBook, setBook] = useState<Book | null>(null);
  const [liveTape, setTape] = useState<Trade[]>([]);
  const [liveBar, setLiveBar] = useState<Candle | null>(null);
  // live stream state overrides the REST snapshot once it arrives (component is keyed by symbol+interval, so it resets)
  const book = liveBook ?? bookQ.data ?? null;
  const tape = liveTape.length ? liveTape : tradesQ.data?.items ?? [];

  const streamOk = useMarketStream([symbol], ["ticker", "book", "trade", "ohlc"], {
    ticker: (ev) => { const d = ev.data[0]; if (d) setTicker(d); },
    book: (ev) => { const d = ev.data[0] as unknown as Book | undefined; if (d) setBook(d); },
    trade: (ev) => {
      const rows = ev.data.map((d) => ({ trade_id: Number(d.trade_id), ts: Date.parse(String(d.timestamp)) / 1000, price: Number(d.price), volume: Number(d.qty), side: d.side as "buy" | "sell", order_type: String(d.ord_type ?? "") }));
      setTape((prev) => [...rows.reverse(), ...prev].slice(0, 80));
    },
    ohlc: (ev) => {
      const d = ev.data[0];
      if (!d) return;
      const ts = Math.floor(Date.parse(String(d.interval_begin)) / 1000);
      const bar: Candle = { ts, open: Number(d.open), high: Number(d.high), low: Number(d.low), close: Number(d.close), vwap: Number(d.vwap), volume: Number(d.volume), count: Number(d.trades), closed: false };
      if (interval === 1) setLiveBar(bar);
      else {
        const step = interval * 60;
        const bucket = Math.floor(ts / step) * step;
        setLiveBar((prev) => {
          const base = candles.data?.items.find((c) => c.ts === bucket);
          const cur = prev && prev.ts === bucket ? prev : base ?? { ts: bucket, open: bar.open, high: bar.high, low: bar.low, close: bar.close, vwap: bar.vwap, volume: 0, count: 0, closed: false };
          return { ...cur, high: Math.max(cur.high, bar.high), low: Math.min(cur.low, bar.low), close: bar.close, closed: false };
        });
      }
    },
  });

  const q = quality.data?.items.find((x) => x.symbol === symbol && x.interval_min === interval);
  const gaps = quality.data?.gaps.filter((g) => g.symbol === symbol && g.interval_min === interval) ?? [];
  const bestBid = book?.best_bid, bestAsk = book?.best_ask;
  const maxDepth = book ? Math.max(...book.bids.slice(0, 15).map((b) => b[1]), ...book.asks.slice(0, 15).map((a) => a[1]), 1e-9) : 1;

  return (
    <>
      <PageHeader title="Market Explorer" subtitle="Candles accumulated from Kraken REST OHLC (≤720 bars per poll), live updates from WebSocket v2." actions={<Badge tone={streamOk ? "up" : "warn"}>{streamOk ? "stream connected" : "stream reconnecting"}</Badge>} />
      <div className="mb-3 flex flex-wrap items-end gap-3">
        <div className="relative w-64">
          <label className="mb-1 block text-xs font-medium text-fg-muted" htmlFor="sym">Symbol</label>
          <Input id="sym" placeholder="Search pairs (e.g. DOGE)…" value={search} onChange={(e) => setSearch(e.target.value)} aria-autocomplete="list" aria-controls="sym-list" />
          {search.length >= 2 && (
            <ul id="sym-list" role="listbox" className="absolute z-20 mt-1 max-h-64 w-full overflow-auto rounded-md border border-line-strong bg-bg-elev shadow-xl scroll-thin">
              {pairs.data?.items.length ? pairs.data.items.map((p) => (
                <li key={p.pair_id} role="option" aria-selected={p.wsname === symbol}>
                  <button className="flex w-full items-center justify-between px-3 py-1.5 text-left text-xs hover:bg-bg-sub" onClick={() => { setParam("symbol", p.wsname); setSearch(""); }}>
                    <span className="font-medium">{p.wsname}</span><span className="text-fg-dim">{p.status}{p.in_universe ? " · universe" : " · not streamed"}</span>
                  </button>
                </li>
              )) : <li className="px-3 py-2 text-xs text-fg-dim">{pairs.isLoading ? "Searching…" : "No match"}</li>}
            </ul>
          )}
        </div>
        <div className="flex gap-1" role="group" aria-label="Universe">
          {universe.map((s) => <button key={s} onClick={() => setParam("symbol", s)} className={cx("rounded-md border px-2.5 py-1.5 text-xs", s === symbol ? "border-accent bg-accent-soft text-fg" : "border-line-strong text-fg-muted hover:text-fg")}>{s}</button>)}
        </div>
        <label className="text-xs font-medium text-fg-muted">Interval
          <Select className="mt-1 w-28" value={interval} onChange={(e) => setParam("interval", e.target.value)}>{INTERVALS.filter((i) => intervals.includes(i.v) || i.v === interval).map((i) => <option key={i.v} value={i.v}>{i.l}</option>)}</Select>
        </label>
        <div className="ml-auto flex items-center gap-2 text-xs">
          {q ? <Badge tone={q.stale ? "warn" : "up"}>{q.bars} bars · {q.coverage_days}d · {q.gaps} gaps{q.lag_bars > 0 ? ` · lag ${q.lag_bars}` : ""}</Badge> : <Badge tone="muted">no stored bars for {symbol} @ {interval}m</Badge>}
        </div>
      </div>

      <div className="grid gap-4 xl:grid-cols-[1fr_320px]">
        <div className="flex flex-col gap-4">
          <Card title={<span className="flex items-center gap-3">{symbol} <span className="num text-base">{ticker ? fmtPrice(ticker.last) : fmtPrice(candles.data?.items.at(-1)?.close)}</span>{ticker && <span className={cx("num text-xs", Number(ticker.change_pct) >= 0 ? "text-up" : "text-down")}>{fmtPct(ticker.change_pct, 2, true)} 24h</span>}</span>} subtitle={ticker ? `bid ${fmtPrice(ticker.bid)} · ask ${fmtPrice(ticker.ask)} · 24h vol ${fmtNum(ticker.volume, 0)} · vwap ${fmtPrice(ticker.vwap)}` : "waiting for ticker…"}>
            {candles.isLoading && <Spinner />}
            {candles.error && <ErrorBox error={candles.error} />}
            {candles.data && (candles.data.items.length ? <CandleChart candles={candles.data.items} live={liveBar} /> : <Empty title="No candles stored yet">This symbol is not in the ingestion universe, or the worker has not polled this interval yet.</Empty>)}
          </Card>
          <div className="grid gap-4 md:grid-cols-2">
            <Card title="Microstructure (last hour)" subtitle="1-second samples of the checksum-verified local book.">
              {micro.data?.items.length ? (
                <div className="grid grid-cols-2 gap-3 text-xs">
                  <div><div className="text-fg-dim">Spread (bps)</div><Sparkline values={micro.data.items.map((i) => i.spread_bps)} color="#f59e0b" /><div className="num">{fmtBps(micro.data.items.at(-1)?.spread_bps, 2)} now</div></div>
                  <div><div className="text-fg-dim">Imbalance (bid−ask)/(bid+ask)</div><Sparkline values={micro.data.items.map((i) => i.imbalance)} color="#4f8cff" /><div className="num">{fmtNum(micro.data.items.at(-1)?.imbalance, 3)} now</div></div>
                </div>
              ) : <Empty title="No samples yet">Samples are written by the ingestion worker while the book stream is live.</Empty>}
            </Card>
            <Card title="Data quality" subtitle="Coverage grows from first deployment; Kraken REST only serves the last 720 bars.">
              {q ? (
                <dl className="grid grid-cols-2 gap-y-1 text-xs">
                  <dt className="text-fg-dim">First bar</dt><dd className="num">{fmtDate(q.first_ts)}</dd>
                  <dt className="text-fg-dim">Last closed bar</dt><dd className="num">{fmtTs(q.last_ts)}</dd>
                  <dt className="text-fg-dim">Closed bars</dt><dd className="num">{q.bars}</dd>
                  <dt className="text-fg-dim">Missing bars</dt><dd className="num">{q.missing_bars} in {q.gaps} gaps</dd>
                  <dt className="text-fg-dim">Lag</dt><dd className="num">{q.lag_bars} bars {q.stale && <Badge tone="warn">stale</Badge>}</dd>
                </dl>
              ) : <Empty title="No quality record" />}
              {gaps.length > 0 && <ul className="mt-2 max-h-24 overflow-auto text-[11px] text-fg-dim scroll-thin">{gaps.slice(0, 10).map((g) => <li key={g.gap_start}>{fmtTs(g.gap_start)} → {fmtTs(g.gap_end)} ({g.missing_bars} bars)</li>)}</ul>}
            </Card>
          </div>
        </div>
        <div className="flex flex-col gap-4">
          <Card title="Order book" subtitle={book ? <span>spread {fmtBps(book.spread_bps, 2)} · imbalance <span className="num">{fmtNum(book.imbalance, 3)}</span> · {book.valid ? <Badge tone="up">checksum ok</Badge> : <Badge tone="down">checksum mismatch</Badge>}{book.age_s != null && ` · ${fmtAge(book.age_s)}`}</span> : "waiting for book…"}>
            {book ? (
              <div className="grid grid-cols-2 gap-2 text-[11px]">
                <div>
                  <div className="mb-1 flex justify-between text-fg-dim"><span>Bid</span><span>Qty</span></div>
                  {book.bids.slice(0, 15).map(([p, qty]) => (
                    <div key={p} className="relative flex justify-between py-px num"><span className="absolute inset-y-0 right-0 bg-up/15" style={{ width: `${(qty / maxDepth) * 100}%` }} /><span className="relative text-up">{fmtPrice(p)}</span><span className="relative">{fmtNum(qty, 4)}</span></div>
                  ))}
                </div>
                <div>
                  <div className="mb-1 flex justify-between text-fg-dim"><span>Ask</span><span>Qty</span></div>
                  {book.asks.slice(0, 15).map(([p, qty]) => (
                    <div key={p} className="relative flex justify-between py-px num"><span className="absolute inset-y-0 left-0 bg-down/15" style={{ width: `${(qty / maxDepth) * 100}%` }} /><span className="relative text-down">{fmtPrice(p)}</span><span className="relative">{fmtNum(qty, 4)}</span></div>
                  ))}
                </div>
                <div className="col-span-2 mt-1 border-t border-line pt-1 text-fg-dim">mid <span className="num text-fg">{bestBid && bestAsk ? fmtPrice((bestBid + bestAsk) / 2) : "—"}</span>{pairMeta.data && <> · tick {pairMeta.data.tick_size} · min {pairMeta.data.ordermin} {pairMeta.data.base} / {pairMeta.data.costmin} {pairMeta.data.quote}</>}</div>
              </div>
            ) : bookQ.isLoading ? <Spinner /> : <Empty title="No book">Only universe symbols are streamed.</Empty>}
          </Card>
          <Card title="Trades" subtitle="Taker side; live via WebSocket.">
            {tape.length ? (
              <Table className="max-h-80 overflow-y-auto">
                <thead><tr><Th>Time</Th><Th align="right">Price</Th><Th align="right">Qty</Th><Th>Side</Th></tr></thead>
                <tbody>{tape.map((t) => <tr key={`${t.trade_id}-${t.ts}`}><Td num>{new Date(t.ts * 1000).toISOString().slice(11, 19)}</Td><Td align="right" num className={t.side === "buy" ? "text-up" : "text-down"}>{fmtPrice(t.price)}</Td><Td align="right" num>{fmtNum(t.volume, 4)}</Td><Td>{t.side}</Td></tr>)}</tbody>
              </Table>
            ) : <Empty title="No trades yet" />}
          </Card>
        </div>
      </div>
    </>
  );
}

export default function MarketPage() {
  return <Suspense fallback={<Spinner />}><MarketExplorer /></Suspense>;
}