"use client";
import { useRef } from "react";

import gsap from "gsap";
import { useGSAP } from "@gsap/react";

import "./video-scroll.css";

const AnimatedHero = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);

  // Helper function for one-time event listeners
  const once = (el: HTMLElement, event: string, fn: (e: Event) => void) => {
    const onceFn = (e: Event) => {
      el.removeEventListener(event, onceFn as EventListener);
      fn(e);
    };
    el.addEventListener(event, onceFn as EventListener);
    return onceFn;
  };

  useGSAP(() => {
    const video = videoRef.current;
    if (!video) return;

    // iOS compatibility - activate video on touch
    once(document.documentElement, "touchstart", () => {
      video.play();
      video.pause();
    });

    // scroll timeline with pin
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: containerRef.current,
        start: "top top",
        end: "+=2000vh",
        scrub: 1,
        pin: true,
      },
    });

    // Set up video scrubbing once metadata is loaded
    video.onloadedmetadata = () => {
      tl.fromTo(
        video,
        {
          currentTime: 0,
        },
        {
          currentTime: video.duration || 1,
        }
      );
    };

    // Blob URL handling for better performance (optional)
    setTimeout(() => {
      if (video.src) {
        fetch(video.src)
          .then((response) => response.blob())
          .then((response) => {
            const blobURL = URL.createObjectURL(response);
            const currentTime = video.currentTime;

            // Reactivate iOS compatibility
            once(document.documentElement, "touchstart", () => {
              video.play();
              video.pause();
            });

            video.src = blobURL;
            video.currentTime = currentTime + 0.01;
          })
          .catch((error) => {
            console.log(
              "Blob URL creation failed, using original source:",
              error
            );
          });
      }
    }, 1000);
  });

  return (
    <div ref={containerRef} className="scroll-container">
      {/* Video background */}
      <video
        ref={videoRef}
        src="/videos/hero/timelapse-optimized.mp4"
        className="video-background"
        playsInline
        muted
        preload="none"
        poster="/images/home/hero/hero-video-poster.webp"
      />

      {/* Content overlay */}
      <div className="">
        <div className="container mx-auto">
          <h1 className="font-times-sans text-[100px] font-bold mb-4 hero-title uppercase whitespace-pre-line text-white">
            Broaden <br /> Life <br /> Boundaries
          </h1>
        </div>
      </div>
    </div>
  );
};

export default AnimatedHero;