"use client";

import Link from "next/link";
import { cx, formatClock, formatPercent, formatQuoteValue, instrumentHref } from "@/lib/format";
import { useMarketStream, useTape } from "@/lib/stream";
import { toneOf } from "@/components/ui/price";

/** Live tape: latest canonical price changes across everything the stream publishes (channel `tape`). */
export function LiveTape({ rows = 24, className }: { rows?: number; className?: string }) {
  const state = useMarketStream(["tape"]);
  const tape = useTape(rows);
  return (
    <div className={cx("mono overflow-hidden rounded-md border border-rule bg-surface text-[12px]", className)}>
      <div className="flex items-center justify-between border-b border-rule px-3 py-1.5 text-[10.5px] uppercase tracking-wide text-ink-3">
        <span>Live tape · canonical price changes</span>
        <span className={cx("inline-flex items-center gap-1.5", state === "open" ? "text-positive" : "text-warning")}>
          <span className={cx("inline-block h-1.5 w-1.5 rounded-full", state === "open" ? "bg-positive live-dot" : "bg-warning")} />
          {state === "open" ? "streaming" : state}
        </span>
      </div>
      {tape.length === 0 && <div className="px-3 py-6 text-center text-ink-3">Waiting for the first ticks…</div>}
      <ul className="max-h-[420px] overflow-y-auto">
        {tape.map((q, i) => (
          <li key={`${q.instrument_id}-${q.received}-${i}`} className={cx("flex items-center gap-3 border-b border-rule px-3 py-1 last:border-0", i === 0 && "bg-surface-2")}>
            <span className="w-[86px] shrink-0 text-ink-3" suppressHydrationWarning>
              {formatClock(q.timestamp)}
            </span>
            <Link href={instrumentHref(q.instrument_id)} className="w-[84px] shrink-0 truncate font-medium hover:text-accent">
              {q.symbol}
            </Link>
            <span className="flex-1 text-right tnum">{formatQuoteValue(q.price, undefined, q.currency)}</span>
            <span className={cx("w-[72px] shrink-0 text-right tnum", toneOf(q.change_pct))}>{formatPercent(q.change_pct)}</span>
            <span className="hidden w-12 shrink-0 text-right text-ink-3 sm:inline">{q.sources} src</span>
          </li>
        ))}
      </ul>
    </div>
  );
}