// ============================================================
// Showdown — HOST views (5 artboards)
// 1. HostSetup       — laptop. teacher picks lessons + config
// 2. HostLobby       — projector. game code + QR + live roster
// 3. HostQuestion    — projector. question + class pulse
// 4. HostLeaderboard — projector. between-Q standings + callouts
// 5. HostPodium      — projector. final results + MVP moments
// ============================================================

// ─── 1. HOST SETUP ─────────────────────────────────────────────
const SETUP_LESSONS = [
  { tag: 'bio',  name: 'Module 6 · Cells as the Basis of Life',  qs: 24, sel: true,  type: 'Module' },
  { tag: 'bio',  name: 'Cell organelles & function',              qs: 8,  sel: true,  type: 'Lesson' },
  { tag: 'bio',  name: 'The fluid-mosaic membrane',               qs: 6,  sel: true,  type: 'Lesson' },
  { tag: 'bio',  name: 'Active vs passive transport',             qs: 9,  sel: true,  type: 'Lesson' },
  { tag: 'bio',  name: 'Enzymes & metabolic pathways',            qs: 12, sel: false, type: 'Lesson' },
  { tag: 'chem', name: 'Mole concept revision pack',              qs: 14, sel: false, type: 'Topic' },
  { tag: 'phy',  name: 'Projectile motion — applied problems',    qs: 11, sel: false, type: 'Lesson' },
  { tag: 'math', name: 'Trigonometric identities',                qs: 9,  sel: false, type: 'Lesson' },
];

