/* ───────────────────────── Library v2 ─────────────────────────
   Reframe vs huidige Library: dual-paradigma — "Vandaag voor jou"
   AI-suggesties (mood-board boven), klassieke filtered grid (voor
   power-users die exact weten wat ze zoeken). 4 sleutel-states. */

const lib_t = window.theme(true);
const lib_t_l = window.theme(false);

const VAK_COLORS = {
  Biologie: '#16A34A', Wiskunde: '#0096C7', Engels: '#7C3AED',
  Geschiedenis: '#D97706', Scheikunde: '#DC2626', Aardrijkskunde: '#0EA5E9',
  Frans: '#EC4899', Nederlands: '#475569', Natuurkunde: '#F59E0B',
};

function VakChip({ t, vak, size = 'sm' }) {
  const c = VAK_COLORS[vak] || t.primary;
  const px = size === 'sm' ? 9 : 10;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: size === 'sm' ? '2px 8px' : '3px 9px', borderRadius: 9999,
      fontSize: px, fontWeight: 800, letterSpacing: 0.3,
      background: 'color-mix(in srgb, ' + c + ' 14%, transparent)',
      color: c,
    }}>{vak}</span>
  );
}

/* Modus pill — small chip, used both on card and as Detail header */
const MODUS_CFG = {
  Quiz:        { tier:'Free',    accent:'#16A34A', accentDark:'#22C55E', icon:'zap'             },
  Oefentoets:  { tier:'Premium', accent:'#0096C7', accentDark:'#00B4D8', icon:'clipboard-check' },
  Examensim:   { tier:'Pro',     accent:'#475569', accentDark:'#94A3B8', icon:'shield-check'    },
};
function ModusBadge({ t, modus, locked, size = 'sm' }) {
  const cfg = MODUS_CFG[modus];
  const c = t.dark ? cfg.accentDark : cfg.accent;
  const px = size === 'sm' ? 9 : 10;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: size === 'sm' ? '2px 7px' : '3px 9px', borderRadius: 9999,
      fontSize: px, fontWeight: 800, letterSpacing: 0.3,
      background: `color-mix(in srgb, ${c} ${t.dark ? 16 : 12}%, transparent)`,
      color: c,
      border: locked ? `1px dashed color-mix(in srgb, ${c} 45%, transparent)` : 'none',
    }}>
      <window.LucideIcon name={cfg.icon} size={size === 'sm' ? 9 : 10} />
      {modus}
      {locked && <window.LucideIcon name="lock" size={8} />}
    </span>
  );
}

function QuizCard({ t, q, locked, planLink }) {
  const c = VAK_COLORS[q.vak] || t.primary;
  const modus = q.modus || 'Quiz';
  return (
    <div style={{
      padding: 14, borderRadius: 12, background: t.card,
      border: `1px solid ${t.border}`,
      borderLeft: `3px solid ${c}`,
      display: 'flex', flexDirection: 'column', gap: 8, position: 'relative', cursor: 'pointer',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
        <VakChip t={t} vak={q.vak} />
        <ModusBadge t={t} modus={modus} locked={locked} />
        {planLink && (
          <span style={{
            fontSize: 9, fontWeight: 800, padding: '2px 7px', borderRadius: 9999,
            background: 'color-mix(in srgb, #9D4EDD 14%, transparent)',
            color: t.dark ? '#9D4EDD' : '#7C3AED',
            border: `1px dashed color-mix(in srgb, #9D4EDD 40%, transparent)`,
            letterSpacing: 0.4,
          }}>← PLAN</span>
        )}
        <div style={{ flex: 1 }} />
        <window.LucideIcon name={q.fav ? 'heart' : 'heart'} size={13}
          fill={q.fav ? '#EF4444' : 'none'}
          style={{ color: q.fav ? '#EF4444' : t.textDim }} />
      </div>
      <div style={{ fontSize: 14, fontWeight: 800, color: t.text, lineHeight: 1.3 }}>{q.titel}</div>
      <div style={{ fontSize: 11, color: t.textDim, fontWeight: 600 }}>{q.creator} · {q.klas}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 'auto' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: t.textSub, fontWeight: 700 }}>
          <window.LucideIcon name="help-circle" size={11} /> {q.vragen}
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: t.textSub, fontWeight: 700 }}>
          <window.LucideIcon name="clock" size={11} /> {q.min} min
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: 11, color: '#FFD000', fontWeight: 800 }}>
          ⭐ {q.rating}
        </span>
        <div style={{ flex: 1 }} />
        {q.score && (
          <span style={{
            fontSize: 10, fontWeight: 800, padding: '2px 6px', borderRadius: 9999,
            background: 'color-mix(in srgb, #22C55E 12%, transparent)', color: '#22C55E',
          }}>{q.score}%</span>
        )}
      </div>
    </div>
  );
}

