// ── Quiz screens ─────────────────────────────────────────────

const TOPIC_COLORS = {
  Biology:   '#6b9b7c',
  Chemistry: '#6d5b8a',
  Physics:   '#c47165',
  Maths:     '#d6a85f',
};

const WEEK_MIX = [
  { topic: 'Biology · M1–M2',     pct: 25, color: TOPIC_COLORS.Biology,   note: '4 q' },
  { topic: 'Chemistry · M1–M2',   pct: 27, color: TOPIC_COLORS.Chemistry, note: '4 q' },
  { topic: 'Physics · M1',        pct: 20, color: TOPIC_COLORS.Physics,   note: '3 q' },
  { topic: 'Maths Adv · M1–M2',   pct: 28, color: TOPIC_COLORS.Maths,     note: '4 q' },
];

// ── Lobby — before the quiz starts ──
function QuizLobby() {
  return (
    <div className="wc-scope">
      <TopBar subtitle="Weekly Challenge · Lobby"/>
      <div className="wc-shell">

        <section className="wc-lobby">
          <div className="wc-lobby-inner">
            <div>
              <span className="wc-lobby-eye"><Icon name="bolt"/> &nbsp; Week 28 · 2026 · Year 11</span>
              <h1>Quick-fire <em>Mixed</em></h1>
              <p className="wc-lobby-sub">15 questions drawn from every lesson you've completed this year. One shot at the rankings — speed and streak both count.</p>
              <div className="wc-lobby-stats">
                <div className="wc-lobby-stat"><Icon name="question"/>&nbsp;<strong>15</strong>&nbsp;questions</div>
                <div className="wc-lobby-stat"><Icon name="timer"/>&nbsp;<strong>15s</strong>&nbsp;per question</div>
                <div className="wc-lobby-stat"><Icon name="sparkles"/>&nbsp;<strong>3×</strong>&nbsp;max streak multiplier</div>
                <div className="wc-lobby-stat"><Icon name="bolt"/>&nbsp;<strong>+120 XP</strong>&nbsp;max</div>
              </div>
              <div className="wc-hero-actions">
                <button className="wc-cta wc-cta-gold"><Icon name="play"/> Start challenge</button>
                <button className="wc-cta wc-cta-ghost">Practice mode (no rankings)</button>
              </div>
            </div>
            <div className="wc-prize-card">
              <div className="wc-prize-title">What's at stake</div>
              <div className="wc-prize-list">
                <div className="wc-prize-row">
                  <div className="wc-prize-icon"><Icon name="school"/></div>
                  <div><strong>Climb your school board</strong><small>Northvale High · you're currently #4</small></div>
                </div>
                <div className="wc-prize-row">
                  <div className="wc-prize-icon"><Icon name="users"/></div>
                  <div><strong>Crack the NSW top 1%</strong><small>Year 11 · need +480 pts to break top 50</small></div>
                </div>
                <div className="wc-prize-row">
                  <div className="wc-prize-icon"><Icon name="crown"/></div>
                  <div><strong>Topple a teacher</strong><small>Dr Park leads on 5,780 · no student has cracked top 3</small></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className="wc-mix">
          <div className="wc-mix-head">
            <div className="wc-mix-title">This week's mix</div>
            <div className="wc-mix-sub">Drawn from your enrolled subjects · up to last Friday's lessons</div>
          </div>
          <div className="wc-mix-bars">
            {WEEK_MIX.map((m, i) => (
              <div key={i} className="wc-mix-bar">
                <div className="wc-mix-bar-label">
                  <span className="wc-mix-bar-dot" style={{ background: m.color }}></span>
                  {m.topic}
                </div>
                <div className="wc-mix-bar-track">
                  <div className="wc-mix-bar-fill" style={{ width: `${m.pct}%`, background: m.color }}></div>
                </div>
                <div className="wc-mix-bar-val">{m.note} · {m.pct}%</div>
              </div>
            ))}
          </div>
        </div>

        <div className="wc-link-row">
          <Icon name="bulb" style={{ color: 'var(--adv-gold-deep)' }}/>
          <span><strong>Heads-up:</strong> the quiz auto-submits when the timer runs out. No skipping. <a href="#">See full rules →</a></span>
        </div>
      </div>
    </div>
  );
}

