// Oefentoets rapport — score-tier variants. Re-uses HandoffCard, MasteryDots, Card, Btn.
// Three states: high (8.7), medium (6.4 — same as baseline), low (3.8 — new behavior).
// Key insight: low scores REORDER the screen — recommendations move ABOVE per-onderwerp,
// and "Speel als Examensim" is hidden (you're not ready). The cijfer-color shifts with tier.

const otrt_t = window.theme(false);

function CijferHero({ t, cijfer, color, badge, badgeIcon = 'check', subtitle }) {
  return (
    <window.Card t={t} padding={24} style={{
      background: `linear-gradient(180deg, color-mix(in srgb, ${color} 6%, ${t.card}) 0%, ${t.card} 100%)`,
      borderColor: `color-mix(in srgb, ${color} 28%, ${t.border})`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
        <span style={{
          fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
          color: t.textSub,
        }}>Eindcijfer</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          fontSize: 10, fontWeight: 800, letterSpacing: 0.8, textTransform: 'uppercase',
          color: color, padding: '3px 8px', borderRadius: 9999,
          background: `color-mix(in srgb, ${color} 12%, transparent)`,
        }}>
          <window.LucideIcon name={badgeIcon} size={11} /> {badge}
        </span>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 88, lineHeight: 1, color: t.text }}>{cijfer}</span>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 28, color: t.textDim }}>/ 10</span>
      </div>
      <p style={{ color: t.textSub, fontSize: 13, lineHeight: 1.5, margin: '12px 0 0', maxWidth: 360 }}>
        <b style={{ color: t.text }}>Pulse:</b> {subtitle}
      </p>
    </window.Card>
  );
}

function BreakdownCard({ t, breakdown, total, snaps, snapsLabel, xp }) {
  return (
    <window.Card t={t} padding={20}>
      <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: t.textSub, marginBottom: 14 }}>
        {total} vragen · breakdown
      </div>
      <div style={{ display: 'flex', height: 12, borderRadius: 9999, overflow: 'hidden', background: t.borderSoft, marginBottom: 14 }}>
        {breakdown.map((b, i) => <div key={i} style={{ width: `${(b.n / total) * 100}%`, background: b.c }} />)}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        {breakdown.map((b, i) => (
          <div key={i} style={{
            padding: '10px 12px', borderRadius: 10,
            background: `color-mix(in srgb, ${b.c} 8%, transparent)`,
            border: `1px solid color-mix(in srgb, ${b.c} 22%, transparent)`,
          }}>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: b.c, lineHeight: 1 }}>{b.n}</div>
            <div style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: t.textSub, marginTop: 4 }}>{b.k}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 10, marginTop: 14, paddingTop: 14, borderTop: `1px dashed ${t.border}`, alignItems: 'center' }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.gold, display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <window.LucideIcon name="zap" size={16} fill={t.gold} /> +{snaps}
        </span>
        <span style={{ fontSize: 11, color: t.textSub, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4 }}>Snaps · {snapsLabel}</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 18, color: '#22C55E' }}>+{xp} XP</span>
      </div>
    </window.Card>
  );
}

function TopicsCard({ t, topics }) {
  return (
    <window.Card t={t} padding={0}>
      {topics.map((tp, i) => (
        <div key={i} style={{
          padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 14,
          borderBottom: i < topics.length - 1 ? `1px solid ${t.border}` : 0,
        }}>
          <window.MasteryDots level={tp.mastery} size="md" />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'Nunito', fontWeight: 700, fontSize: 14, color: t.text }}>{tp.name}</div>
            <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, marginTop: 2 }}>{tp.score} goed</div>
          </div>
          {tp.strong && (
            <span style={{
              fontSize: 10, fontWeight: 800, color: '#16A34A', textTransform: 'uppercase', letterSpacing: 0.8,
              padding: '3px 8px', borderRadius: 9999, background: 'color-mix(in srgb, #16A34A 12%, transparent)',
            }}>Sterk</span>
          )}
          {tp.weak && (
            <span style={{
              fontSize: 10, fontWeight: 800, color: '#B45309', textTransform: 'uppercase', letterSpacing: 0.8,
              padding: '3px 8px', borderRadius: 9999, background: 'color-mix(in srgb, #F59E0B 14%, transparent)',
            }}>Herhalen</span>
          )}
          <window.LucideIcon name="chevron-right" size={16} style={{ color: t.textDim }} />
        </div>
      ))}
    </window.Card>
  );
}

