"use client";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { usePathname, useSearchParams } from "next/navigation";
import type { VirtuosoHandle } from "react-virtuoso";
import { MasonryGrid } from "./MasonryGrid";
import { PaginationBar } from "./PaginationBar";
import { useInfiniteScrollEnabled } from "./InfiniteScrollToggle";
import { useSettings } from "@/components/settings/SettingsProvider";
import type { CardImage } from "./ImageCard";
import type { LibraryView } from "./ViewToggle";

interface Props {
  initialItems: CardImage[];
  initialPage: number;
  totalPages: number;
  totalCount: number;
  view: LibraryView;
  infiniteScrollEnabled?: boolean;
}

/**
 * Wrapper that owns the "loaded pages" state for the cover grid. The
 * top + bottom pagination bars and the grid itself all read from here
 * so the bottom bar can show "Pages 1–7 of 7" once the user has
 * scroll-appended through the whole result set.
 *
 * Top bar stays anchored at `initialPage` — that's where the user
 * landed via URL. Bottom bar reflects `loadedEnd`, the highest page
 * currently appended.
 */
export function LibraryGrid({
  initialItems,
  initialPage,
  totalPages,
  totalCount,
  view,
  infiniteScrollEnabled: infiniteFromProp = true,
}: Props) {
  const sp = useSearchParams();
  const pathname = usePathname();
  // The toggle in the FilterBar persists per-user-tab via localStorage.
  // The prop is the page-level "is this surface ever allowed to
  // infinite-scroll?" gate; AND with the user's preference.
  const userInfinite = useInfiniteScrollEnabled();
  const infiniteScrollEnabled = infiniteFromProp && userInfinite;
  const { settings } = useSettings();
  const fadeMs = settings.fadeTransitions ? Math.max(0, settings.fadeDurationMs ?? 400) : 0;

  // Loaded items split into two buckets: the SSR-rendered initial
  // page (kept stable for hydration) and any appended-by-fetch pages.
  const [extra, setExtra] = useState<CardImage[]>([]);
  const [loadedEnd, setLoadedEnd] = useState<number>(initialPage);
  // The page currently in the viewport, derived from Virtuoso's
  // first-visible-row index. Used solely for the "Page X of Y" label
  // — navigation still keys off `initialPage` (URL anchor) and
  // `loadedEnd`. Defaults to initialPage so SSR matches.
  const [visiblePage, setVisiblePage] = useState<number>(initialPage);
  const pageSize = Math.max(25, Math.min(500, settings.coverPageSize || 100));
  // Per-batch fade controller. Each appended page is a "batch"; when
  // any row of that batch first intersects the viewport, every row in
  // the same batch fades in together (rather than one-row-at-a-time
  // as the user scrolls past). Rows subscribe to their batch's trigger
  // so they all flip to "animated" at once.
  const fadeController = useMemo(() => {
    let seq = 0;
    const itemBatch = new Map<number, number>();
    const batchIds = new Map<number, number[]>();
    const triggered = new Set<number>();
    const subs = new Map<number, Set<() => void>>();
    return {
      addBatch(ids: number[]): number {
        seq += 1;
        const id = seq;
        batchIds.set(id, ids);
        for (const it of ids) itemBatch.set(it, id);
        return id;
      },
      batchIdOf(itemId: number): number | null {
        return itemBatch.get(itemId) ?? null;
      },
      isTriggered(batchId: number): boolean {
        return triggered.has(batchId);
      },
      trigger(batchId: number) {
        if (triggered.has(batchId)) return;
        triggered.add(batchId);
        const set = subs.get(batchId);
        if (set) for (const cb of set) cb();
      },
      subscribe(batchId: number, cb: () => void): () => void {
        let set = subs.get(batchId);
        if (!set) { set = new Set(); subs.set(batchId, set); }
        set.add(cb);
        return () => { set?.delete(cb); };
      },
      // Drop a batch entirely — items no longer count as pending so a
      // future remount won't replay the keyframe.
      expire(batchId: number) {
        const ids = batchIds.get(batchId);
        if (ids) for (const it of ids) itemBatch.delete(it);
        batchIds.delete(batchId);
        triggered.delete(batchId);
        subs.delete(batchId);
      },
      reset() {
        seq = 0;
        itemBatch.clear();
        batchIds.clear();
        triggered.clear();
        subs.clear();
      },
    };
  }, []);
  const fetchInFlightRef = useRef<boolean>(false);
  // Page number currently being fetched (or just resolved). Combined
  // with fetchInFlightRef it dedupes simultaneous requests for the same
  // page — strict-mode double-invoke and Virtuoso's onEndReached firing
  // twice in rapid succession both hit this.
  const lastFetchTargetRef = useRef<number>(0);
  // Auto-fetch suppression: after appendNextPage resolves we set this
  // true. Virtuoso's onEndReached path checks it and bails. The user
  // scrolling at least one full viewport flips it back to false so the
  // next bottom-trigger can append. Without this, mounting on a page
  // whose SSR rows are shorter than the viewport causes onEndReached
  // to fire repeatedly, chaining 3-4 page appends instantly and
  // dragging visiblePage way past the URL anchor.
  const autoFetchPausedRef = useRef<boolean>(false);
  const [isFetching, setIsFetching] = useState(false);

  // Reset when the SSR-anchor changes (filter/sort/page nav). Page
  // remount via key in app/page.tsx already handles most of this.
  useEffect(() => {
    setExtra([]);
    setLoadedEnd(initialPage);
    fadeController.reset();
  }, [initialPage, initialItems, fadeController]);

  const allItems = useMemo(() => [...initialItems, ...extra], [initialItems, extra]);

  // Mirror loadedEnd into a ref so the save closure (registered once
  // on mount) always reads the current value, without rebinding.
  const loadedEndRef = useRef(loadedEnd);
  useEffect(() => { loadedEndRef.current = loadedEnd; }, [loadedEnd]);

  // Reflect the visible page in the URL with `replaceState` (no
  // history push, so the back button still goes to the previous
  // route, not through every scroll position). Debounced via
  // visiblePage state which only updates when the bottom-most-visible
  // row changes pages — already throttled at the source.
  useEffect(() => {
    if (typeof window === "undefined") return;
    const usp = new URLSearchParams(sp.toString());
    if (visiblePage > 1) usp.set("page", String(visiblePage));
    else usp.delete("page");
    const qs = usp.toString();
    const target = qs ? `${pathname}?${qs}` : pathname;
    if (window.location.pathname + window.location.search !== target) {
      window.history.replaceState(window.history.state, "", target);
    }
  }, [visiblePage, sp, pathname]);

  // Track when we're mounted on the client so the portal can target
  // document.body without breaking SSR.
  const [mounted, setMounted] = useState(false);
  useEffect(() => { setMounted(true); }, []);

  // Imperative handle on Virtuoso so we can call scrollToIndex even
  // when the target row has been unmounted from DOM (it's outside the
  // overscan window).
  const virtuosoHandleRef = useRef<VirtuosoHandle | null>(null);


  // Scroll + appended-page restoration. The page is `force-dynamic` so
  // Next.js re-renders fresh on back-nav (Router Cache doesn't apply),
  // which means scroll is *not* preserved automatically.
  //
  // Strategy: save scrollY + loadedEnd to sessionStorage on every
  // scroll (debounced) and on cleanup. On mount, if a snapshot exists,
  // re-fetch any pages the user had appended, then scrollTo with a
  // retry loop because Virtuoso lazily measures rows and the page may
  // briefly be too short for the saved scrollY to be valid.
  useEffect(() => {
    if (typeof window === "undefined") return;
    const key = `pinkudex:scroll:${pathname}?${sp.toString()}`;
    // Skip restore when arriving via an internal Prev/Next click
    // (PaginationBar sets this marker before pushing). Otherwise the
    // user clicking Prev all the way back to / would replay a snapshot
    // saved during their previous scroll session, re-fetching pages
    // 2–N and re-creating the visiblePage drift loop.
    const internalMarker = sessionStorage.getItem("pinkudex:nav-internal");
    if (internalMarker) {
      sessionStorage.removeItem("pinkudex:nav-internal");
      // Also clear the snapshot for this URL so subsequent scrolls
      // capture fresh state instead of compounding on the old one.
      try { sessionStorage.removeItem(key); } catch { /* ignore */ }
      return;
    }

    let cancelled = false;
    const restore = async () => {
      let snap: { scrollY: number; loadedEnd: number } | null = null;
      try {
        const raw = sessionStorage.getItem(key);
        if (raw) snap = JSON.parse(raw);
      } catch { /* corrupt — ignore */ }
      if (!snap || snap.scrollY <= 0) return;

      // Refetch missing appended pages so the document is tall enough
      // for the saved scrollY to land somewhere meaningful.
      if (snap.loadedEnd > initialPage && infiniteScrollEnabled) {
        const collected: CardImage[] = [];
        for (let p = initialPage + 1; p <= snap.loadedEnd && p <= totalPages; p++) {
          if (cancelled) return;
          const usp = new URLSearchParams(sp.toString());
          usp.set("page", String(p));
          try {
            const r = await fetch(`/api/covers?${usp.toString()}`, { cache: "no-store" });
            if (!r.ok) break;
            const data = (await r.json()) as { items: CardImage[]; page: number };
            if (!Array.isArray(data.items)) break;
            collected.push(...data.items);
          } catch { break; }
        }
        if (cancelled) return;
        if (collected.length > 0) {
          setExtra(collected);
          setLoadedEnd(snap.loadedEnd);
        }
      }

      // Retry scrollTo for up to ~1s. Stops once position settles
      // within a couple of pixels of target. Necessary because Next.js
      // and Virtuoso both touch scroll/layout shortly after mount.
      const target = snap.scrollY;
      let attempts = 0;
      const maxAttempts = 60;
      const tryScroll = () => {
        if (cancelled) return;
        window.scrollTo(0, target);
        attempts += 1;
        if (Math.abs(window.scrollY - target) <= 2 || attempts >= maxAttempts) return;
        requestAnimationFrame(tryScroll);
      };
      requestAnimationFrame(tryScroll);
    };
    restore();

    // Save scroll + loadedEnd. No restoredRef gate — we want every
    // scroll captured, and re-saving a stale value before restore is
    // harmless (restore reads once, before it loops).
    let t: ReturnType<typeof setTimeout> | null = null;
    const save = () => {
      try {
        const payload = JSON.stringify({ scrollY: window.scrollY, loadedEnd: loadedEndRef.current });
        sessionStorage.setItem(key, payload);
      } catch { /* quota / private mode */ }
    };
    const onScroll = () => {
      if (t) clearTimeout(t);
      t = setTimeout(save, 100);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("pagehide", save);

    return () => {
      cancelled = true;
      // Intentionally NOT calling save() here. By the time cleanup
      // runs on back-nav, Next.js has already reset window.scrollY=0,
      // and saving that would clobber the snapshot.
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("pagehide", save);
      if (t) clearTimeout(t);
    };
    // Run once per LibraryGrid mount. Filter changes already remount
    // via the page-level key in app/page.tsx.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Scroll to the first row of `targetPage` once it's in the buffer.
  // Pure DOM operation; caller is responsible for ensuring the target
  // page has been loaded.
  const scrollToLoadedPage = useCallback((targetPage: number): boolean => {
    const cols = view === "portrait"
      ? Math.max(4, Math.min(10, settings.gridColumnsPortrait || 6))
      : Math.max(2, Math.min(4, settings.gridColumns || 3));
    const itemIdx = (targetPage - initialPage) * pageSize;
    const rowIdx = Math.floor(itemIdx / cols);
    const handle = virtuosoHandleRef.current;
    if (!handle) return false;
    handle.scrollToIndex({ index: rowIdx, align: "start", behavior: "smooth" });
    return true;
  }, [initialPage, pageSize, view, settings.gridColumns, settings.gridColumnsPortrait]);

  // Append the page just past loadedEnd. Returns true on success, false
  // if there's nothing more to load or the request fails. Shared between
  // the infinite-scroll auto-fetch path, the explicit Load-More button,
  // and the scroll-mode prefetch loop in scrollToPage.
  const appendNextPage = useCallback(async (): Promise<boolean> => {
    if (loadedEnd >= totalPages) return false;
    const next = loadedEnd + 1;
    // Dedupe: a second invocation for the same target while the first
    // is in flight is a no-op. This catches strict-mode double-invoke
    // in dev and Virtuoso firing onEndReached twice for one bottom hit.
    if (fetchInFlightRef.current && lastFetchTargetRef.current === next) {
      return false;
    }
    if (fetchInFlightRef.current) return false;
    fetchInFlightRef.current = true;
    lastFetchTargetRef.current = next;
    setIsFetching(true);
    try {
      const usp = new URLSearchParams(sp.toString());
      usp.set("page", String(next));
      const r = await fetch(`/api/covers?${usp.toString()}`, { cache: "no-store" });
      if (!r.ok) return false;
      const data = (await r.json()) as { items: CardImage[]; page: number; hasMore: boolean };
      if (!Array.isArray(data.items) || data.items.length === 0) return false;
      if (fadeMs > 0) {
        fadeController.addBatch(data.items.map((it) => it.id));
      }
      setExtra((cur) => [...cur, ...data.items]);
      setLoadedEnd(data.page);
      return true;
    } catch {
      return false;
    } finally {
      fetchInFlightRef.current = false;
      setIsFetching(false);
    }
  }, [loadedEnd, sp, totalPages, fadeMs, fadeController]);

  // Auto-fetch path used by Virtuoso's onEndReached. Gated on the
  // infinite-scroll preference. After each successful append we pause
  // until the user scrolls — that breaks the chain where a freshly
  // mounted SSR page has the bottom row near the viewport, causing
  // onEndReached to fire repeatedly and append 3-4 pages back-to-back.
  // The explicit Load-More / prefetch paths bypass this guard via
  // appendNextPage directly.
  const fetchNextPage = useCallback(async () => {
    if (!infiniteScrollEnabled) return;
    if (autoFetchPausedRef.current) return;
    const ok = await appendNextPage();
    if (ok) autoFetchPausedRef.current = true;
  }, [infiniteScrollEnabled, appendNextPage]);

  // Release the auto-fetch pause only on a real user gesture — wheel,
  // touchmove, or a scroll-direction key. The earlier window-scroll
  // listener was too sensitive: programmatic scroll-restoration and
  // browser overflow-anchor adjustments fire scroll events and were
  // bypassing the pause, which let the auto-fetch chain still run
  // 3-4 pages deep on initial mount and after URL nav back to /.
  useEffect(() => {
    if (typeof window === "undefined") return;
    const release = () => { autoFetchPausedRef.current = false; };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "PageDown" || e.key === "ArrowDown" || e.key === "End" || e.key === " " || e.key === "Spacebar") {
        autoFetchPausedRef.current = false;
      }
    };
    window.addEventListener("wheel", release, { passive: true });
    window.addEventListener("touchmove", release, { passive: true });
    window.addEventListener("keydown", onKey);
    return () => {
      window.removeEventListener("wheel", release);
      window.removeEventListener("touchmove", release);
      window.removeEventListener("keydown", onKey);
    };
  }, []);

  // Build the scroll-mode entry point. Backward across the SSR anchor
  // returns false → URL nav. Forward past loadedEnd prefetches one
  // page at a time until the target lands inside the buffer, then
  // scrolls to it. Each loop iteration awaits a real network round-trip
  // — this is the "always scroll, prefetch when needed" behavior.
  const scrollToPageScrollMode = useCallback(async (targetPage: number): Promise<boolean> => {
    if (targetPage < initialPage) return false;
    if (targetPage > totalPages) return false;
    while (targetPage > loadedEndRef.current) {
      const ok = await appendNextPage();
      if (!ok) return false;
    }
    return scrollToLoadedPage(targetPage);
  }, [initialPage, totalPages, appendNextPage, scrollToLoadedPage]);

  // Pick the right Prev/Next handler based on the user's preference.
  // - "url"    → no callback; bar always URL-navs.
  // - "scroll" → prefetch + smooth scroll, URL fallback only on backward.
  const onScrollToPageProp = settings.paginationMode === "scroll" ? scrollToPageScrollMode : undefined;

  // Same-URL nav handler — fires when the bar would push to the page
  // we're already at (e.g. clicking Prev at "Page 5 (scrolled from
  // URL=/)" wants to land on page 1). Resets the appended buffer +
  // scrolls to top so the user sees a real change instead of nothing.
  const handleSamePageNav = useCallback(() => {
    setExtra([]);
    setLoadedEnd(initialPage);
    fadeController.reset();
    autoFetchPausedRef.current = true;
    if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
  }, [initialPage, fadeController]);

  return (
    <>
      <MasonryGrid
        images={allItems}
        view={view}
        infiniteScrollEnabled={infiniteScrollEnabled}
        loadedEnd={loadedEnd}
        totalPages={totalPages}
        onEndReached={fetchNextPage}
        isFetching={isFetching}
        fadeController={fadeController}
        fadeMs={fadeMs}
        pageSize={pageSize}
        ssrAnchorPage={initialPage}
        onVisiblePageChange={setVisiblePage}
        virtuosoHandleRef={virtuosoHandleRef}
      />

      {/* Floating bar — portaled to <body> to escape any ancestor's
          backdrop-filter / transform, which would otherwise trap a
          `position: fixed` child to that ancestor's box. */}
      {mounted && createPortal(
        <div className="fixed inset-x-0 bottom-[12px] z-30 flex justify-center pointer-events-none">
          <div
            className="pointer-events-auto rounded-2xl shadow-2xl px-4 py-2.5 border border-[var(--color-glass-border-strong)] backdrop-blur-2xl"
            style={{ background: "color-mix(in oklch, var(--color-bg-0) 85%, transparent)" }}
          >
            <PaginationBar
              currentPage={visiblePage}
              totalPages={totalPages}
              totalCount={totalCount}
              onScrollToPage={onScrollToPageProp}
              onSamePageNav={handleSamePageNav}
            />
          </div>
        </div>,
        document.body,
      )}
    </>
  );
}