/* ═════════════════════════════════════════════════════════
   Scene 3 — Woensdag 07:30, 2 toetsen vandaag, 7 minuten
   Scene 4 — Donderdag 17:00, Geschiedenis ging slecht
   ═════════════════════════════════════════════════════════ */

/* Scene 3 — Overweldigd-moment.
   Ontwerpbeslissing: automatische "Vandaag-compacte"-modus.
   Deze kick't in als ≥2 deadlines in <24u én het is ochtend (<09:00).
   Het is GEEN Focus-mode (die is per taak). Het is een tijdelijke
   LAYOUT-shift: alles dat niet "vandaag" is gaat uit beeld.
   Deadlines-kolom verbergt, Maand-blik verbergt, alleen "vanochtend /
   schooldag / vanavond" + mini-ladder van vandaag's 2 toetsen.
*/
function Scene3() {
  const t = TK;

  return (
    <StapelShell
      title="Vandaag"
      subtitle="Wo 12 juni · 07:30 · 2 toetsen · Frans 09:00 · Wiskunde 13:30"
      rightExtra={<QuickCheckBadge />}
      height={880}>
      <main style={{
        flex: 1, overflow: 'auto', padding: '18px 24px 24px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        {/* Compacte vandaag-ladder — 2 toetsen, visueel de dag */}
        <VandaagLadder />

        <div style={{
          flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 16, minHeight: 0,
        }}>
          {/* LINKS — Frans (in 1u30) */}
          <DayBlock
            when="Over 1u30"
            examKey="frans"
            examTitle="Frans SO · H6 woordenschat"
            tasks={[
              { type: 'flashcards', title: 'Snelle scan · 15 wisselvallige',   mins: 7, source: 'laatste check' },
              { type: 'quiz',       title: 'Zelf-quiz · 10 random woorden',    mins: 3, source: 'test jezelf' },
            ]}
            tip="Gisteren stonden deze 15 nog wisselvallig. Meestal zakken ze in na een nachtje slaap — even bevestigen helpt."
            primary
          />
          {/* RECHTS — Wiskunde (in 6u) */}
          <DayBlock
            when="Na school · 13:30"
            examKey="wiskunde"
            examTitle="Wiskunde · statistiek"
            tasks={[
              { type: 'oefenen', title: 'Samenvatting scannen',  mins: 8, source: 'tussenpauze' },
              { type: 'oefenen', title: '3 kern-opgaven',         mins: 12, source: 'pauze voor toets' },
            ]}
            tip="Niet nu doen. In de pauze tussen 12:15-13:20 heb je ruimte. Ik zet ze vast klaar."
          />
        </div>

        {/* Minimale acties — alleen het verhaal */}
        <div style={{
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
          padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, flexShrink: 0,
            background: 'rgba(0,180,216,0.14)', display: 'flex',
            alignItems: 'center', justifyContent: 'center' }}>
            <PulseMascot variant="glow" mood="encouraging" size="sm" />
          </div>
          <div style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
            Je hebt <b style={{ color: t.fg }}>7 minuten</b>. Doe alleen de Frans-scan — de rest komt vanzelf.
          </div>
          <button style={{ ...shellBtn(t, 'primary'), height: 32 }}>
            <I name="play" size={11} fill="currentColor" strokeWidth={0} color="#07090F" /> Start Frans-scan
          </button>
        </div>

        {/* Footer: expandeerbaar als je MEER wil zien */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 10, paddingTop: 6, opacity: 0.5,
        }}>
          <div style={{ flex: 1, height: 1, background: t.border }} />
          <button style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            height: 28, padding: '0 12px', borderRadius: 7,
            background: 'transparent', color: t.fgMute, border: `1px solid ${t.border}`,
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5, cursor: 'pointer',
          }}>
            <I name="chevron-down" size={11} /> Toch de hele week zien
          </button>
          <div style={{ flex: 1, height: 1, background: t.border }} />
        </div>

        {/* Small proefweek-mode reminder */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 10, color: t.fgMute, fontWeight: 700, justifyContent: 'center',
        }}>
          <I name="flame" size={11} color="#FCA5A5" />
          <span>Vandaag-modus · de rest is nog steeds gepland, maar niet nu je zorg</span>
        </div>
      </main>
    </StapelShell>
  );
}

