// Examensim states — focus mode (dark "ink"), pre-screen, time warnings, leave modal, time-up.
// Design choice: Examensim runs in a dedicated dark "ink" theme even when the rest of the app
// is light — visual signal that you're in something different. Sidebar fully hidden.
const es_t_dark = window.theme(true);

// Custom ink palette (deeper than dark mode)
const ink = {
  bg: '#0B1020',
  surface: '#121829',
  surfaceHi: '#1A2238',
  border: '#23304B',
  text: '#E8EDF7',
  textSub: '#94A3B8',
  textDim: '#5C6A85',
  primary: '#00B4D8',
  amber: '#F59E0B',
  red: '#F87171',
  ok: '#22C55E',
};

/* ───── 01 — Pre-sim disclaimer ───── */
function ES_PreScreen() {
  const t = window.theme(false);
  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="examensim" />
            <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 · Eindexamen HAVO
            </span>
          </div>
          <h1 style={{ fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 30, lineHeight: 1.15, color: t.text, margin: '0 0 8px' }}>
            Examensim
          </h1>
          <p style={{ color: t.textSub, fontSize: 14, margin: '0 0 20px', lineHeight: 1.5 }}>
            Pulse: <span style={{ color: t.text }}>"60 minuten, geen pauze, geen feedback. Veel succes."</span>
          </p>

          <div style={{
            background: '#0B1020',
            color: '#E8EDF7',
            borderRadius: 12,
            padding: 20,
            marginBottom: 14,
          }}>
            {[
              { i: 'clock', k: '60 minuten', l: 'tijd loopt door, geen pauze' },
              { i: 'eye-off', k: 'Geen feedback', l: 'pas in eindrapport zie je je antwoorden' },
              { i: 'monitor-off', k: 'Tab-wissel telt', l: 'verlaat het tabblad → waarschuwing' },
              { i: 'gauge', k: '60 vragen · cijfer 1–10', l: 'slagingsgrens 5,5' },
            ].map((r, idx) => (
              <div key={idx} style={{
                display: 'flex', alignItems: 'flex-start', gap: 12,
                paddingTop: idx === 0 ? 0 : 14, paddingBottom: idx === 3 ? 0 : 14,
                borderBottom: idx < 3 ? '1px solid #23304B' : 0,
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: '#1A2238', color: '#94A3B8',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                }}>
                  <window.LucideIcon name={r.i} size={16} />
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Nunito', fontWeight: 800, fontSize: 14, color: '#E8EDF7' }}>{r.k}</div>
                  <div style={{ fontSize: 12, color: '#94A3B8', fontWeight: 600, marginTop: 2 }}>{r.l}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10, background: t.borderSoft, fontSize: 12, color: t.textSub, marginBottom: 18 }}>
            <window.LucideIcon name="info" size={14} />
            <span>Na afloop kan je deze sim pas over <b style={{ color: t.text }}>24 uur</b> opnieuw doen.</span>
          </div>

          <div style={{ display: 'flex', gap: 10 }}>
            <window.Btn t={t} kind="ghost" size="lg">Annuleer</window.Btn>
            <window.Btn t={t} kind="serious" size="lg" iconRight="arrow-right" full>Klaar — start sim</window.Btn>
          </div>
        </div>
      </main>
    </div>
  );
}

/* ───── Shared focus-mode chrome ─────
   Pulse staat als statisch logo linksboven — geen reactie tijdens sim,
   alleen brand-recognition. Pulse 'leeft' weer op het rapport-scherm. */
