/* Stapel-mobile frames — 7 phone pairs (dark + light each row).
   Builds on foundation-shared + stapel-components. */

const SUBT = 'Dinsdag 22 april · 14:03';

/* ─── Frame wrapper: dark+light side-by-side row ─── */
function FrameRow({ label, render }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 56 }}>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 11,
        color: '#64748B', letterSpacing: 1.2, textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
        {render(TK_DARK)}
        {render(TK_LIGHT)}
      </div>
    </div>
  );
}

/* ─── Shared task data ─── */
const TASKS_TODAY = [
  { subject: 'biologie', duration: '15 min', title: 'Celbiologie — flashcards ronde 2', source: 'Bio · H4', isNow: true },
  { subject: 'wiskunde', duration: '20 min', title: 'Statistiek — 3 oefenopgaves',      source: 'Wisk · H7' },
  { subject: 'engels',   duration: '15 min', title: 'Essay-paragraaf 2 schrijven',      source: 'Engels · week 42' },
];

const TASKS_MORGEN = [
  { subject: 'scheikunde', duration: '20 min', title: '§ 4.2 samenvatting lezen',  source: 'Schk · H4' },
  { subject: 'frans',      duration: '15 min', title: 'Woordenschat H6 overhoren', source: 'Frans · H6' },
];

const DEADLINES = [
  { kind: 'toets',        subject: 'biologie',     title: 'Bio H4 celbiologie',         date: 'VR 25 APR', days: 3,  progress: 60 },
  { kind: 'so',           subject: 'wiskunde',     title: 'Statistiek SO §7.3',         date: 'MA 28 APR', days: 6,  progress: 30 },
  { kind: 'inlev',        subject: 'engels',       title: 'Essay paragraaf 3',          date: 'WO 30 APR', days: 8,  progress: 10 },
  { kind: 'toets',        subject: 'scheikunde',   title: 'Schk H4 zuren en basen',     date: 'DO 1 MEI',  days: 9,  progress: 0 },
  { kind: 'inlev',        subject: 'geschiedenis', title: 'Werkstuk WOII',              date: 'VR 9 MEI',  days: 17, progress: 5 },
];

const UNSCHEDULED = [
  { subject: 'biologie', title: 'Bio-toets H4 — celbiologie', dueIn: 'Over 3D', src: 'geïmporteerd' },
  { subject: 'wiskunde', title: 'Wisk SO §7.3',               dueIn: 'Over 5D', src: 'geïmporteerd' },
  { subject: 'engels',   title: 'Essay deadline',             dueIn: 'Over 8D', src: 'geïmporteerd' },
];

/* ═══════════════ Shell helper — full frame ═══════════════ */
function Frame({ t, activeTab = 0, counts = [3, 2, 5], children, fab = true, subtitle = SUBT, weekProps, sticky, sLabel }) {
  return (
    <PhoneShell t={t} label={sLabel} style={{ background: t.bgApp }}>
      <div style={{ background: t.topbar }}>
        <StatusBar t={t} />
      </div>
      <MobileTopbar t={t} title="Plannen" subtitle={subtitle} bellAlert />
      <MiniWeekStrip t={t} {...(weekProps || {})} />
      <SegmentedSwitcher t={t} active={activeTab} counts={counts} />
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: t.bgApp }}>
        <div style={{
          position: 'absolute', inset: 0, overflow: 'auto',
          padding: '8px 14px 96px', display: 'flex', flexDirection: 'column', gap: 11,
        }}>
          {children}
        </div>
        {fab && (
          <div style={{ position: 'absolute', right: 18, bottom: 18, zIndex: 3 }}>
            <Fab t={t} />
          </div>
        )}
        {sticky}
      </div>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ═══════════════ FRAME 1 — Vandaag · normaal ═══════════════ */
function F1_VandaagNormaal({ t }) {
  return (
    <Frame t={t} sLabel={t.mode} weekProps={{ summary: 'Bio-toets vrij' }}>
      <PulseCard t={t}
        label="Pulse · Goedemiddag"
        mood="thinking"
        body="Rustige middag vandaag. Drie taken, ruim binnen je studie-venster. Bio is de eerste — dichtstbijzijnde toets." />
      <Overline t={t}>Vandaag · 3 taken · ~50 min</Overline>
      {TASKS_TODAY.map((task, i) => <TaskCard key={i} t={t} {...task} />)}
      <PulseTip t={t} body="Bio staat dichtst bij — begin daar. Wiskunde kan ook na je pauze, is minder verwarrend als je nu fris bent." />
      <GeenZinLink t={t} />
    </Frame>
  );
}

/* ═══════════════ FRAME 2 — Vandaag · met Herstel-bak ═══════════════ */
function F2_VandaagHerstel({ t }) {
  return (
    <Frame t={t} sLabel={t.mode} weekProps={{ summary: 'Bio-toets vrij' }}>
      <HerstelBak t={t} count={4} />
      <PulseCard t={t}
        label="Pulse · Goedemiddag"
        mood="thinking"
        body="Rustige middag vandaag. Drie taken, ruim binnen je studie-venster. Bio is de eerste — dichtstbijzijnde toets." />
      <Overline t={t}>Vandaag · 3 taken · ~50 min</Overline>
      {TASKS_TODAY.map((task, i) => <TaskCard key={i} t={t} {...task} />)}
      <PulseTip t={t} body="Bio staat dichtst bij — begin daar. Wiskunde kan ook na je pauze, is minder verwarrend als je nu fris bent." />
      <GeenZinLink t={t} />
    </Frame>
  );
}

