/* Scherm 3 — Volle Stapel — alle features
   3 taken + 5 flashcards SRS + 2 missies + 2 deadlines + coach-FAB.
   Overwhelm-test: hoe houden we het overzichtelijk? */

function Screen3() {
  const t = TK;

  const today = [
    { subject: 'biologie', type: 'lezen', title: 'Celbiologie § 4.2 lezen', detail: '8 bladzijden · mindmap 2 punten', mins: 25, source: 'Bio — vrij' },
    { subject: 'wiskunde', type: 'oefenen', title: 'Oefeningen § 2.3', mins: 15, source: 'Wi — SO ma' },
    { subject: 'engels', type: 'video', title: 'Grammar video · Present Perfect', mins: 10, source: 'En — essay do' },
  ];

  const missions = [
    { title: 'Doe 1 taak af', done: 0, target: 1, reward: 15, icon: 'check-circle', progress: 0 },
    { title: 'Review 10 flashcards', done: 4, target: 10, reward: 20, icon: 'layers', progress: 0.4 },
  ];

  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 },
  ];

  return (
    <StapelShell title="Plannen" subtitle="Woensdag 10 okt · drukke middag · 3 taken + 5 flashcards">
      <main style={{
        flex: 1, overflow: 'hidden', padding: '18px 24px 22px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        <WeekGrid density="medium" showHeader headerTitle="Week 41" headerRange="7–13 okt" subtitle="drukke week · 3 deadlines"
          week={[
            { day: 'ma', date: 7,  past: true,  items: [{ s: 'biologie', n: 1 }, { s: 'wiskunde', n: 1 }] },
            { day: 'di', date: 8,  past: true,  items: [{ s: 'biologie', n: 2 }, { s: 'wiskunde', n: 1 }] },
            { day: 'wo', date: 9,  today: true, items: [{ s: 'biologie', n: 2 }, { s: 'wiskunde', n: 2 }, { s: 'engels', n: 1 }] },
            { 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 }, { s: 'wiskunde', n: 1 }] },
          ]}
        />

        <div style={{
          flex: 1, display: 'grid', gridTemplateColumns: '300px 1fr 260px',
          gap: 16, minHeight: 0,
        }}>
          {/* LEFT — deadlines */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <h2 style={colHeader(t)}>Deadlines</h2>
                <span style={sectionChip(t)}>{deadlines.length}</span>
              </div>
              <button style={{ ...shellBtn(t, 'ghost'), height: 28, padding: '0 10px' }}>
                <I name="plus" size={12} />
              </button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {deadlines.map((d, i) => <DeadlineCardCompact key={i} d={d} active={i === 0} />)}
            </div>

            {/* daily missies strook */}
            <div style={{ marginTop: 4 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <span style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>
                  Missies vandaag
                </span>
                <PlanBadge plan="premium" size="sm" />
                <span style={{ flex: 1 }} />
                <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>0/2</span>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {missions.map((m, i) => <MissionRow key={i} mission={m} />)}
              </div>
            </div>
          </section>

          {/* CENTER — vandaag + flashcards strook */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0, overflow: 'auto' }}>

            {/* Flashcards strook (SRS) */}
            <div style={{
              background: `linear-gradient(90deg, rgba(157,78,221,0.10), rgba(0,180,216,0.06))`,
              border: `1px solid rgba(157,78,221,0.28)`, borderRadius: 14,
              padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 11, flexShrink: 0,
                background: 'rgba(157,78,221,0.18)', color: t.purpleFg,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <I name="layers" size={18} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
                  <span style={{ fontSize: 13, fontWeight: 800, color: t.fg }}>5 flashcards klaar om te herhalen</span>
                  <PlanBadge plan="premium" size="sm" />
                  <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.3, textTransform: 'uppercase' }}>· SRS</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
                  <SubjPill k="biologie" size="sm" />
                  <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>
                    Pulse kiest adaptief · 3 min
                  </span>
                </div>
              </div>
              {/* preview cards fanning */}
              <div style={{ display: 'flex', position: 'relative', width: 64, height: 40, flexShrink: 0 }}>
                {[0, 1, 2].map(i => (
                  <div key={i} style={{
                    position: 'absolute', left: i * 12, top: i * -2,
                    width: 36, height: 40, borderRadius: 6,
                    background: t.cardHi, border: '1px solid rgba(157,78,221,0.4)',
                    transform: `rotate(${(i - 1) * 6}deg)`,
                    boxShadow: '0 3px 8px rgba(0,0,0,0.3)',
                  }} />
                ))}
              </div>
              <button style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                height: 34, padding: '0 14px', borderRadius: 9,
                background: t.purple, color: '#fff', border: 0, cursor: 'pointer',
                fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
                boxShadow: '0 6px 16px rgba(157,78,221,0.32)',
                flexShrink: 0,
              }}>
                <I name="play" size={12} fill="currentColor" strokeWidth={0} color="#fff" />
                Start reviews
              </button>
            </div>

            {/* vandaag header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 2 }}>
              <Dot c={t.primary} size={8} />
              <h2 style={{ ...colHeader(t, t.primary) }}>Vandaag</h2>
              <span style={{ ...sectionChip(t, t.primary, 'rgba(0,180,216,0.14)'), border: '1px solid rgba(0,180,216,0.24)' }}>
                3 taken · 50 min
              </span>
              <span style={{ flex: 1 }} />
              <button style={{ ...shellBtn(t, 'ghost'), height: 28, padding: '0 10px' }}>
                <I name="maximize-2" size={12} />  Focus
              </button>
              <button style={{ ...shellBtn(t, 'ghost'), height: 28, padding: '0 10px' }}>
                <I name="settings-2" size={12} />
              </button>
            </div>

            <TaskRow task={today[0]} state="active" />
            <TaskRow task={today[1]} state="queued" />
            <TaskRow task={today[2]} state="queued" />

            <div style={{
              padding: '10px 14px', background: t.card, border: `1px solid ${t.border}`,
              borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10, marginTop: 'auto',
            }}>
              <I name="target" size={13} color={t.gold} />
              <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>
                Na vandaag op <b style={{ color: t.green }}>~55%</b> voor Bio. Ruim.
              </span>
              <span style={{ flex: 1 }} />
              <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>Eindigt ±17:30</span>
            </div>
          </section>

          {/* RIGHT — vandaag-snapshot / day scaffolding */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <h2 style={colHeader(t)}>Dag-opbouw</h2>
            </div>

            {/* timeline visual */}
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
              padding: 14, display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <TimelineRow time="15:30" label="Nu · thuiskomen" dot={t.primary} active />
              <TimelineRow time="15:45" label="Flashcards" dot={t.purple} pill="3 min" />
              <TimelineRow time="15:50" label="Bio lezen § 4.2" dot={SUBJECTS.biologie.color} pill="25 min" hot />
              <TimelineRow time="16:20" label="Pauze" dot={t.fgMute} pill="10 min" mute />
              <TimelineRow time="16:30" label="Wi § 2.3" dot={SUBJECTS.wiskunde.color} pill="15 min" />
              <TimelineRow time="16:50" label="En · grammar video" dot={SUBJECTS.engels.color} pill="10 min" />
              <TimelineRow time="17:30" label="Klaar" dot={t.green} end />
            </div>

            <div style={{
              padding: '10px 12px', background: 'rgba(34,197,94,0.06)',
              border: `1px dashed rgba(34,197,94,0.28)`, borderRadius: 10,
              display: 'flex', gap: 8, alignItems: 'flex-start',
            }}>
              <I name="lightbulb" size={13} color={t.green} style={{ marginTop: 2, flexShrink: 0 }} />
              <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
                Pulse stelde pauze rond <b style={{ color: t.fg }}>16:20</b> voor — jij kan dat aanpassen.
              </div>
            </div>

            <button style={{
              ...shellBtn(t, 'ghost'), height: 36, justifyContent: 'center', width: '100%',
            }}>
              <I name="printer" size={13} /> Export als PDF
            </button>
          </section>
        </div>

        <CoachFAB />
      </main>
    </StapelShell>
  );
}

function TimelineRow({ time, label, dot, pill, active, hot, mute, end }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, opacity: mute ? 0.55 : 1 }}>
      <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, width: 34, fontVariantNumeric: 'tabular-nums' }}>{time}</span>
      <div style={{ position: 'relative', width: 10, display: 'flex', justifyContent: 'center' }}>
        <div style={{
          width: active ? 10 : end ? 10 : 6, height: active ? 10 : end ? 10 : 6, borderRadius: 9999, background: dot,
          boxShadow: active ? `0 0 0 3px rgba(0,180,216,0.25)` : 'none',
          border: end ? `2px solid ${t.bg}` : 0,
        }} />
      </div>
      <span style={{ flex: 1, fontSize: 11.5, fontWeight: hot ? 800 : 700, color: hot ? t.fg : t.fgDim, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {label}
      </span>
      {pill && <span style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute, padding: '2px 6px', background: t.cardHi, borderRadius: 5 }}>{pill}</span>}
    </div>
  );
}

window.Screen3 = Screen3;