/* ============================================================
   STREAM WITH LIEN — Setup, Music Bingo, Playlists
   ============================================================ */

/* ---------------- SETUP ---------------- */
function SetupPage({ d, ui, social }) {
  const ref = useReveal();
  return (
    <>
      <PageHero kicker={d.kicker} title={d.h1} lede={d.lede} />
      <section className="section setup" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap">
          {d.groups.map((g, gi) => (
            <div className="setup__group reveal" key={gi}>
              <div className="setup__group-head">
                <span className="setup__group-num">{String(gi + 1).padStart(2, "0")}</span>
                <h2 className="setup__group-name">{g.name}</h2>
                <span className="setup__rule"></span>
              </div>
              <div className="setup__grid">
                {g.items.map((it, ii) => (
                  <article className="gear sticker" key={ii}>
                    <Ph label={it.img} h={160} r={12} className="gear__ph" />
                    <h3 className="gear__t">{it.t}</h3>
                    <p className="gear__d soft">{it.d}</p>
                  </article>
                ))}
              </div>
            </div>
          ))}
          <div className="callout sticker reveal">
            <Icon name="heart" size={22} />
            <p>{d.note}</p>
            <Btn variant="primary" iconLeft="discord" href={social.discord}>Discord</Btn>
          </div>
        </div>
      </section>
    </>
  );
}

/* ---------------- MUSIC BINGO ---------------- */
function BingoCard({ d }) {
  const FREE = 12; // center index in 5x5
  const build = useCallback(() => {
    const pool = [...d.cells];
    for (let i = pool.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [pool[i], pool[j]] = [pool[j], pool[i]]; }
    const picks = pool.slice(0, 24);
    const grid = [];
    let p = 0;
    for (let i = 0; i < 25; i++) grid.push(i === FREE ? null : picks[p++]);
    return grid;
  }, [d]);

  const [grid, setGrid] = useState(build);
  const [marked, setMarked] = useState(() => new Set([FREE]));
  const [bingo, setBingo] = useState(false);

  useEffect(() => { setGrid(build()); setMarked(new Set([FREE])); setBingo(false); }, [build]);

  const checkBingo = (set) => {
    const lines = [];
    for (let r = 0; r < 5; r++) lines.push([0,1,2,3,4].map(c => r*5+c));
    for (let c = 0; c < 5; c++) lines.push([0,1,2,3,4].map(r => r*5+c));
    lines.push([0,6,12,18,24]); lines.push([4,8,12,16,20]);
    return lines.some(l => l.every(i => set.has(i)));
  };

  useEffect(() => { setBingo(checkBingo(marked)); }, [marked]);

  const toggle = (i) => {
    if (i === FREE) return;
    setMarked(prev => {
      const next = new Set(prev);
      next.has(i) ? next.delete(i) : next.add(i);
      return next;
    });
  };

  const reset = () => { setGrid(build()); setMarked(new Set([FREE])); setBingo(false); };

  return (
    <div className="bingo-card-wrap">
      <div className={"bingo-card sticker" + (bingo ? " bingo-card--win" : "")}>
        <div className="bingo-head">
          <span className="bingo-head__b">B</span><span className="bingo-head__i">I</span>
          <span className="bingo-head__n">N</span><span className="bingo-head__g">G</span>
          <span className="bingo-head__o">O</span>
        </div>
        <div className="bingo-grid">
          {grid.map((c, i) => (
            <button key={i}
              className={"bingo-cell" + (i === FREE ? " free" : "") + (marked.has(i) ? " marked" : "")}
              onClick={() => toggle(i)}>
              {i === FREE ? (<><Icon name="heart" size={20} /><span>{d.free}</span></>) : c}
            </button>
          ))}
        </div>
      </div>
      <div className="bingo-controls">
        <div className={"bingo-msg" + (bingo ? " show" : "")}>{bingo ? d.bingoMsg : ""}</div>
        <Btn variant="ink" iconLeft="music" onClick={reset}>{d.resetLabel}</Btn>
      </div>
    </div>
  );
}

function BingoPage({ d, ui, social }) {
  const ref = useReveal();
  return (
    <>
      <PageHero kicker={d.kicker} title={d.h1} lede={d.lede} />
      <section className="section bingo" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="bingo-steps">
            {d.steps.map((s, i) => (
              <div className="bstep reveal" key={i}>
                <span className="bstep__n">{s.n}</span>
                <h3 className="bstep__t">{s.t}</h3>
                <p className="bstep__d soft">{s.d}</p>
              </div>
            ))}
          </div>

          <div className="bingo-play reveal">
            <div className="bingo-play__text">
              <span className="eyebrow">{d.tryKicker}</span>
              <h2 className="bingo-play__h">{d.tryH}</h2>
              <p className="soft" style={{ fontSize: 17 }}>{d.tryP}</p>
              <div className="flex" style={{ gap: 12, marginTop: 24, flexWrap: "wrap" }}>
                <Btn variant="primary" iconLeft="twitch" href={social.twitch}>{ui.watchLive}</Btn>
              </div>
            </div>
            <BingoCard d={d} />
          </div>
        </div>
      </section>
    </>
  );
}

/* ---------------- PLAYLISTS ---------------- */
function PlaylistsPage({ d, ui, social }) {
  const ref = useReveal();
  return (
    <>
      <PageHero kicker={d.kicker} title={d.h1} lede={d.lede} />
      <section className="section playlists" ref={ref} style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="pl-grid">
            {d.lists.map((p, i) => (
              <a className="pl-card sticker reveal" key={i} href={social.shop /* placeholder spotify link */}
                 onClick={(e) => e.preventDefault()} style={{ transitionDelay: (i % 3 * 60) + "ms" }}>
                <div className="pl-cover">
                  <Ph label={"cover · " + p.t} h={180} r={12} />
                  <span className="pl-mood">{p.mood}</span>
                  <span className="pl-play"><Icon name="play" size={22} /></span>
                </div>
                <div className="pl-body">
                  <h3 className="pl-t">{p.t}</h3>
                  <p className="pl-d soft">{p.d}</p>
                  <div className="pl-foot">
                    <span className="chip"><Icon name="music" size={14} />{p.n}</span>
                    <span className="pl-cta"><Icon name="spotify" size={18} />{d.cta}</span>
                  </div>
                </div>
              </a>
            ))}
          </div>
          <div className="callout sticker reveal">
            <Icon name="music" size={22} />
            <p>{d.note}</p>
            <Btn variant="primary" iconLeft="discord" href={social.discord}>Discord</Btn>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { SetupPage, BingoPage, PlaylistsPage });