/* Scherm 1 — De gemiste dag
   Wo 15:30. 3 taken gemist sinds maandag. Vrijdag Bio-toets.
   Herstel-bak bovenaan vandaag-kolom (rood-getint, niet gemengd met vandaag). */

function Screen1() {
  const t = TK;

  const missed = [
    { subject: 'biologie', type: 'lezen',      title: 'Celbiologie § 4.1 lezen',    mins: 25, missedDay: 'di' },
    { subject: 'biologie', type: 'flashcards', title: '12 flashcards herhalen',     mins: 15, missedDay: 'di', overdue: true },
    { subject: 'wiskunde', type: 'oefenen',    title: 'Oefeningen § 2.2',           mins: 20, missedDay: 'di' },
  ];

  const today = [
    { subject: 'biologie', type: 'lezen', title: 'Celbiologie § 4.2 lezen', detail: '8 bladzijden · mindmap 2 punten', mins: 25, source: 'Bio — vrijdag' },
    { subject: 'biologie', type: 'flashcards', title: '10 flashcards nieuw', mins: 15, source: 'Bio — SRS' },
  ];

  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.50 },
    { subject: 'engels',   type: 'Essay', title: 'Schrijfopdracht',  days: 8, progress: 0.10 },
  ];

  return (
    <StapelShell
      title="Plannen"
      subtitle="Woensdag 10 okt · Welkom terug — je was even weg"
    >
      <main style={{
        flex: 1, overflow: 'hidden', padding: '20px 26px 24px',
        display: 'flex', flexDirection: 'column', gap: 16,
      }}>
        <WeekGrid density="medium" showHeader headerTitle="Week 41" headerRange="7–13 okt" subtitle="welkom terug — dinsdag gemist"
          week={[
            { day: 'ma', date: 7,  past: true,  items: [{ s: 'biologie', n: 1 }, { s: 'wiskunde', n: 1 }] },
            { day: 'di', date: 8,  past: true,  missed: true, items: [{ s: 'biologie', n: 2 }, { s: 'wiskunde', n: 1 }] },
            { 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,
        }}>
          {/* 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, overflow: 'auto', paddingRight: 2 }}>
              {deadlines.map((d, i) => <DeadlineCardCompact key={i} d={d} active={i === 0} />)}
            </div>

            <div style={{
              marginTop: 'auto', padding: 12,
              background: 'rgba(0,180,216,0.06)', border: `1px dashed rgba(0,180,216,0.3)`,
              borderRadius: 10, display: 'flex', gap: 10,
            }}>
              <I name="info" size={14} color={t.primary} style={{ marginTop: 2, flexShrink: 0 }} />
              <div>
                <div style={{ fontSize: 11, fontWeight: 800, color: t.fg, marginBottom: 3 }}>Bio staat op 35%</div>
                <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
                  Na de 2 studiemomenten deze week zit je op ~70%. Haalbaar.
                </div>
              </div>
            </div>
          </section>

          {/* RIGHT — vandaag met Herstel-bak */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0, overflow: 'auto' }}>

            {/* HERSTEL-BAK */}
            <div style={{
              background: 'linear-gradient(180deg, rgba(239,68,68,0.08), rgba(239,68,68,0.02))',
              border: `1px solid rgba(239,68,68,0.25)`, borderRadius: 14,
              padding: 16, display: 'flex', flexDirection: 'column', gap: 12,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 2,
                background: `linear-gradient(90deg, ${t.red}, transparent)`, opacity: 0.6,
              }} />

              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 11, flexShrink: 0,
                  background: 'rgba(239,68,68,0.16)', color: t.red,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <I name="history" size={19} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                    <h2 style={{ ...colHeader(t, t.red), fontSize: 15 }}>Even bijwerken</h2>
                    <span style={{ ...sectionChip(t, t.red, 'rgba(239,68,68,0.14)'), border: '1px solid rgba(239,68,68,0.28)' }}>
                      3 gemist · sinds di
                    </span>
                  </div>
                  <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.4 }}>
                    Dinsdag is overgeslagen. Niks aan de hand — schuif, doe of haal ze weg.
                  </div>
                </div>

                {/* Herplannen-actie */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
                  <button style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    height: 36, padding: '0 14px', 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 18px rgba(157,78,221,0.3)',
                  }}>
                    <I name="sparkles" size={13} fill="currentColor" strokeWidth={0} color="#fff" />
                    Herplan met AI
                    <PlanBadge plan="premium" size="sm" />
                  </button>
                  <button style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6, justifyContent: 'center',
                    height: 26, padding: '0 10px', borderRadius: 7,
                    background: 'transparent', color: t.fgDim, border: `1px solid ${t.border}`,
                    fontFamily: 'Nunito', fontWeight: 700, fontSize: 11, cursor: 'pointer',
                  }}>
                    <I name="move-vertical" size={11} /> Zelf herplannen
                  </button>
                </div>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {missed.map((m, i) => (
                  <TaskRow key={i} task={m} state="missed" />
                ))}
              </div>
            </div>

            {/* VANDAAG */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
              <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)' }}>
                2 taken · 40 min
              </span>
              <span style={{ flex: 1 }} />
              <button style={{ ...shellBtn(t, 'ghost'), height: 28, padding: '0 10px' }}>
                <I name="settings-2" size={12} />  Aanpassen
              </button>
            </div>

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

            {/* footer-summary */}
            <div style={{
              marginTop: 'auto', padding: '12px 14px', background: t.card, border: `1px solid ${t.border}`,
              borderRadius: 12, display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <PulseMascot variant="glow" mood="encouraging" size="sm" eyeAnimation="warm" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 800, color: t.fg, marginBottom: 2 }}>
                  Haalbaar — ook na dinsdag
                </div>
                <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 500, lineHeight: 1.4 }}>
                  Ik kan de 3 gemiste spreiden over <b style={{ color: t.fg }}>wo + do</b>. Vrijdag blijft 45 min review.
                </div>
              </div>
            </div>

          </section>
        </div>

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

window.Screen1 = Screen1;