// Examensim rapport (pass + fail), cooldown card, paywall modals
const er_t = window.theme(false);

function CijferHero({ t, cijfer, passed, slagingsgrens = '5,5', voorVak = 'Biologie HAVO' }) {
  const c = passed ? '#16A34A' : '#B45309';
  // Visual mark on a 1-10 scale
  const cijferNum = parseFloat(cijfer.replace(',', '.'));
  const grensNum = parseFloat(slagingsgrens.replace(',', '.'));
  return (
    <window.Card t={t} padding={24} style={{
      background: `linear-gradient(180deg, color-mix(in srgb, ${c} 6%, ${t.card}) 0%, ${t.card} 100%)`,
      borderColor: `color-mix(in srgb, ${c} 28%, ${t.border})`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, 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: c, padding: '3px 8px', borderRadius: 9999,
          background: `color-mix(in srgb, ${c} 14%, transparent)`,
        }}>
          <window.LucideIcon name={passed ? 'check' : 'x'} size={11} />
          {passed ? 'Geslaagd' : 'Niet geslaagd'}
        </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: 26, color: t.textDim }}>/ 10</span>
      </div>

      {/* Slagings-context schaal */}
      <div style={{ marginTop: 16 }}>
        <div style={{ position: 'relative', height: 8, borderRadius: 9999, background: t.borderSoft, marginBottom: 8 }}>
          {/* slagingsgrens marker */}
          <div style={{
            position: 'absolute', left: `${(grensNum / 10) * 100}%`, top: -4, bottom: -4,
            width: 2, background: t.textDim, borderRadius: 1,
          }} />
          {/* fill */}
          <div style={{
            width: `${(cijferNum / 10) * 100}%`, height: '100%', borderRadius: 9999,
            background: c,
          }} />
          {/* knob */}
          <div style={{
            position: 'absolute', left: `calc(${(cijferNum / 10) * 100}% - 8px)`, top: -4,
            width: 16, height: 16, borderRadius: 9999, background: c, border: `3px solid ${t.card}`,
          }} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: t.textSub, fontWeight: 600 }}>
          <span>1</span>
          <span>Slagingsgrens {slagingsgrens} · {voorVak}</span>
          <span>10</span>
        </div>
      </div>
    </window.Card>
  );
}