/* ═══════════════ FRAME 3 — Morgen tab ═══════════════ */
function F3_Morgen({ t }) {
  return (
    <Frame t={t} activeTab={1} fab={false} sLabel={t.mode} weekProps={{ summary: 'Bio-toets vrij' }}>
      <DayHeader t={t} day="Woensdag 23 april" summary="2 taken · ~35 min" />
      {TASKS_MORGEN.map((task, i) => <TaskCard key={i} t={t} {...task} compact />)}
      <div style={{ marginTop: 6 }}>
        <InlineAddTask t={t} label="+ Taak voor morgen" />
      </div>
    </Frame>
  );
}

/* ═══════════════ FRAME 4 — Deadlines tab ═══════════════ */
function F4_Deadlines({ t }) {
  return (
    <Frame t={t} activeTab={2} sLabel={t.mode} weekProps={{ summary: 'Bio-toets vrij' }}>
      <TePlannenBak t={t} items={UNSCHEDULED} />
      <Overline t={t}>Gepland · 5 deadlines</Overline>
      {DEADLINES.map((d, i) => <DeadlineCard key={i} t={t} {...d} />)}
    </Frame>
  );
}

/* ═══════════════ FRAME 5 — Zachte dagmodus ═══════════════ */
function F5_ZinModus({ t }) {
  return (
    <Frame t={t} sLabel={t.mode} weekProps={{ summary: 'Bio-toets vrij' }} fab={false}
      sticky={
        <StickyCTA t={t}>
          <Btn t={t} variant="secondary" size="md">Terug</Btn>
          <div style={{ flex: 2 }}>
            <Btn t={t} variant="primary" size="md" full>Accepteer zachte dag</Btn>
          </div>
        </StickyCTA>
      }>
      <ZachteModusCard t={t} />
      <Overline t={t}>Vandaag · één ding</Overline>
      <TaskCard t={t}
        subject="engels" duration="15 min"
        title="Essay-paragraaf 2 schrijven"
        source="Engels · week 42" />
      <FooterCard t={t}>De andere 2 taken worden herpland naar later.</FooterCard>
    </Frame>
  );
}

/* ═══════════════ FRAME 6 — Alles klaar · celebration ═══════════════ */
function F6_AllesKlaar({ t }) {
  const done = TASKS_TODAY.map(x => ({ ...x, isNow: false, done: true }));
  return (
    <Frame t={t} sLabel={t.mode} fab={false}
      subtitle="Dinsdag 22 april · alles van vandaag is klaar"
      weekProps={{ loads: [2, 0, 1, 0, 2, 0, 0], summary: 'Bio-toets vrij' }}>
      <CelebrationBanner t={t} />
      <Overline t={t} color={t.green}>Vandaag · klaar</Overline>
      {done.map((task, i) => <TaskCard key={i} t={t} {...task} />)}
    </Frame>
  );
}

/* ═══════════════ FRAME 7 — Nieuwe gebruiker ═══════════════ */
function F7_Welkom({ t }) {
  return (
    <Frame t={t} sLabel={t.mode}
      subtitle="Dinsdag 22 april · welkom"
      counts={[0, 0, 0]} fab={false}
      weekProps={{ loads: [0, 0, 0, 0, 0, 0, 0], allEmpty: true }}>
      <WelkomBanner t={t} />
      <EmptyCard t={t}
        icon="sun" iconColor={t.primary}
        title="Hier zie je je dag"
        body="Voeg een taak toe of koppel je schoolsysteem."
        ctas={
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: '100%' }}>
            <Btn t={t} variant="primary" size="sm" icon="plus" full>Nieuwe taak</Btn>
            <Btn t={t} variant="secondary" size="sm" icon="plus" full>Nieuwe deadline</Btn>
          </div>
        } />
    </Frame>
  );
}

/* ═══════════════ App ═══════════════ */
function StapelApp() {
  return (
    <div style={{
      padding: 32, background: '#F1F5F9', minHeight: '100vh',
      fontFamily: 'Nunito',
    }}>
      <header style={{ marginBottom: 32 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 11,
          color: '#64748B', letterSpacing: 1.2, textTransform: 'uppercase',
          marginBottom: 6,
        }}>Plannen Mobile · 02 Stapel</div>
        <h1 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 36, color: '#0F172A',
          letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>Vandaag-home — alle states</h1>
        <p style={{
          margin: '10px 0 0', fontSize: 14, color: '#475569', fontWeight: 500,
          lineHeight: 1.55, maxWidth: 760,
        }}>7 frames van het Stapel-scherm in dark + light. Verticale stack
          met mini-week-strip + segmented [Vandaag · Morgen · Deadlines].
          Plannen-tab actief in alle frames. FAB op Vandaag + Deadlines;
          op Morgen is + Taak inline. Tone "Rustig" — kort, feitelijk, geen druk.</p>
      </header>
      <FrameRow label="Frame 1 · Vandaag · normaal"           render={(t) => <F1_VandaagNormaal t={t} />} />
      <FrameRow label="Frame 2 · Vandaag · Herstel-bak boven" render={(t) => <F2_VandaagHerstel  t={t} />} />
      <FrameRow label="Frame 3 · Morgen-tab · compact"        render={(t) => <F3_Morgen           t={t} />} />
      <FrameRow label="Frame 4 · Deadlines · Te-plannen open" render={(t) => <F4_Deadlines        t={t} />} />
      <FrameRow label="Frame 5 · Vandaag · zachte dagmodus"   render={(t) => <F5_ZinModus         t={t} />} />
      <FrameRow label="Frame 6 · Vandaag · alles klaar"       render={(t) => <F6_AllesKlaar       t={t} />} />
      <FrameRow label="Frame 7 · Vandaag · nieuwe gebruiker"  render={(t) => <F7_Welkom           t={t} />} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<StapelApp />);