// Examensim — pass-narrow variant. Cijfer 5,7 (just past 5,5 grens).
// Emotionally distinct from confident pass: nervous-relief framing, NOT triumphant.
// Re-uses CijferHero/StatTile from examensim-rapport.jsx via window globals.

const esn_t = window.theme(false);

// Local StatTile (examensim-rapport.jsx defines its own but doesn't expose to window)
function EsnStatTile({ 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>
  );
}

// Local copy of CijferHero w/ amber accent (between green pass and red fail)
function CijferHeroNarrow({ t, cijfer = '5,7', slagingsgrens = '5,5' }) {
  const c = '#D97706'; // amber — passed but precarious
  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} 7%, ${t.card}) 0%, ${t.card} 100%)`,
      borderColor: `color-mix(in srgb, ${c} 30%, ${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="check" size={11} /> Net 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>

      <div style={{ marginTop: 16 }}>
        <div style={{ position: 'relative', height: 8, borderRadius: 9999, background: t.borderSoft, marginBottom: 8 }}>
          <div style={{
            position: 'absolute', left: `${(grensNum / 10) * 100}%`, top: -4, bottom: -4,
            width: 2, background: t.textDim, borderRadius: 1,
          }} />
          <div style={{ width: `${(cijferNum / 10) * 100}%`, height: '100%', borderRadius: 9999, background: c }} />
          {/* Highlight strip: marge tot grens */}
          <div style={{
            position: 'absolute', left: `${(grensNum / 10) * 100}%`,
            width: `${((cijferNum - grensNum) / 10) * 100}%`, top: 0, bottom: 0,
            background: `repeating-linear-gradient(45deg, transparent 0 4px, color-mix(in srgb, ${c} 30%, transparent) 4px 8px)`,
            borderRadius: 0,
          }} />
          <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} · marge 0,2</span>
          <span>10</span>
        </div>
      </div>
    </window.Card>
  );
}

function ES_RapportPassNarrow() {
  const t = esn_t;
  const onderdelen = [
    { name: 'Cellen & weefsels',           pct: 67, score: '12/18', color: '#16A34A' },
    { name: 'Voortplanting & erfelijkheid',pct: 56, score: '10/18', color: '#D97706' },
    { 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 }}>
        <CijferHeroNarrow t={t} cijfer="5,7" 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 }}>
            <EsnStatTile t={t} k="33" l="Goed" sub="55%" color="#16A34A" />
            <EsnStatTile t={t} k="19" l="Fout" color="#DC2626" />
            <EsnStatTile t={t} k="8"  l="Half" color="#D97706" />
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <EsnStatTile t={t} k="59:48" l="Tijd gebruikt" sub="van 60:00" />
            <EsnStatTile t={t} k="60 sec" l="Per vraag" sub="gem." />
            <EsnStatTile t={t} k="7" l="Gevlagd" sub="5 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} /> +160
            </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' }}>+95 XP</span>
          </div>
        </window.Card>
      </div>

      {/* Pulse-quote — eerlijk, niet triomfantelijk */}
      <div style={{ padding: '0 32px 16px' }}>
        <div style={{
          padding: '14px 16px', borderRadius: 10,
          background: 'color-mix(in srgb, #D97706 6%, transparent)',
          border: '1px solid color-mix(in srgb, #D97706 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> "Net geslaagd — 5,7 op een spannende grens. Op een zwakke dag tikt dit zo onder de 5,5. Drie onderwerpen zijn echt nog niet stabiel. Niet triomfantelijk doen, wél even doorhalen."
          </div>
        </div>
      </div>

      {/* Wat te herhalen — bovenaan voor narrow pass, net als bij fail */}
      <div style={{ padding: '0 32px 16px' }}>
        <h3 style={{ margin: '0 0 12px', fontWeight: 800, fontSize: 14, color: t.text }}>Bouw je marge op</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
          <window.HandoffCard pillar="leren" direction="to" title="Ecologie — basisbegrippen" subtitle="38% · grootste tekort · 16 min" />
          <window.HandoffCard pillar="leren" direction="to" title="Stofwisseling — herhaal" subtitle="50% · 12 min" />
          <window.HandoffCard pillar="plannen" direction="to" title="Plan herhaling" subtitle="Plannen reserveert 3× 20 min deze week" />
        </div>
      </div>

      <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 }}>Tot morgen om deze tijd</div>
            <div style={{ fontSize: 12, color: t.textSub, fontWeight: 600, marginTop: 2 }}>
              Net geslaagd is geen veiligheidsmarge. Slaap er een nachtje over, herhaal de wankele onderwerpen, en kom morgen sterker terug.
            </div>
          </div>
          <window.Btn t={t} kind="secondary" size="sm" iconRight="arrow-right">Begin met herhalen</window.Btn>
        </div>
      </div>
    </div>
  );
}

window.ES_RapportPassNarrow = ES_RapportPassNarrow;