"use client";

import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { usePathname } from "next/navigation";

// Register ScrollTrigger globally
if (typeof window !== "undefined") {
    gsap.registerPlugin(ScrollTrigger);
}

export default function ScrollAnimations() {
    const pathname = usePathname();

    useEffect(() => {
        // Wait briefly for the DOM to render completely
        const timeout = setTimeout(() => {
            const ctx = gsap.context(() => {
                // 1. Reveal Up (with stagger support via separate block if needed)
                const revealUpElements = gsap.utils.toArray(".reveal-up");
                revealUpElements.forEach((el: any) => {
                    gsap.fromTo(el,
                        { y: 80, opacity: 0 },
                        {
                            y: 0,
                            opacity: 1,
                            duration: 1.2,
                            ease: "power4.out",
                            scrollTrigger: {
                                trigger: el,
                                start: "top 85%",
                            }
                        }
                    );
                });

                // 1.5 Staggered Group (Give parent .stagger-group, children .stagger-item)
                const staggerGroups = gsap.utils.toArray(".stagger-group");
                staggerGroups.forEach((group: any) => {
                    const items = group.querySelectorAll(".stagger-item");
                    gsap.fromTo(items,
                        { y: 60, opacity: 0 },
                        {
                            y: 0,
                            opacity: 1,
                            duration: 1,
                            stagger: 0.15,
                            ease: "power3.out",
                            scrollTrigger: {
                                trigger: group,
                                start: "top 80%",
                            }
                        }
                    );
                });

                // 2. Scale Up
                const scaleUpElements = gsap.utils.toArray(".scale-up");
                scaleUpElements.forEach((el: any) => {
                    gsap.fromTo(el,
                        { scale: 0.85, opacity: 0, y: 40 },
                        {
                            scale: 1,
                            opacity: 1,
                            y: 0,
                            duration: 1.2,
                            ease: "expo.out",
                            scrollTrigger: {
                                trigger: el,
                                start: "top 85%",
                            }
                        }
                    );
                });

                // 3. Reveal Left
                const revealLeftElements = gsap.utils.toArray(".reveal-left");
                revealLeftElements.forEach((el: any) => {
                    gsap.fromTo(el,
                        { x: -50, opacity: 0 },
                        {
                            x: 0,
                            opacity: 1,
                            duration: 1,
                            ease: "power3.out",
                            scrollTrigger: {
                                trigger: el,
                                start: "top 85%",
                            }
                        }
                    );
                });

                // 4. Reveal Right
                const revealRightElements = gsap.utils.toArray(".reveal-right");
                revealRightElements.forEach((el: any) => {
                    gsap.fromTo(el,
                        { x: 50, opacity: 0 },
                        {
                            x: 0,
                            opacity: 1,
                            duration: 1,
                            ease: "power3.out",
                            scrollTrigger: {
                                trigger: el,
                                start: "top 85%",
                            }
                        }
                    );
                });

                // Refresh ScrollTrigger to ensure correct positions
                ScrollTrigger.refresh();
            });

            return () => ctx.revert();
        }, 100);

        return () => clearTimeout(timeout);
    }, [pathname]);

    return null;
}