function StatTile({ t, k, l, sub, color }) {
  return (
    <div style={{
      padding: 14, borderRadius: 10, background: t.borderSoft,
      border: `1px solid ${t.border}`, flex: 1,
    }}>
      <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: color || t.text, lineHeight: 1 }}>{k}</div>
      <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.5, color: t.textSub, marginTop: 6 }}>{l}</div>
      {sub && <div style={{ fontSize: 11, color: t.textDim, fontWeight: 600, marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

/* ───── Rapport — geslaagd ───── */
function ES_RapportPass() {
  const t = er_t;
  const onderdelen = [
    { name: 'Cellen & weefsels',         pct: 78, score: '14/18', color: '#16A34A' },
    { name: 'Voortplanting & erfelijkheid', pct: 72, score: '13/18', color: '#16A34A' },
    { name: 'Stofwisseling',             pct: 56, score: '9/16', color: '#D97706' },
    { name: 'Ecologie',                  pct: 50, score: '4/8',  color: '#D97706' },
  ];
  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <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="examensim" />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600 }}>Biologie · Eindexamen HAVO</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>Vandaag · 60 min · 60 vragen</span>
      </div>

      <div style={{ padding: '24px 32px', display: 'grid', gridTemplateColumns: '1.05fr 1.1fr', gap: 16 }}>
        <CijferHero t={t} cijfer="6,7" passed slagingsgrens="5,5" />
        <window.Card t={t} padding={20}>
          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: t.textSub, marginBottom: 12 }}>Snel overzicht</div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
            <StatTile t={t} k="44" l="Goed"  sub="73%" color="#16A34A" />
            <StatTile t={t} k="11" l="Fout"  color="#DC2626" />
            <StatTile t={t} k="5"  l="Half"  color="#D97706" />
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <StatTile t={t} k="58:14" l="Tijd gebruikt" sub="van 60:00" />
            <StatTile t={t} k="58 sec" l="Per vraag" sub="gem." />
            <StatTile t={t} k="3" l="Gevlagd" sub="2 fout" />
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 14, paddingTop: 12, 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} /> +200
            </span>
            <span style={{ fontSize: 11, color: t.textSub, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4 }}>Snaps · 2× multiplier</span>
            <span style={{ fontFamily: 'Fredoka One', fontSize: 18, color: '#22C55E', marginLeft: 'auto' }}>+120 XP</span>
          </div>
        </window.Card>
      </div>

      {/* Pulse-quote */}
      <div style={{ padding: '0 32px 16px' }}>
        <div style={{
          padding: '12px 16px', borderRadius: 10, background: t.borderSoft,
          fontSize: 13, color: t.text, lineHeight: 1.5,
        }}>
          <b>Pulse:</b> "Geslaagd — 6,7. Op de echte ben je waarschijnlijk klaar. Stofwisseling en ecologie zijn nog wankel; even oppoetsen."
        </div>
      </div>

      {/* Per-onderdeel */}
      <div style={{ padding: '0 32px 16px' }}>
        <h3 style={{ margin: '0 0 12px', fontWeight: 800, fontSize: 14, color: t.text }}>Score per onderdeel</h3>
        <window.Card t={t} padding={0}>
          {onderdelen.map((o, i) => (
            <div key={i} style={{
              padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 16,
              borderBottom: i < onderdelen.length - 1 ? `1px solid ${t.border}` : 0,
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: t.text }}>{o.name}</div>
                <div style={{ height: 6, borderRadius: 9999, background: t.borderSoft, marginTop: 8, position: 'relative', overflow: 'hidden' }}>
                  <div style={{ width: `${o.pct}%`, height: '100%', background: o.color, borderRadius: 9999 }} />
                </div>
              </div>
              <div style={{ textAlign: 'right', minWidth: 80 }}>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: o.color, lineHeight: 1 }}>{o.pct}%</div>
                <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600, marginTop: 4 }}>{o.score}</div>
              </div>
            </div>
          ))}
        </window.Card>
      </div>

      {/* Cross-pijler */}
      <div style={{ padding: '0 32px 16px' }}>
        <h3 style={{ margin: '0 0 12px', fontWeight: 800, fontSize: 14, color: t.text }}>Volgende stap</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <window.HandoffCard pillar="leren" direction="to" title="Herhaal — Stofwisseling" subtitle="2 paragrafen · 12 min" />
          <window.HandoffCard pillar="plannen" direction="to" title="Plan herhaling — Ecologie" subtitle="Plannen reserveert morgen 16:00" />
        </div>
      </div>

      {/* Cooldown footer */}
      <div style={{ padding: '0 32px 32px' }}>
        <div style={{
          padding: 14, borderRadius: 10,
          background: 'color-mix(in srgb, #00B4D8 8%, transparent)',
          border: `1px dashed color-mix(in srgb, #00B4D8 32%, transparent)`,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10, flexShrink: 0,
            background: 'color-mix(in srgb, #00B4D8 16%, transparent)', color: t.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.LucideIcon name="hourglass" size={18} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 800, fontSize: 14, color: t.text }}>Tot morgen om deze tijd</div>
            <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, marginTop: 2 }}>
              Even laten bezinken — een sim opnieuw doen op dezelfde dag voelt productief, maar je leert er minder van. Tussendoor: oefen losse onderwerpen in Quiz of Oefentoets.
            </div>
          </div>
          <window.Btn t={t} kind="secondary" size="sm" iconRight="arrow-right">Naar Quiz</window.Btn>
        </div>
        <div style={{ display: 'flex', gap: 10, marginTop: 14, justifyContent: 'flex-end' }}>
          <window.Btn t={t} kind="ghost" size="md" icon="download">Exporteer als PDF</window.Btn>
          <window.Btn t={t} kind="ghost" size="md" icon="list">Bekijk alle 60 vragen</window.Btn>
        </div>
      </div>
    </div>
  );
}

