"use client";

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

/** Animate newly committed pages without delaying navigation. */
export function BackNavigationTransition() {
  const pathname = usePathname();
  const search = useSearchParams();
  // Documentation pages share a pathname; other query changes are filters or
  // state updates and should not animate the entire page.
  const route =
    pathname === "/docs"
      ? `${pathname}?page=${search.get("page") ?? "welcome"}`
      : pathname;
  const previousPath = useRef(route);

  useLayoutEffect(() => {
    if (previousPath.current === route) return;
    previousPath.current = route;
    if (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;
}