// Oefentoets states (Premium tier)
const ot_t_dark = window.theme(true);
const ot_t_light = window.theme(false);

/* ───── 01 — Pre-toets confirm ───── */
function OT_PreScreen() {
  const t = ot_t_light;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.SlimSidebar t={t} active="oefenen" />
      <main style={{ flex: 1, padding: '32px 40px', overflow: 'hidden', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <div style={{ width: '100%', maxWidth: 520 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
            <window.ModeBadge mode="oefentoets" />
            <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 6 }}>
              <window.LucideIcon name="leaf" size={14} style={{ color: '#22C55E' }} /> Biologie · H3 Cellen
            </span>
          </div>
          <h1 style={{
            fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 32, lineHeight: 1.15,
            color: t.text, margin: '0 0 8px',
          }}>Klaar voor de toets?</h1>
          <p style={{ color: t.textSub, fontSize: 15, margin: '0 0 24px', lineHeight: 1.5 }}>
            30 vragen, ongeveer 20 minuten. Je krijgt feedback aan het eind, niet per vraag — net als op school.
          </p>

          <window.Card t={t} padding={0} style={{ marginBottom: 16 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderBottom: `1px solid ${t.border}` }}>
              {[
                { i: 'list-checks', k: '30', l: 'vragen' },
                { i: 'clock', k: '~20 min', l: 'duur' },
                { i: 'gauge', k: '1–10', l: 'cijfer' },
              ].map((s, idx) => (
                <div key={idx} style={{ padding: 16, textAlign: 'center', borderRight: idx < 2 ? `1px solid ${t.border}` : 0 }}>
                  <div style={{ color: t.textSub, marginBottom: 6, display: 'flex', justifyContent: 'center' }}>
                    <window.LucideIcon name={s.i} size={16} />
                  </div>
                  <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.text }}>{s.k}</div>
                  <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.6, marginTop: 2 }}>{s.l}</div>
                </div>
              ))}
            </div>
            <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { i: 'eye-off', txt: 'Geen feedback per vraag — pas in eindrapport.' },
                { i: 'undo-2', txt: 'Antwoorden zijn aan te passen tot inleveren.' },
                { i: 'flag', txt: 'Vlag onzekere vragen om later terug te keren.' },
              ].map((r, idx) => (
                <div key={idx} style={{ display: 'flex', alignItems: 'center', gap: 10, color: t.textSub, fontSize: 13 }}>
                  <window.LucideIcon name={r.i} size={14} />
                  <span>{r.txt}</span>
                </div>
              ))}
            </div>
          </window.Card>

          <window.HandoffCard pillar="leren" direction="from"
            title="Bron — H3 Cellen en celdeling"
            subtitle="Heb je net gelezen in Leren · 18 min terug" />

          <div style={{ display: 'flex', gap: 10, marginTop: 18 }}>
            <window.Btn t={t} kind="ghost" size="lg">Annuleer</window.Btn>
            <window.Btn t={t} kind="primary" size="lg" iconRight="arrow-right" full>Begin oefentoets</window.Btn>
          </div>
        </div>
      </main>
    </div>
  );
}

