"use client";

import { formatBps, formatCompact, formatDuration, formatQuoteValue } from "@/lib/format";
import { useLiveQuote } from "@/lib/stream";
import type { Instrument, Quote } from "@/lib/types";

/** Key stats grid; bid/ask/volume follow the live stream, session values from the canonical quote. */
export function InstrumentStats({ instrument: i, quote: q }: { instrument: Instrument; quote: Quote | null }) {
  const live = useLiveQuote(i.id);
  const fresh = live && q && live.received >= Date.parse(q.updated_at);
  const f = (v: number | null | undefined) => formatQuoteValue(v, i.asset_class, q?.currency);
  const bid = fresh ? live!.bid : q?.bid;
  const ask = fresh ? live!.ask : q?.ask;
  const spreadBps = bid != null && ask != null && ask > 0 ? ((ask - bid) / ((ask + bid) / 2)) * 10_000 : null;
  const items: Array<[string, string]> = [
    ["Open", f(q?.open)],
    ["High", f(q?.high)],
    ["Low", f(q?.low)],
    ["Previous close", f(q?.previous_close)],
    ["Bid", f(bid)],
    ["Ask", f(ask)],
    ["Spread", formatBps(spreadBps)],
    ["Volume", formatCompact(fresh ? live!.volume : q?.volume)],
    ["Session high", f(q?.session_high)],
    ["Session low", f(q?.session_low)],
    ["Source dispersion", formatBps(q?.dispersion_bps)],
    ["Newest observation", q?.freshness_ms == null ? "—" : `${formatDuration(q.freshness_ms)} old at compute`],
  ];
  return (
    <dl className="grid grid-cols-2 gap-x-6 rounded-md border border-rule bg-surface px-4 py-2 sm:grid-cols-3 lg:grid-cols-4">
      {items.map(([k, v]) => (
        <div key={k} className="flex items-baseline justify-between gap-3 border-b border-rule py-1.5 text-sm last:border-0 sm:[&:nth-last-child(-n+3)]:border-0 lg:[&:nth-last-child(-n+4)]:border-0">
          <dt className="text-ink-3">{k}</dt>
          <dd className="mono truncate tnum">{v}</dd>
        </div>
      ))}
    </dl>
  );
}