const SAMPLE_QUIZZES = [
  { vak:'Biologie', titel:'Cellen & celdeling — H4', creator:'BioLeraar', klas:'havo-3', vragen:18, min:14, rating:4.6, modus:'Oefentoets', planLink:true },
  { vak:'Wiskunde', titel:'Lineaire vergelijkingen', creator:'MrsMath', klas:'havo-3', vragen:20, min:11, rating:4.8, modus:'Quiz', score:73, fav:true },
  { vak:'Engels', titel:'Past tenses & narrative', creator:'EngTeach', klas:'havo-3', vragen:15, min:9, rating:4.4, modus:'Quiz' },
  { vak:'Biologie', titel:'Fotosynthese basistheorie', creator:'BioLeraar', klas:'havo-3', vragen:14, min:10, rating:4.5, modus:'Quiz' },
  { vak:'Geschiedenis', titel:'De Verlichting · H7', creator:'HistShop', klas:'havo-3', vragen:22, min:14, rating:4.3, modus:'Oefentoets' },
  { vak:'Scheikunde', titel:'Mol & molverhoudingen', creator:'ScheiBron', klas:'havo-3', vragen:18, min:12, rating:4.7, modus:'Quiz' },
  { vak:'Wiskunde', titel:'VWO Wiskunde A · Examen 2024', creator:'CITO-archief', klas:'vwo-6', vragen:24, min:120, rating:4.5, modus:'Examensim' },
  { vak:'Aardrijkskunde', titel:'Klimaatzones · §2', creator:'AardrCo', klas:'havo-3', vragen:12, min:8, rating:4.2, modus:'Quiz' },
];

