/* global React */
const { useState: useHS, useRef: useHR, useEffect: useHE } = React;

// ---- one clip card -------------------------------------------------------
function ClipCard({ clip, index, onOpen }) {
  const vref = useHR(null);
  const [ready, setReady] = useHS(false);

  const hover = (play) => {
    const v = vref.current;
    if (!v) return;
    if (play) { v.currentTime = 0; const p = v.play(); if (p) p.catch(() => {}); }
    else { v.pause(); }
  };

  return (
    <button className="clip" onClick={() => onOpen(index)}
      onMouseEnter={() => hover(true)} onMouseLeave={() => hover(false)}>
      <span className="clip__frame">
        <video ref={vref} className="clip__vid" muted loop playsInline preload="metadata"
          src={clip.src + "#t=0.4"} onLoadedData={() => setReady(true)}
          style={{ opacity: ready ? 1 : 0 }} />
        <span className="clip__shade" />
        <span className="clip__play" aria-hidden="true">
          <svg viewBox="0 0 24 24" width="22" height="22"><path d="M8 5v14l11-7z" fill="currentColor"/></svg>
        </span>
        <span className="clip__no">{String(index + 1).padStart(2, "0")}</span>
        <span className="clip__live">CLIP</span>
      </span>
      <span className="clip__title">{clip.title}</span>
    </button>
  );
}

// ---- lightbox player -----------------------------------------------------
function ClipModal({ index, clips, onClose, onNav }) {
  const clip = clips[index];
  const vref = useHR(null);

  useHE(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNav(1);
      if (e.key === "ArrowLeft") onNav(-1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose, onNav]);

  return (
    <div className="vmodal" onClick={onClose}>
      <button className="vmodal__nav vmodal__nav--prev" onClick={(e) => { e.stopPropagation(); onNav(-1); }} aria-label="Previous clip">
        <svg viewBox="0 0 24 24" width="26" height="26"><path d="M15 5l-7 7 7 7" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </button>

      <div className="vmodal__stage" onClick={(e) => e.stopPropagation()}>
        <div className="vmodal__bar">
          <span className="vmodal__count">{String(index + 1).padStart(2, "0")} / {String(clips.length).padStart(2, "0")}</span>
          <span className="vmodal__title">{clip.title}</span>
          <button className="vmodal__x" onClick={onClose} aria-label="Close">
            <svg viewBox="0 0 20 20" width="20" height="20"><path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
          </button>
        </div>
        <video key={clip.id} ref={vref} className="vmodal__vid" src={clip.src}
          controls autoPlay loop playsInline />
      </div>

      <button className="vmodal__nav vmodal__nav--next" onClick={(e) => { e.stopPropagation(); onNav(1); }} aria-label="Next clip">
        <svg viewBox="0 0 24 24" width="26" height="26"><path d="M9 5l7 7-7 7" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </button>
    </div>
  );
}

// ---- highlights section --------------------------------------------------
function Highlights() {
  const T = window.TOURNAMENT;
  const [clips, setClips] = useHS(T.CLIPS || []);
  const [open, setOpen] = useHS(null);
  const [source, setSource] = useHS("static");

  // Optionally pull the live clip list from a Cloudflare Worker (window.CLIPS_MANIFEST_URL).
  // Falls back silently to the built-in list if unset or unreachable.
  useHE(() => {
    const url = window.CLIPS_MANIFEST_URL;
    if (!url) return;
    let alive = true;
    fetch(url)
      .then((r) => (r.ok ? r.json() : Promise.reject(r.status)))
      .then((data) => {
        if (!alive || !Array.isArray(data) || !data.length) return;
        setClips(data.map((c, i) => ({
          id: c.id || "r" + i,
          title: c.title || ("Clip " + String(i + 1).padStart(2, "0")),
          src: c.src || c.url,
        })).filter((c) => c.src));
        setSource("bucket");
      })
      .catch(() => { /* keep fallback */ });
    return () => { alive = false; };
  }, []);

  if (!clips.length) return null;
  const nav = (d) => setOpen((i) => (i == null ? i : (i + d + clips.length) % clips.length));

  return (
    <section className="block">
      <div className="block__head">
        <h2 className="block__title">Highlights</h2>
        <span className="block__sub">{clips.length} clips · tap to play{source === "bucket" ? " · live" : ""}</span>
      </div>
      <div className="clips">
        {clips.map((c, i) => <ClipCard key={c.id} clip={c} index={i} onOpen={setOpen} />)}
      </div>
      {open != null && <ClipModal index={open} clips={clips} onClose={() => setOpen(null)} onNav={nav} />}
    </section>
  );
}

Object.assign(window, { Highlights, ClipCard, ClipModal });