/* Scherm 4 — Focus-mode geactiveerd
   Stapel dimt achter scrim. Eén taak groot, timer (opt-in), Pulse idle.
   Volgende taak gluurt onderin. 'Stop focus' altijd bereikbaar. */

function Screen4() {
  const t = TK;

  const active = {
    subject: 'biologie',
    title: 'Celbiologie § 4.2 — lezen',
    detail: '8 bladzijden · mindmap 2 punten maken',
    mins: 25, source: 'Bio — vrijdag',
  };
  const next = { subject: 'biologie', title: '10 flashcards herhalen', mins: 15 };

  // Dimmed stapel-placeholders in background
  const today = [
    { subject: 'biologie', type: 'lezen', title: 'Celbiologie § 4.2', mins: 25, source: 'Bio' },
    { subject: 'biologie', type: 'flashcards', title: '10 flashcards', mins: 15, source: 'Bio' },
    { subject: 'wiskunde', type: 'oefenen', title: 'Oefeningen § 2.3', mins: 15, source: 'Wi' },
  ];

  return (
    <StapelShell title="Plannen" subtitle="Focus-mode actief · taak 1 van 3">
      <main style={{ flex: 1, overflow: 'hidden', padding: '20px 26px', position: 'relative' }}>

        {/* Dimmed Stapel behind scrim */}
        <div style={{ opacity: 0.18, filter: 'blur(1px)', pointerEvents: 'none',
          display: 'flex', flexDirection: 'column', gap: 14, 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={{ display: 'grid', gridTemplateColumns: '320px 1fr', gap: 18, flex: 1 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ height: 18 }} />
              <div style={{ height: 72, background: t.card, borderRadius: 12, border: `1px solid ${t.border}` }} />
              <div style={{ height: 72, background: t.card, borderRadius: 12, border: `1px solid ${t.border}` }} />
              <div style={{ height: 72, background: t.card, borderRadius: 12, border: `1px solid ${t.border}` }} />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ height: 18 }} />
              {today.map((tk, i) => <TaskRow key={i} task={tk} state={i === 0 ? 'active' : 'queued'} />)}
            </div>
          </div>
        </div>

        {/* Scrim */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 20,
          background: `radial-gradient(ellipse 90% 70% at 50% 50%, rgba(10,15,30,0.6), rgba(7,9,15,0.94))`,
          backdropFilter: 'blur(8px)',
        }} />

        {/* Focus stage */}
        <div style={{
          position: 'absolute', inset: 0, zIndex: 21,
          display: 'flex', flexDirection: 'column', padding: '24px 40px 28px',
        }}>
          {/* top bar */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              height: 28, padding: '0 10px', borderRadius: 7,
              background: 'rgba(157,78,221,0.16)', color: t.purpleFg,
              border: '1px solid rgba(157,78,221,0.32)',
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, letterSpacing: 0.5, textTransform: 'uppercase',
            }}>
              <I name="maximize-2" size={11} /> Focus-mode
            </div>
            <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 700 }}>Taak 1 van 3 · vandaag</span>
            <span style={{ flex: 1 }} />
            <button style={{ ...shellBtn(t, 'ghost'), height: 32 }}>
              <I name="x" size={13} /> Stop focus
            </button>
          </div>

          {/* main card + timer side */}
          <div style={{
            flex: 1, display: 'grid', gridTemplateColumns: '1fr 280px',
            gap: 22, minHeight: 0, marginTop: 22,
          }}>
            {/* the focus card */}
            <div style={{
              background: `linear-gradient(180deg, ${t.cardHi} 0%, ${t.card} 100%)`,
              border: `1.5px solid ${t.border}`, borderRadius: 22,
              padding: '28px 32px 24px', display: 'flex', flexDirection: 'column', gap: 18,
              boxShadow: '0 40px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.04)',
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', top: -100, right: -100, width: 360, height: 360,
                borderRadius: '50%', background: `radial-gradient(circle, color-mix(in srgb, ${SUBJECTS.biologie.color} 30%, transparent), transparent 70%)`,
                opacity: 0.22, pointerEvents: 'none',
              }} />

              <div style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative', zIndex: 1 }}>
                <SubjPill k={active.subject} size="md" />
                <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· {active.source}</span>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 20, flex: 1, position: 'relative', zIndex: 1 }}>
                <div style={{
                  width: 84, height: 84, borderRadius: 22, flexShrink: 0,
                  background: `linear-gradient(135deg, color-mix(in srgb, ${SUBJECTS.biologie.color} 30%, transparent), color-mix(in srgb, ${SUBJECTS.biologie.color} 10%, transparent))`,
                  border: `1px solid color-mix(in srgb, ${SUBJECTS.biologie.color} 36%, transparent)`,
                  color: SUBJECTS.biologie.color,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <I name="leaf" size={40} />
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11, fontWeight: 800, color: t.primary, letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8 }}>
                    Nu
                  </div>
                  <div style={{ fontFamily: 'Fredoka One', fontSize: 32, color: t.fg, letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 10 }}>
                    {active.title}
                  </div>
                  <div style={{ fontSize: 14, color: t.fgDim, fontWeight: 500, lineHeight: 1.5 }}>
                    {active.detail}
                  </div>
                </div>
              </div>

              {/* linked-content quick actions */}
              <div style={{ display: 'flex', gap: 8, position: 'relative', zIndex: 1, paddingTop: 12, borderTop: `1px solid ${t.border}` }}>
                <button style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  height: 34, padding: '0 14px', borderRadius: 9,
                  background: t.primary, color: '#07090F', border: 0, cursor: 'pointer',
                  fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
                }}>
                  <I name="book-open" size={13} /> Open hoofdstuk
                </button>
                <button style={shellBtn(t, 'ghost')}>
                  <I name="pen-line" size={12} /> Notities
                </button>
                <button style={shellBtn(t, 'ghost')}>
                  <I name="link-2" size={12} /> Bron
                </button>
                <span style={{ flex: 1 }} />
                <button style={{
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                  height: 34, padding: '0 16px', borderRadius: 9,
                  background: t.green, color: '#07090F', border: 0, cursor: 'pointer',
                  fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
                }}>
                  <I name="check" size={13} strokeWidth={3} /> Klaar · volgende
                </button>
              </div>
            </div>

            {/* right — timer + queue peek */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0 }}>

              {/* timer */}
              <div style={{
                background: t.card, border: `1px solid ${t.border}`, borderRadius: 16,
                padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <I name="clock" size={12} color={t.fgMute} />
                  <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>Timer</span>
                </div>
                <div style={{ position: 'relative', width: 140, height: 140 }}>
                  <svg width="140" height="140" viewBox="0 0 140 140" style={{ transform: 'rotate(-90deg)' }}>
                    <circle cx="70" cy="70" r="62" fill="none" stroke={t.cardHi} strokeWidth="8" />
                    <circle cx="70" cy="70" r="62" fill="none" stroke={t.primary} strokeWidth="8"
                      strokeDasharray="390" strokeDashoffset="78" strokeLinecap="round" />
                  </svg>
                  <div style={{
                    position: 'absolute', inset: 0, display: 'flex',
                    flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <span style={{ fontFamily: 'Fredoka One', fontSize: 32, color: t.fg, letterSpacing: '-0.02em', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
                      19:47
                    </span>
                    <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute, marginTop: 4, letterSpacing: 0.4, textTransform: 'uppercase' }}>
                      van 25 min
                    </span>
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 6, width: '100%' }}>
                  <button style={{ ...shellBtn(t, 'ghost'), flex: 1, justifyContent: 'center', height: 32 }}>
                    <I name="pause" size={12} /> Pauze
                  </button>
                  <button style={{ ...shellBtn(t, 'ghost'), width: 32, justifyContent: 'center', height: 32, padding: 0 }}>
                    <I name="rotate-ccw" size={12} />
                  </button>
                </div>
              </div>

              {/* next peek */}
              <div style={{
                background: 'transparent', border: `1px dashed ${t.border}`, borderRadius: 12,
                padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <I name="arrow-down" size={12} color={t.fgMute} />
                <div style={{ minWidth: 0, flex: 1 }}>
                  <div style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 2 }}>
                    Daarna
                  </div>
                  <div style={{ fontSize: 12, fontWeight: 800, color: t.fgDim, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {next.title}
                  </div>
                </div>
                <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute }}>{next.mins}m</span>
              </div>

              {/* Pulse corner — stille supporter */}
              <div style={{
                marginTop: 'auto', padding: '14px 16px', background: t.card,
                border: `1px solid ${t.border}`, borderRadius: 14,
                display: 'flex', alignItems: 'center', gap: 12,
              }}>
                <PulseMascot variant="glow" mood="idle" size="sm" eyeAnimation="blink" />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11.5, fontWeight: 800, color: t.fg, marginBottom: 2 }}>
                    Ik ben er als je me nodig hebt
                  </div>
                  <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600, lineHeight: 1.4 }}>
                    Klik mij voor hulp · anders stil.
                  </div>
                </div>
              </div>

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

window.Screen4 = Screen4;