"use client";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import { SplitText } from "gsap/all";
import { useEffect, useRef } from "react";
import AnimatedTitle from "./AnimatedTitle";

const ArchitecturalRevolution = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const titlesRef = useRef<HTMLDivElement>(null);
  const scrollTriggersRef = useRef<ScrollTrigger[]>([]);
  const splitTextsRef = useRef<SplitText[]>([]);

  useEffect(() => {
    const section = sectionRef.current;
    const titles = titlesRef.current;

    if (!section || !titles || typeof window === "undefined") return;

    // Define each title individually
    const firstTitleSplit = SplitText.create(".first-title", {
      type: "chars lines",
    });

    const secondTitleSplit = SplitText.create(".second-title", {
      type: "chars lines",
    });

    const thirdTitleSplit = SplitText.create(".third-title", {
      type: "chars lines",
    });

    const fourthTitleSplit = SplitText.create(".fourth-title", {
      type: "chars lines ",
    });

    // Store SplitText instances for cleanup
    splitTextsRef.current = [
      firstTitleSplit,
      secondTitleSplit,
      thirdTitleSplit,
      fourthTitleSplit,
    ];

    // Set initial color state for all characters to prevent flash effect
    gsap.set(firstTitleSplit.chars, { color: "#fff", opacity: 0 });
    gsap.set(secondTitleSplit.chars, { color: "#fff", opacity: 0 });
    gsap.set(thirdTitleSplit.chars, { color: "#fff", opacity: 0 });
    gsap.set(fourthTitleSplit.chars, { color: "#fff", opacity: 0 });

    // Apply color animations with individual ScrollTriggers
    const firstTitleTween = gsap.to(firstTitleSplit.chars, {
      color: "#fff",
      opacity: 1,
      stagger: 0.2,
      ease: "power1.inOut",
      scrollTrigger: {
        trigger: ".revolution-section",
        start: "top center",
        end: "30% center",
        scrub: 1.5,
      },
    });

    const secondTitleTween = gsap.to(secondTitleSplit.chars, {
      color: "#fff",
      opacity: 1,
      stagger: 0.2,
      ease: "power1.inOut",
      scrollTrigger: {
        trigger: ".first-title",
        start: "top center",
        end: "top 40%",
        scrub: 1.5,
      },
    });

    const thirdTitleTween = gsap.to(thirdTitleSplit.chars, {
      color: "#fff",
      opacity: 1,
      stagger: 0.2,
      ease: "power1.inOut",
      scrollTrigger: {
        trigger: ".second-title",
        start: "top center",
        end: "bottom center",
        scrub: true,
      },
    });

    const fourthTitleTween = gsap.to(fourthTitleSplit.chars, {
      color: "#fff",
      opacity: 1,
      stagger: 0.2,
      ease: "power1.inOut",
      scrollTrigger: {
        trigger: ".third-title",
        start: "top 60%",
        end: "bottom 60%",
        scrub: true,
      },
    });

    // Store ScrollTrigger instances for cleanup
    if (firstTitleTween.scrollTrigger) {
      scrollTriggersRef.current.push(firstTitleTween.scrollTrigger);
    }
    if (secondTitleTween.scrollTrigger) {
      scrollTriggersRef.current.push(secondTitleTween.scrollTrigger);
    }
    if (thirdTitleTween.scrollTrigger) {
      scrollTriggersRef.current.push(thirdTitleTween.scrollTrigger);
    }
    if (fourthTitleTween.scrollTrigger) {
      scrollTriggersRef.current.push(fourthTitleTween.scrollTrigger);
    }

    // Cleanup function
    return () => {
      // Kill all ScrollTriggers
      scrollTriggersRef.current.forEach((st) => {
        if (st) st.kill();
      });
      scrollTriggersRef.current = [];

      // Revert all SplitText instances
      splitTextsRef.current.forEach((split) => {
        if (split) split.revert();
      });
      splitTextsRef.current = [];
    };
  }, []); // Empty dependency array - no re-renders on resize

  return (
    <section
      ref={sectionRef}
      className="lg:min-h-dvh bg-black relative overflow-hidden revolution-section"
    >
      <div>
        <video
          src="/videos/hero/pink-glow.mp4"
          className="absolute right-0 bottom-5 xl:-right-12 xl:-bottom-7 w-fit opacity-80 lg:opacity-60 2xl:opacity-50 scale-125 md:scale-110 lg:scale-100 2xl:scale-100 2xl:min-[1921px]:scale-150"
          autoPlay
          muted
          loop
        />
      </div>

      <div className="container mx-auto">
        <div
          ref={titlesRef}
          className="px-4 md:px-8 2xl:px-0 pt-32 pb-32 space-y-7"
        >
          <AnimatedTitle position="right" animationClass="first-title">
            PIONEERING BANGLADESH&apos;S
          </AnimatedTitle>
          <AnimatedTitle position="left" animationClass="second-title">
            REAL ESTATE
          </AnimatedTitle>
          <AnimatedTitle position="center" animationClass="third-title">
            INDUSTRY
          </AnimatedTitle>
          <AnimatedTitle position="right" animationClass="fourth-title">
            SINCE 1996
          </AnimatedTitle>
        </div>
      </div>
    </section>
  );
};

export default ArchitecturalRevolution;