"use client";

import Link from "next/link";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { ArrowUp, Pause, Play, SlidersHorizontal, X } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { liveToEvent, type EventItem, type EventQuery, type LiveEvent, eventQueryString } from "@/lib/api";
import { CHANNELS, GROUP_LABELS, SAVED_VIEWS, agoIso, feedHref } from "@/lib/format";
import type { FeedFilters } from "@/lib/feed-filters";
import { publicFetch } from "@/lib/owner";
import { useLive, type LiveStatus } from "@/lib/use-live";
import { EventRow } from "./event-row";
import { DensityToggle, usePrefs } from "./prefs";
import { Chip, Empty, Kbd } from "./ui";

const MAX_ROWS = 400;

export function LiveDot({ status, paused = false }: { status: LiveStatus; paused?: boolean }) {
  const label = paused ? "PAUSED" : status === "live" ? "LIVE" : status === "connecting" ? "CONNECTING" : status === "reconnecting" ? "RECONNECTING" : "OFFLINE";
  const color = paused ? "bg-warn" : status === "live" ? "bg-signal animate-pulse-dot" : status === "offline" ? "bg-danger" : "bg-warn";
  return (
    <span className="inline-flex items-center gap-1.5 font-mono text-[11px] font-semibold tracking-wider text-fg-muted" aria-live="polite">
      <span className={`inline-block size-2 rounded-full ${color}`} />
      {label}
    </span>
  );
}

export type { FeedFilters } from "@/lib/feed-filters";

function matchesFilters(ev: EventItem, f: FeedFilters, fixedQuery?: EventQuery): boolean {
  const sig = ev.signal_score ?? ev.importance;
  if (f.signal_min !== undefined && sig < f.signal_min) return false;
  if (f.importance_min !== undefined && ev.importance < f.importance_min) return false;
  if (f.silent_change && !ev.silent_change) return false;
  if (f.first_party && ev.first_party === false) return false;
  if (f.confirmed && ev.evidence_label !== "CONFIRMED") return false;
  if (f.country && ev.country !== f.country) return false;
  if (f.language && ev.language !== f.language) return false;
  if (f.category && !ev.categories.includes(f.category)) return false;
  if (f.event_type && !f.event_type.split(",").includes(ev.event_type)) return false;
  if (f.q) return false; // text search results are not extended live
  if (fixedQuery?.source && ev.source_id !== fixedQuery.source) return false;
  if (fixedQuery?.entity && !ev.entities.some((x) => x.id === fixedQuery.entity)) return false;
  if (fixedQuery?.category && !ev.categories.includes(fixedQuery.category)) return false;
  if (fixedQuery?.silent_change && !ev.silent_change) return false;
  return true;
}

/**
 * The live feed v2 (spec §31, §97–99): initial REST page, WebSocket prepends, URL-synced filters,
 * pause, "↑ N new events" without scroll jumps, density modes, cursor pagination, drawer on click.
 * `fixed` restricts the feed to one channel (used by /breaking, /silent, /category/*).
 */
