// ZION FireballReels — mixed-media coverflow for the Fireball page.
// Slides can be a video reel ({ video, poster }) or a still photo ({ img }).
// Reels: center plays muted; tap to expand with sound; click anywhere outside
// (or Esc) closes it — same behaviour as the Events showcase. Photos just sit
// in the coverflow (no play badge, no expand). Drag / dots to move.
function FireballReels({ slides }) {
  const PREVIEW_MS = 5000;
  const n = slides.length;
  const [center, setCenter] = React.useState(0);
  const [expanded, setExpanded] = React.useState(false);
  const [paused, setPaused] = React.useState(false);
  const [drag, setDrag] = React.useState({ active: false, dx: 0 });
  const videoRef = React.useRef(null);
  const startX = React.useRef(0);
  const moved = React.useRef(false);
  const active = React.useRef(false);
  const dxRef = React.useRef(0);

  const centerSlide = slides[center];
  const centerIsVideo = !!(centerSlide && centerSlide.video);

  const next = () => setCenter((c) => (c + 1) % n);
  React.useEffect(() => { setExpanded(false); }, [center]);

  // auto-advance the preview (paused while expanded / dragging / hovered)
  React.useEffect(() => {
    if (expanded || drag.active || paused) return;
    const t = setTimeout(next, PREVIEW_MS);
    return () => clearTimeout(t);
  }, [center, expanded, drag.active, paused, n]);

  // muted-preview playback for a video center
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.loop = !expanded;
    if (!expanded) { v.muted = true; v.defaultMuted = true; const p = v.play(); if (p && p.catch) p.catch(() => {}); }
  }, [expanded, center]);

  // expanded reel: click outside the focused card (or Esc) closes it
  React.useEffect(() => {
    if (!expanded) return;
    const closeIfOutside = (e) => {
      const card = e.target && e.target.closest ? e.target.closest('[data-fr-index]') : null;
      const idx = card ? Number(card.getAttribute('data-fr-index')) : -1;
      if (idx !== center) setExpanded(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setExpanded(false); };
    document.addEventListener('pointerdown', closeIfOutside, true);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('pointerdown', closeIfOutside, true);
      document.removeEventListener('keydown', onKey);
    };
  }, [expanded, center]);

  const onPointerDown = (e) => {
    try { e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); } catch (_) {}
    active.current = true; startX.current = e.clientX; moved.current = false; dxRef.current = 0;
    setDrag({ active: true, dx: 0 });
  };
  const onPointerMove = (e) => {
    if (!active.current) return;
    const dx = e.clientX - startX.current; dxRef.current = dx;
    if (Math.abs(dx) > 6) moved.current = true;
    setDrag((d) => ({ ...d, dx }));
  };
  const onPointerUp = (e) => {
    if (!active.current) return;
    active.current = false;
    const dx = dxRef.current;
    if (moved.current) {
      const steps = Math.round(-dx / 150);
      if (steps !== 0) setCenter((c) => (c + steps + n * 10) % n);
      else if (Math.abs(dx) > 45) setCenter((c) => (c + (dx > 0 ? -1 : 1) + n) % n);
    } else {
      const el = document.elementFromPoint(e.clientX, e.clientY);
      const card = el && el.closest ? el.closest('[data-fr-index]') : null;
      const idx = card ? Number(card.getAttribute('data-fr-index')) : -1;
      if (idx === center) {
        if (centerIsVideo) {
          const v = videoRef.current;
          if (!expanded) { if (v) { v.muted = false; v.currentTime = 0; const p = v.play(); if (p && p.catch) p.catch(() => {}); } setExpanded(true); }
          else { if (v) v.muted = true; setExpanded(false); }
        }
      } else if (idx >= 0) setCenter(idx);
    }
    setDrag({ active: false, dx: 0 });
  };

  const offsetOf = (i) => {
    let d = i - center;
    if (d > n / 2) d -= n;
    if (d < -n / 2) d += n;
    return d;
  };

  return (
    <section style={{ position: 'relative', width: '100%', marginTop: 80, marginBottom: 24 }}>
      <div style={{ textAlign: 'center', marginBottom: 30 }}>
        <div style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: '#F7591F', marginBottom: 10 }}>The Fireball</div>
        <h2 style={{ fontFamily: 'var(--font-script)', fontStyle: 'italic', textTransform: 'uppercase', fontSize: 'clamp(40px, 6vw, 76px)', lineHeight: 0.95, margin: 0, color: '#fff' }}>In action</h2>
      </div>

      <div
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={onPointerUp}
        onPointerCancel={onPointerUp}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        style={{
          position: 'relative', width: '100%', height: 'clamp(400px, 52vw, 580px)',
          perspective: '1200px', cursor: drag.active ? 'grabbing' : 'grab',
          touchAction: 'pan-y', userSelect: 'none',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%)',
          maskImage: 'linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%)',
        }}
      >
        {slides.map((s, i) => {
          const off = offsetOf(i);
          const o = off + drag.dx / 150;
          const ao = Math.abs(o);
          const x = o * 120;
          const zz = -ao * 170;
          const rotY = -Math.max(-1, Math.min(1, o)) * 50;
          const scale = Math.max(0.6, 1 - ao * 0.12);
          const opacity = ao > 3.2 ? 0 : 1;
          const isCenter = Math.round(off) === 0;
          const focused = expanded && isCenter;
          const isVideo = !!s.video;
          return (
            <div key={i} data-fr-index={i}
              style={{
                position: 'absolute', left: '50%', top: '50%',
                width: 'clamp(185px, 21vw, 285px)', aspectRatio: '9 / 16',
                transform: `translate(-50%, -50%) translate3d(${x}px, 0, ${zz}px) rotateY(${rotY}deg) scale(${focused ? scale * 1.05 : scale})`,
                transformStyle: 'preserve-3d',
                opacity: isCenter ? 1 : opacity * 0.85,
                filter: (!isCenter && !drag.active) ? 'brightness(0.6)' : 'none',
                zIndex: focused ? 200 : (100 - Math.round(ao * 10)),
                transition: drag.active ? 'none' : 'transform 620ms cubic-bezier(0.16,1,0.3,1), opacity 420ms, filter 420ms',
                borderRadius: 16, overflow: 'hidden', background: '#141414', cursor: 'pointer',
                boxShadow: isCenter
                  ? (focused
                    ? '0 40px 90px rgba(0,0,0,0.7), 0 0 0 2px rgba(247,89,31,0.8), 0 0 75px rgba(247,89,31,0.6)'
                    : '0 30px 70px rgba(0,0,0,0.6), 0 0 0 1.5px rgba(247,89,31,0.65), 0 0 52px rgba(247,89,31,0.45)')
                  : '0 16px 40px rgba(0,0,0,0.55), 0 0 24px rgba(247,89,31,0.2)',
              }}
            >
              {isCenter && isVideo ? (
                <video ref={videoRef} key={'frv-' + center} src={s.video} poster={s.poster}
                  autoPlay muted playsInline preload="auto"
                  onEnded={() => { if (expanded) next(); }}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', pointerEvents: 'none' }} />
              ) : (
                <img src={isVideo ? s.poster : s.img} alt="" draggable={false}
                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block', pointerEvents: 'none' }} />
              )}
              <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.42) 100%)' }} />

              {isCenter && isVideo && !expanded && (
                <div style={{
                  position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)',
                  width: 54, height: 54, borderRadius: '50%', background: 'rgba(247,89,31,0.92)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 0 24px rgba(247,89,31,0.45)', pointerEvents: 'none',
                }}>
                  <svg width="17" height="21" viewBox="0 0 22 26" fill="#fff" aria-hidden="true"><path d="M0 0 L22 13 L0 26 Z" /></svg>
                </div>
              )}
            </div>
          );
        })}
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 26 }}>
        {slides.map((_, idx) => (
          <button key={idx} onClick={() => setCenter(idx)} aria-label={`Show item ${idx + 1}`}
            style={{
              width: idx === center ? 28 : 8, height: 8, borderRadius: 999,
              background: idx === center ? '#F7591F' : 'rgba(255,255,255,0.3)',
              border: 'none', cursor: 'pointer', padding: 0,
              transition: 'width 320ms cubic-bezier(0.16,1,0.3,1), background 220ms',
            }} />
        ))}
      </div>
    </section>
  );
}

window.FireballReels = FireballReels;