/* ═════════════════════════════════════════════════════════
   Moment 1 — Comeback na 4 dagen weg
   Moment 2 — Ochtend-notificatie (3 varianten)
   ═════════════════════════════════════════════════════════ */

/* Helper for the "absence prompt" card with 3 choices */
function AbsenceChoices({ selected }) {
  const t = TK;
  const choices = [
    { k: 'bekijk', label: 'Bekijken eerst', hint: '11 taken · niks verandert' },
    { k: 'herplan', label: 'Herplannen naar deze week', hint: '+3 per dag · t/m zondag' },
    { k: 'weg', label: 'Weggooien', hint: 'vakantie = voorbij', variant: 'danger' },
  ];
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
      {choices.map(c => {
        const active = selected === c.k;
        const isDanger = c.variant === 'danger';
        return (
          <div key={c.k} style={{
            background: active ? (isDanger ? 'rgba(239,68,68,0.10)' : 'rgba(0,180,216,0.10)') : t.card,
            border: `1.5px solid ${active ? (isDanger ? 'rgba(239,68,68,0.4)' : t.primary) : t.border}`,
            borderRadius: 10, padding: '9px 13px',
            display: 'flex', flexDirection: 'column', gap: 3, minWidth: 150,
            position: 'relative',
          }}>
            <div style={{ fontSize: 12.5, fontWeight: 800, color: isDanger ? '#FCA5A5' : t.fg }}>
              {c.label}
              {active && <I name="check" size={12} style={{ marginLeft: 6, verticalAlign: -1 }} color={isDanger ? '#FCA5A5' : t.primary} strokeWidth={4} />}
            </div>
            <div style={{ fontSize: 10.5, fontWeight: 600, color: t.fgMute, letterSpacing: 0.1 }}>
              {c.hint}
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* Basic stapel-content shared between M1 states A/B */
function StapelBodyM1({ state, extra }) {
  const t = TK;
  // State A: pulse-card prominent, stapel underneath is MUTED (greyed)
  // State B: herplanned, taken show "herpland" badge, pulse acknowledges
  const todayTasks = [
    { subject: 'biologie', title: 'Celbiologie — flashcards ronde 2', mins: 15, source: 'Bio · H4', type: 'flashcards' },
    { subject: 'wiskunde', title: 'Statistiek — 3 oefenopgaves', mins: 20, source: 'Wisk · H7', type: 'oefenen' },
  ];
  const herplanned = [
    { subject: 'engels', title: 'Samenvatting H3 afmaken', mins: 20, source: 'do · gemist', type: 'oefenen' },
    { subject: 'geschiedenis', title: 'Interbellum — videoles', mins: 12, source: 'vr · gemist', type: 'video' },
    { subject: 'frans',     title: 'Woordjes H5 herhalen', mins: 10, source: 'ma · gemist', type: 'flashcards' },
  ];

  return (
    <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '300px 1fr 300px', gap: 16, minHeight: 0 }}>
      {/* LEFT: Deadlines */}
      <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0, opacity: state === 'A' ? 0.5 : 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <h2 style={colHeader(t)}>Deadlines</h2>
          <span style={sectionChip(t)}>4</span>
        </div>
        <DeadlineCardCompact d={{ subject: 'biologie', type: 'Toets', title: 'Celbiologie H4-5', days: 3, progress: 0.42 }} active />
        <DeadlineCardCompact d={{ subject: 'engels', type: 'Essay', title: 'Literature essay — 400w', days: 5, progress: 0.18 }} />
        <DeadlineCardCompact d={{ subject: 'wiskunde', type: 'Toets', title: 'Statistiek · H7', days: 6, progress: 0.55 }} />
        <DeadlineCardCompact d={{ subject: 'frans', type: 'SO', title: 'Woordenschat H6', days: 8, progress: 0.25 }} />
      </section>

      {/* CENTER: Dag */}
      <section style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <h2 style={colHeader(t)}>Dinsdag 22 okt</h2>
          <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
            {state === 'A' ? 'stapel staat stil tot je kiest' : '2 vandaag · 3 herplanned'}
          </span>
        </div>

        {/* the pulse card or the herplanned summary */}
        {extra}

        <Sectionlabel>
          {state === 'A' ? 'Vandaag' : 'Vandaag — regulier'}
        </Sectionlabel>
        {todayTasks.map((task, i) => <TaskRow key={i} task={task} state="queued" />)}

        {state === 'B' && (
          <>
            <Sectionlabel right={<span style={{ fontSize: 10, color: t.purpleFg, fontWeight: 800, letterSpacing: 0.3 }}>GEREPLANT · NA AFWEZIGHEID</span>}>
              Opgepakt over 3 dagen
            </Sectionlabel>
            {herplanned.map((task, i) => (
              <div key={i} style={{ position: 'relative' }}>
                <TaskRow task={task} state="queued" />
                <div style={{
                  position: 'absolute', right: -6, top: -6,
                  width: 16, height: 16, borderRadius: 9999,
                  background: 'rgba(157,78,221,0.22)', color: '#C4B5FD',
                  border: `2px solid ${t.bg}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <I name="clock" size={8} strokeWidth={3} />
                </div>
              </div>
            ))}
          </>
        )}

        {/* Footer: geen-zin link (moment 3 - altijd zichtbaar) */}
        <div style={{ marginTop: 'auto', paddingTop: 10, borderTop: `1px dashed ${t.border}` }}>
          <NoZinLink />
        </div>
      </section>

      {/* RIGHT: missies (dimmed in A) */}
      <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0, opacity: state === 'A' ? 0.5 : 1 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <h2 style={colHeader(t)}>Missies</h2>
          <span style={sectionChip(t)}>3 actief</span>
        </div>
        <MissionRow mission={{ title: '3 taken op één dag', icon: 'target', progress: 0.67, done: 2, target: 3, reward: 25 }} />
        <MissionRow mission={{ title: 'Flashcards 5× deze week', icon: 'layers', progress: 0.2, done: 1, target: 5, reward: 40 }} />
        <MissionRow mission={{ title: 'Bio samenvatting af', icon: 'check-square', progress: 0.4, done: 0, target: 1, reward: 30 }} />
        <div style={{ fontSize: 11, color: t.fgMute, fontWeight: 600, marginTop: 8, lineHeight: 1.5 }}>
          {state === 'A'
            ? 'Missies staan stil tot je gemiste taken geregeld hebt.'
            : 'Missies pikken de herhplanning op — een taak extra telt gewoon mee.'}
        </div>
      </section>
    </div>
  );
}

function Moment1() {
  const t = TK;

  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
      {/* STATE A — Pulse benoemt afwezigheid, wacht op keuze */}
      <SceneFrame num="1A" title="Eerste scherm" context="nog niks gekozen — stapel staat stil" height={760}>
        <StapelShell title="Plannen" subtitle="Dinsdag 22 okt · 16:03" height={760}>
          <main style={{ flex: 1, overflow: 'auto', padding: '18px 24px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <StapelBodyM1 state="A" extra={
              <PulseCard
                tone="calm"
                mood="thinking"
                label="pulse"
                title="Je was een paar dagen weg. Welkom terug."
                body={<>Er stonden <b style={{ color: t.fg }}>11 taken</b> gepland voor donderdag t/m maandag. Wat wil je ermee?</>}
                footer="Geen haast — de dag van vandaag staat stil tot je kiest."
              >
                <AbsenceChoices />
              </PulseCard>
            } />
          </main>
        </StapelShell>
      </SceneFrame>

      {/* STATE B — Herplanned gekozen */}
      <SceneFrame num="1B" title="Na ‘Herplannen naar deze week’" context="3 gemiste taken verdeeld, lage intensiteit" height={760}>
        <StapelShell title="Plannen" subtitle="Dinsdag 22 okt · 16:05" height={760}>
          <main style={{ flex: 1, overflow: 'auto', padding: '18px 24px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
            <StapelBodyM1 state="B" extra={
              <PulseCard
                tone="calm"
                mood="encouraging"
                label="Pulse · herpland"
                title="Oké. Drie dingen opgepakt over deze week."
                body="Vier taken waren verlopen — die heb ik gearchiveerd. De rest is licht verdeeld t/m zondag. Niks vandaag — morgen één."
                footer="Wijzig of pas aan via ‘Opgepakt over 3 dagen’ hieronder."
              />
            } />
          </main>
        </StapelShell>
      </SceneFrame>
    </div>
  );
}

/* ═════════════════════════════════════════════════════════
   Moment 2 — Ochtend-notificatie, 3 varianten
   Mobiel lock-screens + desktop opener na tap
   ═════════════════════════════════════════════════════════ */

function Moment2() {
  const t = TK;

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
      {/* ROW 1: drie phones */}
      <div style={{
        background: t.bg, border: `1px solid ${t.border}`, borderRadius: 14,
        padding: '24px 20px', boxShadow: '0 22px 60px rgba(0,0,0,0.38)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <div style={{ background: 'rgba(0,180,216,0.16)', color: '#38BDF8', padding: '5px 11px', borderRadius: 8, fontFamily: 'Fredoka One', fontSize: 14 }}>2 · PUSH</div>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 20, color: t.fg, letterSpacing: '-0.01em' }}>Lock-screen · 07:30</div>
          <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, fontStyle: 'italic' }}>Dezelfde 07:30-push — drie verschillende dagen.</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, justifyItems: 'center' }}>
          {/* A — Rustige dag */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <StateHeader letter="A" title="Rustige dag" subtitle="3 taken · 1 deadline &gt; 5d" color="#86EFAC" />
            <PhoneFrame
              time="07:30"
              date="dinsdag 22 oktober"
              notification={{
                app: 'SnapSnel',
                title: 'Goedemorgen.',
                body: 'Drie dingen voor vandaag. Geen druk — gewoon even kijken.',
              }}
            />
          </div>

          {/* B — Drukke dag */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <StateHeader letter="B" title="Drukke dag" subtitle="6 taken · 2 deadlines &lt; 3d" color="#FDE68A" />
            <PhoneFrame
              time="07:30"
              date="woensdag 6 november"
              wallpaper="morning"
              notification={{
                app: 'SnapSnel',
                title: 'Goedemorgen.',
                body: 'Vandaag loopt strak — ik heb het klein gemaakt. Open je Stapel als je zover bent.',
              }}
            />
          </div>

          {/* C — Stille ochtend */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
            <StateHeader letter="C" title="Stille ochtend" subtitle="instellingen · geen push-tekst" color="#CBD5E1" />
            <PhoneFrame
              time="07:30"
              date="donderdag 7 november"
              wallpaper="quiet"
              notification={{
                app: 'SnapSnel',
                silent: true,
                badge: 3,
              }}
            />
          </div>
        </div>

        {/* Onder-regels: wat gebeurt NA de tap */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28, marginTop: 20, paddingTop: 18, borderTop: `1px dashed ${t.border}` }}>
          <AfterTapNote
            letter="A" color="#86EFAC"
            label="na tap"
            title="Stapel opent direct"
            body="Geen ritueel-scherm. Rustige dag = niks vragen. Pulse zegt goedemorgen zodra je binnen bent, daarna stil tot je iets doet."
          />
          <AfterTapNote
            letter="B" color="#FDE68A"
            label="na tap"
            title="Vandaag-compact opent"
            body="Niet de volle Stapel — alleen vanochtend + schooldag + vanavond (stress-test Scene 3). Pulse: ‘Begin met Wiskunde — 15 min, net voor je de deur uit moet.’"
          />
          <AfterTapNote
            letter="C" color="#CBD5E1"
            label="na tap"
            title="Kort rituaal — één regel"
            body="‘Je had er drie vandaag. Kijk eerst, doe later.’ Pulse mascot aanwezig, niets interactief. Sanne ziet de Stapel na een tap. Stille ochtend = stil, ook bij openen."
          />
        </div>
      </div>
    </div>
  );
}

function AfterTapNote({ letter, color, label, title, body }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <div style={{
        width: 28, height: 28, flexShrink: 0, borderRadius: 8,
        background: `color-mix(in srgb, ${color} 22%, transparent)`,
        color, display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'Fredoka One', fontSize: 13,
      }}>{letter}</div>
      <div>
        <div style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 3 }}>{label}</div>
        <div style={{ fontFamily: 'Nunito', fontSize: 13, fontWeight: 800, color: t.fg, marginBottom: 4 }}>{title}</div>
        <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.5 }}>{body}</div>
      </div>
    </div>
  );
}

window.Moment1 = Moment1;
window.Moment2 = Moment2;