/* ───── 02 — In progress (no feedback) ───── */
function OT_InProgress() {
  const t = ot_t_light;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.SlimSidebar t={t} active="oefenen" />
      <main style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* Top HUD */}
        <div style={{
          padding: '14px 32px', borderBottom: `1px solid ${t.border}`,
          display: 'flex', alignItems: 'center', gap: 16, background: t.card,
        }}>
          <window.ModeBadge mode="oefentoets" />
          <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 12, fontWeight: 700, color: t.textSub, minWidth: 'max-content' }}>Vraag 12 / 30</span>
            <div style={{ flex: 1, height: 4, borderRadius: 9999, background: t.borderSoft }}>
              <div style={{ width: '40%', height: '100%', background: t.primary, borderRadius: 9999 }} />
            </div>
          </div>
          <span style={{ display: 'flex', alignItems: 'center', gap: 6, color: t.textSub, fontSize: 13, fontWeight: 700 }}>
            <window.LucideIcon name="clock" size={14} /> 11:42
          </span>
          <button style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            padding: '6px 12px', borderRadius: 9999, fontFamily: 'Nunito', fontWeight: 700, fontSize: 12,
            background: t.borderSoft, border: `1px solid ${t.border}`, color: t.textSub,
          }}>
            <window.LucideIcon name="layout-list" size={14} /> Navigator
          </button>
        </div>

        {/* Question body */}
        <div style={{ flex: 1, padding: '32px 56px', overflow: 'auto' }}>
          <div style={{ maxWidth: 640, margin: '0 auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <span style={{
                fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
                color: '#16A34A', background: 'color-mix(in srgb, #16A34A 10%, transparent)',
                padding: '3px 8px', borderRadius: 6,
              }}>Meerkeuze</span>
              <button style={{
                marginLeft: 'auto',
                display: 'inline-flex', alignItems: 'center', gap: 6,
                background: 'transparent', border: `1px solid ${t.border}`, borderRadius: 9999,
                padding: '4px 10px', fontFamily: 'Nunito', fontWeight: 700, fontSize: 12,
                color: t.textSub, cursor: 'pointer',
              }}>
                <window.LucideIcon name="flag" size={12} /> Vlag
              </button>
            </div>
            <h2 style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 22, lineHeight: 1.35,
              color: t.text, margin: '0 0 24px',
            }}>Welk organel is verantwoordelijk voor het opwekken van energie in de cel?</h2>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                { k: 'A', l: 'Ribosomen' },
                { k: 'B', l: 'Mitochondriën', sel: true },
                { k: 'C', l: 'Endoplasmatisch reticulum' },
                { k: 'D', l: 'Golgi-apparaat' },
              ].map(o => (
                <div key={o.k} style={{
                  padding: '14px 16px', borderRadius: 10,
                  background: o.sel ? `color-mix(in srgb, ${t.primary} 8%, ${t.card})` : t.card,
                  border: `1.5px solid ${o.sel ? t.primary : t.border}`,
                  display: 'flex', alignItems: 'center', gap: 12,
                }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8, flexShrink: 0,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: o.sel ? t.primary : t.borderSoft,
                    color: o.sel ? '#fff' : t.textSub,
                    fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
                  }}>{o.k}</div>
                  <span style={{ color: t.text, fontWeight: 600, fontSize: 14 }}>{o.l}</span>
                  {o.sel && (
                    <span style={{
                      marginLeft: 'auto', fontSize: 11, fontWeight: 700,
                      color: t.textSub, letterSpacing: 0.3, textTransform: 'uppercase',
                    }}>Geregistreerd</span>
                  )}
                </div>
              ))}
            </div>

            <div style={{ marginTop: 28, padding: '12px 14px', borderRadius: 10,
              background: t.borderSoft, border: `1px dashed ${t.border}`,
              display: 'flex', alignItems: 'center', gap: 10, color: t.textSub, fontSize: 12,
            }}>
              <window.LucideIcon name="info" size={14} />
              <span>Je antwoord is opgeslagen — je kunt het later nog wijzigen.</span>
            </div>
          </div>
        </div>

        {/* Footer nav */}
        <div style={{
          padding: '14px 56px', borderTop: `1px solid ${t.border}`, background: t.card,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
        }}>
          <window.Btn t={t} kind="ghost" size="md" icon="arrow-left">Vorige</window.Btn>
          <span style={{ fontSize: 12, color: t.textDim, fontWeight: 600 }}>Auto-saved · 14:23</span>
          <window.Btn t={t} kind="primary" size="md" iconRight="arrow-right">Volgende</window.Btn>
        </div>
      </main>
    </div>
  );
}

