/* Scherm 5 — Deadline-detail drawer
   Sanne tikte op Bio-toets. Side-sheet 480px rechts, Stapel blijft links zichtbaar. */

function Screen5() {
  const t = TK;

  const today = [
    { subject: 'biologie', type: 'lezen', title: 'Celbiologie § 4.2 lezen', detail: '8 bladzijden', mins: 25, source: 'Bio — vrij' },
    { subject: 'biologie', type: 'flashcards', title: '10 flashcards', mins: 15, source: 'Bio — SRS' },
    { subject: 'wiskunde', type: 'oefenen', title: 'Oefeningen § 2.3', mins: 15, source: 'Wi' },
  ];

  const deadlines = [
    { subject: 'biologie', type: 'Toets', title: 'H4 · Celbiologie', days: 2, progress: 0.35 },
    { subject: 'wiskunde', type: 'SO',    title: 'SO · Functies',    days: 5, progress: 0.60 },
    { subject: 'engels',   type: 'Essay', title: 'Schrijfopdracht',  days: 8, progress: 0.10 },
  ];

  const bio = SUBJECTS.biologie;

  return (
    <StapelShell title="Plannen" subtitle="Woensdag 10 okt · detail: Bio-toets vrijdag">
      <main style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>

        {/* Stapel achter drawer — gedimd maar zichtbaar */}
        <div style={{
          padding: '20px 26px 24px', display: 'flex', flexDirection: 'column', gap: 14,
          opacity: 0.4, filter: 'blur(0.5px)', pointerEvents: 'none', height: '100%',
        }}>
          <WeekGrid density="medium" showHeader headerTitle="Week 41" headerRange="7–13 okt"
            week={[
              { day: 'ma', date: 7,  past: true,  items: [{ s: 'biologie', n: 1 }] },
              { day: 'di', date: 8,  past: true,  items: [{ s: 'biologie', n: 2 }] },
              { day: 'wo', date: 9,  today: true, items: [{ s: 'biologie', n: 2 }] },
              { day: 'do', date: 10, items: [{ s: 'biologie', n: 2 }, { s: 'wiskunde', n: 1 }] },
              { day: 'vr', date: 11, deadline: 'biologie', deadlineType: 'Toets', dlLabel: 'H4 Celbiologie' },
              { day: 'za', date: 12 },
              { day: 'zo', date: 13, items: [{ s: 'engels', n: 1 }] },
            ]}
          />
          <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '320px 1fr', gap: 18, minHeight: 0 }}>
            <section style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <h2 style={colHeader(t)}>Deadlines</h2>
              {deadlines.map((d, i) => <DeadlineCardCompact key={i} d={d} active={i === 0} />)}
            </section>
            <section style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <h2 style={{ ...colHeader(t, t.primary) }}>Vandaag</h2>
              {today.map((tk, i) => <TaskRow key={i} task={tk} state={i === 0 ? 'active' : 'queued'} />)}
            </section>
          </div>
        </div>

        {/* scrim */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(7,9,15,0.55)', zIndex: 15 }} />

        {/* Drawer */}
        <aside style={{
          position: 'absolute', top: 0, right: 0, bottom: 0, width: 480, zIndex: 25,
          background: t.panel, borderLeft: `1px solid ${t.border}`,
          boxShadow: '-40px 0 80px rgba(0,0,0,0.6)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
        }}>
          {/* drawer header */}
          <div style={{
            padding: '18px 22px 16px', borderBottom: `1px solid ${t.border}`,
            background: `linear-gradient(180deg, color-mix(in srgb, ${bio.color} 14%, transparent), transparent)`,
            position: 'relative',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <SubjPill k="biologie" size="md" />
              <span style={{
                display: 'inline-flex', alignItems: 'center', height: 22, padding: '0 9px',
                borderRadius: 6, background: t.cardHi, color: t.fgDim,
                fontSize: 10, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
              }}>Toets</span>
              <span style={{ flex: 1 }} />
              <button style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                width: 28, height: 28, borderRadius: 7,
                background: t.card, border: `1px solid ${t.border}`, color: t.fgDim, cursor: 'pointer',
              }}>
                <I name="more-horizontal" size={14} />
              </button>
              <button style={{
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                width: 28, height: 28, borderRadius: 7,
                background: t.card, border: `1px solid ${t.border}`, color: t.fgDim, cursor: 'pointer',
              }}>
                <I name="x" size={14} />
              </button>
            </div>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 24, color: t.fg,
              letterSpacing: '-0.02em', lineHeight: 1.15, marginTop: 10 }}>
              H4 · Celbiologie
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                background: 'rgba(239,68,68,0.14)', color: t.red,
                border: '1px solid rgba(239,68,68,0.3)',
                borderRadius: 9999, padding: '4px 10px',
                fontFamily: 'Fredoka One', fontSize: 13, lineHeight: 1,
              }}>
                2<span style={{ fontFamily: 'Nunito', fontSize: 10, fontWeight: 800 }}>dagen</span>
              </div>
              <span style={{ fontSize: 12, color: t.fgDim, fontWeight: 700 }}>vrijdag 12 okt · 2e uur</span>
            </div>
          </div>

          {/* body scroll */}
          <div style={{ flex: 1, overflow: 'auto', padding: '18px 22px', display: 'flex', flexDirection: 'column', gap: 18 }}>

            {/* Progress + quiz CTA */}
            <section>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 8 }}>
                <span style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>Voortgang</span>
                <span style={{ fontFamily: 'Fredoka One', fontSize: 20, color: bio.color }}>35%</span>
              </div>
              <div style={{ height: 8, background: t.cardHi, borderRadius: 9999, overflow: 'hidden', marginBottom: 10 }}>
                <div style={{
                  width: '35%', height: '100%',
                  background: `linear-gradient(90deg, ${bio.color}, color-mix(in srgb, ${bio.color} 70%, #FFF))`,
                  borderRadius: 9999,
                }} />
              </div>
              <button style={{
                width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                height: 44, borderRadius: 11, background: t.primary, color: '#07090F', border: 0,
                cursor: 'pointer', fontFamily: 'Nunito', fontWeight: 800, fontSize: 14,
                boxShadow: '0 10px 24px rgba(0,180,216,0.3)',
              }}>
                <I name="play" size={14} fill="currentColor" strokeWidth={0} color="#07090F" />
                Start quiz · Hoofdstuk 4
                <span style={{ fontSize: 11, fontWeight: 700, opacity: 0.65 }}>· 12 vragen</span>
              </button>
            </section>

            {/* Gekoppeld leer-hoofdstuk */}
            <section>
              <div style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>
                Gekoppeld
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                <LinkedItem icon="book-open" title="Leer-hoofdstuk 4 · Celbiologie" meta="18 lessen · 6 gedaan" done={6} total={18} />
                <LinkedItem icon="layers" title="Flashcard-deck · Bio H4" meta="42 kaarten · 22 mastered" done={22} total={42} />
                <LinkedItem icon="file-text" title="Samenvatting & notities" meta="4 pagina's" />
              </div>
            </section>

            {/* Tijdsanalyse */}
            <section>
              <div style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>
                Tijdsanalyse
              </div>
              <div style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12, padding: 14 }}>
                <TimeBar label="Al gedaan"    mins={65}  color={t.green}     mx={240} />
                <TimeBar label="Aanbevolen"   mins={120} color={bio.color}   mx={240} hint="tot vrijdag" />
                <TimeBar label="Beschikbaar"  mins={200} color={t.fgDim}     mx={240} hint="in je planning" />
                <div style={{
                  marginTop: 10, paddingTop: 10, borderTop: `1px dashed ${t.border}`,
                  display: 'flex', alignItems: 'flex-start', gap: 8,
                }}>
                  <I name="check-circle-2" size={14} color={t.green} style={{ marginTop: 1, flexShrink: 0 }} />
                  <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
                    Je hebt <b style={{ color: t.fg }}>80 min</b> marge — comfortabel op koers.
                  </span>
                </div>
              </div>
            </section>

            {/* Studie-momenten tot deadline */}
            <section>
              <div style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 8 }}>
                Gepland tot deadline
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                <PlannedSlot day="vandaag" label="§ 4.2 lezen + flashcards" mins={40} active />
                <PlannedSlot day="donderdag" label="§ 4.3 + oefenen" mins={45} />
                <PlannedSlot day="vrijdag 08:00" label="Review · 10 flashcards" mins={15} review />
              </div>
            </section>

          </div>

          {/* drawer footer — actions */}
          <div style={{
            padding: '14px 22px', borderTop: `1px solid ${t.border}`,
            display: 'flex', gap: 8, background: t.panel,
          }}>
            <button style={{
              flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              height: 40, borderRadius: 10,
              background: `linear-gradient(135deg, ${t.purple}, #6D28D9)`,
              color: '#fff', border: 0, cursor: 'pointer',
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
              boxShadow: '0 8px 20px rgba(157,78,221,0.3)',
            }}>
              <I name="sparkles" size={13} fill="currentColor" strokeWidth={0} color="#fff" />
              Herplan met coach
              <PlanBadge plan="premium" size="sm" />
            </button>
            <button style={{ ...shellBtn(t, 'ghost'), height: 40, padding: '0 14px' }}>
              <I name="pen-line" size={13} /> Bewerken
            </button>
          </div>
        </aside>

      </main>
    </StapelShell>
  );
}