// ── Active question — mid-quiz play state ──
function QuizQuestion({ picked = null, reveal = false }) {
  // example: bio cell biology MC
  const options = [
    { L: 'A', text: 'Endoplasmic reticulum', correct: false },
    { L: 'B', text: 'Mitochondrion',         correct: true  },
    { L: 'C', text: 'Golgi apparatus',       correct: false },
    { L: 'D', text: 'Lysosome',              correct: false },
  ];

  return (
    <div className="wc-scope">
      <TopBar subtitle="Weekly Challenge · Question 7/15"/>

      <div className="wc-shell">
        <div className="wc-qchrome">
          <div className="wc-q-counter">Question <strong>7</strong>/15</div>
          <div className="wc-q-topic">
            <div className="wc-q-topic-dot" style={{ background: TOPIC_COLORS.Biology }}></div>
            Biology · Cells &amp; energy
          </div>
          <div className="wc-q-streak">
            <div className="wc-q-streak-pill"><Icon name="flame"/> 4 in a row</div>
            <div className="wc-q-mult">×2.0</div>
          </div>
        </div>

        <TimerBar pct={0.62} secs="08"/>

        <div className="wc-stem">
          <div className="wc-stem-q">
            Which organelle generates the most <span className="mono">ATP</span> during aerobic respiration in eukaryotic cells?
          </div>
        </div>

        <div className="wc-mc">
          {options.map(o => {
            const isPick = picked === o.L;
            const cls = reveal
              ? o.correct ? 'correct' : (isPick ? 'wrong' : 'dimmed')
              : isPick ? 'correct' : '';
            return (
              <button key={o.L} className={`wc-mc-opt ${cls}`}>
                <span className="wc-mc-badge">{o.L}</span>
                <span>
                  <span className="wc-mc-letter">OPTION {o.L}</span>
                  <span className="wc-mc-text">{o.text}</span>
                </span>
              </button>
            );
          })}
        </div>

        <div className="wc-q-foot">
          <div className="wc-q-foot-meta">Locked in — moving on in 1s…</div>
          <button className="wc-cta wc-cta-ink">Skip to next <Icon name="chevronR"/></button>
        </div>
      </div>
    </div>
  );
}

// ── Between-question feedback ──
function QuizFeedback({ right = true }) {
  return (
    <div className="wc-scope">
      <TopBar subtitle="Weekly Challenge · Question 7/15"/>

      <div className="wc-shell">
        <div className="wc-qchrome">
          <div className="wc-q-counter">Question <strong>7</strong>/15</div>
          <div className="wc-q-topic">
            <div className="wc-q-topic-dot" style={{ background: TOPIC_COLORS.Biology }}></div>
            Biology · Cells &amp; energy
          </div>
          <div className="wc-q-streak">
            <div className="wc-q-streak-pill"><Icon name="flame"/> {right ? 5 : 0} in a row</div>
            <div className="wc-q-mult">×{right ? '2.5' : '1.0'}</div>
          </div>
        </div>

        <div className="wc-stem" style={{ paddingTop: 22, paddingBottom: 22 }}>
          <div className="wc-stem-q" style={{ fontSize: 22 }}>
            Which organelle generates the most <span className="mono">ATP</span> during aerobic respiration?
          </div>
        </div>

        <div className={`wc-fb ${right ? 'right' : 'wrong'}`}>
          <div className="wc-fb-icon">{right ? '✓' : '✕'}</div>
          <div>
            <div className="wc-fb-headline">{right ? 'Correct — nice!' : 'Not quite.'}</div>
            <div className="wc-fb-explain">
              The <strong>mitochondrion</strong> is the site of oxidative phosphorylation — where most ATP is produced via the electron transport chain.
              {!right && ' Lysosomes break down waste, not produce energy.'}
            </div>
          </div>
          <div className="wc-fb-side">
            <div className="wc-fb-pts">{right ? <>+<em>20</em></> : '+0'}</div>
            <div className="wc-fb-pts-label">{right ? 'with 2.5× streak' : 'streak broken'}</div>
          </div>
        </div>

        <div className="wc-live">
          <div className="wc-live-item">
            <div className="wc-live-label">Score so far</div>
            <div className="wc-live-val"><span className="mono">{right ? '142' : '122'}</span></div>
          </div>
          <div className="wc-live-item">
            <div className="wc-live-label">School board</div>
            <div className="wc-live-val">#4 <em>· would be #3</em></div>
          </div>
          <div className="wc-live-item">
            <div className="wc-live-label">Beat the Teacher</div>
            <div className="wc-live-val">#42 <em>· chasing Mr Halloran</em></div>
          </div>
        </div>

        <div className="wc-q-foot">
          <div className="wc-q-foot-meta">Auto-advancing in <strong style={{color:'var(--adv-ink)'}}>2s</strong>…</div>
          <button className="wc-cta wc-cta-rose">Next question <Icon name="chevronR"/></button>
        </div>
      </div>
    </div>
  );
}

