"use client";

import type { EventDTO } from "@dci/core";
import { ArrowUp, RefreshCw } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { EventList } from "@/components/event-list";
import { Button } from "@/components/ui/button";
import { cn } from "@/components/ui/cn";
import { SkeletonRows } from "@/components/ui/skeleton";
import { ErrorState } from "@/components/ui/states";
import { apiGet, clientApiBase, type Query } from "@/lib/api";
import { useInterval } from "@/lib/hooks";

interface Props {
  initial: EventDTO[];
  initialTotal: number;
  perPage: number;
  /** the exact /events query (already includes dedupe / min_significance) */
  apiQuery: Query;
  initialError?: string;
}

/**
 * Live feed 2.0: SSR first page, then polls /events?since= every 60 s with the SAME query (families, entity,
 * significance band, source kind, AI, dedupe), shows an "N new updates" pill and prepends on demand; "Load more" pages.
 */
export function LiveFeed2({ initial, initialTotal, perPage, apiQuery, initialError }: Props) {
  const [events, setEvents] = useState<EventDTO[]>(initial);
  const [pending, setPending] = useState<EventDTO[]>([]);
  const [loadingMore, setLoadingMore] = useState(false);
  const [error, setError] = useState<string | null>(initialError ?? null);
  const [exhausted, setExhausted] = useState(initial.length >= initialTotal || initial.length < perPage);
  const [fresh, setFresh] = useState<Set<string>>(new Set());
  const sinceRef = useRef<string>(initial[0]?.detectedAt ?? new Date().toISOString());
  const seen = useRef(new Set(initial.map((e) => e.id)));

  const [syncedInitial, setSyncedInitial] = useState(initial);
  if (syncedInitial !== initial) {
    setSyncedInitial(initial);
    setEvents(initial);
    setPending([]);
    setExhausted(initial.length >= initialTotal || initial.length < perPage);
    setError(initialError ?? null);
  }
  useEffect(() => {
    sinceRef.current = initial[0]?.detectedAt ?? new Date().toISOString();
    seen.current = new Set(initial.map((e) => e.id));
  }, [initial]);

  const base = useMemo(() => clientApiBase(), []);
  const sig = JSON.stringify(apiQuery);
  const query = useMemo<Query>(() => JSON.parse(sig) as Query, [sig]);

  const poll = useCallback(async () => {
    if (typeof document !== "undefined" && document.hidden) return;
    const r = await apiGet<EventDTO[] | { items: EventDTO[] }>("/events", { ...query, since: sinceRef.current, per_page: 100 }, { base, timeoutMs: 8000 });
    if (!r.ok) return;
    const items = Array.isArray(r.data) ? r.data : (r.data.items ?? []);
    const news = items.filter((e) => !seen.current.has(e.id));
    if (!news.length) {
      setError(null);
      return;
    }
    for (const e of news) seen.current.add(e.id);
    sinceRef.current = news.reduce((a, e) => (e.detectedAt > a ? e.detectedAt : a), sinceRef.current);
    setError(null);
    setPending((p) => [...news, ...p].sort((a, b) => (a.detectedAt < b.detectedAt ? 1 : -1)));
  }, [query, base]);

  useInterval(poll, 60_000);
  useEffect(() => {
    if (initialError) void poll();
  }, [initialError, poll]);

  const reveal = () => {
    setEvents((ev) => [...pending, ...ev]);
    setFresh(new Set(pending.map((e) => e.id)));
    setPending([]);
    window.scrollTo({ top: 0, behavior: "smooth" });
    setTimeout(() => setFresh(new Set()), 2500);
  };

  const loadMore = async () => {
    setLoadingMore(true);
    const nextPage = Math.floor(events.length / perPage) + 1;
    const r = await apiGet<EventDTO[] | { items: EventDTO[] }>("/events", { ...query, page: nextPage, per_page: perPage }, { base });
    setLoadingMore(false);
    if (!r.ok) {
      setError(r.error);
      return;
    }
    const items = (Array.isArray(r.data) ? r.data : (r.data.items ?? [])).filter((e) => !seen.current.has(e.id));
    for (const e of items) seen.current.add(e.id);
    setEvents((ev) => [...ev, ...items]);
    if (items.length < perPage) setExhausted(true);
  };

  return (
    <div className="relative">
      {pending.length > 0 && (
        <div className="sticky top-[6.5rem] z-[30] flex justify-center sm:top-[7rem]">
          <button type="button" onClick={reveal} className="inline-flex h-10 items-center gap-1.5 rounded-full border border-accent bg-accent px-4 text-[12.5px] font-medium text-white animate-fade-in">
            <ArrowUp className="size-3.5" /> {pending.length} new {pending.length === 1 ? "update" : "updates"}
          </button>
        </div>
      )}
      {error && events.length === 0 ? (
        <ErrorState compact detail={error} title="Change feed unavailable" description="Retrying automatically every minute." />
      ) : (
        <EventList events={events} groupByDay highlightIds={fresh} emptyTitle="No change matches these filters" emptyDescription="Minor changes are hidden by default — switch on “Show all changes” or loosen a filter." />
      )}
      <div className={cn("flex flex-col items-center gap-2 py-6", events.length === 0 && "hidden")}>
        {loadingMore ? (
          <SkeletonRows rows={3} className="w-full" />
        ) : exhausted ? (
          <span className="text-[12px] text-ink-4">End of feed</span>
        ) : (
          <Button onClick={loadMore} size="md">
            <RefreshCw className="size-3.5" /> Load more
          </Button>
        )}
        {error && events.length > 0 && <span className="text-[11.5px] text-warn">Could not load more ({error}).</span>}
      </div>
    </div>
  );
}