function LinkedItem({ icon, title, meta, done, total }) {
  const t = TK;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 10,
      padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8, flexShrink: 0,
        background: 'rgba(0,180,216,0.12)', color: t.primary,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <I name={icon} size={15} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg, marginBottom: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {title}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {done != null && (
            <div style={{ flex: 1, maxWidth: 120, height: 3, background: t.cardHi, borderRadius: 9999, overflow: 'hidden' }}>
              <div style={{ width: `${(done/total)*100}%`, height: '100%', background: t.primary, borderRadius: 9999 }} />
            </div>
          )}
          <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>{meta}</span>
        </div>
      </div>
      <I name="chevron-right" size={14} color={t.fgMute} />
    </div>
  );
}

function TimeBar({ label, mins, color, mx, hint }) {
  const t = TK;
  const pct = Math.min(mins / mx, 1);
  return (
    <div style={{ marginTop: 8 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 4 }}>
        <span style={{ fontSize: 11.5, fontWeight: 800, color: t.fg }}>{label}</span>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 13, color }}>{mins}<span style={{ fontFamily: 'Nunito', fontSize: 10, fontWeight: 700, marginLeft: 2 }}>min</span></span>
        {hint && <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>· {hint}</span>}
      </div>
      <div style={{ height: 6, background: t.cardHi, borderRadius: 9999, overflow: 'hidden' }}>
        <div style={{ width: `${pct*100}%`, height: '100%', background: color, borderRadius: 9999, opacity: 0.8 }} />
      </div>
    </div>
  );
}

