"use client";

import { useMemo } from "react";
import { EventRow } from "./event-row";
import { cx } from "@/lib/format";
import { useLiveEvents, useMarketStream } from "@/lib/stream";
import type { MarketEvent } from "@/lib/types";

/** Initial events (SSR) merged with events arriving on `events:*` (or a narrower channel). */
export function LiveEvents({ initial, channel = "events:*", max = 40, dense, className, types }: { initial: MarketEvent[]; channel?: string; max?: number; dense?: boolean; className?: string; types?: string[] }) {
  useMarketStream([channel]);
  const live = useLiveEvents(max);
  const merged = useMemo(() => {
    const seen = new Set<string>();
    const out: MarketEvent[] = [];
    for (const e of [...live, ...initial]) {
      if (seen.has(e.id)) continue;
      if (types && !types.includes(e.type)) continue;
      seen.add(e.id);
      out.push(e);
      if (out.length >= max) break;
    }
    return out;
  }, [live, initial, max, types]);
  if (!merged.length) return <div className={cx("rounded-md border border-dashed border-rule px-4 py-8 text-center text-sm text-ink-3", className)}>No events yet — the feed fills as sources emit changes.</div>;
  return (
    <ul className={cx("rounded-md border border-rule bg-surface px-3", className)}>
      {merged.map((e) => (
        <EventRow key={e.id} e={e} dense={dense} />
      ))}
    </ul>
  );
}