"use client";

import { useEffect, useRef } from "react";
import { usePathname, useSearchParams } from "next/navigation";

/** Animate the new content after browser history navigation, without delaying it. */
export function BackNavigationTransition() {
  const pathname = usePathname();
  const search = useSearchParams();
  const route = `${pathname}?${search.toString()}`;
  const historyNavigation = useRef(false);
  const previousPath = useRef(route);

  useEffect(() => {
    const onPopState = () => {
      historyNavigation.current =
        `${window.location.pathname}?${new URLSearchParams(window.location.search).toString()}` !==
        previousPath.current;
    };
    window.addEventListener("popstate", onPopState);
    return () => window.removeEventListener("popstate", onPopState);
  }, []);

  useEffect(() => {
    if (previousPath.current === route) return;
    previousPath.current = route;
    const fromHistory = historyNavigation.current;
    historyNavigation.current = false;
    if (
      !fromHistory ||
      window.matchMedia("(prefers-reduced-motion: reduce)").matches
    )
      return;
    const main = document.getElementById("main-content");
    if (!main || typeof main.animate !== "function") return;
    const animation = main.animate(
      [
        { opacity: 0.7, transform: "translateY(8px)" },
        { opacity: 1, transform: "translateY(0)" },
      ],
      { duration: 200, easing: "cubic-bezier(0.23, 1, 0.32, 1)" },
    );
    return () => animation.cancel();
  }, [route]);
  return null;
}