function HostSetup() {
  return (
    <SdScope theme="bio">
      <LaptopFrame url="hscscience.com.au/games/showdown/new">
        <AppBar crumbs={['Multiplayer', 'New Showdown']}/>

        <div className="sd-setup-hero">
          <div className="sd-setup-hero-inner">
            <div className="sd-setup-eyebrow"></div>
            <h1 className="sd-setup-title">Showdown.</h1>
            <p className="sd-setup-sub">Pick the lessons, tune the rules, generate a code. Students join from any device — answers ranked by speed and accuracy, with one strategic power-up each.</p>
          </div>
        </div>

        <div className="sd-setup-grid">
          {/* Lesson picker (left) */}
          <div className="sd-panel">
            <div className="sd-panel-h">
              <h3>Question pool</h3>
              <span className="sd-panel-h-meta">4 selected · 47 questions</span>
            </div>
            <div className="sd-tabs">
              <div className="sd-tab on">By lesson</div>
              <div className="sd-tab">By module</div>
              <div className="sd-tab">By dot point</div>
              <div className="sd-tab">Wrong-answer pool</div>
            </div>
            <div className="sd-search">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ color: 'var(--adv-muted)' }}>
                <circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/>
              </svg>
              <input placeholder="Search lessons, topics, or paste a dot-point code…" defaultValue="cell" />
            </div>
            <div className="sd-lesson-list">
              {SETUP_LESSONS.map((l, i) => (
                <div key={i} className={`sd-lrow ${l.sel ? 'on' : ''}`}>
                  <div className="sd-lrow-check">
                    <svg viewBox="0 0 24 24"><path d="M4 12l5 5L20 6"/></svg>
                  </div>
                  <span className={`sd-lrow-tag ${l.tag}`}>{l.type === 'Module' ? 'Bio · Mod' : l.tag}</span>
                  <span className="sd-lrow-name">{l.name}</span>
                  <span className="sd-lrow-qs">{l.qs} Qs</span>
                </div>
              ))}
            </div>
            <div className="sd-pool-summary">
              <div className="sd-pool-num">47</div>
              <div className="sd-pool-label">
                <strong>questions ready to draw from.</strong><br/>
                32 MCQ · 8 true/false · 5 numeric · 2 with diagrams.<br/>
                We'll pick 12 at random to fit your round length.
              </div>
            </div>
          </div>

          {/* Settings (right) */}
          <div className="sd-panel">
            <div className="sd-panel-h">
              <h3>Game rules</h3>
              <span className="sd-panel-h-meta">~9 min total</span>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Questions per round
                <small>How many we'll pick from the pool</small>
              </div>
              <div className="sd-stepper">
                <button>−</button>
                <span className="v">12</span>
                <button>+</button>
              </div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Seconds per question
                <small>Resets between Qs</small>
              </div>
              <div className="sd-radio-bar" style={{ width: 200 }}>
                <button>15s</button>
                <button className="on">20s</button>
                <button>30s</button>
              </div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Confidence wager
                <small>Students risk a multiplier on each answer</small>
              </div>
              <div className="sd-toggle on"></div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Power-ups
                <small>One per student, picked in the lobby</small>
              </div>
              <div className="sd-toggle on"></div>
            </div>

            <div className="sd-pup-row">
              <div className="sd-pup-card">
                <div className="sd-pup-icon insight"><Icon name="bulb"/></div>
                <div className="sd-pup-name">Insight</div>
                <div className="sd-pup-desc">50:50 — drop two wrong answers</div>
              </div>
              <div className="sd-pup-card">
                <div className="sd-pup-icon slowmo"><Icon name="timer"/></div>
                <div className="sd-pup-name">Slow-mo</div>
                <div className="sd-pup-desc">+5 seconds on one question</div>
              </div>
              <div className="sd-pup-card">
                <div className="sd-pup-icon steal"><Icon name="swords"/></div>
                <div className="sd-pup-name">Steal</div>
                <div className="sd-pup-desc">Poach 50 pts from rank #1</div>
              </div>
            </div>

            <div className="sd-set-row" style={{ marginTop: 6 }}>
              <div className="sd-set-label">
                Show class pulse on screen
                <small>Live answer distribution as students lock in</small>
              </div>
              <div className="sd-toggle on"></div>
            </div>

            <div className="sd-set-row">
              <div className="sd-set-label">
                Coin reward cap
                <small>Anti-grind — winners earn limited coins per day</small>
              </div>
              <div className="sd-radio-bar" style={{ width: 170 }}>
                <button>Off</button>
                <button className="on">25/day</button>
                <button>50/day</button>
              </div>
            </div>
          </div>
        </div>

        <div className="sd-setup-footer">
          <div className="sd-setup-footer-left">
            <div className="sd-footer-stat">
              <small>POOL</small>
              <span>47 Qs</span>
            </div>
            <div className="sd-footer-stat">
              <small>ROUND</small>
              <span>12 Qs · 20s each</span>
            </div>
            <div className="sd-footer-stat">
              <small>EST. RUNTIME</small>
              <span>~9 minutes</span>
            </div>
            <div className="sd-footer-stat">
              <small>SUBJECT THEME</small>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 12, height: 12, borderRadius: 3, background: 'var(--sd-subj-1)' }}></span>
                Biology
              </span>
            </div>
          </div>
          <button className="wc-cta wc-cta-gold" style={{ fontSize: 16 }}>
            Generate game code <Icon name="chevronR"/>
          </button>
        </div>
      </LaptopFrame>
    </SdScope>
  );
}

// ─── 2. HOST PRE-GAME LOBBY (projector) ────────────────────────
const ROSTER = [
  { name: 'Maya K.',    char: 'helix',  isNew: false },
  { name: 'Jordan T.',  char: 'beaker', isNew: false },
  { name: 'Priya S.',   char: 'cell',   isNew: false },
  { name: 'Ben L.',     char: 'atom',   isNew: false },
  { name: 'Aisha R.',   char: 'leaf',   isNew: false },
  { name: 'Nathan P.',  char: 'pi',     isNew: false },
  { name: 'Sienna H.',  char: 'wave',   isNew: false },
  { name: 'Felix W.',   char: 'bolt',   isNew: false },
  { name: 'Yara M.',    char: 'mole',   isNew: false },
  { name: 'Theo C.',    char: 'ph',     isNew: false },
  { name: 'Ava B.',     char: 'sigma',  isNew: false },
  { name: 'Kai S.',     char: 'prism',  isNew: false },
  { name: 'Zara F.',    char: 'helix',  isNew: false },
  { name: 'Owen D.',    char: 'beaker', isNew: false },
  { name: 'Lila J.',    char: 'cell',   isNew: false },
  { name: 'Hugo M.',    char: 'leaf',   isNew: true  },
  { name: 'Maddie R.',  char: 'pi',     isNew: true  },
  { name: 'Eli T.',     char: 'wave',   isNew: true  },
  { name: 'Cleo N.',    char: 'mole',   isNew: true  },
  { name: 'Ash V.',     char: 'atom',   isNew: true  },
  { name: 'Rhea K.',    char: 'helix',  isNew: true  },
  { name: 'Sam Y.',     char: 'sigma',  isNew: true  },
];