function QuickCheckBadge() {
  const t = TK;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 28, padding: '0 11px', borderRadius: 9999,
      background: 'rgba(245,158,11,0.12)', color: t.warn,
      border: `1px solid rgba(245,158,11,0.3)`,
      fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
    }}>
      <I name="zap" size={11} /> Quick-check · 7 min tot school
    </div>
  );
}

function VandaagLadder() {
  const t = TK;
  const exams = [
    { k: 'frans',    title: 'Frans SO',     time: '09:00', inWhen: '1u 30m', mins: 25, near: true },
    { k: 'wiskunde', title: 'Wisk toets',   time: '13:30', inWhen: '6u 00m', mins: 45 },
  ];
  return (
    <div style={{
      background: `linear-gradient(180deg, rgba(245,158,11,0.06) 0%, ${t.card} 60%)`,
      border: `1.5px solid rgba(245,158,11,0.25)`, borderRadius: 14,
      padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 12, flexShrink: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, letterSpacing: '-0.01em' }}>
          Vandaag: 2 toetsen
        </span>
        <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>
          · alles wat niet vandaag is, heb ik even weggeschoven
        </span>
      </div>
      <div style={{ display: 'flex', gap: 14 }}>
        {exams.map((e, i) => {
          const s = SUBJECTS[e.k];
          return (
            <div key={i} style={{
              flex: 1, background: e.near ? `color-mix(in srgb, ${s.color} 12%, ${t.card})` : t.cardAlt,
              border: e.near ? `1.5px solid ${s.color}` : `1px solid ${t.border}`,
              borderRadius: 11, padding: '12px 14px',
              display: 'flex', alignItems: 'center', gap: 12, position: 'relative', overflow: 'hidden',
            }}>
              {e.near && (
                <div style={{
                  position: 'absolute', top: 0, right: 0, width: 80, height: 80,
                  background: `radial-gradient(circle at 100% 0%, ${s.color}44, transparent 60%)`,
                  pointerEvents: 'none',
                }} />
              )}
              <div style={{
                width: 42, height: 42, borderRadius: 11, flexShrink: 0,
                background: `color-mix(in srgb, ${s.color} 20%, transparent)`,
                color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
                position: 'relative', zIndex: 1,
              }}>
                <I name={s.icon} size={20} />
              </div>
              <div style={{ flex: 1, minWidth: 0, position: 'relative', zIndex: 1 }}>
                <div style={{ fontSize: 10, fontWeight: 800, color: e.near ? s.color : t.fgMute,
                  letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 2 }}>
                  {e.time} · over {e.inWhen}
                </div>
                <div style={{ fontSize: 15, fontWeight: 800, color: t.fg, fontFamily: 'Fredoka One', letterSpacing: '-0.01em' }}>
                  {e.title}
                </div>
                <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, marginTop: 1 }}>
                  Toets duurt {e.mins} min
                </div>
              </div>
              {e.near && (
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  background: s.color, color: '#07090F', borderRadius: 8,
                  padding: '6px 10px', fontSize: 10, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
                  position: 'relative', zIndex: 1,
                }}>
                  ← volgende
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function DayBlock({ when, examKey, examTitle, tasks, tip, primary }) {
  const t = TK;
  const s = SUBJECTS[examKey];
  return (
    <section style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 14,
      padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 12,
      minHeight: 0, overflow: 'auto',
      opacity: primary ? 1 : 0.82,
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <div style={{
          fontSize: 10, fontWeight: 800, color: primary ? t.primary : t.fgMute,
          letterSpacing: 0.6, textTransform: 'uppercase',
        }}>{when}</div>
        <span style={{ flex: 1 }} />
        <SubjPill k={examKey} size="sm" />
      </div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, letterSpacing: '-0.01em', lineHeight: 1.2,
      }}>{examTitle}</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 4 }}>
        {tasks.map((task, i) => (
          <TaskRow key={i} task={{ subject: examKey, ...task }} state={primary && i === 0 ? 'active' : 'queued'} />
        ))}
      </div>

      <div style={{
        padding: '10px 12px', background: `color-mix(in srgb, ${s.color} 6%, transparent)`,
        border: `1px dashed color-mix(in srgb, ${s.color} 28%, transparent)`, borderRadius: 10,
        display: 'flex', gap: 8, alignItems: 'flex-start', marginTop: 'auto',
      }}>
        <I name="sparkles" size={13} color={s.color} style={{ marginTop: 2, flexShrink: 0 }} />
        <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
          {tip}
        </div>
      </div>
    </section>
  );
}