/* ───── Rapport — niet geslaagd (helpend, geen schaamte) ───── */
function ES_RapportFail() {
  const t = er_t;
  const onderdelen = [
    { name: 'Cellen & weefsels',           pct: 56, score: '10/18', color: '#D97706' },
    { name: 'Voortplanting & erfelijkheid',pct: 39, score: '7/18',  color: '#DC2626' },
    { name: 'Stofwisseling',               pct: 50, score: '8/16',  color: '#D97706' },
    { name: 'Ecologie',                    pct: 38, score: '3/8',   color: '#DC2626' },
  ];
  return (
    <div style={{ height: '100%', overflow: 'auto', background: t.bg, fontFamily: 'Nunito' }}>
      <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="examensim" />
        <span style={{ color: t.textSub, fontSize: 12, fontWeight: 600 }}>Biologie · Eindexamen HAVO</span>
        <div style={{ flex: 1 }} />
        <span style={{ fontSize: 12, color: t.textSub }}>Vandaag · 60 min · 60 vragen</span>
      </div>

      <div style={{ padding: '24px 32px', display: 'grid', gridTemplateColumns: '1.05fr 1.1fr', gap: 16 }}>
        <CijferHero t={t} cijfer="4,9" passed={false} slagingsgrens="5,5" />
        <window.Card t={t} padding={20}>
          <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: t.textSub, marginBottom: 12 }}>Snel overzicht</div>
          <div style={{ display: 'flex', gap: 10, marginBottom: 12 }}>
            <StatTile t={t} k="28" l="Goed" sub="47%" color="#16A34A" />
            <StatTile t={t} k="22" l="Fout" color="#DC2626" />
            <StatTile t={t} k="10" l="Half" color="#D97706" />
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <StatTile t={t} k="60:00" l="Tijd op" sub="auto-ingediend" />
            <StatTile t={t} k="62 sec" l="Per vraag" sub="gem." />
            <StatTile t={t} k="11" l="Gevlagd" sub="9 fout" />
          </div>
          <div style={{ display: 'flex', gap: 16, marginTop: 14, paddingTop: 12, 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} /> +120
            </span>
            <span style={{ fontSize: 11, color: t.textSub, fontWeight: 700, textTransform: 'uppercase', letterSpacing: 0.4 }}>Snaps · poging</span>
            <span style={{ fontFamily: 'Fredoka One', fontSize: 18, color: '#22C55E', marginLeft: 'auto' }}>+80 XP</span>
          </div>
        </window.Card>
      </div>

      {/* Pulse — helpend, niet schaamtevol */}
      <div style={{ padding: '0 32px 16px' }}>
        <div style={{
          padding: '14px 16px', borderRadius: 10,
          background: 'color-mix(in srgb, #00B4D8 6%, transparent)',
          border: `1px solid color-mix(in srgb, #00B4D8 24%, transparent)`,
          display: 'flex', gap: 12, alignItems: 'flex-start',
        }}>
          <div style={{ flexShrink: 0, marginTop: -2 }}>
            <window.PulseLottie size={32} />
          </div>
          <div style={{ flex: 1, fontSize: 13, lineHeight: 1.55, color: t.text }}>
            <b>Pulse:</b> "4,9 — niet gehaald. Geen ramp: nu weet je wáár je staat. Twee onderwerpen zijn echt wankel — herhaal die en doe het over een dag opnieuw."
          </div>
        </div>
      </div>

      {/* Wat te herhalen — bovenaan, niet onderaan */}
      <div style={{ padding: '0 32px 16px' }}>
        <h3 style={{ margin: '0 0 12px', fontWeight: 800, fontSize: 14, color: t.text }}>Wat te herhalen</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <window.HandoffCard pillar="leren" direction="to" title="Voortplanting & erfelijkheid" subtitle="3 paragrafen · 24 min · grootste tekort" />
          <window.HandoffCard pillar="leren" direction="to" title="Ecologie — basisbegrippen" subtitle="2 paragrafen · 16 min" />
        </div>
      </div>

      {/* Per-onderdeel */}
      <div style={{ padding: '0 32px 16px' }}>
        <h3 style={{ margin: '0 0 12px', fontWeight: 800, fontSize: 14, color: t.text }}>Score per onderdeel</h3>
        <window.Card t={t} padding={0}>
          {onderdelen.map((o, i) => (
            <div key={i} style={{
              padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 16,
              borderBottom: i < onderdelen.length - 1 ? `1px solid ${t.border}` : 0,
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 14, color: t.text }}>{o.name}</div>
                <div style={{ height: 6, borderRadius: 9999, background: t.borderSoft, marginTop: 8 }}>
                  <div style={{ width: `${o.pct}%`, height: '100%', background: o.color, borderRadius: 9999 }} />
                </div>
              </div>
              <div style={{ textAlign: 'right', minWidth: 80 }}>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: o.color, lineHeight: 1 }}>{o.pct}%</div>
                <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600, marginTop: 4 }}>{o.score}</div>
              </div>
            </div>
          ))}
        </window.Card>
      </div>

      <div style={{ padding: '0 32px 32px' }}>
        <div style={{
          padding: 14, borderRadius: 10,
          background: 'color-mix(in srgb, #00B4D8 8%, transparent)',
          border: `1px dashed color-mix(in srgb, #00B4D8 32%, transparent)`,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 10, flexShrink: 0,
            background: 'color-mix(in srgb, #00B4D8 16%, transparent)', color: t.primary,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.LucideIcon name="hourglass" size={18} /></div>
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 800, fontSize: 14, color: t.text }}>Even op adem komen — morgen weer</div>
            <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, marginTop: 2 }}>
              Een sim direct opnieuw doen geeft een vals gevoel van vooruitgang. Slaap er een nachtje over, herhaal de zwakke onderwerpen, en kom morgen sterker terug. Pulse maakt een herinnering.
            </div>
          </div>
          <window.Btn t={t} kind="primary" size="sm" iconRight="arrow-right">Begin met herhalen</window.Btn>
        </div>
      </div>
    </div>
  );
}

