// Oefentoets rapport — high-info but layered to prevent overwhelm
const otr_t = window.theme(false);

function OT_Rapport() {
  const t = otr_t;
  // Cijfer 6.4 — passing-but-not-great is the realistic case
  const cijfer = '6,4';
  const cijferColor = '#16A34A'; // pass

  const breakdown = [
    { k: 'goed',          n: 19, c: '#16A34A' },
    { k: 'half',          n: 4,  c: '#D97706' },
    { k: 'fout',          n: 5,  c: '#DC2626' },
    { k: 'niet beantw.',  n: 2,  c: '#94A3B8' },
  ];

  const topics = [
    { name: 'Cellen — opbouw',          mastery: 3, score: '5/5', strong: true },
    { name: 'Mitose & celdeling',       mastery: 2, score: '6/9' },
    { name: 'Organellen — functies',    mastery: 1, score: '3/8', weak: true },
    { name: 'Diffusie & osmose',        mastery: 3, score: '5/6', strong: true },
    { name: 'DNA & eiwitsynthese',      mastery: 1, score: '3/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' }}>
        {/* Top header bar */}
        <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 }}>Vandaag · 14:42</span>
        </div>

        {/* HERO — cijfer + breakdown */}
        <div style={{ padding: '28px 32px 0' }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.05fr 1.1fr', gap: 20,
          }}>
            {/* Cijfer card */}
            <window.Card t={t} padding={24} style={{
              background: `linear-gradient(180deg, color-mix(in srgb, ${cijferColor} 6%, ${t.card}) 0%, ${t.card} 100%)`,
              borderColor: `color-mix(in srgb, ${cijferColor} 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: cijferColor, padding: '3px 8px', borderRadius: 9999,
                  background: `color-mix(in srgb, ${cijferColor} 12%, transparent)`,
                }}>
                  <window.LucideIcon name="check" size={11} /> Voldoende
                </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> "Lekker — voldoende. Twee onderwerpen zijn nog wankel; herhaal die voor de echte toets."
              </p>
            </window.Card>

            {/* Breakdown card */}
            <window.Card t={t} padding={20}>
              <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: t.textSub, marginBottom: 14 }}>
                30 vragen · breakdown
              </div>
              {/* Stacked bar */}
              <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 / 30) * 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>

              {/* Awards row */}
              <div style={{ display: 'flex', gap: 10, marginTop: 14, paddingTop: 14, borderTop: `1px dashed ${t.border}` }}>
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <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} /> +75
                  </span>
                  <span style={{ fontSize: 11, color: t.textSub, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4 }}>Snaps · 1.5×</span>
                </div>
                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ fontFamily: 'Fredoka One', fontSize: 18, color: '#22C55E' }}>+45 XP</span>
                </div>
              </div>
            </window.Card>
          </div>
        </div>

        {/* Pulse-strip aanbevelingen */}
        <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 }}>Aanbevelingen</h3>
            <span style={{ fontSize: 11, color: t.textDim, fontWeight: 600 }}>· op basis van je zwakke onderwerpen</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <window.HandoffCard pillar="leren" direction="to"
              title="Herhaal — Organellen en hun functies"
              subtitle="3/8 goed · 4 min lezen in Leren" />
            <window.HandoffCard pillar="plannen" direction="to"
              title="Plan extra blok — DNA & eiwitsynthese"
              subtitle="Plannen reserveert 20 min vrij" />
          </div>
        </div>

        {/* Per-onderwerp tabel */}
        <div style={{ padding: '24px 32px 32px' }}>
          <h3 style={{ margin: '0 0 12px', fontFamily: 'Nunito', fontWeight: 800, fontSize: 15, color: t.text }}>Sterk & zwak per onderwerp</h3>
          <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>

          {/* Footer actions */}
          <div style={{ display: 'flex', gap: 10, marginTop: 18, 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>
        </div>
      </main>
    </div>
  );
}

window.OT_Rapport = OT_Rapport;