// ── Results — end of quiz ──
function QuizResults() {
  return (
    <div className="wc-scope">
      <TopBar subtitle="Weekly Challenge · Results"/>

      <div className="wc-shell">
        <section className="wc-results-hero">
          <div className="wc-results-inner">
            <div>
              <span className="wc-results-eye"><Icon name="trophy"/> &nbsp; Week 28 · complete</span>
              <h1>Solid run, <em>QuantumQuokka</em>.</h1>
              <p className="wc-results-headline">12 of 15 correct with a best streak of 7. You jumped two places on your school board and stayed inside the NSW top 2%.</p>
              <div className="wc-results-cta-row">
                <button className="wc-cta wc-cta-gold"><Icon name="trophy"/> Open boards</button>
                <button className="wc-cta wc-cta-ghost"><Icon name="share"/> Share result</button>
                <button className="wc-cta wc-cta-ghost">Review answers</button>
              </div>
            </div>
            <div className="wc-score-display">
              <div className="wc-score-big">3,640<small> pts</small></div>
              <div className="wc-score-stats">
                <div className="wc-score-stat">
                  <div className="wc-score-stat-val">80%</div>
                  <div className="wc-score-stat-label">Accuracy</div>
                </div>
                <div className="wc-score-stat">
                  <div className="wc-score-stat-val">4:18</div>
                  <div className="wc-score-stat-label">Time</div>
                </div>
                <div className="wc-score-stat">
                  <div className="wc-score-stat-val">×2.5</div>
                  <div className="wc-score-stat-label">Best mult</div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <div className="wc-section-label">Where you landed</div>

        <div className="wc-ranks">
          <div className="wc-rank-card">
            <div className="wc-rank-card-eye"><Icon name="school"/> Northvale High</div>
            <div className="wc-rank-card-rank">#2<small>/124</small></div>
            <div className="wc-rank-card-of">PhotonPhoenix leads on 4,820</div>
            <div className="wc-rank-card-delta"><Icon name="arrowUp"/> +2 spots</div>
          </div>
          <div className="wc-rank-card">
            <div className="wc-rank-card-eye"><Icon name="users"/> Year 11 · NSW</div>
            <div className="wc-rank-card-rank">#71<small>/4,820</small></div>
            <div className="wc-rank-card-of">Top 2% · need +110 to break top 50</div>
            <div className="wc-rank-card-delta"><Icon name="arrowUp"/> +13 spots</div>
          </div>
          <div className="wc-rank-card lead">
            <div className="wc-rank-card-eye"><Icon name="crown"/> Beat the Teacher</div>
            <div className="wc-rank-card-rank">#36<small>/890</small></div>
            <div className="wc-rank-card-of">Best teacher: Dr Park · 5,780</div>
            <div className="wc-rank-card-delta"><Icon name="arrowUp"/> +18 spots</div>
          </div>
        </div>

        <div className="wc-breakdown">
          <h3>Question breakdown</h3>
          <div className="wc-bd-rows">
            {[
              { n: 1,  q: 'Bio · Levels of organisation in a multicellular organism',     ok: true,  pts: '+10' },
              { n: 2,  q: 'Maths · Solve 3x − 7 = 14',                                    ok: true,  pts: '+15' },
              { n: 3,  q: 'Chem · Which is a physical change?',                           ok: false, pts: '+0' },
              { n: 4,  q: 'Phys · A car accelerates from 0 to 15 m/s in 3s. Find a',      ok: true,  pts: '+20' },
              { n: 5,  q: 'Bio · Function of stomata',                                    ok: true,  pts: '+25' },
              { n: 6,  q: 'Maths · Simplify 2(x+3) − 5x',                                 ok: true,  pts: '+30' },
              { n: 7,  q: 'Bio · Site of ATP production in eukaryotes',                   ok: true,  pts: '+50' },
              { n: 8,  q: 'Chem · Balance: H₂ + O₂ → H₂O',                                ok: false, pts: '+0' },
            ].map(r => (
              <div key={r.n} className="wc-bd-row">
                <div className="wc-bd-num">Q{r.n}</div>
                <div className="wc-bd-q">{r.q}</div>
                <div className={`wc-bd-mark ${r.ok ? 'ok' : 'no'}`}>
                  <Icon name={r.ok ? 'check' : 'x'}/>
                </div>
                <div className="wc-bd-pts">{r.pts}</div>
              </div>
            ))}
            <div style={{ textAlign: 'center', padding: '8px 0 0', fontSize: 12, color: 'var(--adv-muted)', fontWeight: 600 }}>
              + 7 more questions →
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { QuizLobby, QuizQuestion, QuizFeedback, QuizResults });