function FocusShell({ children, timeColor = ink.textSub, timeText = '54:12', flagged = false, currentN = 23, total = 60, ambient }) {
  return (
    <div style={{
      width: '100%', height: '100%', background: ink.bg, color: ink.text,
      fontFamily: 'Nunito', display: 'flex', flexDirection: 'column',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Optional ambient gradient (red on time-out) */}
      {ambient}

      {/* Minimal HUD */}
      <div style={{
        padding: '14px 28px', display: 'flex', alignItems: 'center', gap: 14,
        borderBottom: `1px solid ${ink.border}`,
        position: 'relative', zIndex: 1,
      }}>
        {/* Pulse — statisch, geen reactie. Brand-recognition only. */}
        <div style={{ opacity: 0.55, filter: 'grayscale(0.4)', marginRight: 2 }}>
          <window.PulseLottie size={22} animate={false} />
        </div>
        <span style={{
          fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
          color: ink.textSub,
        }}>Examensim</span>
        <span style={{
          width: 1, height: 14, background: ink.border,
        }} />
        <span style={{ fontSize: 13, fontWeight: 700, color: ink.text }}>
          Vraag <span style={{ color: ink.text }}>{currentN}</span>
          <span style={{ color: ink.textDim }}> / {total}</span>
        </span>

        <div style={{ flex: 1 }} />

        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 12px', borderRadius: 9999,
          background: flagged ? 'color-mix(in srgb, #F59E0B 18%, transparent)' : 'transparent',
          color: flagged ? '#FBBF24' : ink.textSub,
          border: `1px solid ${flagged ? 'color-mix(in srgb, #F59E0B 38%, transparent)' : ink.border}`,
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, cursor: 'pointer',
        }}>
          <window.LucideIcon name="flag" size={12} fill={flagged ? '#FBBF24' : 'none'} />
          {flagged ? 'Gevlagd' : 'Vlag'}
        </button>

        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          padding: '6px 14px', borderRadius: 9999,
          background: 'color-mix(in srgb, ' + timeColor + ' 12%, transparent)',
          border: `1px solid color-mix(in srgb, ${timeColor} 30%, transparent)`,
          color: timeColor,
          fontFamily: 'Fredoka One', fontSize: 16, lineHeight: 1,
        }}>
          <window.LucideIcon name="clock" size={14} /> {timeText}
        </span>

        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          padding: '6px 12px', borderRadius: 9999,
          background: 'transparent', border: `1px solid ${ink.border}`, color: ink.textSub,
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, cursor: 'pointer',
        }}>
          <window.LucideIcon name="layout-list" size={12} />
        </button>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', position: 'relative', zIndex: 1 }}>
        {children}
      </div>

      {/* Footer */}
      <div style={{
        padding: '12px 28px', borderTop: `1px solid ${ink.border}`,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 14px',
          background: 'transparent', border: `1px solid ${ink.border}`, color: ink.textSub,
          borderRadius: 9999, fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, cursor: 'pointer',
        }}>
          <window.LucideIcon name="arrow-left" size={12} /> Vorige
        </button>
        <span style={{ fontSize: 11, color: ink.textDim, fontWeight: 600 }}>Auto-saved</span>
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px',
          background: '#E8EDF7', border: 0, color: '#0B1020',
          borderRadius: 9999, fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, cursor: 'pointer',
        }}>
          Volgende <window.LucideIcon name="arrow-right" size={12} />
        </button>
      </div>
    </div>
  );
}

function FocusQuestion({ flagged }) {
  return (
    <div style={{ flex: 1, padding: '40px 64px', display: 'flex', justifyContent: 'center', overflow: 'auto' }}>
      <div style={{ width: '100%', maxWidth: 620 }}>
        <div style={{
          fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase',
          color: ink.textSub, marginBottom: 10,
        }}>Open vraag · 4 punten</div>
        <h2 style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 22, lineHeight: 1.45,
          color: ink.text, margin: '0 0 22px',
        }}>
          Leg uit hoe een mitochondrion de energie uit glucose omzet in ATP. Noem minimaal twee tussenstappen.
        </h2>

        <div style={{
          background: ink.surface, border: `1px solid ${ink.border}`, borderRadius: 12, padding: 16,
        }}>
          <div style={{
            color: ink.text, fontSize: 14, lineHeight: 1.6, fontFamily: 'Nunito', fontWeight: 500,
            minHeight: 140,
          }}>
            De glucose wordt eerst afgebroken via de glycolyse in het cytoplasma — dat levert pyruvaat op. Daarna gaat het de mitochondrion in, waar de citroenzuurcyclus
            <span style={{ borderLeft: `2px solid ${ink.primary}`, marginLeft: 1, animation: 'blink 1s step-end infinite' }}></span>
          </div>
          <div style={{ marginTop: 12, paddingTop: 10, borderTop: `1px solid ${ink.border}`, display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 11, color: ink.textDim, fontWeight: 600 }}>
            <span>32 woorden · richtlijn 60–120</span>
            <span>Ctrl + Enter = volgende</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ───── 02 — Focus mode default ───── */
function ES_FocusDefault() {
  return <FocusShell timeColor={ink.textSub} timeText="54:12" currentN={23} flagged={false}>
    <FocusQuestion />
  </FocusShell>;
}

/* ───── 03 — Time warning amber (<10 min) ───── */
function ES_FocusAmber() {
  return <FocusShell timeColor="#FBBF24" timeText="9:42" currentN={48} flagged={true}>
    <FocusQuestion flagged />
  </FocusShell>;
}