/* ───── Paywall modal — Examensim (Free of Premium) ───── */
function ES_Paywall() {
  const t = er_t;
  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' }}>
        {/* Faded backdrop */}
        <div style={{ padding: 32, opacity: 0.45 }}>
          <div style={{ height: 32, width: 220, borderRadius: 10, background: t.borderSoft, marginBottom: 18 }} />
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            <div style={{ height: 130, borderRadius: 12, background: t.card, border: `1px solid ${t.border}` }} />
            <div style={{ height: 130, borderRadius: 12, background: t.card, border: `1px solid ${t.border}` }} />
          </div>
        </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: 460, background: t.card, borderRadius: 14, padding: 24,
          boxShadow: '0 24px 64px rgba(0,0,0,0.25)',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: 'color-mix(in srgb, #023E8A 14%, transparent)',
              color: '#023E8A',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '3px double color-mix(in srgb, #023E8A 32%, transparent)',
            }}><window.LucideIcon name="shield-check" size={18} /></div>
            <span style={{
              fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
              color: '#023E8A',
              padding: '4px 10px', borderRadius: 9999,
              background: 'color-mix(in srgb, #023E8A 10%, transparent)',
              border: '3px double color-mix(in srgb, #023E8A 32%, transparent)',
            }}>Pro-tier</span>
          </div>
          <h3 style={{ margin: 0, fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 22, color: t.text }}>Examensimulatie · voor het echte werk</h3>
          <p style={{ color: t.textSub, fontSize: 14, lineHeight: 1.55, margin: '10px 0 16px' }}>
            Echt examen-realisme: dezelfde lengte, geen feedback, geen pauze. Pro-tier geeft je dat plus een uitgebreid nakijkrapport.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 18 }}>
            {[
              'Examenstijl: 60 vragen, 60 min, 1-10 cijfer met slagingsgrens',
              'Per-onderdeel-rapport met sterk/zwak-aanbevelingen',
              'Cross-pijler: Pulse plant herhaling in voor zwakke onderwerpen',
            ].map((l, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 13, color: t.text, lineHeight: 1.5 }}>
                <window.LucideIcon name="check" size={14} style={{ color: '#16A34A', marginTop: 4 }} />
                <span>{l}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <window.Btn t={t} kind="ghost" size="md" full>Misschien later</window.Btn>
            <window.Btn t={t} kind="primary" size="md" full iconRight="arrow-right">Bekijk Pro-plannen</window.Btn>
          </div>
          <div style={{ fontSize: 11, color: t.textDim, fontWeight: 600, marginTop: 12, textAlign: 'center' }}>
            Geen verplichting — Pulse blijft je companion ook in Free.
          </div>
        </div>
      </main>
    </div>
  );
}

window.ES_RapportPass = ES_RapportPass;
window.ES_RapportFail = ES_RapportFail;
window.ES_Paywall = ES_Paywall;