/* ═════════════════════════════════════════════════════════
   Scene 4 — Donderdag 17:00, Geschiedenis ging slecht
   Twee opties naast elkaar:
     A · Stapel met reflectie-card (opt-in, dismissable)
     B · Stapel zonder reflectie (vooruitkijken pur sang)
   Ontwerp-mening: A wint — maar de reflectie moet DISMISSABLE zijn,
   en hij moet de volgende taak NIET wegdrukken.
   ═════════════════════════════════════════════════════════ */
function Scene4() {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      <S4Label which="A" winner>Met reflectie-card (kiest wint)</S4Label>
      <Scene4Variant reflection="A" />
      <S4Label which="B">Zonder reflectie (pur sang vooruit)</S4Label>
      <Scene4Variant reflection="B" />
    </div>
  );
}

function S4Label({ which, winner, children }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{
        background: winner ? 'rgba(34,197,94,0.16)' : 'rgba(148,163,184,0.14)',
        color: winner ? '#86EFAC' : t.fgDim,
        padding: '4px 10px', borderRadius: 7,
        fontFamily: 'Fredoka One', fontSize: 13, letterSpacing: '-0.01em',
      }}>Variant {which}{winner ? ' · kiest' : ''}</div>
      <div style={{ fontSize: 13, fontWeight: 800, color: t.fg }}>{children}</div>
    </div>
  );
}