/* ───── 03 — Navigator open ───── */
function OT_Navigator() {
  const t = ot_t_light;
  // Build 30-question grid: most answered, a few flagged, a few empty
  const qs = Array.from({ length: 30 }, (_, i) => {
    const n = i + 1;
    if ([3, 17, 22].includes(n)) return { n, status: 'flag' };
    if ([7, 19, 24, 28, 30].includes(n)) return { n, status: 'empty' };
    if (n === 12) return { n, status: 'current' };
    return { n, status: 'answered' };
  });
  const styleFor = (s) => {
    if (s === 'current') return { bg: t.primary, fg: '#fff', border: t.primary };
    if (s === 'answered') return { bg: 'color-mix(in srgb, #16A34A 10%, transparent)', fg: '#16A34A', border: 'color-mix(in srgb, #16A34A 30%, transparent)' };
    if (s === 'flag') return { bg: 'color-mix(in srgb, #F59E0B 14%, transparent)', fg: '#B45309', border: 'color-mix(in srgb, #F59E0B 38%, transparent)' };
    return { bg: t.card, fg: t.textSub, border: t.border };
  };
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito', position: 'relative' }}>
      <window.SlimSidebar t={t} active="oefenen" />
      <main style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        {/* dimmed underlay */}
        <div style={{ padding: '14px 32px', borderBottom: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', gap: 16, background: t.card, opacity: 0.55 }}>
          <window.ModeBadge mode="oefentoets" />
          <span style={{ fontSize: 12, fontWeight: 700, color: t.textSub }}>Vraag 12 / 30</span>
          <div style={{ flex: 1 }} />
          <span style={{ color: t.textSub, fontSize: 13, fontWeight: 700 }}>11:42</span>
        </div>
        <div style={{ position: 'absolute', inset: '49px 0 0 0', background: 'rgba(15,23,42,0.35)' }} />

        {/* Slide-over */}
        <div style={{
          position: 'absolute', top: 0, right: 0, bottom: 0, width: 380,
          background: t.card, borderLeft: `1px solid ${t.border}`,
          boxShadow: '-16px 0 48px rgba(15,23,42,0.18)',
          display: 'flex', flexDirection: 'column',
        }}>
          <div style={{ padding: '16px 20px', borderBottom: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <h3 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 16, color: t.text }}>Vraag-navigator</h3>
            <button style={{ background: 'transparent', border: 0, color: t.textSub, cursor: 'pointer', display: 'flex' }}>
              <window.LucideIcon name="x" size={18} />
            </button>
          </div>

          <div style={{ padding: '14px 20px', display: 'flex', gap: 14, flexWrap: 'wrap', borderBottom: `1px solid ${t.border}`, fontSize: 11, color: t.textSub, fontWeight: 700 }}>
            {[
              { c: '#16A34A', l: '22 beantwoord' },
              { c: '#F59E0B', l: '3 gevlagd' },
              { c: t.textDim, l: '5 leeg' },
            ].map((s, i) => (
              <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: 9999, background: s.c }} />
                {s.l}
              </span>
            ))}
          </div>

          <div style={{ padding: 20, overflow: 'auto', flex: 1 }}>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 8 }}>
              {qs.map(q => {
                const s = styleFor(q.status);
                return (
                  <div key={q.n} style={{
                    aspectRatio: '1 / 1',
                    borderRadius: 8, background: s.bg, color: s.fg,
                    border: `1.5px solid ${s.border}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
                    position: 'relative',
                  }}>
                    {q.n}
                    {q.status === 'flag' && (
                      <window.LucideIcon name="flag" size={10}
                        style={{ position: 'absolute', top: 4, right: 4 }} />
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{ padding: 16, borderTop: `1px solid ${t.border}` }}>
            <window.Btn t={t} kind="primary" size="md" full iconRight="check-check">Inleveren</window.Btn>
          </div>
        </div>
      </main>
    </div>
  );
}

/* ───── 04 — Submit confirm (incomplete) ───── */
function OT_SubmitConfirm() {
  const t = ot_t_light;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito', position: 'relative' }}>
      <window.SlimSidebar t={t} active="oefenen" />
      <main style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        <div style={{ padding: '14px 32px', borderBottom: `1px solid ${t.border}`, background: t.card, opacity: 0.4, display: 'flex', alignItems: 'center', gap: 16 }}>
          <window.ModeBadge mode="oefentoets" />
          <span style={{ fontSize: 12, fontWeight: 700, color: t.textSub }}>Vraag 30 / 30</span>
        </div>
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(15,23,42,0.45)' }} />

        <div style={{
          position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
          width: 440, background: t.card, borderRadius: 14, padding: 24,
          boxShadow: '0 24px 64px rgba(0,0,0,0.25)',
        }}>
          <div style={{
            width: 44, height: 44, borderRadius: 12, marginBottom: 14,
            background: 'color-mix(in srgb, #F59E0B 14%, transparent)', color: '#B45309',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.LucideIcon name="circle-help" size={22} /></div>
          <h3 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 18, color: t.text }}>Inleveren?</h3>
          <p style={{ color: t.textSub, fontSize: 14, lineHeight: 1.5, margin: '6px 0 16px' }}>
            Je hebt <b style={{ color: t.text }}>5 vragen</b> nog niet beantwoord — die tellen als fout.
          </p>
          <div style={{
            padding: 12, borderRadius: 10, background: t.borderSoft,
            display: 'flex', gap: 14, marginBottom: 18,
          }}>
            {[
              { c: '#16A34A', n: 22, l: 'beantwoord' },
              { c: '#F59E0B', n: 3,  l: 'gevlagd' },
              { c: t.textDim, n: 5, l: 'leeg' },
            ].map((s, i) => (
              <div key={i} style={{ flex: 1 }}>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: s.c }}>{s.n}</div>
                <div style={{ fontSize: 11, color: t.textSub, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5 }}>{s.l}</div>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <window.Btn t={t} kind="ghost" size="md" full>Terug naar vragen</window.Btn>
            <window.Btn t={t} kind="primary" size="md" full iconRight="check-check">Toch inleveren</window.Btn>
          </div>
        </div>
      </main>
    </div>
  );
}

window.OT_PreScreen = OT_PreScreen;
window.OT_InProgress = OT_InProgress;
window.OT_Navigator = OT_Navigator;
window.OT_SubmitConfirm = OT_SubmitConfirm;