import { useEffect, useMemo, useRef, useState } from "react";
import { useLocation, useSearchParams } from "react-router-dom";
import { postJSON } from "../../api";
import { useI18n } from "../../i18n";
import type { PostScope } from "../../types/post";
import { Reveal } from "../../motion";
import { Skeleton } from "../Skeleton";
import { FilterChips } from "./FilterChips";
import { MessageBubble } from "./MessageBubble";
import { useGroupedByDay } from "./hooks/useGroupedByDay";
import { usePostStream } from "./hooks/usePostStream";

export type MessageStreamProps = {
  scope: PostScope;
};

export function MessageStream({ scope }: MessageStreamProps) {
  const { t, lang } = useI18n();
  const [sp, setSp] = useSearchParams();
  const { hash } = useLocation();

  const type = sp.get("type") || "all";
  const q = (sp.get("q") || "").trim();
  const sort = sp.get("sort") || "";

  const params = useMemo(
    () => ({ scope, type, q, sort, lang }),
    [scope, type, q, sort, lang],
  );

  const { items, isLoading, error, hasMore, loadMore, reset } =
    usePostStream(params);
  const groups = useGroupedByDay(items, lang);
  const retryLabel = lang === "zh-CN" ? "重试" : "Retry";

  const sentinelRef = useRef<HTMLDivElement>(null);
  const filterBarRef = useRef<HTMLDivElement>(null);
  const hasMoreRef = useRef(hasMore);
  const isLoadingRef = useRef(isLoading);
  useEffect(() => {
    hasMoreRef.current = hasMore;
  }, [hasMore]);
  useEffect(() => {
    isLoadingRef.current = isLoading;
  }, [isLoading]);

  useEffect(() => {
    if (q) postJSON("/api/search-log", { query: q }).catch(() => {});
  }, [q]);

  useEffect(() => {
    const el = sentinelRef.current;
    if (!el) return;
    const io = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (
            entry.isIntersecting &&
            hasMoreRef.current &&
            !isLoadingRef.current
          ) {
            loadMore();
          }
        }
      },
      // Prefetch the next page well before the sentinel is visible so content
      // is already in place as the user scrolls — no blank gap at the bottom.
      { rootMargin: "1000px" },
    );
    io.observe(el);
    return () => io.disconnect();
  }, [loadMore]);

  // When arriving with a `?post=<id>` query (or legacy `#post-<id>` hash),
  // scroll to that bubble — loading more pages until it shows up — then give
  // it a brief highlight so the user can see where they landed.
  const queryTargetPostId = sp.get("post") || "";
  const hashTargetPostId = hash.startsWith("#post-")
    ? hash.slice("#post-".length)
    : "";
  const targetPostId = queryTargetPostId || hashTargetPostId;
  const [isAligningQueryTarget, setIsAligningQueryTarget] = useState(
    Boolean(queryTargetPostId),
  );
  const handledTargetRef = useRef<string>("");
  const targetScrollTimersRef = useRef<number[]>([]);
  const targetScrollFrameRef = useRef<number | null>(null);

  const clearTargetScrollTimers = () => {
    for (const timer of targetScrollTimersRef.current) {
      window.clearTimeout(timer);
    }
    targetScrollTimersRef.current = [];
    if (targetScrollFrameRef.current !== null) {
      window.cancelAnimationFrame(targetScrollFrameRef.current);
      targetScrollFrameRef.current = null;
    }
  };

  useEffect(() => {
    handledTargetRef.current = "";
    clearTargetScrollTimers();
    setIsAligningQueryTarget(Boolean(queryTargetPostId));
  }, [queryTargetPostId, targetPostId]);

  useEffect(() => clearTargetScrollTimers, []);

  useEffect(() => {
    if (!isAligningQueryTarget) return;
    const preventScroll = (event: Event) => event.preventDefault();
    const preventScrollKeys = (event: KeyboardEvent) => {
      if (
        [
          "ArrowDown",
          "ArrowUp",
          "PageDown",
          "PageUp",
          "Home",
          "End",
          " ",
        ].includes(event.key)
      ) {
        event.preventDefault();
      }
    };
    const html = document.documentElement;
    const previousOverscroll = html.style.overscrollBehavior;
    html.style.overscrollBehavior = "none";
    window.addEventListener("wheel", preventScroll, {
      capture: true,
      passive: false,
    });
    window.addEventListener("touchmove", preventScroll, {
      capture: true,
      passive: false,
    });
    window.addEventListener("keydown", preventScrollKeys, { capture: true });
    return () => {
      html.style.overscrollBehavior = previousOverscroll;
      window.removeEventListener("wheel", preventScroll, { capture: true });
      window.removeEventListener("touchmove", preventScroll, { capture: true });
      window.removeEventListener("keydown", preventScrollKeys, {
        capture: true,
      });
    };
  }, [isAligningQueryTarget]);

  useEffect(() => {
    if (!targetPostId || handledTargetRef.current === targetPostId) return;

    const el = document.getElementById(`post-${targetPostId}`);
    if (el) {
      handledTargetRef.current = targetPostId;
      clearTargetScrollTimers();

      const targetScrollTop = () => {
        const target = document.getElementById(`post-${targetPostId}`);
        if (!target) return null;
        const filterBottom =
          filterBarRef.current?.getBoundingClientRect().bottom ?? 0;
        const targetTop = target.getBoundingClientRect().top + window.scrollY;
        return Math.max(0, targetTop - filterBottom - 12);
      };

      const scrollToTarget = (behavior: ScrollBehavior = "auto") => {
        const top = targetScrollTop();
        if (top === null) return;
        window.scrollTo({ top, left: 0, behavior });
      };

      const boundedSmoothScrollToTarget = () => {
        const firstTarget = targetScrollTop();
        if (firstTarget === null) return;
        const start = window.scrollY;
        const startedAt = performance.now();
        const duration = 520;
        const direction = firstTarget >= start ? 1 : -1;
        const easeOutCubic = (x: number) => 1 - Math.pow(1 - x, 3);

        const tick = (now: number) => {
          const latestTarget = targetScrollTop();
          if (latestTarget === null) return;
          const progress = Math.min(1, (now - startedAt) / duration);
          const ideal = start + (latestTarget - start) * easeOutCubic(progress);
          const next =
            direction >= 0
              ? Math.min(ideal, latestTarget)
              : Math.max(ideal, latestTarget);
          window.scrollTo({ top: next, left: 0, behavior: "auto" });

          if (progress < 1) {
            targetScrollFrameRef.current = window.requestAnimationFrame(tick);
            return;
          }

          scrollToTarget("auto");
          setIsAligningQueryTarget(false);
          targetScrollFrameRef.current = null;
        };

        targetScrollFrameRef.current = window.requestAnimationFrame(tick);
      };

      const prefersReducedMotion = window.matchMedia(
        "(prefers-reduced-motion: reduce)",
      ).matches;

      if (queryTargetPostId) {
        // Query deep-links (`?post=<id>`) usually come from Home cards/list
        // rows. Keep the premium motion, but drive it ourselves so scrolling is
        // bounded to the current target position and cannot visibly pass the
        // target before snapping back. User-driven scroll is temporarily locked
        // by the effect above; programmatic scroll remains allowed.
        targetScrollTimersRef.current = [80].map((ms) =>
          window.setTimeout(boundedSmoothScrollToTarget, ms),
        );
      } else {
        window.requestAnimationFrame(() =>
          scrollToTarget(prefersReducedMotion ? "auto" : "smooth"),
        );

        // Media above the target can finish loading after the first scroll and
        // shift the target downward. Re-align after the smooth animation while
        // stream image/video heights settle, so the final resting point is exact.
        targetScrollTimersRef.current = [900, 1400, 2000].map((ms) =>
          window.setTimeout(() => scrollToTarget("auto"), ms),
        );
      }

      el.classList.add("ark-bubble-highlight");
      window.setTimeout(
        () => el.classList.remove("ark-bubble-highlight"),
        2000,
      );
      return;
    }

    // Not loaded yet — keep paging until it appears or the stream is exhausted.
    if (hasMore && !isLoading) loadMore();
    else if (!hasMore && !isLoading) setIsAligningQueryTarget(false);
  }, [targetPostId, items, hasMore, isLoading, loadMore]);

  const updateParam = (key: string, value: string) => {
    const n = new URLSearchParams(sp);
    if (!value || value === "all") n.delete(key);
    else n.set(key, value);
    setSp(n, { replace: true });
  };

  const isInitialLoad = isLoading && items.length === 0;

  return (
    <div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
      {/* Filters stay pinned below the global header (which shows the page
          name) so users can switch filters while scrolling. */}
      <div
        ref={filterBarRef}
        className="sticky top-[64px] z-30 bg-ark-bg md:top-[70px]"
      >
        <FilterChips type={type} onTypeChange={(v) => updateParam("type", v)} />
      </div>

      <div className="flex flex-col gap-3 px-4 pt-4 md:px-0 md:pt-2">
        {isInitialLoad ? (
          <>
            {Array.from({ length: 10 }).map((_, i) => (
              <div
                key={i}
                className="mx-auto w-full max-w-[358px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
              >
                <Skeleton
                  className={`rounded-2xl ${
                    i % 3 === 0 ? "h-[220px]" : "h-[80px]"
                  }`}
                />
              </div>
            ))}
          </>
        ) : (
          <>
            {groups.map((group) => (
              <div key={group.dayKey} className="flex flex-col gap-3">
                {group.items.map((post, index) => (
                  <Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
                    <MessageBubble post={post} />
                  </Reveal>
                ))}
              </div>
            ))}

            {!isLoading && !error && items.length === 0 ? (
              <p className="py-10 text-center text-sm text-neutral-400">
                {t("noResults")}
              </p>
            ) : null}

            {error ? (
              <div className="my-4 flex items-center justify-between gap-3 rounded-xl border border-red-900 bg-red-950/40 px-4 py-3 text-sm text-red-200">
                <span className="break-all">{error}</span>
                <button
                  type="button"
                  onClick={() => reset()}
                  className="shrink-0 rounded-full border border-red-700 px-3 py-1 text-xs text-red-100 hover:border-red-500"
                >
                  {retryLabel}
                </button>
              </div>
            ) : null}

            {isLoading ? (
              <div className="py-4 text-center text-xs text-neutral-500">…</div>
            ) : null}
          </>
        )}

        <div ref={sentinelRef} aria-hidden className="h-1" />
      </div>
    </div>
  );
}