export function LiveFeed({ initial, initialCursor, fixed, showTabs = true, title = "LIVE WEB", extraQuery, syncUrl = false, initialFilters, showFilters = true, compactHeader = false }: { initial: EventItem[]; initialCursor: string | null; fixed?: string; showTabs?: boolean; title?: string; extraQuery?: EventQuery; syncUrl?: boolean; initialFilters?: FeedFilters; showFilters?: boolean; compactHeader?: boolean }) {
  const router = useRouter();
  const pathname = usePathname();
  const sp = useSearchParams();
  const { paused, setPaused } = usePrefs();
  const [tab, setTab] = useState(fixed ?? initialFilters?.category ?? "all");
  const [filters, setFilters] = useState<FeedFilters>(initialFilters ?? {});
  const [items, setItems] = useState<EventItem[]>(initial);
  const [cursor, setCursor] = useState<string | null>(initialCursor);
  const [loading, setLoading] = useState(false);
  const [fresh, setFresh] = useState<Set<string>>(new Set());
  const [pending, setPending] = useState<EventItem[]>([]);
  const [atTop, setAtTop] = useState(true);
  const [now, setNow] = useState(() => Date.now());
  const [showFilterBar, setShowFilterBar] = useState(Boolean(initialFilters && Object.keys(initialFilters).length));
  const seen = useRef(new Set(initial.map((i) => i.id)));
  const topRef = useRef<HTMLDivElement>(null);
  const chan = useMemo(() => CHANNELS.find((c) => c.key === tab) ?? CHANNELS[0]!, [tab]);

  // sync URL ← filters (spec §99)
  useEffect(() => {
    if (!syncUrl) return;
    const href = feedHref({ ...filters, category: tab !== "all" && tab !== "breaking" && tab !== "silent" ? tab : filters.category, silent_change: tab === "silent" ? true : filters.silent_change, signal_min: tab === "breaking" ? Math.max(80, filters.signal_min ?? 0) : filters.signal_min }, pathname);
    const current = `${pathname}${sp.toString() ? `?${sp.toString()}` : ""}`;
    if (href !== current) router.replace(href, { scroll: false });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [filters, tab, syncUrl, pathname]);

  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 10_000);
    return () => clearInterval(t);
  }, []);
  // Is the top of the list visible? If not, new events are buffered (spec §97).
  useEffect(() => {
    const el = topRef.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => setAtTop(Boolean(e?.isIntersecting)), { rootMargin: "80px 0px 0px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  const query = useMemo<EventQuery>(() => {
    const q: EventQuery = { ...(extraQuery ?? {}), ...(chan.query as EventQuery), ...filters, limit: 60 };
    if (chan.key === "breaking") {
      q.order = q.order ?? "signal";
      q.signal_min = Math.max(80, q.signal_min ?? 0);
      q.after = agoIso(48 * 3600e3);
    }
    return q;
  }, [chan, extraQuery, filters]);

  const load = useCallback(
    async (reset: boolean, c: string | null) => {
      setLoading(true);
      try {
        const page = await publicFetch<{ items: EventItem[]; nextCursor: string | null }>(`/api/v1/events${eventQueryString({ ...query, cursor: reset ? undefined : (c ?? undefined) })}`);
        setItems((prev) => {
          const base = reset ? [] : prev;
          const ids = new Set(base.map((i) => i.id));
          const merged = [...base, ...page.items.filter((i) => !ids.has(i.id))];
          seen.current = new Set(merged.map((i) => i.id));
          return merged;
        });
        setCursor(page.nextCursor);
        if (reset) setPending([]);
      } catch {
        // keep current list
      } finally {
        setLoading(false);
      }
    },
    [query],
  );

  const first = useRef(true);
  useEffect(() => {
    if (first.current) {
      first.current = false;
      return;
    }
    void load(true, null);
  }, [load]);

  const flushPending = useCallback(() => {
    setPending((p) => {
      if (!p.length) return p;
      setItems((prev) => [...p, ...prev].slice(0, MAX_ROWS));
      setFresh((prevF) => new Set([...prevF, ...p.map((x) => x.id)]));
      setTimeout(() => setFresh(new Set()), 1800);
      return [];
    });
    topRef.current?.scrollIntoView({ block: "start", behavior: "smooth" });
  }, []);

  const onEvent = useCallback(
    (e: LiveEvent) => {
      if (seen.current.has(e.id)) return;
      const ev = liveToEvent(e);
      if (!matchesFilters(ev, filters, extraQuery)) return;
      if (chan.key === "breaking" && (ev.signal_score ?? ev.importance) < 80) return;
      if (chan.key === "silent" && !ev.silent_change) return;
      seen.current.add(e.id);
      if (paused || !atTop || query.order === "signal" || query.order === "importance") {
        setPending((p) => [ev, ...p].slice(0, 200));
        return;
      }
      setItems((prev) => [ev, ...prev].slice(0, MAX_ROWS));
      setFresh((prev) => new Set([...prev, e.id]));
      setTimeout(
        () =>
          setFresh((prev) => {
            const n = new Set(prev);
            n.delete(e.id);
            return n;
          }),
        1800,
      );
    },
    [filters, extraQuery, chan.key, paused, atTop, query.order],
  );
  const wsChannel = extraQuery?.source ? `source:${extraQuery.source}` : extraQuery?.entity ? `entity:${extraQuery.entity}` : filters.country && chan.key === "all" ? `country:${filters.country}` : filters.group && chan.key === "all" ? `group:${filters.group}` : chan.ws;
  const wsChannels = useMemo(() => [wsChannel], [wsChannel]);
  const status = useLive(wsChannels, onEvent);

  const setF = (patch: Partial<FeedFilters>): void => setFilters((f) => {
    const n = { ...f, ...patch };
    for (const k of Object.keys(n) as (keyof FeedFilters)[]) if (n[k] === undefined || n[k] === false || n[k] === "") delete n[k];
    return n;
  });
  const activeFilterCount = Object.keys(filters).length;

  return (
    <section className="panel overflow-hidden" aria-label={title}>
      <header className={`flex flex-wrap items-center gap-2 border-b border-line px-3 ${compactHeader ? "py-1.5" : "py-2"}`}>
        <h2 className="label mr-1 !text-fg">{title}</h2>
        <LiveDot status={status} paused={paused} />
        <span className="hidden font-mono text-[11px] text-fg-subtle tabular sm:inline">{items.length} events</span>
        <span className="ml-auto flex items-center gap-1">
          {showFilters && (
            <button type="button" onClick={() => setShowFilterBar((v) => !v)} aria-expanded={showFilterBar} className={`inline-flex h-7 items-center gap-1 rounded-md border border-line px-2 text-[11.5px] ${activeFilterCount ? "border-signal/50 text-signal" : "text-fg-muted hover:text-fg"}`} title="Filters">
              <SlidersHorizontal className="size-3.5" /> <span className="hidden sm:inline">Filters</span>
              {activeFilterCount > 0 && <span className="font-mono">{activeFilterCount}</span>}
            </button>
          )}
          <button type="button" onClick={() => setPaused(!paused)} aria-pressed={paused} className={`inline-flex h-7 items-center gap-1 rounded-md border border-line px-2 text-[11.5px] ${paused ? "border-warn/50 text-warn" : "text-fg-muted hover:text-fg"}`} title={paused ? "Resume live" : "Pause live (backend keeps ingesting)"}>
            {paused ? <Play className="size-3.5" /> : <Pause className="size-3.5" />} <span className="hidden sm:inline">{paused ? "Resume" : "Pause"}</span>
          </button>
          <DensityToggle compact />
        </span>
      </header>
      {showTabs && !fixed && (
        <div className="flex gap-1 overflow-x-auto border-b border-line px-2 py-1.5 no-scrollbar" role="tablist" aria-label="Channels">
          {CHANNELS.map((c) => (
            <button key={c.key} type="button" role="tab" aria-selected={tab === c.key} onClick={() => setTab(c.key)} className={`whitespace-nowrap rounded-md px-2 py-1 text-[12px] ${tab === c.key ? "bg-panel-2 text-fg" : "text-fg-muted hover:text-fg"} ${c.key === "silent" ? "text-silent" : c.key === "breaking" ? "text-hot" : ""}`}>
              {c.label}
            </button>
          ))}
        </div>
      )}
      {showFilters && showFilterBar && (
        <div className="flex flex-wrap items-center gap-1.5 border-b border-line bg-panel-2/40 px-3 py-2 text-[12px]">
          <Toggle on={Boolean(filters.silent_change)} onClick={() => setF({ silent_change: !filters.silent_change || undefined })} tone="silent">Silent</Toggle>
          <Toggle on={Boolean(filters.first_party)} onClick={() => setF({ first_party: !filters.first_party || undefined })} tone="signal">First-party</Toggle>
          <Toggle on={Boolean(filters.confirmed)} onClick={() => setF({ confirmed: !filters.confirmed || undefined })} tone="ok">Confirmed</Toggle>
          <select aria-label="Minimum signal" value={filters.signal_min ?? ""} onChange={(e) => setF({ signal_min: e.target.value ? Number(e.target.value) : undefined })} className="h-6 rounded-md border border-line bg-panel px-1.5 text-[11.5px]">
            <option value="">signal ≥ any</option>
            <option value="50">signal ≥ 50</option>
            <option value="65">signal ≥ 65</option>
            <option value="80">signal ≥ 80</option>
            <option value="90">signal ≥ 90</option>
          </select>
          <select aria-label="Event group" value={filters.group ?? ""} onChange={(e) => setF({ group: e.target.value || undefined })} className="h-6 max-w-[11rem] rounded-md border border-line bg-panel px-1.5 text-[11.5px]">
            <option value="">all groups</option>
            {Object.entries(GROUP_LABELS).map(([k, v]) => (
              <option key={k} value={k}>{v}</option>
            ))}
          </select>
          <select aria-label="Order" value={filters.order ?? "recent"} onChange={(e) => setF({ order: e.target.value === "recent" ? undefined : (e.target.value as FeedFilters["order"]) })} className="h-6 rounded-md border border-line bg-panel px-1.5 text-[11.5px]">
            <option value="recent">newest first</option>
            <option value="signal">highest signal</option>
            <option value="importance">highest importance</option>
          </select>
          <input aria-label="Country" value={filters.country ?? ""} onChange={(e) => setF({ country: e.target.value.toUpperCase().slice(0, 3) || undefined })} placeholder="CC" maxLength={3} className="h-6 w-12 rounded-md border border-line bg-panel px-1.5 font-mono text-[11.5px] uppercase placeholder:text-fg-subtle" title="Country (ISO code)" />
          {filters.event_type && <Chip tone="info">type: {filters.event_type.replace(/_/g, " ")} <button type="button" aria-label="Clear type" onClick={() => setF({ event_type: undefined })}><X className="size-3" /></button></Chip>}
          {filters.q && <Chip tone="info">“{filters.q}” <button type="button" aria-label="Clear search" onClick={() => setF({ q: undefined })}><X className="size-3" /></button></Chip>}
          <span className="ml-auto flex items-center gap-1">
            <span className="text-[11px] text-fg-subtle">views:</span>
            {SAVED_VIEWS.slice(0, 4).map((v) => (
              <Link key={v.key} href={feedHref(v.query, "/live")} className="rounded-sm border border-line px-1.5 py-px text-[10.5px] text-fg-muted hover:text-fg">{v.label}</Link>
            ))}
            {activeFilterCount > 0 && (
              <button type="button" onClick={() => setFilters({})} className="rounded-sm px-1.5 py-px text-[10.5px] text-fg-subtle hover:text-fg">clear</button>
            )}
          </span>
        </div>
      )}
      <div ref={topRef} aria-hidden className="h-px" />
      {pending.length > 0 && (
        <div className="sticky top-12 z-20 flex justify-center py-1">
          <button type="button" onClick={flushPending} className="inline-flex items-center gap-1.5 rounded-full border border-signal/50 bg-panel px-3 py-1 text-[12px] font-medium text-signal shadow-lg hover:bg-signal-soft">
            <ArrowUp className="size-3.5" /> {pending.length} new event{pending.length === 1 ? "" : "s"}{paused ? " · paused" : ""}
          </button>
        </div>
      )}
      <div role="feed" aria-busy={loading}>
        {items.length === 0 && !loading && (
          <Empty>
            {activeFilterCount ? "No events match these filters. Live events that match will appear here." : "No events in this channel yet. Sensors are being checked continuously — meaningful changes will appear here the moment they are detected."}
          </Empty>
        )}
        {items.map((ev) => (
          <EventRow key={ev.id} ev={ev} fresh={fresh.has(ev.id)} now={now} replayed={Boolean((ev as EventItem & { replayed?: boolean }).replayed)} />
        ))}
      </div>
      <footer className="flex items-center justify-between px-3 py-2 text-[12px] text-fg-subtle">
        <span className="inline-flex items-center gap-2">
          Showing {items.length}{items.length >= MAX_ROWS ? ` (capped at ${MAX_ROWS})` : ""}
          <span className="hidden items-center gap-1 sm:inline-flex"><Kbd>⌘K</Kbd> search</span>
        </span>
        {cursor ? (
          <button type="button" disabled={loading} onClick={() => load(false, cursor)} className="rounded-md border border-line bg-panel-2 px-2.5 py-1 text-[12px] text-fg hover:border-line-strong disabled:opacity-50">
            {loading ? "Loading…" : "Load more"}
          </button>
        ) : (
          <Link href="/explore" className="hover:text-fg">Explore →</Link>
        )}
      </footer>
    </section>
  );
}

function Toggle({ on, onClick, children, tone }: { on: boolean; onClick: () => void; children: React.ReactNode; tone: "silent" | "signal" | "ok" }) {
  const onCls = tone === "silent" ? "border-silent/50 bg-silent-soft text-silent" : tone === "ok" ? "border-ok/50 bg-ok/10 text-ok" : "border-signal/50 bg-signal-soft text-signal";
  return (
    <button type="button" aria-pressed={on} onClick={onClick} className={`h-6 rounded-md border px-2 text-[11.5px] ${on ? onCls : "border-line text-fg-muted hover:text-fg"}`}>
      {children}
    </button>
  );
}