// ============================================================
// Showdown — STUDENT views (4 phone artboards)
// 1. StudentJoin     — enter game code
// 2. StudentLobby    — pick character + power-up, wait
// 3. StudentQuestion — answer with wager + power-up
// 4. StudentFeedback — between-Q feedback
// ============================================================

// ─── 1. STUDENT JOIN ─────────────────────────────────────────────
function StudentJoin() {
  // code being typed: 7392__
  const digits = ['7', '3', '9', '2', '', ''];
  const cursorIdx = 4;
  return (
    <SdScope theme="mixed">
      <PhoneFrame time="9:38">
        <div className="sd-join">
          <div className="sd-join-inner">
            <div className="sd-join-eyebrow">HSCSCIENCE · SHOWDOWN</div>
            <h1>Join the game.</h1>
            <p className="sd-join-sub">Type the 6-digit code your teacher's showing on the board.</p>

            <div className="sd-code-input">
              {digits.map((d, i) => (
                <div key={i}
                  className={`sd-code-cell ${!d ? 'empty' : ''} ${i === cursorIdx ? 'cursor' : ''}`}>
                  {d || '·'}
                </div>
              ))}
            </div>

            <button className="sd-join-btn">Enter game →</button>

            <div className="sd-join-keypad">
              {[1,2,3,4,5,6,7,8,9].map(n => (
                <button key={n} className="sd-keypad-key">{n}</button>
              ))}
              <button className="sd-keypad-key muted"></button>
              <button className="sd-keypad-key">0</button>
              <button className="sd-keypad-key del">⌫</button>
            </div>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 2. STUDENT LOBBY ────────────────────────────────────────────
function StudentLobby() {
  return (
    <SdScope theme="bio">
      <PhoneFrame time="9:39">
        <div className="sd-lobby">
          <div className="sd-lobby-head">
            <div className="sd-lobby-code">
              CODE · <strong>739204</strong>
              <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#a3e0b0' }}></span>
                LIVE
              </span>
            </div>
            <div className="sd-lobby-title">Module 6 · Cells</div>
            <div className="sd-lobby-meta">12 questions · 20s each · Ms Chen's class</div>
          </div>

          <div className="sd-lobby-body">
            <div className="sd-lobby-card sd-me-card">
              <CharGlyph kind="helix" size={48}/>
              <div className="sd-me-name">Maya K.</div>
              <button className="sd-me-edit">Edit</button>
            </div>

            <div className="sd-lobby-card">
              <h4>Pick one power-up · 1 use this game</h4>
              <div className="sd-pup-pick">
                <div className="sd-pup-pick-card on">
                  <div className="sd-pup-pick-icon insight"><Icon name="bulb"/></div>
                  <div className="sd-pup-name">Insight</div>
                  <div className="sd-pup-desc">Drop 2 wrong</div>
                </div>
                <div className="sd-pup-pick-card">
                  <div className="sd-pup-pick-icon slowmo"><Icon name="timer"/></div>
                  <div className="sd-pup-name">Slow-mo</div>
                  <div className="sd-pup-desc">+5 seconds</div>
                </div>
                <div className="sd-pup-pick-card">
                  <div className="sd-pup-pick-icon steal"><Icon name="swords"/></div>
                  <div className="sd-pup-name">Steal</div>
                  <div className="sd-pup-desc">+50 from #1</div>
                </div>
              </div>
            </div>

            <div className="sd-lobby-card">
              <h4>Who's in — 22 of ~30</h4>
              <div className="sd-live-feed">
                <div className="sd-feed-row">
                  <span className="sd-feed-dot"></span>
                  <strong>Hugo M.</strong> just joined
                  <span style={{ marginLeft: 'auto', color: 'var(--adv-muted)', fontSize: 11 }}>now</span>
                </div>
                <div className="sd-feed-row">
                  <span className="sd-feed-dot"></span>
                  <strong>Maddie R.</strong> just joined
                  <span style={{ marginLeft: 'auto', color: 'var(--adv-muted)', fontSize: 11 }}>5s ago</span>
                </div>
                <div className="sd-feed-row">
                  <span className="sd-feed-dot"></span>
                  <strong>Eli T.</strong> picked Slow-mo
                  <span style={{ marginLeft: 'auto', color: 'var(--adv-muted)', fontSize: 11 }}>12s ago</span>
                </div>
                <div className="sd-feed-row">
                  <span className="sd-feed-dot"></span>
                  <strong>Cleo N.</strong> joined
                  <span style={{ marginLeft: 'auto', color: 'var(--adv-muted)', fontSize: 11 }}>18s ago</span>
                </div>
                <div className="sd-feed-row">
                  <span className="sd-feed-dot"></span>
                  <strong>Ash V.</strong> joined
                  <span style={{ marginLeft: 'auto', color: 'var(--adv-muted)', fontSize: 11 }}>24s ago</span>
                </div>
              </div>
            </div>

            <button className="sd-lobby-cta waiting">
              Waiting for Ms Chen to start…
            </button>
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 3. STUDENT QUESTION (mid-lock-in) ───────────────────────────
function StudentQuestion() {
  return (
    <SdScope theme="bio">
      <PhoneFrame time="9:42">
        <div className="sd-sq-bar">
          <span>Q <strong>5</strong></span>
          <div className="sd-sq-bar-fill"><div style={{ width: '41%' }}></div></div>
          <span>of <strong>12</strong></span>
        </div>

        <div className="sd-sq-timer">
          <div className="sd-sq-time-num">12<small>SEC</small></div>
          <div className="sd-sq-streak">
            <Icon name="flame"/> 5
          </div>
        </div>

        <div className="sd-sq-q">
          <div className="sd-sq-q-eyebrow">CELL ORGANELLES · MCQ</div>
          Which organelle is the primary site of <strong>ATP synthesis</strong> in eukaryotic cells?
        </div>

        <div className="sd-sq-answers">
          <div className="sd-sq-answer a">
            <div className="sd-sq-answer-shape"><AnswerShape letter="A"/></div>
            <div className="sd-sq-answer-letter">A</div>
          </div>
          <div className="sd-sq-answer b locked">
            <div className="sd-sq-answer-shape"><AnswerShape letter="B"/></div>
            <div className="sd-sq-answer-letter">B</div>
          </div>
          <div className="sd-sq-answer c">
            <div className="sd-sq-answer-shape"><AnswerShape letter="C"/></div>
            <div className="sd-sq-answer-letter">C</div>
          </div>
          <div className="sd-sq-answer d">
            <div className="sd-sq-answer-shape"><AnswerShape letter="D"/></div>
            <div className="sd-sq-answer-letter">D</div>
          </div>
        </div>

        <div className="sd-wager">
          <div className="sd-wager-head">
            <div className="sd-wager-label">CONFIDENCE WAGER</div>
            <div className="sd-wager-mult">+ up to <span>720 pts</span></div>
          </div>
          <div className="sd-wager-opts">
            <div className="sd-wager-opt">
              <div className="sd-wager-opt-x">1×</div>
              <small>safe</small>
            </div>
            <div className="sd-wager-opt">
              <div className="sd-wager-opt-x">2×</div>
              <small>fair bet</small>
            </div>
            <div className="sd-wager-opt on">
              <div className="sd-wager-opt-x">3×</div>
              <small>all in</small>
            </div>
          </div>
        </div>

        <div className="sd-sq-foot">
          <button className="sd-sq-pup-btn">
            <Icon name="bulb"/> Use Insight · 50:50
          </button>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

// ─── 4. STUDENT FEEDBACK BETWEEN QUESTIONS ──────────────────────
function StudentFeedback({ correct = true }) {
  if (correct) {
    return (
      <SdScope theme="bio">
        <PhoneFrame time="9:42">
          <div className="sd-fb">
            <div className="sd-fb-banner right">
              <div className="sd-fb-head">
                <div className="sd-fb-mark">
                  <svg viewBox="0 0 24 24"><path d="M4 12l5 5L20 6"/></svg>
                </div>
                <div>
                  <div className="sd-fb-title">Nailed it.</div>
                  <div className="sd-fb-sub">2.4s to lock in · faster than 86% of the class</div>
                </div>
              </div>
              <div className="sd-fb-pts-row">
                <div className="sd-fb-pts">+720<small>PTS</small></div>
                <span className="sd-fb-wager-pill">3× wager · held 🔥</span>
              </div>
            </div>

            <div className="sd-fb-body">
              <div className="sd-fb-row">
                <span className="sd-fb-row-label">YOUR STREAK</span>
                <span className="sd-fb-row-val">
                  <Icon name="flame" style={{ color: 'var(--adv-coral-deep)' }}/>
                  6 in a row
                </span>
              </div>
              <div className="sd-fb-row">
                <span className="sd-fb-row-label">RANK</span>
                <span className="sd-fb-row-val">
                  #1
                  <span className="sd-rank-change up">
                    <Icon name="arrowUp"/> 2
                  </span>
                </span>
              </div>
              <div className="sd-fb-row">
                <span className="sd-fb-row-label">TOTAL POINTS</span>
                <span className="sd-fb-row-val">4 820</span>
              </div>

              <div className="sd-fb-correct">
                <span className="sd-fb-correct-tag">B · Correct</span>
                <strong>Mitochondria</strong> generate the bulk of ATP via oxidative phosphorylation across their inner membrane.
              </div>
            </div>

            <div className="sd-fb-foot">
              Next question in <strong>3s</strong>…
            </div>
          </div>
        </PhoneFrame>
      </SdScope>
    );
  }
  // wrong variant
  return (
    <SdScope theme="bio">
      <PhoneFrame time="9:42">
        <div className="sd-fb">
          <div className="sd-fb-banner wrong">
            <div className="sd-fb-head">
              <div className="sd-fb-mark">
                <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></svg>
              </div>
              <div>
                <div className="sd-fb-title">Not this time.</div>
                <div className="sd-fb-sub">You answered <strong>A · Ribosome</strong> — close trap.</div>
              </div>
            </div>
            <div className="sd-fb-pts-row">
              <div className="sd-fb-pts">−360<small>PTS</small></div>
              <span className="sd-fb-wager-pill">3× wager · stung</span>
            </div>
          </div>

          <div className="sd-fb-body">
            <div className="sd-fb-row">
              <span className="sd-fb-row-label">YOUR STREAK</span>
              <span className="sd-fb-row-val" style={{ color: 'var(--adv-muted)' }}>
                — broken at 4
              </span>
            </div>
            <div className="sd-fb-row">
              <span className="sd-fb-row-label">RANK</span>
              <span className="sd-fb-row-val">
                #6
                <span className="sd-rank-change down">
                  <Icon name="arrowDn"/> 3
                </span>
              </span>
            </div>
            <div className="sd-fb-row">
              <span className="sd-fb-row-label">TOTAL POINTS</span>
              <span className="sd-fb-row-val">3 920</span>
            </div>

            <div className="sd-fb-correct">
              <span className="sd-fb-correct-tag">B · Correct</span>
              Ribosomes assemble proteins — they don't make ATP. <strong>Mitochondria</strong> are the ATP factories, via oxidative phosphorylation.
            </div>
          </div>

          <div className="sd-fb-foot">
            Saved to your <strong>revision pile</strong> · next Q in 3s…
          </div>
        </div>
      </PhoneFrame>
    </SdScope>
  );
}

Object.assign(window, { StudentJoin, StudentLobby, StudentQuestion, StudentFeedback });