/* ───── 04 — Time warning red (<2 min) + ambient ───── */
function ES_FocusRed() {
  const ambient = (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: 'radial-gradient(circle at 50% 0%, rgba(248,113,113,0.10) 0%, transparent 60%)',
      boxShadow: 'inset 0 0 120px rgba(248,113,113,0.12)',
    }} />
  );
  return <FocusShell ambient={ambient} timeColor="#F87171" timeText="1:48" currentN={56} flagged={true}>
    <FocusQuestion />
  </FocusShell>;
}

/* ───── 05a — Tab-leave modal · 1× (neutraal) ─────
   Geen penalty, geen verloren tijd. Alleen heads-up + tellen via analytics. */
function ES_LeaveModal({ count = 1 }) {
  const isFirst = count === 1;
  const isSecond = count === 2;
  const isThird = count >= 3;
  const accent = isFirst ? '#94A3B8' : (isSecond ? '#FBBF24' : '#F87171');
  const headline = isFirst
    ? 'Even weg geweest?'
    : (isSecond ? 'Tweede keer — let op' : 'Derde keer — niet meer');
  const body = isFirst
    ? 'Op het echte examen kan je niet wisselen tussen tabs. Probeer dit ook hier vol te houden — het maakt je sim-cijfer betrouwbaarder.'
    : (isSecond
      ? 'Dit is je tweede tab-wissel. We tellen het mee, niet om je te straffen — maar je sim-cijfer is alleen waardevol als je de regels ook simuleert.'
      : 'Vanaf nu zijn tab-wissels zichtbaar in je rapport als kanttekening bij je cijfer. Je bent volwassen genoeg om dit zelf te kiezen.');
  return (
    <FocusShell timeColor={ink.textSub} timeText="54:09" currentN={23}>
      <FocusQuestion />
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(5,9,20,0.65)', zIndex: 5 }} />
      <div style={{
        position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
        width: 440, background: ink.surfaceHi, borderRadius: 14, padding: 22,
        border: `1px solid ${ink.border}`, boxShadow: '0 24px 64px rgba(0,0,0,0.45)', zIndex: 6,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 9,
            background: `color-mix(in srgb, ${accent} 16%, transparent)`, color: accent,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.LucideIcon name="monitor-off" size={18} /></div>
          <span style={{
            fontSize: 10, fontWeight: 800, letterSpacing: 1.2, textTransform: 'uppercase', color: accent,
          }}>Tab-wissel #{count}</span>
        </div>
        <h3 style={{ margin: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 18, color: ink.text }}>{headline}</h3>
        <p style={{ color: ink.textSub, fontSize: 13, lineHeight: 1.55, margin: '8px 0 16px' }}>{body}</p>
        <button style={{
          width: '100%', padding: '12px', borderRadius: 10,
          background: ink.text, color: ink.bg, border: 0, cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
        }}>{isThird ? 'Begrepen' : 'Verder met de sim'}</button>
      </div>
    </FocusShell>
  );
}
function ES_LeaveModal_2nd() { return <ES_LeaveModal count={2} />; }
function ES_LeaveModal_3rd() { return <ES_LeaveModal count={3} />; }

/* ───── 06 — Time-up overlay (auto-submit transition) ───── */
function ES_TimeUp() {
  return (
    <div style={{
      width: '100%', height: '100%', background: ink.bg, color: ink.text,
      fontFamily: 'Nunito', display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column',
    }}>
      <div style={{
        width: 64, height: 64, borderRadius: 16, marginBottom: 18,
        background: 'color-mix(in srgb, #F87171 18%, transparent)',
        color: '#F87171',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <window.LucideIcon name="clock" size={32} />
      </div>
      <h2 style={{ fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 26, color: ink.text, margin: 0 }}>Tijd op</h2>
      <p style={{ color: ink.textSub, fontSize: 14, margin: '8px 0 24px' }}>Je antwoorden zijn ingediend — rapport wordt klaargemaakt.</p>
      <div style={{
        width: 220, height: 4, borderRadius: 9999, background: ink.surface, overflow: 'hidden',
      }}>
        <div style={{ width: '70%', height: '100%', background: ink.primary, borderRadius: 9999 }} />
      </div>
    </div>
  );
}

window.ES_PreScreen = ES_PreScreen;
window.ES_FocusDefault = ES_FocusDefault;
window.ES_FocusAmber = ES_FocusAmber;
window.ES_FocusRed = ES_FocusRed;
window.ES_LeaveModal = ES_LeaveModal;
window.ES_LeaveModal_2nd = ES_LeaveModal_2nd;
window.ES_LeaveModal_3rd = ES_LeaveModal_3rd;
window.ES_TimeUp = ES_TimeUp;