function ChromeHeader({ t, sub = 'Vandaag · 14:42' }) {
  return (
    <div style={{
      padding: '14px 32px', borderBottom: `1px solid ${t.border}`, background: t.card,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
      <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 style={{ flex: 1 }} />
      <span style={{ fontSize: 12, color: t.textSub }}>{sub}</span>
    </div>
  );
}

/* ───────────────────────── HIGH — 8.7 ───────────────────────── */
function OT_RapportHigh() {
  const t = otrt_t;
  const breakdown = [
    { k: 'goed', n: 26, c: '#16A34A' },
    { k: 'half', n: 2, c: '#D97706' },
    { k: 'fout', n: 2, c: '#DC2626' },
    { k: 'niet beantw.', n: 0, c: '#94A3B8' },
  ];
  const topics = [
    { name: 'Cellen — opbouw', mastery: 3, score: '5/5', strong: true },
    { name: 'Mitose & celdeling', mastery: 3, score: '8/9', strong: true },
    { name: 'Organellen — functies', mastery: 3, score: '7/8', strong: true },
    { name: 'Diffusie & osmose', mastery: 3, score: '6/6', strong: true },
    { name: 'DNA & eiwitsynthese', mastery: 2, score: '6/8' },
  ];
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.SlimSidebar t={t} active="oefenen" />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <ChromeHeader t={t} />
        <div style={{ padding: '28px 32px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1.1fr', gap: 20 }}>
            <CijferHero t={t} cijfer="8,7" color="#16A34A" badge="Ruim voldoende" subtitle={'"Sterk werk — 8,7. Je bent klaar voor de Examensim."'} />
            <BreakdownCard t={t} breakdown={breakdown} total={30} snaps={120} snapsLabel="2× multiplier" xp={75} />
          </div>
        </div>

        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <h3 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 15, color: t.text }}>Sterk & zwak per onderwerp</h3>
          </div>
          <TopicsCard t={t} topics={topics} />
        </div>

        <div style={{ padding: '20px 32px 0' }}>
          <h3 style={{ margin: '0 0 12px', fontFamily: 'Nunito', fontWeight: 800, fontSize: 15, color: t.text }}>Volgende stap</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <window.HandoffCard pillar="oefenen" direction="to" title="Doe als Examensim" subtitle="Echt examen-realisme · 60 min · onder druk presteren" />
            <window.HandoffCard pillar="leren" direction="to" title="Verfijn — DNA & eiwitsynthese" subtitle="Enige onderwerp <90% · 4 min lezen" />
          </div>
        </div>

        <div style={{ padding: '24px 32px 32px', display: 'flex', gap: 10, alignItems: 'center' }}>
          <window.Btn t={t} kind="ghost" size="md" icon="list">Bekijk alle 30 vragen</window.Btn>
          <div style={{ flex: 1 }} />
          <window.Btn t={t} kind="secondary" size="md" icon="rotate-cw">Speel opnieuw</window.Btn>
          <window.Btn t={t} kind="primary" size="md" icon="shield-check">Speel als Examensim →</window.Btn>
        </div>
      </main>
    </div>
  );
}