function HostLobby() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="LOBBY · WAITING">
        <div className="sd-bigcode">
          <div className="sd-bigcode-left">
            <div className="sd-bigcode-eyebrow">BIOLOGY · SHOWDOWN</div>
            <h1>Module 6 — Cells.<br/>Join the showdown.</h1>
            <div className="sd-bigcode-url">
              <span className="sd-bigcode-url-prefix">play at →</span>
              hscscience.com.au/play
            </div>
            <div className="sd-bigcode-number">
              <div className="sd-bigcode-digit">7</div>
              <div className="sd-bigcode-digit">3</div>
              <div className="sd-bigcode-digit">9</div>
              <div className="sd-bigcode-digit">2</div>
              <div className="sd-bigcode-digit">0</div>
              <div className="sd-bigcode-digit">4</div>
            </div>
          </div>
          <div className="sd-bigcode-right">
            <FakeQR seed="showdown-739204"/>
            <div className="sd-bigcode-hint">scan or type the code →</div>
          </div>
        </div>

        <div className="sd-roster">
          <div className="sd-roster-head">
            <div className="sd-roster-count">
              22<small> students in</small>
            </div>
            <button className="sd-roster-cta">
              <Icon name="play"/> Start when you're ready
            </button>
          </div>
          <div className="sd-roster-grid">
            {ROSTER.slice(0, 24).map((s, i) => (
              i < ROSTER.length ? (
                <div key={i} className={`sd-roster-card ${s.isNew ? 'new' : ''}`}>
                  <CharGlyph kind={s.char} size={46}/>
                  <div className="sd-roster-name">{s.name}</div>
                </div>
              ) : (
                <div key={i} className="sd-roster-card empty">
                  <div style={{ width: 46, height: 46 }}></div>
                  <div className="sd-roster-name" style={{ color: 'var(--adv-muted)' }}>—</div>
                </div>
              )
            ))}
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 3. HOST LIVE QUESTION (projector) ─────────────────────────
function HostQuestion() {
  // pulse heights — student answer distribution as % (no correct revealed)
  const pulse = [
    { letter: 'A', pct: 24, n: 5 },
    { letter: 'B', pct: 58, n: 13 },
    { letter: 'C', pct: 9,  n: 2 },
    { letter: 'D', pct: 8,  n: 2 },
  ];
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="QUESTION 5 / 12 · LIVE">
        <div className="sd-q-stage">
          <div className="sd-q-progress">
            <div className="sd-q-progress-text">
              <strong>Q5</strong> / 12
            </div>
            <div className="sd-q-progress-bar">
              <div className="sd-q-progress-fill" style={{ width: '41%' }}></div>
            </div>
            <TimerRing seconds={12} total={20} size={56}/>
          </div>

          <div className="sd-q-body">
            <div>
              <span className="topic-pill">Cell organelles</span>
              <div className="sd-q-text">
                Which organelle is the primary site of <em style={{ color: 'var(--sd-subj-1-deep)', fontStyle: 'normal' }}>ATP synthesis</em> in eukaryotic cells?
              </div>
            </div>
            <div className="sd-q-image">
              {/* Placeholder microscope-style illustration */}
              <svg viewBox="0 0 300 200" style={{ width: '100%', height: 'auto' }}>
                <defs>
                  <radialGradient id="cell-bg" cx="50%" cy="45%">
                    <stop offset="0%" stopColor="#d8e9dc"/>
                    <stop offset="100%" stopColor="#a3c19f"/>
                  </radialGradient>
                </defs>
                <ellipse cx="150" cy="100" rx="130" ry="80" fill="url(#cell-bg)" stroke="#4a7a5b" strokeWidth="3"/>
                {/* nucleus */}
                <circle cx="170" cy="100" r="30" fill="#6b9b7c" stroke="#2c5740" strokeWidth="2"/>
                <circle cx="170" cy="100" r="12" fill="#3e6b50"/>
                {/* mitochondria - several oval shapes */}
                <ellipse cx="90"  cy="70"  rx="20" ry="11" fill="#c47165" stroke="#8a3f33" strokeWidth="1.8" transform="rotate(-20 90 70)"/>
                <ellipse cx="90"  cy="70"  rx="14" ry="6"  fill="#e8b078" transform="rotate(-20 90 70)"/>
                <ellipse cx="80"  cy="140" rx="22" ry="10" fill="#c47165" stroke="#8a3f33" strokeWidth="1.8" transform="rotate(15 80 140)"/>
                <ellipse cx="80"  cy="140" rx="14" ry="5"  fill="#e8b078" transform="rotate(15 80 140)"/>
                <ellipse cx="225" cy="60"  rx="18" ry="9" fill="#c47165" stroke="#8a3f33" strokeWidth="1.8" transform="rotate(30 225 60)"/>
                <ellipse cx="225" cy="60"  rx="12" ry="4" fill="#e8b078" transform="rotate(30 225 60)"/>
                <ellipse cx="240" cy="135" rx="16" ry="8" fill="#c47165" stroke="#8a3f33" strokeWidth="1.8" transform="rotate(-10 240 135)"/>
                <ellipse cx="240" cy="135" rx="10" ry="3" fill="#e8b078" transform="rotate(-10 240 135)"/>
                {/* tiny dots = ribosomes */}
                {[[60,100],[120,150],[200,150],[260,100],[140,55]].map(([x,y], i) => (
                  <circle key={i} cx={x} cy={y} r="2.2" fill="#4a7a5b"/>
                ))}
              </svg>
            </div>
          </div>

          <div className="sd-answers">
            <div className="sd-answer a">
              <div className="sd-answer-shape"><AnswerShape letter="A"/></div>
              Ribosome
            </div>
            <div className="sd-answer b">
              <div className="sd-answer-shape"><AnswerShape letter="B"/></div>
              Mitochondrion
            </div>
            <div className="sd-answer c">
              <div className="sd-answer-shape"><AnswerShape letter="C"/></div>
              Smooth ER
            </div>
            <div className="sd-answer d">
              <div className="sd-answer-shape"><AnswerShape letter="D"/></div>
              Golgi body
            </div>
          </div>

          <div className="sd-pulse">
            {pulse.map((p, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'end', gap: 8 }}>
                <div className={`sd-pulse-shape ${p.letter.toLowerCase()}`}><AnswerShape letter={p.letter}/></div>
                <div className="sd-pulse-bar" style={{ height: 36 }}>
                  <div className={`sd-pulse-fill ${p.letter.toLowerCase()}`} style={{ height: `${p.pct}%` }}></div>
                </div>
              </div>
            ))}
            <div style={{ gridColumn: '1 / -1', marginTop: -4 }}>
              <div className="sd-pulse-foot">
                <span><strong>22</strong> of 22 locked in</span>
                <span>↘ live answer pulse — no correct revealed</span>
              </div>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 4. HOST BETWEEN-Q LEADERBOARD (projector) ────────────────
