const { useState: useWatchState, useRef: useWatchRef, useEffect: useWatchEffect } = React;

// Evergreen, public continuous livestreams + widely-embedded public music videos.
// Swap these IDs for the club's own YouTube uploads once they're ready.
const CLIPS = [
  {
    id: 'jfKfPfyJRdk',
    title: 'Late-night loop · study / produce',
    who: 'playlist · what the room sounds like at 1am',
    tag: 'LOFI LIVE',
    accent: 'var(--c1)',
  },
  {
    id: 'rUxyKA_-grg',
    title: 'Chillhop radio · homework beats',
    who: 'running on the clubroom TV',
    tag: 'HIP-HOP LIVE',
    accent: 'var(--c2)',
  },
  {
    id: 'DWcJFNfaw9c',
    title: 'Synth jam · warm patches',
    who: 'reference jam · modular + OP-1',
    tag: 'SYNTH',
    accent: 'var(--c4)',
  },
  {
    id: '4xDzrJKXOOY',
    title: 'Open decks · last semester',
    who: 'attendee phone clip · unofficial',
    tag: 'OPEN DECKS',
    accent: 'var(--c3)',
  },
];

function Embed({ clip, autoplay, muted = true, active }) {
  // Use youtube-nocookie so Privacy Enhanced Mode prevents tracking cookies.
  const params = new URLSearchParams({
    autoplay: autoplay ? '1' : '0',
    mute: muted ? '1' : '0',
    loop: '1',
    playlist: clip.id, // required for loop=1 to work
    modestbranding: '1',
    rel: '0',
    playsinline: '1',
    controls: '1',
  });
  const src = `https://www.youtube-nocookie.com/embed/${clip.id}?${params.toString()}`;
  return (
    <div className={"yt-frame" + (active ? " active" : "")} style={{ '--accent': clip.accent }}>
      <div className="yt-chrome">
        <span className="yt-dot" />
        <span className="yt-dot" />
        <span className="yt-dot" />
        <span className="yt-tag">● {clip.tag}</span>
      </div>
      <div className="yt-hold">
        <iframe
          src={src}
          title={clip.title}
          loading="lazy"
          allow="autoplay; encrypted-media; picture-in-picture"
          allowFullScreen
          referrerPolicy="strict-origin-when-cross-origin"
        />
      </div>
      <div className="yt-caption">
        <b>{clip.title}</b>
        <span>{clip.who}</span>
      </div>
    </div>
  );
}

function Watch() {
  const [idx, setIdx] = useWatchState(0);

  return (
    <section className="container" id="watch">
      <SectionHead
        num="[07] / WATCH"
        title="Loops, sets <em>& sessions.</em>"
        sub="A rolling wall of what the clubroom is watching this week. Muted by default — tap to unmute, or pop any tile fullscreen."
      />

      <div className="watch-wrap">
        <div className="watch-hero">
          <Embed clip={CLIPS[idx]} autoplay muted active />
          <div className="watch-meta">
            <span className="mono">NOW PLAYING · AUTO</span>
            <h3>{CLIPS[idx].title}</h3>
            <p>{CLIPS[idx].who}</p>
            <div className="watch-controls">
              <button
                className="btn"
                onClick={() => setIdx(i => (i - 1 + CLIPS.length) % CLIPS.length)}
              >← Prev</button>
              <button
                className="btn primary"
                onClick={() => setIdx(i => (i + 1) % CLIPS.length)}
              >Next clip →</button>
              <a
                className="btn accent-2"
                href={`https://youtu.be/${CLIPS[idx].id}`}
                target="_blank"
                rel="noopener"
              >Open on YouTube ↗</a>
            </div>
            <div className="watch-ticker mono">
              ▶ {String(idx + 1).padStart(2, '0')} / {String(CLIPS.length).padStart(2, '0')} ·
              &nbsp;playlist rotates weekly · &nbsp;curated by the board
            </div>
          </div>
        </div>

        <div className="watch-strip">
          {CLIPS.map((c, i) => (
            <button
              key={c.id}
              className={"watch-thumb" + (i === idx ? " on" : "")}
              onClick={() => setIdx(i)}
              style={{ '--accent': c.accent }}
            >
              <div className="thumb-img">
                <img
                  src={`https://i.ytimg.com/vi/${c.id}/hqdefault.jpg`}
                  alt=""
                  loading="lazy"
                  onError={(e) => { e.currentTarget.style.display = 'none'; }}
                />
                <span className="thumb-play">▶</span>
              </div>
              <div className="thumb-meta">
                <span className="mono">{c.tag}</span>
                <b>{c.title}</b>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Watch = Watch;