"use client";

import { Pause, Play } from "lucide-react";
import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { EventRow } from "./event-row";
import { toneOf } from "@/components/ui/price";
import { Pill } from "@/components/ui/section";
import { cx, EVENT_TYPE_LABEL, formatClock, formatPercent, formatQuoteValue, instrumentHref } from "@/lib/format";
import { useLiveEvents, useMarketStream, useTape } from "@/lib/stream";
import type { MarketEvent, StreamQuote } from "@/lib/types";

const CLASSES = ["CRYPTO", "EQUITY", "ETF", "INDEX", "FOREX", "TREASURY", "COMMODITY"];
const TYPES = ["PRICE_CHANGE", "SESSION_HIGH", "SESSION_LOW", "VOLATILITY_SPIKE", "TRADING_HALT", "TRADING_RESUME", "FILING_PUBLISHED", "MARKET_OPEN", "MARKET_CLOSE", "SOURCE_DIVERGENCE", "SOURCE_FAILURE", "SCHEMA_DRIFT", "DOCUMENT_CHANGED"];
const SEVERITIES = ["INFO", "NOTICE", "WARNING", "CRITICAL"];

type Item = { kind: "event"; ts: number; e: MarketEvent } | { kind: "quote"; ts: number; q: StreamQuote };

/** Flagship /live view: merged stream of events and price changes with client-side filters and pause. */
export function LiveFeed({ initial }: { initial: MarketEvent[] }) {
  const [paused, setPaused] = useState(false);
  const [showQuotes, setShowQuotes] = useState(true);
  const [cls, setCls] = useState<string | null>(null);
  const [country, setCountry] = useState("");
  const [types, setTypes] = useState<Set<string>>(new Set());
  const [sev, setSev] = useState<string | null>(null);
  const [minConf, setMinConf] = useState(0);
  const state = useMarketStream(showQuotes ? ["events:*", "tape"] : ["events:*"]);
  const liveEvents = useLiveEvents(300);
  const tape = useTape(120);
  const [frozen, setFrozen] = useState<Item[] | null>(null);

  const items = useMemo<Item[]>(() => {
    const seen = new Set<string>();
    const out: Item[] = [];
    for (const e of [...liveEvents, ...initial]) {
      if (seen.has(e.id)) continue;
      seen.add(e.id);
      out.push({ kind: "event", ts: typeof e.timestamp === "number" ? e.timestamp : Date.parse(String(e.timestamp).replace(" ", "T").replace(/([+-]\d{2})$/, "$1:00")), e });
    }
    if (showQuotes) for (const q of tape) out.push({ kind: "quote", ts: q.received, q });
    return out
      .filter((it) => {
        if (it.kind === "event") {
          const e = it.e;
          if (types.size && !types.has(e.type)) return false;
          if (sev && SEVERITIES.indexOf(e.severity) < SEVERITIES.indexOf(sev)) return false;
          if (e.confidence < minConf) return false;
          if (cls && !e.instruments.some((i) => i.asset_class === cls) && e.instruments.length) return false;
          if (country && !e.instruments.some((i) => i.country === country.toUpperCase())) return false;
          return true;
        }
        if (types.size || sev) return false;
        if (it.q.confidence < minConf) return false;
        return true;
      })
      .sort((a, b) => b.ts - a.ts)
      .slice(0, 300);
  }, [liveEvents, initial, tape, showQuotes, types, sev, minConf, cls, country]);

  useEffect(() => {
    if (paused && !frozen) setFrozen(items);
    if (!paused && frozen) setFrozen(null);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [paused]);
  const shown = paused && frozen ? frozen : items;
  const toggleType = (t: string) =>
    setTypes((s) => {
      const n = new Set(s);
      if (n.has(t)) n.delete(t);
      else n.add(t);
      return n;
    });

  return (
    <div className="grid grid-cols-1 [&>*]:min-w-0 gap-5 lg:grid-cols-[260px_1fr]">
      <aside className="space-y-4 lg:sticky lg:top-[calc(var(--header-h)+40px)] lg:self-start">
        <div className="flex items-center gap-2">
          <button type="button" onClick={() => setPaused((p) => !p)} className={cx("inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm", paused ? "border-warning text-warning" : "border-rule text-ink-2 hover:text-ink")}>
            {paused ? <Play size={14} /> : <Pause size={14} />}
            {paused ? "Resume" : "Pause"}
          </button>
          <span className={cx("inline-flex items-center gap-1.5 text-xs", 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>
        <label className="flex items-center gap-2 text-sm text-ink-2">
          <input type="checkbox" checked={showQuotes} onChange={(e) => setShowQuotes(e.target.checked)} className="h-4 w-4" /> Include price changes
        </label>
        <Filter title="Asset class">
          <Pill active={!cls} onClick={() => setCls(null)}>
            All
          </Pill>
          {CLASSES.map((c) => (
            <Pill key={c} active={cls === c} onClick={() => setCls(cls === c ? null : c)}>
              {c.toLowerCase()}
            </Pill>
          ))}
        </Filter>
        <Filter title="Country (ISO-2)">
          <input value={country} onChange={(e) => setCountry(e.target.value.toUpperCase().slice(0, 2))} placeholder="US, CA, XX…" className="mono h-9 w-24 rounded-md border border-rule bg-surface px-2 text-sm uppercase outline-none focus:border-rule-strong" />
        </Filter>
        <Filter title="Event type">
          {TYPES.map((t) => (
            <Pill key={t} active={types.has(t)} onClick={() => toggleType(t)}>
              {EVENT_TYPE_LABEL[t] ?? t}
            </Pill>
          ))}
        </Filter>
        <Filter title="Minimum severity">
          <Pill active={!sev} onClick={() => setSev(null)}>
            Any
          </Pill>
          {SEVERITIES.map((s) => (
            <Pill key={s} active={sev === s} onClick={() => setSev(sev === s ? null : s)}>
              {s.toLowerCase()}
            </Pill>
          ))}
        </Filter>
        <Filter title={`Minimum confidence · ${Math.round(minConf * 100)}%`}>
          <input type="range" min={0} max={1} step={0.05} value={minConf} onChange={(e) => setMinConf(Number(e.target.value))} className="w-full" />
        </Filter>
      </aside>
      <div>
        <div className="mb-2 flex items-center justify-between text-xs text-ink-3">
          <span>
            {shown.length} items{paused ? " · paused" : ""}
          </span>
          <Link href="/events" className="text-accent hover:underline">
            Browse the event archive →
          </Link>
        </div>
        {shown.length === 0 ? (
          <div className="rounded-md border border-dashed border-rule px-4 py-12 text-center text-sm text-ink-3">Nothing matches these filters yet. The feed fills as sources emit changes.</div>
        ) : (
          <ul className="rounded-md border border-rule bg-surface px-3">
            {shown.map((it) =>
              it.kind === "event" ? (
                <EventRow key={it.e.id} e={it.e} />
              ) : (
                <li key={`${it.q.instrument_id}-${it.q.received}`} className="flex items-center gap-3 border-b border-rule py-1.5 text-sm last:border-0">
                  <span className="mono w-[76px] shrink-0 text-right text-[11px] text-ink-3" suppressHydrationWarning>
                    {formatClock(it.q.timestamp)}
                  </span>
                  <span className="text-[10.5px] font-medium uppercase tracking-wide text-ink-3">quote</span>
                  <Link href={instrumentHref(it.q.instrument_id)} className="mono font-medium text-accent hover:underline">
                    {it.q.symbol}
                  </Link>
                  <span className="mono ml-auto tnum">{formatQuoteValue(it.q.price, undefined, it.q.currency)}</span>
                  <span className={cx("mono w-[70px] text-right tnum", toneOf(it.q.change_pct))}>{formatPercent(it.q.change_pct)}</span>
                  <span className="mono hidden w-[110px] text-right text-[11px] text-ink-3 sm:inline">
                    {it.q.sources} src · {Math.round(it.q.confidence * 100)}%
                  </span>
                </li>
              ),
            )}
          </ul>
        )}
      </div>
    </div>
  );
}

function Filter({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div>
      <div className="mb-1.5 text-[11px] font-medium uppercase tracking-wide text-ink-3">{title}</div>
      <div className="flex flex-wrap gap-1.5">{children}</div>
    </div>
  );
}