/* Library Default — AI-first mood-board on top, then filtered grid */
function Library_Default() {
  const t = lib_t;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.HubFullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <window.HubTopbar t={t} title="Bibliotheek" />

        {/* Mood-board hero — "Voor jou vandaag" */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 12 }}>
            <h2 style={{ margin: 0, fontFamily: 'Fredoka One', fontSize: 19, color: t.text }}>Voor jou vandaag</h2>
            <span style={{ fontSize: 11, color: t.textDim, fontWeight: 700, letterSpacing: 0.4, textTransform: 'uppercase' }}>· door Pulse</span>
            <div style={{ flex: 1 }} />
            <button style={{
              padding: '6px 12px', borderRadius: 9999, border: `1px solid ${t.border}`,
              background: 'transparent', color: t.textSub, fontSize: 11, fontWeight: 700, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}>
              <window.LucideIcon name="refresh-cw" size={11} /> Ververs
            </button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 12 }}>
            {/* Big featured: Plannen-linked */}
            <div style={{
              padding: 20, borderRadius: 14, position: 'relative', overflow: 'hidden',
              background: `linear-gradient(135deg, color-mix(in srgb, #16A34A 18%, ${t.card}) 0%, ${t.card} 100%)`,
              border: `1.5px solid color-mix(in srgb, #22C55E 32%, ${t.border})`,
              cursor: 'pointer', display: 'flex', flexDirection: 'column', minHeight: 180,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8, flexWrap: 'wrap' }}>
                <ModusBadge t={t} modus="Oefentoets" />
                <span style={{
                  fontSize: 10, fontWeight: 800, padding: '3px 9px', borderRadius: 9999,
                  background: 'color-mix(in srgb, #9D4EDD 18%, transparent)',
                  color: '#9D4EDD', letterSpacing: 0.5,
                  border: '1px dashed color-mix(in srgb, #9D4EDD 50%, transparent)',
                }}>← UIT PLANNEN · Bio H4 · DO</span>
              </div>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase', color: '#22C55E', marginBottom: 4 }}>
                Bovenaan voor je toets donderdag
              </div>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.text, lineHeight: 1.15, marginBottom: 6 }}>
                Cellen &amp; celdeling — H4
              </div>
              <div style={{ fontSize: 12.5, color: t.textSub, fontWeight: 600, lineHeight: 1.5 }}>
                BioLeraar · havo-3 · 18 vragen · 14 min · ⭐ 4.6 (242 plays)
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ marginTop: 12, display: 'flex', gap: 8 }}>
                <window.Btn t={t} kind="primary" size="sm" icon="play">Start Oefentoets</window.Btn>
                <window.Btn t={t} kind="secondary" size="sm">Bekijk detail</window.Btn>
              </div>
            </div>
            {/* AI suggestion 2 */}
            <div style={{
              padding: 16, borderRadius: 14, background: t.card, border: `1px solid ${t.border}`,
              cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                <VakChip t={t} vak="Wiskunde" />
                <ModusBadge t={t} modus="Quiz" />
                <span style={{ fontSize: 9, fontWeight: 800, color: t.textDim, letterSpacing: 0.4 }}>· OMDAT</span>
              </div>
              <div style={{ fontSize: 14, fontWeight: 800, color: t.text, lineHeight: 1.3 }}>Lineaire vergelijkingen</div>
              <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600, lineHeight: 1.5 }}>
                Je oefende dit 5 dagen geleden · score 73% — herhaling geadviseerd
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ display: 'flex', gap: 6, fontSize: 11, color: t.textDim, fontWeight: 700 }}>
                <span>20 vragen</span><span>·</span><span>11 min</span>
              </div>
            </div>
            {/* AI suggestion 3 */}
            <div style={{
              padding: 16, borderRadius: 14, background: t.card, border: `1px solid ${t.border}`,
              cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 8,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                <VakChip t={t} vak="Engels" />
                <ModusBadge t={t} modus="Quiz" />
                <span style={{ fontSize: 9, fontWeight: 800, color: t.textDim, letterSpacing: 0.4 }}>· NIEUW</span>
              </div>
              <div style={{ fontSize: 14, fontWeight: 800, color: t.text, lineHeight: 1.3 }}>Past tenses · narrative</div>
              <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600, lineHeight: 1.5 }}>
                Past de Stepping Stones unit die je nu in Leren leest
              </div>
              <div style={{ flex: 1 }} />
              <div style={{ display: 'flex', gap: 6, fontSize: 11, color: t.textDim, fontWeight: 700 }}>
                <span>15 vragen</span><span>·</span><span>9 min</span>
              </div>
            </div>
          </div>
        </div>

        {/* Tabs row */}
        <div style={{ padding: '24px 32px 0' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, borderBottom: `1px solid ${t.border}`, paddingBottom: 0 }}>
            {[
              { id:'all', label:'Alles', n:142, active:true },
              { id:'mine', label:'Mijn quizzen', n:7 },
              { id:'fav', label:'Favorieten', n:12 },
              { id:'recent', label:'Recent', n:8 },
            ].map(tab => (
              <button key={tab.id} style={{
                padding: '10px 16px', border: 'none', background: 'transparent',
                fontSize: 13, fontWeight: 800, cursor: 'pointer',
                color: tab.active ? t.text : t.textSub,
                borderBottom: tab.active ? `2px solid ${t.primary}` : '2px solid transparent',
                marginBottom: -1, display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                {tab.label}
                <span style={{ fontSize: 10, fontWeight: 700, color: t.textDim }}>{tab.n}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Filter row */}
        <div style={{ padding: '14px 32px 0', display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{
            padding: '5px 11px', borderRadius: 9999, border: `1px solid ${t.border}`,
            fontSize: 11.5, fontWeight: 700, color: t.textSub, background: 'transparent', cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', gap: 4,
          }}>
            <window.LucideIcon name="zap" size={11} /> Modus ⌄
          </span>
          {['Vak ⌄', 'Niveau ⌄', 'Klas ⌄', 'Tijdsduur ⌄'].map(f => (
            <span key={f} style={{
              padding: '5px 11px', borderRadius: 9999, border: `1px solid ${t.border}`,
              fontSize: 11.5, fontWeight: 700, color: t.textSub, background: 'transparent', cursor: 'pointer',
            }}>{f}</span>
          ))}
          <div style={{ flex: 1 }} />
          <span style={{ fontSize: 11, color: t.textDim, fontWeight: 700 }}>Sorteer:</span>
          <span style={{
            padding: '5px 11px', borderRadius: 9999, fontSize: 11.5, fontWeight: 800,
            background: t.primaryDim, color: t.primary,
          }}>Voor jou ⌄</span>
          <button style={{
            width: 30, height: 30, borderRadius: 8, border: `1px solid ${t.border}`,
            background: t.primaryDim, color: t.primary, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.LucideIcon name="grid-3x3" size={13} /></button>
          <button style={{
            width: 30, height: 30, borderRadius: 8, border: `1px solid ${t.border}`,
            background: 'transparent', color: t.textSub, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><window.LucideIcon name="list" size={13} /></button>
        </div>

        {/* Grid */}
        <div style={{
          padding: '14px 32px 32px',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
        }}>
          {SAMPLE_QUIZZES.map((q,i) => <QuizCard key={i} t={t} q={q} planLink={q.planLink} />)}
        </div>
      </main>
    </div>
  );
}

/* Library Filtered — vak=Biologie active, search active */
function Library_Filtered() {
  const t = lib_t;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.HubFullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <window.HubTopbar t={t} title="Bibliotheek" />

        {/* Active search bar */}
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{
            padding: '11px 16px', borderRadius: 12,
            background: t.card, border: `2px solid ${t.primary}`,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <window.LucideIcon name="search" size={16} style={{ color: t.primary }} />
            <span style={{ flex: 1, fontSize: 14, color: t.text, fontWeight: 600 }}>cellen</span>
            <span style={{ fontSize: 11, color: t.textDim, fontWeight: 700 }}>7 resultaten</span>
            <window.LucideIcon name="x" size={14} style={{ color: t.textSub }} />
          </div>
        </div>

        {/* Active filters */}
        <div style={{ padding: '14px 32px 0', display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 11, color: t.textDim, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase' }}>Filters:</span>
          <span style={{
            padding: '5px 11px', borderRadius: 9999, fontSize: 11.5, fontWeight: 800,
            background: 'color-mix(in srgb, #0096C7 16%, transparent)', color: t.dark ? '#00B4D8' : '#0096C7',
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            <window.LucideIcon name="clipboard-check" size={11} /> Oefentoets <window.LucideIcon name="x" size={10} />
          </span>
          <span style={{
            padding: '5px 11px', borderRadius: 9999, fontSize: 11.5, fontWeight: 800,
            background: 'color-mix(in srgb, #16A34A 16%, transparent)', color: '#22C55E',
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            Biologie <window.LucideIcon name="x" size={10} />
          </span>
          <span style={{
            padding: '5px 11px', borderRadius: 9999, fontSize: 11.5, fontWeight: 800,
            background: t.primaryDim, color: t.primary,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            havo-3 <window.LucideIcon name="x" size={10} />
          </span>
          <button style={{
            padding: '5px 11px', borderRadius: 9999, border: `1px solid ${t.border}`,
            fontSize: 11, fontWeight: 700, color: t.textSub, background: 'transparent', cursor: 'pointer',
          }}>+ Filter</button>
          <div style={{ flex: 1 }} />
          <button style={{
            padding: '5px 11px', borderRadius: 9999, border: 'none',
            fontSize: 11, fontWeight: 800, color: t.textDim, background: 'transparent', cursor: 'pointer',
          }}>Wis filters</button>
        </div>

        {/* Filtered grid — Biologie + Oefentoets only */}
        <div style={{
          padding: '20px 32px 32px',
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12,
        }}>
          {SAMPLE_QUIZZES.filter(q => q.vak === 'Biologie' && q.modus === 'Oefentoets').map((q,i) => <QuizCard key={i} t={t} q={q} planLink={q.planLink} />)}
          {/* synthetic Oefentoets-Biologie fillers */}
          {[
            { vak:'Biologie', titel:'Mitose vs meiose · oefentoets', creator:'StudyPunt', klas:'havo-3', vragen:18, min:18, rating:4.4, modus:'Oefentoets' },
            { vak:'Biologie', titel:'Celorganellen · functies', creator:'BioLeraar', klas:'havo-3', vragen:24, min:22, rating:4.7, modus:'Oefentoets' },
            { vak:'Biologie', titel:'DNA & erfelijkheid', creator:'BioLeraar', klas:'havo-3', vragen:20, min:20, rating:4.5, modus:'Oefentoets' },
            { vak:'Biologie', titel:'Ecosystemen · proeftoets', creator:'NatuurStudio', klas:'havo-3', vragen:22, min:24, rating:4.3, modus:'Oefentoets' },
          ].map((q,i) => <QuizCard key={'f'+i} t={t} q={q} />)}
        </div>
      </main>
    </div>
  );
}

/* Library Empty — Mijn quizzen tab, no items yet */
function Library_Empty() {
  const t = lib_t;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.HubFullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <window.HubTopbar t={t} title="Bibliotheek" />

        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ display: 'flex', gap: 4, borderBottom: `1px solid ${t.border}` }}>
            {[
              { id:'all', label:'Alles', n:142 },
              { id:'mine', label:'Mijn quizzen', n:0, active:true },
              { id:'fav', label:'Favorieten', n:12 },
              { id:'recent', label:'Recent', n:8 },
            ].map(tab => (
              <button key={tab.id} style={{
                padding: '10px 16px', border: 'none', background: 'transparent',
                fontSize: 13, fontWeight: 800, cursor: 'pointer',
                color: tab.active ? t.text : t.textSub,
                borderBottom: tab.active ? `2px solid ${t.primary}` : '2px solid transparent',
                marginBottom: -1, display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                {tab.label}<span style={{ fontSize: 10, fontWeight: 700, color: t.textDim }}>{tab.n}</span>
              </button>
            ))}
          </div>
        </div>

        <div style={{ padding: '60px 32px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <window.PulseLottie size={84} />
          <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.text, marginTop: 18, marginBottom: 8 }}>
            Nog niets hier.
          </div>
          <div style={{ fontSize: 14, color: t.textSub, fontWeight: 600, lineHeight: 1.6, maxWidth: 440, marginBottom: 24 }}>
            Maak een quiz van je hoofdstuk-foto of PDF — Pulse genereert vragen op basis van wat jij echt moet weten.
          </div>
          <div style={{ display: 'flex', gap: 10 }}>
            <window.Btn t={t} kind="primary" size="md" icon="wand-2" iconRight="arrow-right">Maak met AI</window.Btn>
            <window.Btn t={t} kind="secondary" size="md" icon="upload">Upload PDF</window.Btn>
          </div>
          <div style={{
            marginTop: 28, padding: '10px 16px', borderRadius: 9999,
            background: t.borderSoft, border: `1px solid ${t.border}`,
            fontSize: 11, color: t.textDim, fontWeight: 700,
          }}>
            3 gratis AI-quizzen per maand · upgrade voor 30/maand
          </div>
        </div>
      </main>
    </div>
  );
}

/* Library Loading skeleton */
function Library_Loading() {
  const t = lib_t;
  const skel = (h, w) => (
    <div style={{
      height: h, width: w, borderRadius: 6,
      background: 'linear-gradient(90deg, ' + t.borderSoft + ', ' + t.border + ', ' + t.borderSoft + ')',
      backgroundSize: '200% 100%', animation: 'shimmer 1.6s infinite',
    }} />
  );
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <style>{`@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }`}</style>
      <window.HubFullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <window.HubTopbar t={t} title="Bibliotheek" />
        <div style={{ padding: '20px 32px 0' }}>
          <div style={{ marginBottom: 14 }}>{skel(20, 180)}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 12 }}>
            {[1,2,3].map(i => (
              <div key={i} style={{
                padding: 16, borderRadius: 14, background: t.card, border: `1px solid ${t.border}`,
                display: 'flex', flexDirection: 'column', gap: 8, minHeight: 180,
              }}>
                {skel(14, 70)}
                {skel(20, '85%')}
                {skel(12, '60%')}
                <div style={{ flex: 1 }} />
                {skel(28, 100)}
              </div>
            ))}
          </div>
        </div>
        <div style={{ padding: '24px 32px 0' }}>{skel(28, 320)}</div>
        <div style={{ padding: '20px 32px 32px', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
          {[1,2,3,4,5,6].map(i => (
            <div key={i} style={{
              padding: 14, borderRadius: 12, background: t.card, border: `1px solid ${t.border}`,
              display: 'flex', flexDirection: 'column', gap: 8, minHeight: 130,
            }}>
              {skel(14, 60)}
              {skel(16, '80%')}
              {skel(11, '50%')}
              <div style={{ flex: 1 }} />
              <div style={{ display: 'flex', gap: 8 }}>{skel(11, 30)}{skel(11, 30)}{skel(11, 30)}</div>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

/* ───────────────────────── Quiz Detail v2 ─────────────────────────
   Reframe vs huidige: keep 2-col + secties-paneel, MAAR: modus is
   eigenschap van de quiz zelf (gefixeerd bij creation), niet een
   speel-keuze. De Detail-page toont de modus prominent in de header
   en heeft één primary CTA passend bij de modus. Settings-toggles
   (timer/hints/shuffle) blijven beschikbaar.
   2 sleutel-states. */

/* ModusHeader — prominente strook bovenaan: "Dit is een Oefentoets" */
function ModusHeader({ t, modus, locked }) {
  const cfg = MODUS_CFG[modus];
  const c = t.dark ? cfg.accentDark : cfg.accent;
  const tagline = {
    Quiz: '~5 min · snel oefenen, dopamine',
    Oefentoets: '~18 min · cijfer + sterk/zwak per onderwerp',
    Examensim: '~3 uur · examenkamer-realisme · officieel cijfer',
  }[modus];
  return (
    <div style={{
      padding: '12px 14px', borderRadius: 10,
      background: `color-mix(in srgb, ${c} ${t.dark ? 12 : 8}%, ${t.card})`,
      border: `1.5px ${locked ? 'dashed' : 'solid'} color-mix(in srgb, ${c} 38%, ${t.border})`,
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 9, flexShrink: 0,
        background: `color-mix(in srgb, ${c} ${t.dark ? 18 : 14}%, transparent)`,
        color: c, display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <window.LucideIcon name={cfg.icon} size={18} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.7, textTransform: 'uppercase', color: t.textSub }}>Modus</span>
          <span style={{ fontSize: 14, fontWeight: 800, color: t.text }}>{modus}</span>
          <span style={{
            fontSize: 9, fontWeight: 800, padding: '1px 6px', borderRadius: 9999,
            background: `color-mix(in srgb, ${c} ${t.dark ? 18 : 12}%, transparent)`,
            color: c, letterSpacing: 0.4, textTransform: 'uppercase',
          }}>{cfg.tier}</span>
          {locked && <window.LucideIcon name="lock" size={11} style={{ color: t.textDim }} />}
        </div>
        <div style={{ fontSize: 11.5, color: t.textSub, fontWeight: 600, marginTop: 2 }}>{tagline}</div>
      </div>
    </div>
  );
}

function QuizDetail_Default() {
  const t = lib_t_l;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.HubFullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        {/* Breadcrumb topbar */}
        <div style={{
          padding: '14px 32px', borderBottom: `1px solid ${t.border}`, background: t.card,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <window.LucideIcon name="arrow-left" size={16} style={{ color: t.textSub }} />
          <span style={{ fontSize: 12, color: t.textSub, fontWeight: 700 }}>Bibliotheek</span>
          <window.LucideIcon name="chevron-right" size={12} style={{ color: t.textDim }} />
          <span style={{ fontSize: 12, color: t.text, fontWeight: 800 }}>Cellen & celdeling — H4</span>
          <div style={{ flex: 1 }} />
          <button style={{
            width: 32, height: 32, borderRadius: 9, border: `1px solid ${t.border}`, background: 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
          }}><window.LucideIcon name="heart" size={14} fill="#EF4444" style={{ color: '#EF4444' }} /></button>
          <button style={{
            width: 32, height: 32, borderRadius: 9, border: `1px solid ${t.border}`, background: 'transparent',
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: t.textSub,
          }}><window.LucideIcon name="share-2" size={14} /></button>
        </div>

        {/* 2-col layout */}
        <div style={{ padding: '24px 32px 32px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20 }}>
          {/* Left col */}
          <div>
            {/* Cross-pijler badge — prominent */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              padding: '4px 10px', borderRadius: 9999, marginBottom: 12,
              background: 'color-mix(in srgb, #9D4EDD 10%, transparent)',
              border: '1px dashed color-mix(in srgb, #9D4EDD 38%, transparent)',
              fontSize: 10, fontWeight: 800, color: '#7C3AED', letterSpacing: 0.5,
              textTransform: 'uppercase',
            }}>
              <window.LucideIcon name="calendar-clock" size={11} />
              ← uit Plannen · Bio-toets H4 op donderdag
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <VakChip t={t} vak="Biologie" />
              <span style={{ fontSize: 11, color: t.textDim, fontWeight: 700 }}>havo-3 · §4.1–4.4</span>
            </div>
            <h1 style={{ margin: 0, fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 32, color: t.text, lineHeight: 1.1 }}>
              Cellen & celdeling — H4
            </h1>

            {/* Stats grid */}
            <div style={{
              marginTop: 18, padding: 18, borderRadius: 12, background: t.card,
              border: `1px solid ${t.border}`,
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
            }}>
              {[
                { k:'18', l:'Vragen' },
                { k:'4.6 ⭐', l:'Beoordeling' },
                { k:'2.4k', l:'Gespeeld' },
                { k:'68%', l:'Gem. score' },
              ].map((s,i) => (
                <div key={i}>
                  <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.text, lineHeight: 1 }}>{s.k}</div>
                  <div style={{ fontSize: 10, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, color: t.textSub, marginTop: 4 }}>{s.l}</div>
                </div>
              ))}
            </div>

            {/* Description */}
            <div style={{ marginTop: 18 }}>
              <div style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.7, color: t.textSub, marginBottom: 6 }}>Over deze quiz</div>
              <div style={{ fontSize: 14, color: t.text, lineHeight: 1.6, fontWeight: 500 }}>
                Oefen de stof uit havo-3 hoofdstuk 4: van celorganellen tot mitose en meiose.
                Dekt §4.1 t/m §4.4 met focus op functie-vragen — die komen het meest terug in Bio-toetsen.
              </div>
            </div>

            {/* Creator */}
            <div style={{
              marginTop: 18, padding: 14, borderRadius: 10, background: t.card,
              border: `1px solid ${t.border}`, display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 9999, flexShrink: 0,
                background: 'color-mix(in srgb, #16A34A 18%, transparent)',
                color: '#16A34A', display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Fredoka One', fontSize: 14,
              }}>BL</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13, fontWeight: 800, color: t.text }}>BioLeraar</div>
                <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600 }}>Docent · 28 quizzen gemaakt · ⭐ 4.5 gem.</div>
              </div>
              <window.Btn t={t} kind="ghost" size="sm">Meer →</window.Btn>
            </div>

            {/* Highscore strip */}
            <div style={{
              marginTop: 14, padding: 14, borderRadius: 10,
              background: 'color-mix(in srgb, #16A34A 6%, transparent)',
              border: '1px solid color-mix(in srgb, #16A34A 22%, transparent)',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <window.LucideIcon name="trophy" size={18} style={{ color: '#16A34A' }} />
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, fontWeight: 800, color: t.text }}>Jouw vorige score · <span style={{ color: '#16A34A' }}>87%</span></div>
                <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600 }}>3 dagen geleden · 14/16 goed</div>
              </div>
              <window.MasteryDots level={3} size="sm" />
            </div>
          </div>

          {/* Right col — Modus-header + Settings + Secties */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ModusHeader t={t} modus="Oefentoets" />

            <div style={{
              padding: 14, borderRadius: 12, background: t.card, border: `1px solid ${t.border}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <span style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, color: t.text }}>Secties kiezen</span>
                <div style={{ flex: 1 }} />
                <span style={{ fontSize: 11, color: t.primary, fontWeight: 800 }}>Alles</span>
              </div>
              {[
                { titel: '§4.1 · Celonderdelen', vragen: 5, snaps: 12, on: true },
                { titel: '§4.2 · Mitose', vragen: 6, snaps: 14, on: true },
                { titel: '§4.3 · Meiose', vragen: 4, snaps: 10, on: false },
                { titel: '§4.4 · Toepassingen', vragen: 3, snaps: 8, on: false },
              ].map((s,i) => (
                <div key={i} style={{
                  padding: '8px 10px', borderRadius: 8, marginBottom: 4,
                  background: s.on ? 'color-mix(in srgb, #16A34A 6%, transparent)' : 'transparent',
                  display: 'flex', alignItems: 'center', gap: 10, opacity: s.on ? 1 : 0.6,
                }}>
                  <div style={{
                    width: 16, height: 16, borderRadius: 4,
                    background: s.on ? '#16A34A' : 'transparent',
                    border: s.on ? 'none' : `1.5px solid ${t.border}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    {s.on && <window.LucideIcon name="check" size={11} strokeWidth={3} style={{ color: 'white' }} />}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, fontWeight: 700, color: t.text }}>{s.titel}</div>
                    <div style={{ fontSize: 10, color: t.textDim, fontWeight: 600 }}>{s.vragen} vragen · +{s.snaps} ⚡</div>
                  </div>
                </div>
              ))}
              <div style={{
                marginTop: 8, padding: '8px 10px', borderRadius: 8,
                background: t.borderSoft,
                fontSize: 11, color: t.textSub, fontWeight: 700,
                display: 'flex', justifyContent: 'space-between',
              }}>
                <span>11 vragen geselecteerd · ~9 min</span>
                <span style={{ color: '#B45309' }}>+26 ⚡</span>
              </div>
            </div>

            {/* Settings — toggles */}
            <div style={{
              padding: 14, borderRadius: 12, background: t.card, border: `1px solid ${t.border}`,
            }}>
              <div style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, color: t.text, marginBottom: 10 }}>
                Instellingen
              </div>
              {[
                { icon: 'timer', label: 'Timer per vraag', val: '60s', on: true },
                { icon: 'lightbulb', label: 'Hints', val: '1× per vraag', on: false },
                { icon: 'shuffle', label: 'Shuffle volgorde', val: '', on: true },
              ].map((s,i) => (
                <div key={i} style={{
                  padding: '8px 0', display: 'flex', alignItems: 'center', gap: 10,
                  borderTop: i === 0 ? 'none' : `1px solid ${t.borderSoft}`,
                }}>
                  <window.LucideIcon name={s.icon} size={14} style={{ color: t.textSub }} />
                  <div style={{ flex: 1, fontSize: 12.5, color: t.text, fontWeight: 700 }}>{s.label}</div>
                  {s.val && <span style={{ fontSize: 10, color: t.textDim, fontWeight: 700 }}>{s.val}</span>}
                  <div style={{
                    width: 28, height: 16, borderRadius: 9999,
                    background: s.on ? '#16A34A' : t.border, position: 'relative',
                    transition: 'background 0.15s',
                  }}>
                    <div style={{
                      position: 'absolute', top: 2, left: s.on ? 14 : 2,
                      width: 12, height: 12, borderRadius: '50%', background: 'white',
                      transition: 'left 0.15s',
                    }} />
                  </div>
                </div>
              ))}
            </div>

            <window.Btn t={t} kind="primary" size="md" full icon="play">Start Oefentoets</window.Btn>

            {/* Cross-pillar handoff */}
            <window.HandoffCard
              pillar="leren" direction="to"
              title="Lees uitleg over Mitose"
              subtitle="§4.2 in Leren · 6 min · Pulse vat samen"
            />
          </div>
        </div>
      </main>
    </div>
  );
}

/* Quiz Detail — Tier-locked Examensim view (Premium user looking at Pro quiz) */
function QuizDetail_TierLocked() {
  const t = lib_t;
  return (
    <div style={{ display: 'flex', height: '100%', background: t.bg, fontFamily: 'Nunito' }}>
      <window.HubFullSidebar t={t} />
      <main style={{ flex: 1, overflow: 'auto' }}>
        <div style={{
          padding: '14px 32px', borderBottom: `1px solid ${t.border}`, background: t.card,
          display: 'flex', alignItems: 'center', gap: 8,
        }}>
          <window.LucideIcon name="arrow-left" size={16} style={{ color: t.textSub }} />
          <span style={{ fontSize: 12, color: t.textSub, fontWeight: 700 }}>Bibliotheek</span>
          <window.LucideIcon name="chevron-right" size={12} style={{ color: t.textDim }} />
          <span style={{ fontSize: 12, color: t.text, fontWeight: 800 }}>VWO Eindexamen Bio · 2024</span>
        </div>

        <div style={{ padding: '24px 32px 32px', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 20 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <VakChip t={t} vak="Biologie" />
              <span style={{
                fontSize: 10, fontWeight: 800, padding: '3px 9px', borderRadius: 9999,
                background: `color-mix(in srgb, #64748B 18%, transparent)`,
                color: t.dark ? '#94A3B8' : '#475569', letterSpacing: 0.4, textTransform: 'uppercase',
                border: `1px dashed color-mix(in srgb, #94A3B8 40%, transparent)`,
                display: 'inline-flex', alignItems: 'center', gap: 4,
              }}>
                <window.LucideIcon name="lock" size={10} /> Pro · Examensim
              </span>
            </div>
            <h1 style={{ margin: 0, fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 32, color: t.text, lineHeight: 1.1 }}>
              VWO Eindexamen Bio · 2024
            </h1>

            <div style={{
              marginTop: 18, padding: 18, borderRadius: 12, background: t.card,
              border: `1px solid ${t.border}`,
              display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16,
            }}>
              {[{k:'48',l:'Vragen'},{k:'3 uur',l:'Tijd'},{k:'180',l:'Plays'},{k:'5,8',l:'Gem. cijfer'}].map((s,i)=>(
                <div key={i}>
                  <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.text, lineHeight: 1 }}>{s.k}</div>
                  <div style={{ fontSize: 10, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6, color: t.textSub, marginTop: 4 }}>{s.l}</div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 18 }}>
              <div style={{ fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.7, color: t.textSub, marginBottom: 6 }}>Over deze examensimulatie</div>
              <div style={{ fontSize: 14, color: t.text, lineHeight: 1.6, fontWeight: 500 }}>
                Echt eindexamen Biologie 2024 — VWO. Alle 48 vragen, 3 uur tijd, geen pauzes, geen hints.
                Cijfer berekend volgens officiële N-term. Cooldown van 24u na elke poging.
              </div>
            </div>
          </div>

          {/* Right col — Modus-header (locked) + Upgrade card */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <ModusHeader t={t} modus="Examensim" locked />

            {/* Upgrade card — "voel wat je krijgt" + alternatief */}
            <div style={{
              padding: 18, borderRadius: 14,
              background: `linear-gradient(155deg, color-mix(in srgb, #94A3B8 12%, ${t.card}) 0%, ${t.card} 100%)`,
              border: `1.5px solid color-mix(in srgb, #94A3B8 32%, ${t.border})`,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10, marginBottom: 10,
                background: 'color-mix(in srgb, #94A3B8 18%, transparent)',
                color: t.dark ? '#CBD5E1' : '#475569',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <window.LucideIcon name="shield-check" size={20} />
              </div>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.text, lineHeight: 1.15, marginBottom: 6 }}>
                Pro · examenkamer-realisme
              </div>
              <div style={{ fontSize: 13, color: t.textSub, fontWeight: 600, lineHeight: 1.55, marginBottom: 12 }}>
                Echte eindexamens, officiële N-term cijfer, 24u cooldown — voor wie het écht wil weten.
              </div>
              <ul style={{ margin: 0, padding: '0 0 14px 18px', fontSize: 12.5, color: t.text, lineHeight: 1.7 }}>
                <li>Alle eindexamens VMBO/HAVO/VWO</li>
                <li>Officieel cijfer + foutenanalyse</li>
                <li>Onbeperkt Examensim-creatie via AI Wizard</li>
              </ul>
              <div style={{
                padding: '10px 12px', borderRadius: 9, marginBottom: 12,
                background: t.borderSoft, fontSize: 11.5, color: t.textSub, fontWeight: 700,
              }}>
                Je hebt nu <b style={{ color: t.text }}>Premium</b> · upgrade Pro vanaf €2,50/mnd extra
              </div>
              <window.Btn t={t} kind="primary" size="md" full iconRight="arrow-right">Bekijk Pro</window.Btn>
            </div>

            {/* Alternative — make-your-own via AI Wizard */}
            <div style={{
              padding: 14, borderRadius: 12, background: t.card,
              border: `1px dashed ${t.border}`,
              display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
            }}>
              <div style={{
                width: 34, height: 34, borderRadius: 9, flexShrink: 0,
                background: t.primaryDim, color: t.primary,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <window.LucideIcon name="wand-2" size={16} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 800, color: t.text }}>Maak je eigen Examensim</div>
                <div style={{ fontSize: 11, color: t.textSub, fontWeight: 600, marginTop: 2 }}>
                  AI Wizard · upload je samenvatting · ~5 min setup
                </div>
              </div>
              <window.LucideIcon name="arrow-right" size={14} style={{ color: t.textDim, flexShrink: 0 }} />
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, {
  Library_Default, Library_Filtered, Library_Empty, Library_Loading,
  QuizDetail_Default, QuizDetail_TierLocked,
});