"use client";

import { useEffect } from "react";

/**
 * 用 sessionStorage 在同一标签页内保存/恢复滚动位置。
 *
 * 用法:在希望被记忆的页面顶层 useScrollRestore("home")。
 * - mount 时,如果有保存值,把 window 滚动到对应 y 并清除标记
 * - 用户滚动时,节流写入当前 scrollY
 * - 切到其他路由后再回来 → mount 重跑 → 恢复
 *
 * 注意:
 * - sessionStorage 跨标签页隔离,所以不会跨窗口"漏读"
 * - 用 rAF 节流,避免每帧写入卡顿
 * - 用 requestAnimationFrame 在下一帧恢复,确保 DOM 已经渲染出真实高度
 */
export function useScrollRestore(key: string) {
  useEffect(() => {
    const storageKey = `scroll:${key}`;

    // 恢复 · 用 rAF 等 DOM 真正布局完成后再滚
    const saved = sessionStorage.getItem(storageKey);
    if (saved) {
      const y = parseInt(saved, 10);
      if (!Number.isNaN(y) && y > 0) {
        // 两次 rAF 跨过 next.js hydration/挂载首帧,DOM 高度才稳定
        requestAnimationFrame(() => {
          requestAnimationFrame(() => {
            // 临时禁用 scroll-snap-type:首页用 "y mandatory",
            // 直接 scrollTo 到 snap 点之外的位置会被浏览器强制吸到最近 snap 点。
            const html = document.documentElement;
            const prevSnap = html.style.scrollSnapType;
            html.style.scrollSnapType = "none";
            window.scrollTo({ top: y, behavior: "auto" });
            // 多等一帧让 scrollTo 落定再恢复 snap
            requestAnimationFrame(() => {
              html.style.scrollSnapType = prevSnap;
            });
          });
        });
      }
    }

    // 保存 · scroll 事件高频,用 rAF 合并
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        sessionStorage.setItem(storageKey, String(window.scrollY));
        raf = 0;
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });

    return () => {
      window.removeEventListener("scroll", onScroll);
      if (raf) cancelAnimationFrame(raf);
      // unmount 时再保存一次最终值
      sessionStorage.setItem(storageKey, String(window.scrollY));
    };
  }, [key]);
}