function PlannedSlot({ day, label, mins, active, review }) {
  const t = TK;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 10,
      background: active ? 'rgba(0,180,216,0.08)' : t.card,
      border: `1px solid ${active ? 'rgba(0,180,216,0.3)' : t.border}`,
      borderRadius: 10, padding: '9px 12px',
    }}>
      <div style={{
        width: 8, height: 8, borderRadius: 9999,
        background: active ? t.primary : review ? t.gold : t.fgMute,
        boxShadow: active ? '0 0 0 3px rgba(0,180,216,0.22)' : 'none',
        flexShrink: 0,
      }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 1 }}>
          <span style={{ fontSize: 11, fontWeight: 800, color: active ? t.primary : t.fgDim, letterSpacing: 0.3, textTransform: 'uppercase' }}>{day}</span>
          {review && (
            <span style={{ fontSize: 9, fontWeight: 800, color: t.gold, letterSpacing: 0.4, textTransform: 'uppercase',
              padding: '1px 6px', background: 'rgba(255,208,0,0.14)', borderRadius: 4 }}>herhaling</span>
          )}
        </div>
        <div style={{ fontSize: 12, fontWeight: 700, color: t.fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {label}
        </div>
      </div>
      <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute }}>{mins}m</span>
    </div>
  );
}

window.Screen5 = Screen5;