/* ScrollVideo — full-bleed HLS video that scrubs on scroll. */
const { useEffect, useRef, useState } = React;

function ScrollVideo({ src, className }) {
  const wrapperRef = useRef(null);
  const videoRef = useRef(null);
  const [progress, setProgress] = useState(0);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;
    let hls;

    const isSafariNative = video.canPlayType('application/vnd.apple.mpegurl');

    if (window.Hls && window.Hls.isSupported() && !isSafariNative) {
      hls = new window.Hls({
        maxBufferLength: 120,
        maxMaxBufferLength: 600,
        maxBufferSize: 200 * 1024 * 1024,
        startPosition: 0,
        capLevelToPlayerSize: false,
        startLevel: -1,
        autoStartLoad: true,
      });
      hls.loadSource(src);
      hls.attachMedia(video);
      hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
        const maxLevel = hls.levels.length - 1;
        hls.currentLevel = maxLevel;
        hls.startLevel = maxLevel;
      });
      hls.on(window.Hls.Events.FRAG_BUFFERED, () => {
        if (!video.duration) return;
        const buffered = video.buffered.length ? video.buffered.end(video.buffered.length - 1) : 0;
        const pct = Math.min(100, Math.round((buffered / video.duration) * 100));
        setProgress(pct);
      });
    } else {
      video.src = src;
    }

    const onCanPlay = () => setReady(true);
    const onLoadedMeta = () => setReady(true);
    video.addEventListener('canplay', onCanPlay);
    video.addEventListener('loadedmetadata', onLoadedMeta);

    // Fallback: dismiss loading overlay after 4s no matter what,
    // so the page is usable even if HLS is blocked / slow.
    const fallbackTimer = setTimeout(() => setReady(true), 4000);

    // If hls.js errors, also dismiss
    if (hls) {
      hls.on(window.Hls.Events.ERROR, (_, data) => {
        if (data && data.fatal) setReady(true);
      });
      hls.on(window.Hls.Events.MANIFEST_PARSED, () => {
        // manifest parsed → it's safe to reveal UI even if frames haven't decoded
        setTimeout(() => setReady(true), 500);
      });
    }

    // Scroll-to-seek with throttling
    let currentTarget = 0;
    let seekPending = false;
    const doSeek = () => {
      if (!video.duration) return;
      if (video.seeking) {
        seekPending = true;
        return;
      }
      try { video.currentTime = currentTarget; } catch (e) {}
    };
    const onSeeked = () => {
      if (seekPending) {
        seekPending = false;
        doSeek();
      }
    };
    video.addEventListener('seeked', onSeeked);

    let trigger;
    // Scroll-scrub disabled — video now autoplays + loops as ambient background.
    // (Previously: ScrollTrigger updated video.currentTime from scroll progress.)

    // Mouse parallax on wrapper
    const onMove = (e) => {
      if (!wrapperRef.current) return;
      const moveX = (e.clientX / window.innerWidth - 0.5) * 2;
      const moveY = (e.clientY / window.innerHeight - 0.5) * 2;
      window.gsap && window.gsap.to(wrapperRef.current, {
        x: moveX * -30,
        y: moveY * -30,
        duration: 1.5,
        ease: 'power2.out',
      });
    };
    window.addEventListener('mousemove', onMove);

    return () => {
      clearTimeout(fallbackTimer);
      video.removeEventListener('canplay', onCanPlay);
      video.removeEventListener('loadedmetadata', onLoadedMeta);
      video.removeEventListener('seeked', onSeeked);
      window.removeEventListener('mousemove', onMove);
      if (trigger) trigger.kill();
      if (hls) hls.destroy();
    };
  }, [src]);

  return (
    <>
      <div
        ref={wrapperRef}
        className={className}
        style={{
          position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
          zIndex: 0, transform: 'scale(1.05)', transformOrigin: 'center',
        }}
      >
        <video
          ref={videoRef}
          autoPlay
          muted
          loop
          playsInline
          crossOrigin="anonymous"
          style={{ width: '100%', height: '100%', objectFit: 'cover', transform: 'scale(1.35)' }}
        />
        {/* Subtle vignette so text stays legible */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 100%)',
          pointerEvents: 'none',
        }} />
      </div>
    </>
  );
}

window.ScrollVideo = ScrollVideo;