"use client";

import { motion, useReducedMotion } from "framer-motion";
import { usePathname } from "next/navigation";

import { screenVariants, tabVariants } from "@/lib/motion";

/**
 * Direction-aware screen entrance for the page content column.
 *
 * Deeper paths (library → deck, library → create/homework) slide in from the
 * right; going back slides from the left; same-depth switches crossfade.
 * The wrapper only ever wraps the scrolling content column — fixed chrome
 * (tab bar, sheets) stays outside it, so a transform can never capture it.
 *
 * Note: the App Router unmounts the outgoing page immediately, so this is an
 * entrance animation (exits animate for in-page elements via AnimatePresence,
 * e.g. list items).
 */

/** Module-level so the direction survives the per-route remount. */
let lastPath: string | null = null;

function depth(path: string): number {
  if (path === "/") return 0;
  return path.split("/").filter(Boolean).length;
}

export function RouteTransition({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const reduceMotion = useReducedMotion();

  const previous = lastPath;
  lastPath = pathname;

  const isTabSwitch = previous !== null && depth(previous) === depth(pathname) && previous !== pathname;
  const direction: 1 | -1 =
    previous === null || depth(pathname) >= depth(previous) ? 1 : -1;
  const variants = isTabSwitch ? tabVariants(!!reduceMotion) : screenVariants(direction, !!reduceMotion);

  return (
    <motion.div initial="initial" animate="animate" variants={variants}>
      {children}
    </motion.div>
  );
}