function Scene4Variant({ reflection }) {
  const t = TK;
  const exams = [
    { k: 'biologie',     label: 'Bio',         dayLabel: 'di',    status: 'past', past: true },
    { k: 'frans',        label: 'Frans SO',    dayLabel: 'wo',    status: 'past', past: true },
    { k: 'wiskunde',     label: 'Wisk',        dayLabel: 'wo',    status: 'past', past: true },
    { k: 'geschiedenis', label: 'Ges',         dayLabel: 'net nu · do', status: 'past', past: true },
    { k: 'engels',       label: 'En essay',    dayLabel: 'morgen inl.', status: 'next' },
    { k: 'scheikunde',   label: 'Sk toets',    dayLabel: 'morgen 11:00', time: '11:00', status: 'next' },
    { k: 'nederlands',   label: 'Ned verslag', dayLabel: 'ma',    status: 'upcoming' },
  ];

  const deadlines = [
    { subject: 'engels',     type: 'Essay', title: '400w essay · "my hero"', days: 0, progress: 0.15, active: true,
      checklist: [
        { label: 'Outline af', done: true },
        { label: 'Eerste versie', done: false },
        { label: 'Revisie', done: false },
      ],
    },
    { subject: 'scheikunde', type: 'Toets', title: 'Zuren & basen',    days: 0, progress: 0.45, active: true,
      checklist: [
        { label: 'Theorie H3 gelezen', done: true },
        { label: 'Oefeningen § 3.2', done: true },
        { label: 'Samenvatting maken', done: false },
      ],
    },
    { subject: 'nederlands', type: 'Inl.', title: 'Boekverslag (200w)', days: 4, progress: 0.05 },
  ];

  return (
    <StapelShell
      title="Plannen"
      subtitle="Donderdag 13 juni · 17:00 · Ges gedaan · morgen 2 deadlines"
      height={reflection === 'A' ? 740 : 700}>
      <main style={{
        flex: 1, overflow: 'auto', padding: '16px 24px 22px',
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        {/* De reflectie-kaart alleen in variant A */}
        {reflection === 'A' && <ReflectionCard />}

        {/* altijd: compacte ladder — past, vandaag voorbij, 2 morgen */}
        <ToetsLadder
          title="Proefweek"
          subtitle="4 gedaan · morgen 2 · ma 1"
          exams={exams}
          highlight={3}
          compact
        />

        <div style={{
          flex: 1, display: 'grid', gridTemplateColumns: '320px 1fr 280px',
          gap: 14, minHeight: 0,
        }}>
          <section style={{ display: 'flex', flexDirection: 'column', gap: 8, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <h2 style={colHeader(t)}>Morgen</h2>
              <span style={{ ...sectionChip(t, '#FCA5A5', 'rgba(239,68,68,0.12)'),
                border: '1px solid rgba(239,68,68,0.24)' }}>2</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
              {deadlines.slice(0, 2).map((d, i) => <DeadlineCardWide key={i} d={d} showChecklist compact />)}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6 }}>
              <h2 style={colHeader(t)}>Daarna</h2>
            </div>
            <DeadlineCardWide d={deadlines[2]} compact />
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0, overflow: 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <Dot c={t.primary} size={8} />
              <h2 style={colHeader(t, t.primary)}>Vanavond</h2>
              <span style={{ ...sectionChip(t, t.primary, 'rgba(0,180,216,0.14)'),
                border: '1px solid rgba(0,180,216,0.24)' }}>
                3 taken · 75 min
              </span>
              <span style={{ flex: 1 }} />
              <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>eindigt ±20:15</span>
            </div>
            <TaskRow task={{
              subject: 'scheikunde', type: 'oefenen',
              title: 'Scheikunde samenvatting afmaken',
              detail: 'Zuren & basen · reactievergelijkingen',
              mins: 30, source: 'Sk · morgen 11:00',
            }} state="active" />
            <TaskRow task={{
              subject: 'engels', type: 'oefenen',
              title: 'Essay eerste versie schrijven', mins: 30,
              source: 'En · morgen inleveren',
            }} state="queued" />
            <TaskRow task={{
              subject: 'scheikunde', type: 'flashcards',
              title: '20 flashcards · reacties', mins: 15,
              source: 'Sk · voor bed',
            }} state="queued" />

            <PulseWhisper
              mood="encouraging"
              text={<>Essay kan korter dan je denkt — begin met een <b style={{ color: TK.fg }}>ruwe versie</b>, rammelen mag. Morgenochtend 15 min polijsten.</>}
            />
          </section>

          <section style={{ display: 'flex', flexDirection: 'column', gap: 8, minHeight: 0 }}>
            <h2 style={colHeader(t)}>Ritme vanavond</h2>
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
              padding: 14, display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <SmallTimeBlock time="17:00" label="Nu · thuis" dot={t.primary} active />
              <SmallTimeBlock time="17:10" label="Eten" dot={t.green} pill="45m" mute />
              <SmallTimeBlock time="18:00" label="Sk samenvatting" dot={SUBJECTS.scheikunde.color} pill="30m" />
              <SmallTimeBlock time="18:30" label="Pauze" dot={t.fgMute} pill="10m" mute />
              <SmallTimeBlock time="18:40" label="En essay ruw" dot={SUBJECTS.engels.color} pill="30m" />
              <SmallTimeBlock time="19:10" label="Pauze · bewegen" dot={t.green} pill="15m" mute />
              <SmallTimeBlock time="19:25" label="Sk flashcards" dot={SUBJECTS.scheikunde.color} pill="15m" />
              <SmallTimeBlock time="22:00" label="Slapen" dot={t.purple} end />
            </div>
          </section>
        </div>
      </main>
    </StapelShell>
  );
}

function ReflectionCard() {
  const t = TK;
  const [state, setState] = React.useState('collapsed');
  return (
    <div style={{
      background: 'rgba(157,78,221,0.06)', border: `1px solid rgba(157,78,221,0.22)`,
      borderRadius: 12, padding: state === 'collapsed' ? '10px 14px' : '14px 16px',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      {state === 'collapsed' ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 7, background: 'rgba(157,78,221,0.16)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <PulseMascot variant="glow" mood="thinking" size="sm" />
          </div>
          <div style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.45 }}>
            Geschiedenis gedaan. <b style={{ color: t.fg }}>Hoe voelde het?</b> Eén zin is genoeg — helpt bij de volgende.
          </div>
          <button onClick={() => setState('open')} style={{
            height: 28, padding: '0 11px', borderRadius: 7,
            background: t.purple, color: '#fff', border: 0,
            fontSize: 11, fontWeight: 800, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
          }}>
            Zeg iets
          </button>
          <button onClick={() => setState('dismissed')} style={{
            width: 28, height: 28, borderRadius: 7,
            background: 'transparent', color: t.fgMute, border: 0, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <I name="x" size={13} />
          </button>
        </div>
      ) : state === 'open' ? (
        <>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(157,78,221,0.16)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <PulseMascot variant="glow" mood="thinking" size="sm" />
            </div>
            <div style={{ fontSize: 13, fontWeight: 800, color: t.fg }}>
              Hoe voelde Geschiedenis?
            </div>
            <span style={{ flex: 1 }} />
            <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>Alleen voor jou · niet gedeeld</span>
          </div>
          <div style={{ display: 'flex', gap: 6 }}>
            {[
              { k: 'solid',   emoji: '👍', label: 'Ging wel' },
              { k: 'mixed',   emoji: '😐', label: 'Wisselend' },
              { k: 'rough',   emoji: '😕', label: 'Niet goed', selected: true },
              { k: 'bad',     emoji: '😫', label: 'Slecht' },
            ].map((opt, i) => (
              <button key={i} style={{
                flex: 1, height: 42, borderRadius: 9,
                background: opt.selected ? 'rgba(157,78,221,0.18)' : t.cardHi,
                border: opt.selected ? `1.5px solid ${t.purpleFg}` : `1px solid ${t.border}`,
                color: opt.selected ? t.purpleFg : t.fgDim,
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                fontSize: 11.5, fontWeight: 800, cursor: 'pointer',
              }}>
                <span style={{ fontSize: 14 }}>{opt.emoji}</span> {opt.label}
              </button>
            ))}
          </div>
          <textarea defaultValue="Had mn tijdlijn niet goed op volgorde. Interbellum zelf ging ok."
            style={{
              width: '100%', minHeight: 50, padding: '9px 11px', borderRadius: 8,
              background: t.cardAlt, border: `1px solid ${t.border}`, color: t.fg,
              fontSize: 12, fontFamily: 'Nunito', fontWeight: 500, resize: 'none', outline: 'none',
              lineHeight: 1.45,
            }} />
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700, lineHeight: 1.4 }}>
              Dit leest niemand. Het helpt Pulse morgen niet harder te duwen als je even een reset nodig hebt.
            </span>
            <span style={{ flex: 1 }} />
            <button onClick={() => setState('saved')} style={{
              height: 30, padding: '0 12px', borderRadius: 7,
              background: t.purple, color: '#fff', border: 0,
              fontSize: 11.5, fontWeight: 800, cursor: 'pointer',
            }}>
              <I name="check" size={11} strokeWidth={3} style={{ marginRight: 5 }} /> Opslaan
            </button>
          </div>
        </>
      ) : state === 'saved' ? (
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ width: 24, height: 24, borderRadius: 7, background: 'rgba(34,197,94,0.16)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, color: t.green }}>
            <I name="check" size={13} strokeWidth={3} />
          </div>
          <div style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.45 }}>
            Opgeslagen. Vanavond houden we het <b style={{ color: t.fg }}>rustiger</b> — essay ruw, scheikunde compact.
          </div>
          <button onClick={() => setState('collapsed')} style={{
            width: 28, height: 28, borderRadius: 7,
            background: 'transparent', color: t.fgMute, border: 0, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <I name="x" size={13} />
          </button>
        </div>
      ) : null}
    </div>
  );
}

window.Scene3 = Scene3;
window.Scene4 = Scene4;