// HeroVideo.jsx — case-study hero video with mute and fullscreen toggles.
// Used by every CaseStudy*.jsx HERO MEDIA section. Defaults to muted/autoplay/loop.
// Renders <video> + a small button island; the parent provides the sized
// rounded wrapper (position: relative) and any CornerMeta overlays.

;(function () {

const { useState, useRef, useEffect } = React;

function HeroVideo({ src, style, ...rest }) {
  const ref = useRef(null);
  const [muted, setMuted] = useState(true);
  const [fullscreen, setFullscreen] = useState(false);
  const fullscreenRef = useRef(false);
  fullscreenRef.current = fullscreen;

  const toggleMute = () => {
    const v = ref.current;
    if (!v) return;
    const next = !muted;
    v.muted = next;
    setMuted(next);
  };

  const toggleFullscreen = () => {
    const v = ref.current;
    if (!v) return;
    const target = v.parentElement || v;
    const fsEl = document.fullscreenElement || document.webkitFullscreenElement;

    if (fsEl) {
      const exit = document.exitFullscreen || document.webkitExitFullscreen;
      if (exit) exit.call(document);
      return;
    }

    // Entering fullscreen — unmute so audio plays. Must happen
    // synchronously inside the gesture handler so iOS allows it.
    v.muted = false;
    setMuted(false);

    // Try element-level fullscreen first so our custom controls and
    // CornerMeta stay visible. Falls back to iOS Safari's video-only
    // fullscreen, which uses native iOS controls.
    const req = target.requestFullscreen || target.webkitRequestFullscreen;
    if (req) {
      try {
        const p = req.call(target);
        if (p && typeof p.catch === 'function') {
          p.catch(() => { if (v.webkitEnterFullscreen) v.webkitEnterFullscreen(); });
        }
        return;
      } catch (_) { /* fall through to iOS path */ }
    }
    if (v.webkitEnterFullscreen) v.webkitEnterFullscreen();
  };

  useEffect(() => {
    const v = ref.current;
    const onDocChange = () => {
      setFullscreen(!!(document.fullscreenElement || document.webkitFullscreenElement));
    };
    const onVidEnter = () => setFullscreen(true);
    const onVidExit = () => {
      setFullscreen(false);
      // iOS pauses the video on fullscreen exit. Resume playback —
      // muted so the autoplay policy lets us call play() without a
      // fresh gesture. Viewer can tap the speaker icon to bring
      // sound back.
      if (v) {
        v.muted = true;
        setMuted(true);
        const p = v.play();
        if (p && typeof p.catch === 'function') p.catch(() => {});
      }
    };
    document.addEventListener('fullscreenchange', onDocChange);
    document.addEventListener('webkitfullscreenchange', onDocChange);
    if (v) {
      v.addEventListener('webkitbeginfullscreen', onVidEnter);
      v.addEventListener('webkitendfullscreen', onVidExit);
    }
    return () => {
      document.removeEventListener('fullscreenchange', onDocChange);
      document.removeEventListener('webkitfullscreenchange', onDocChange);
      if (v) {
        v.removeEventListener('webkitbeginfullscreen', onVidEnter);
        v.removeEventListener('webkitendfullscreen', onVidExit);
      }
    };
  }, []);

  // Auto-mute when the hero video scrolls out of the viewport, so
  // audio doesn't keep playing in the background. Skipped while in
  // fullscreen, since the video element's layout position is
  // unchanged there even though it's visually filling the screen.
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) return;
        if (fullscreenRef.current) return;
        if (!v.muted) {
          v.muted = true;
          setMuted(true);
        }
      });
    }, { threshold: 0 });
    io.observe(v);
    return () => io.disconnect();
  }, []);

  const btnBase = {
    width: 36, height: 36, padding: 0,
    border: '1px solid rgba(255,255,255,0.25)',
    background: 'rgba(0,0,0,0.45)',
    color: '#fff',
    borderRadius: 8,
    cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    backdropFilter: 'blur(6px)',
    WebkitBackdropFilter: 'blur(6px)',
    transition: 'background 200ms cubic-bezier(0.2,0.6,0.2,1), border-color 200ms cubic-bezier(0.2,0.6,0.2,1), transform 200ms cubic-bezier(0.2,0.6,0.2,1)',
  };
  const onEnter = (e) => {
    e.currentTarget.style.background = 'rgba(0,0,0,0.72)';
    e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)';
  };
  const onLeave = (e) => {
    e.currentTarget.style.background = 'rgba(0,0,0,0.45)';
    e.currentTarget.style.borderColor = 'rgba(255,255,255,0.25)';
  };
  const onDown = (e) => { e.currentTarget.style.transform = 'scale(0.94)'; };
  const onUp = (e) => { e.currentTarget.style.transform = 'scale(1)'; };

  return (
    <>
      <video
        ref={ref}
        src={src}
        autoPlay
        loop
        muted
        playsInline
        style={{ width: '100%', height: 'auto', display: 'block', ...(style || {}) }}
        {...rest}
      />
      <div style={{
        position: 'absolute', bottom: 12, left: 12,
        display: 'flex', gap: 8, zIndex: 2,
      }}>
        <button onClick={toggleMute}
          aria-label={muted ? 'Unmute' : 'Mute'}
          style={btnBase}
          onMouseEnter={onEnter} onMouseLeave={onLeave}
          onMouseDown={onDown} onMouseUp={onUp}>
          <span className="ak-icon" style={{ fontSize: 20 }}>
            {muted ? 'volume_off' : 'volume_up'}
          </span>
        </button>
        <button onClick={toggleFullscreen}
          aria-label={fullscreen ? 'Exit fullscreen' : 'Enter fullscreen'}
          style={btnBase}
          onMouseEnter={onEnter} onMouseLeave={onLeave}
          onMouseDown={onDown} onMouseUp={onUp}>
          <span className="ak-icon" style={{ fontSize: 20 }}>
            {fullscreen ? 'fullscreen_exit' : 'fullscreen'}
          </span>
        </button>
      </div>
    </>
  );
}

window.HeroVideo = HeroVideo;

})();