"use client";

import { useEffect, useRef } from "react";

/**
 * ReelDirector — motor de animação "vídeo-ao-rolar" para a página inteira.
 *
 * Contrato (declarativo, via atributos data-*):
 *   [data-reel="left|right|top|bottom|zoom|fade"]
 *       elemento entra em scrub contínuo: rolar p/ baixo avança, p/ cima REBOBINA.
 *   [data-reel-stagger="left|right|top|bottom|zoom|fade"]
 *       container: os FILHOS DIRETOS entram em cascata no mesmo trilho.
 *   data-reel-start="top 88%"  data-reel-end="top 26%"   (opcional: janela do scrub)
 *   data-reel-distance="64"                               (opcional: px de deslocamento)
 *
 * Nunca one-shot — tudo ligado ao progresso do scroll, como o reel do hero.
 * prefers-reduced-motion: nada é inicializado; conteúdo fica no fluxo natural.
 */

type Direction = "left" | "right" | "top" | "bottom" | "zoom" | "fade";

const DISTANCE = 64;

function fromVars(dir: Direction, dist: number) {
  const base = { opacity: 0, x: 0, y: 0, scale: 1, filter: "blur(0px)" };
  if (dir === "left") return { ...base, x: -dist };
  if (dir === "right") return { ...base, x: dist };
  if (dir === "top") return { ...base, y: -dist * 0.75 };
  if (dir === "bottom") return { ...base, y: dist };
  if (dir === "zoom") return { ...base, scale: 1.28, filter: "blur(6px)" };
  return { ...base, scale: 1.02 };
}

const TO_VARS = {
  opacity: 1,
  x: 0,
  y: 0,
  scale: 1,
  filter: "blur(0px)",
  ease: "none",
};

export default function ReelDirector() {
  const alive = useRef(true);

  useEffect(() => {
    alive.current = true;
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches)
      return undefined;

    let teardown = () => {};

    const boot = async () => {
      const [{ gsap }, { ScrollTrigger }] = await Promise.all([
        import("gsap"),
        import("gsap/ScrollTrigger"),
      ]);
      if (!alive.current) return;
      gsap.registerPlugin(ScrollTrigger);

      const ctx = gsap.context(() => {
        const scan = () => {
          for (const el of document.querySelectorAll<HTMLElement>(
            "[data-reel]:not([data-reel-init])",
          )) {
            el.dataset.reelInit = "1";
            const dir = (el.dataset.reel || "bottom") as Direction;
            const dist = Number(el.dataset.reelDistance || DISTANCE);
            gsap.fromTo(el, fromVars(dir, dist), {
              ...TO_VARS,
              scrollTrigger: {
                trigger: el,
                start: el.dataset.reelStart || "top 88%",
                end: el.dataset.reelEnd || "top 26%",
                scrub: 0.6,
              },
            });
          }
          for (const container of document.querySelectorAll<HTMLElement>(
            "[data-reel-stagger]:not([data-reel-init])",
          )) {
            container.dataset.reelInit = "1";
            const dir = (container.dataset.reelStagger || "bottom") as Direction;
            const dist = Number(container.dataset.reelDistance || DISTANCE);
            const children = Array.from(container.children) as HTMLElement[];
            if (children.length === 0) continue;
            gsap.fromTo(
              children,
              fromVars(dir, dist),
              {
                ...TO_VARS,
                stagger: { each: 0.09 },
                scrollTrigger: {
                  trigger: container,
                  start: container.dataset.reelStart || "top 85%",
                  end: container.dataset.reelEnd || "top 25%",
                  scrub: 0.6,
                },
              },
            );
          }
        };

        scan();
        // seções chegam via next/dynamic depois do boot — observa nós novos
        const observer = new MutationObserver(() => scan());
        observer.observe(document.body, { childList: true, subtree: true });

        teardown = () => {
          observer.disconnect();
          ctx.revert();
        };
      });
    };

    void boot();
    return () => {
      alive.current = false;
      teardown();
    };
  }, []);

  return null;
}