const LB = [
  { rank: 1, name: 'Maya K.',   char: 'helix',  pts: 4820, dRank: +2, streak: 5, note: 'on fire — 5 in a row' },
  { rank: 2, name: 'Jordan T.', char: 'beaker', pts: 4610, dRank: -1, streak: 3, note: 'wagered 3× and held'   },
  { rank: 3, name: 'Priya S.',  char: 'cell',   pts: 4520, dRank: +4, streak: 2, note: 'biggest mover'         },
  { rank: 4, name: 'Ben L.',    char: 'atom',   pts: 4310, dRank: -1, streak: 1, note: ''                      },
  { rank: 5, name: 'Aisha R.',  char: 'leaf',   pts: 4080, dRank: 0,  streak: 4, note: ''                      },
  { rank: 6, name: 'Nathan P.', char: 'pi',     pts: 3920, dRank: +1, streak: 1, note: ''                      },
  { rank: 7, name: 'Sienna H.', char: 'wave',   pts: 3780, dRank: -3, streak: 0, note: ''                      },
  { rank: 8, name: 'Felix W.',  char: 'bolt',   pts: 3640, dRank: 0,  streak: 1, note: ''                      },
];

function HostLeaderboard() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="BETWEEN Q5 → Q6">
        <div className="sd-lb-head">
          <div>
            <div className="sd-lb-head-eyebrow">After question 5</div>
            <h1>Class standings.</h1>
          </div>
          <div className="sd-lb-next">
            <div>
              <div className="sd-lb-next-label">Next question in</div>
            </div>
            <div className="sd-lb-next-num">3</div>
          </div>
        </div>

        <div className="sd-lb-grid">
          <div className="sd-lb-list">
            {LB.map(r => (
              <div key={r.rank} className={`sd-lb-row ${r.rank <= 3 ? `top${r.rank}` : ''}`}>
                <div className="sd-lb-rank">{r.rank}</div>
                <CharGlyph kind={r.char} size={46}/>
                <div className="sd-lb-name">
                  {r.name}
                  {r.note && <small>{r.note}</small>}
                </div>
                <div className="sd-lb-pts">{r.pts.toLocaleString()}<small>pts</small></div>
                <div className={`sd-rank-change ${r.dRank > 0 ? 'up' : r.dRank < 0 ? 'down' : ''}`}
                     style={r.dRank === 0 ? { background: 'var(--adv-bg-deeper)', color: 'var(--adv-muted)' } : {}}>
                  {r.dRank > 0 && <Icon name="arrowUp"/>}
                  {r.dRank < 0 && <Icon name="arrowDn"/>}
                  {r.dRank === 0 ? '—' : Math.abs(r.dRank)}
                </div>
              </div>
            ))}
          </div>

          <div className="sd-lb-side">
            <div className="sd-lb-stat">
              <div className="sd-lb-stat-eyebrow">Class accuracy · Q5</div>
              <div className="sd-lb-stat-val">86%</div>
              <div className="sd-lb-stat-sub">19 / 22 answered <strong>B · Mitochondrion</strong> correctly. Average lock-in time was 7.2s.</div>
            </div>
            <div className="sd-lb-stat callout">
              <div className="sd-lb-stat-eyebrow">⚡ Fastest correct</div>
              <div className="sd-lb-stat-val">Maya K.</div>
              <div className="sd-lb-stat-sub">Locked in at <strong>2.4 seconds</strong> — also rode a 3× wager for +480.</div>
            </div>
            <div className="sd-lb-stat">
              <div className="sd-lb-stat-eyebrow">🎯 Hardest question so far</div>
              <div className="sd-lb-stat-val">Q3</div>
              <div className="sd-lb-stat-sub">Active vs passive transport — only <strong>54%</strong> got it. We'll resurface in revision.</div>
            </div>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