/* ───────────────────────── LOW — 3.8 ───────────────────────── */
// Re-orders the screen: handoff cards FIRST, "Speel als Examensim" hidden, no celebratory snaps emphasis
function OT_RapportLow() {
  const t = otrt_t;
  const breakdown = [
    { k: 'goed', n: 11, c: '#16A34A' },
    { k: 'half', n: 5, c: '#D97706' },
    { k: 'fout', n: 12, c: '#DC2626' },
    { k: 'niet beantw.', n: 2, c: '#94A3B8' },
  ];
  const topics = [
    { name: 'Cellen — opbouw', mastery: 2, score: '3/5' },
    { name: 'Mitose & celdeling', mastery: 1, score: '2/9', weak: true },
    { name: 'Organellen — functies', mastery: 0, score: '1/8', weak: true },
    { name: 'Diffusie & osmose', mastery: 2, score: '4/6' },
    { name: 'DNA & eiwitsynthese', mastery: 1, score: '1/8', weak: true },
  ];
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.SlimSidebar t={t} active="oefenen" />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <ChromeHeader t={t} />
        <div style={{ padding: '28px 32px 0' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1.1fr', gap: 20 }}>
            <CijferHero t={t} cijfer="3,8" color="#B45309" badge="Onvoldoende" badgeIcon="alert-triangle"
              subtitle={'"Pittig resultaat — drie onderwerpen ken je nog niet. Geen ramp, dit is precies waarvoor de Oefentoets bestaat. Begin met lezen."'} />
            <BreakdownCard t={t} breakdown={breakdown} total={30} snaps={20} snapsLabel="poging" xp={20} />
          </div>
        </div>

        {/* DEVIATION: handoff cards moved ABOVE per-onderwerp for low scores — actie-eerst */}
        <div style={{ padding: '20px 32px 0' }}>
          <h3 style={{ margin: '0 0 12px', fontFamily: 'Nunito', fontWeight: 800, fontSize: 15, color: t.text }}>Begin hier</h3>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
            <window.HandoffCard pillar="leren" direction="to" title="Lees eerst — Organellen" subtitle="1/8 goed · 8 min in Leren" />
            <window.HandoffCard pillar="leren" direction="to" title="Lees eerst — DNA & eiwitsynthese" subtitle="1/8 goed · 12 min in Leren" />
            <window.HandoffCard pillar="leren" direction="to" title="Lees eerst — Mitose-fases" subtitle="2/9 goed · 6 min in Leren" />
          </div>
        </div>

        <div style={{ padding: '20px 32px 0' }}>
          <h3 style={{ margin: '0 0 12px', fontFamily: 'Nunito', fontWeight: 800, fontSize: 15, color: t.text }}>Sterk & zwak per onderwerp</h3>
          <TopicsCard t={t} topics={topics} />
        </div>

        {/* DEVIATION: "Speel als Examensim" verwijderd — niet ready, zou frustreren */}
        <div style={{ padding: '24px 32px 32px', display: 'flex', gap: 10, alignItems: 'center' }}>
          <window.Btn t={t} kind="ghost" size="md" icon="list">Bekijk alle 30 vragen</window.Btn>
          <div style={{ flex: 1 }} />
          <window.Btn t={t} kind="ghost" size="md" icon="rotate-cw">Probeer toch opnieuw</window.Btn>
          <window.Btn t={t} kind="primary" size="md" iconRight="arrow-right">Eerst lezen, dan terug</window.Btn>
        </div>
      </main>
    </div>
  );
}

window.OT_RapportHigh = OT_RapportHigh;
window.OT_RapportLow = OT_RapportLow;

/* ───────────────────────── Per-onderwerp mini-overzicht (Optie B) ─────────────────────────
   Klik op zwak onderwerp in low-score rapport → opent deze mini-view.
   Toont alleen de foute vragen op dat onderwerp, met "Naar Leren →" als CTA.
   Voorkomt context-switch — student kan zelf beslissen of hij de uitleg nodig heeft. */
function OT_TopicDetail() {
  const t = otrt_t;
  const fouten = [
    {
      n: 7, q: 'Wat is de functie van het Golgi-systeem?',
      jij: 'Eiwitten produceren',
      goed: 'Eiwitten verpakken en afscheiden',
      uitleg: 'Het Golgi-systeem MAAKT geen eiwitten — dat doen ribosomen. Het ontvangt ze, verpakt ze in blaasjes en stuurt ze naar hun bestemming.',
    },
    {
      n: 12, q: 'Welke organel breekt afvalstoffen af?',
      jij: 'Mitochondrium',
      goed: 'Lysosoom',
      uitleg: 'Mitochondriën leveren energie. Lysosomen zijn de "afvalverwerker" — ze bevatten enzymen die afvalstoffen en oude celonderdelen afbreken.',
    },
    {
      n: 18, q: 'Waar vindt eiwitsynthese plaats in de cel?',
      jij: 'In de celkern',
      goed: 'Op de ribosomen (in cytoplasma of op ER)',
      uitleg: 'In de celkern wordt het mRNA gemaakt (transcriptie). De eiwitten zelf worden op ribosomen samengesteld (translatie).',
    },
    {
      n: 23, q: 'Welke structuur omvat de hele cel en regelt wat erin/uit gaat?',
      jij: 'Celwand',
      goed: 'Celmembraan',
      uitleg: 'Een celwand is een extra stevige laag (planten/bacteriën). Het CELMEMBRAAN regelt het transport — dat is een dunne laag rond elke cel, ook bij dieren.',
    },
  ];
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.SlimSidebar t={t} active="oefenen" />
      <main style={{ flex: 1, overflow: 'auto' }}>
        {/* Back-aware header — duidelijk dat dit een drill-down is */}
        <div style={{
          padding: '14px 32px', borderBottom: `1px solid ${t.border}`, background: t.card,
          display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <window.LucideIcon name="arrow-left" size={18} style={{ color: t.textSub }} />
          <span style={{ fontSize: 12, color: t.textSub, fontWeight: 700 }}>Rapport · 3,8</span>
          <window.LucideIcon name="chevron-right" size={14} style={{ color: t.textDim }} />
          <span style={{ fontSize: 12, color: t.text, fontWeight: 800 }}>Organellen — functies</span>
          <div style={{ flex: 1 }} />
          <window.ModeBadge mode="oefentoets" />
        </div>

        {/* Topic-hero — wat ging er fout, niet goed */}
        <div style={{ padding: '28px 32px 0' }}>
          <window.Card t={t} padding={24} style={{
            background: `linear-gradient(180deg, color-mix(in srgb, #DC2626 5%, ${t.card}) 0%, ${t.card} 100%)`,
            borderColor: 'color-mix(in srgb, #DC2626 22%, ' + t.border + ')',
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20 }}>
              <div>
                <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: t.textSub, marginBottom: 4 }}>
                  Onderwerp
                </div>
                <h2 style={{ margin: 0, fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 28, color: t.text, lineHeight: 1.1 }}>
                  Organellen — functies
                </h2>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 12 }}>
                  <window.MasteryDots level={0} size="md" />
                  <span style={{ fontSize: 13, color: t.textSub, fontWeight: 700 }}>1 van 8 goed · 4 fouten zichtbaar</span>
                  <span style={{
                    fontSize: 10, fontWeight: 800, color: '#B45309', textTransform: 'uppercase', letterSpacing: 0.8,
                    padding: '3px 8px', borderRadius: 9999,
                    background: 'color-mix(in srgb, #F59E0B 14%, transparent)',
                  }}>Herhalen</span>
                </div>
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 12, marginTop: 6 }}>
                <window.PulseLottie size={44} />
                <div style={{ maxWidth: 240 }}>
                  <div style={{ fontSize: 13, color: t.text, lineHeight: 1.5 }}>
                    <b>Pulse:</b> "Functies van organellen door elkaar — heel normaal in het begin. Lees de paragraaf en kom terug."
                  </div>
                </div>
              </div>
            </div>
          </window.Card>
        </div>

        {/* Foute vragen — voluit, niet ingeklapt (dit is hét moment waar leren gebeurt) */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <h3 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 15, color: t.text }}>De 4 fouten op dit onderwerp</h3>
            <span style={{ fontSize: 11, color: t.textDim, fontWeight: 600 }}>· met Pulse-uitleg per vraag</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {fouten.map((f, i) => (
              <window.Card key={i} t={t} padding={18}>
                {/* Vraag-regel */}
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginBottom: 12 }}>
                  <div style={{
                    width: 24, height: 24, borderRadius: 7, flexShrink: 0,
                    background: 'color-mix(in srgb, #DC2626 16%, transparent)',
                    color: '#DC2626', display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <window.LucideIcon name="x" size={13} strokeWidth={3} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 11, color: t.textDim, fontWeight: 700, marginBottom: 2 }}>Vraag #{f.n}</div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: t.text, lineHeight: 1.4 }}>{f.q}</div>
                  </div>
                </div>

                {/* Antwoorden side-by-side */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 12 }}>
                  <div style={{
                    padding: '10px 12px', borderRadius: 8,
                    background: 'color-mix(in srgb, #DC2626 6%, transparent)',
                    border: '1px solid color-mix(in srgb, #DC2626 22%, transparent)',
                  }}>
                    <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: '#DC2626', marginBottom: 4 }}>Jouw antwoord</div>
                    <div style={{ fontSize: 13, color: t.text, fontWeight: 600, textDecoration: 'line-through', textDecorationColor: 'color-mix(in srgb, #DC2626 50%, transparent)' }}>{f.jij}</div>
                  </div>
                  <div style={{
                    padding: '10px 12px', borderRadius: 8,
                    background: 'color-mix(in srgb, #16A34A 6%, transparent)',
                    border: '1px solid color-mix(in srgb, #16A34A 22%, transparent)',
                  }}>
                    <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: '#16A34A', marginBottom: 4 }}>Goed antwoord</div>
                    <div style={{ fontSize: 13, color: t.text, fontWeight: 700 }}>{f.goed}</div>
                  </div>
                </div>

                {/* Pulse uitleg — kern van de mini-view */}
                <div style={{
                  padding: '10px 12px', borderRadius: 8,
                  background: 'color-mix(in srgb, #00B4D8 5%, transparent)',
                  borderLeft: '3px solid color-mix(in srgb, #00B4D8 60%, transparent)',
                  display: 'flex', gap: 10, alignItems: 'flex-start',
                }}>
                  <window.LucideIcon name="lightbulb" size={14} style={{ color: t.primary, marginTop: 2, flexShrink: 0 }} />
                  <div style={{ fontSize: 13, color: t.text, lineHeight: 1.5 }}>
                    <b style={{ color: t.primary }}>Pulse:</b> {f.uitleg}
                  </div>
                </div>
              </window.Card>
            ))}
          </div>
        </div>

        {/* Footer-CTA's — Optie B: student beslist zelf of Leren-handoff nodig is */}
        <div style={{ padding: '24px 32px 32px' }}>
          <div style={{
            padding: '16px 18px', borderRadius: 12,
            background: t.card, border: `1px solid ${t.border}`,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10, flexShrink: 0,
              background: 'color-mix(in srgb, #00B4D8 14%, transparent)',
              color: t.primary, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <window.LucideIcon name="book-open" size={18} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontWeight: 800, fontSize: 14, color: t.text }}>Wil je de uitleg lezen?</div>
              <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, marginTop: 2 }}>
                §3.3 "Organellen en hun functies" · 8 min · Pulse vat samen na elke alinea
              </div>
            </div>
            <window.Btn t={t} kind="primary" size="md" iconRight="arrow-right">Naar Leren</window.Btn>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 14, alignItems: 'center' }}>
            <window.Btn t={t} kind="ghost" size="md" icon="arrow-left">Terug naar rapport</window.Btn>
            <div style={{ flex: 1 }} />
            <window.Btn t={t} kind="secondary" size="md" icon="rotate-cw">Oefen alleen dit onderwerp (8 vragen)</window.Btn>
          </div>
        </div>
      </main>
    </div>
  );
}

window.OT_TopicDetail = OT_TopicDetail;