// ─── 5. HOST FINAL PODIUM (projector) ──────────────────────────
function HostPodium() {
  return (
    <SdScope theme="bio">
      <ProjectorFrame tag="FINAL · 12 / 12">
        <div className="sd-lb-head" style={{ paddingBottom: 0 }}>
          <div>
            <div className="sd-lb-head-eyebrow">Module 6 · Cells · Showdown</div>
            <h1>That's a wrap.</h1>
          </div>
          <div style={{ fontSize: 13, color: 'var(--adv-muted)', fontWeight: 700, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Icon name="clock"/> 9 min 12s
          </div>
        </div>

        <div className="sd-podium">
          <div className="sd-pod sd-pod-2">
            <div className="sd-pod-char-wrap">
              <div className="sd-pod-char-frame"><CharGlyph kind="beaker" size={72}/></div>
            </div>
            <div className="sd-pod-name">Jordan T.</div>
            <div className="sd-pod-pts">4 980 pts</div>
            <div className="sd-pod-block">
              <span className="sd-pod-block-num">2</span>
            </div>
          </div>

          <div className="sd-pod sd-pod-1">
            <span className="sd-pod-crown">👑</span>
            <div className="sd-pod-char-wrap">
              <div className="sd-pod-char-frame"><CharGlyph kind="helix" size={88}/></div>
            </div>
            <div className="sd-pod-name">Maya K.</div>
            <div className="sd-pod-pts">5 240 pts</div>
            <div className="sd-pod-block">
              <span className="sd-pod-block-num">1</span>
            </div>
          </div>

          <div className="sd-pod sd-pod-3">
            <div className="sd-pod-char-wrap">
              <div className="sd-pod-char-frame"><CharGlyph kind="cell" size={64}/></div>
            </div>
            <div className="sd-pod-name">Priya S.</div>
            <div className="sd-pod-pts">4 660 pts</div>
            <div className="sd-pod-block">
              <span className="sd-pod-block-num">3</span>
            </div>
          </div>
        </div>

        <div className="sd-results-grid">
          <div className="sd-mvp">
            <div className="sd-mvp-head">
              <div className="sd-mvp-icon fast"><Icon name="bolt"/></div>
              <div>
                <div className="sd-mvp-title">Fastest finger</div>
                <div className="sd-mvp-name">Felix W.</div>
              </div>
            </div>
            <div className="sd-mvp-foot">
              <span className="sd-mvp-stat">Avg lock-in <strong>3.1s</strong></span>
              <span className="sd-mvp-stat">· 11/12 correct</span>
            </div>
          </div>

          <div className="sd-mvp">
            <div className="sd-mvp-head">
              <div className="sd-mvp-icon streak"><Icon name="flame"/></div>
              <div>
                <div className="sd-mvp-title">Longest streak</div>
                <div className="sd-mvp-name">Maya K.</div>
              </div>
            </div>
            <div className="sd-mvp-foot">
              <span className="sd-mvp-stat"><strong>8</strong> correct in a row</span>
              <span className="sd-mvp-stat">· Q3 → Q10</span>
            </div>
          </div>

          <div className="sd-mvp">
            <div className="sd-mvp-head">
              <div className="sd-mvp-icon comeback"><Icon name="arrowUp"/></div>
              <div>
                <div className="sd-mvp-title">Biggest comeback</div>
                <div className="sd-mvp-name">Priya S.</div>
              </div>
            </div>
            <div className="sd-mvp-foot">
              <span className="sd-mvp-stat">From <strong>#14 → #3</strong></span>
              <span className="sd-mvp-stat">· three 3× wagers held</span>
            </div>
          </div>
        </div>

        <div className="sd-results-footer">
          <div className="sd-results-footer-stats">
            <div className="sd-rf-stat">
              <small>CLASS ACCURACY</small>
              <strong>78%</strong>
            </div>
            <div className="sd-rf-stat">
              <small>HARDEST Q</small>
              <strong>Q7 · 22%</strong>
            </div>
            <div className="sd-rf-stat">
              <small>COINS AWARDED</small>
              <strong>25 each · top 5</strong>
            </div>
            <div className="sd-rf-stat">
              <small>SURFACED FOR REVISION</small>
              <strong>3 questions</strong>
            </div>
          </div>
          <div className="sd-rf-actions">
            <button className="wc-cta wc-cta-soft" style={{ fontSize: 13 }}>
              <Icon name="book"/> Send weak Qs to revise
            </button>
            <button className="wc-cta wc-cta-gold" style={{ fontSize: 13 }}>
              Play another round <Icon name="chevronR"/>
            </button>
          </div>
        </div>
      </ProjectorFrame>
    </SdScope>
  );
}

Object.assign(window, { HostSetup, HostLobby, HostQuestion, HostLeaderboard, HostPodium });