/* Maand-view + Day-sheet frames — 7 frames, dark + light per row. */

/* ─── Month data sets ─── */
const APRIL_2026 = (todayIdx = null) => [
  // Week 1 — 31 mar (overflow) + 1-6 apr
  [
    { date: 31, overflow: true, load: 0 },
    { date: 1,  load: 0 },
    { date: 2,  load: 0 },
    { date: 3,  load: 1 },
    { date: 4,  load: 0 },
    { date: 5,  load: 0, weekend: true },
    { date: 6,  load: 0, weekend: true },
  ],
  // Week 2 — 7-13 apr
  [
    { date: 7,  load: 1 },
    { date: 8,  load: 2 },
    { date: 9,  load: 1 },
    { date: 10, load: 0, pills: ['scheikunde'] },
    { date: 11, load: 0 },
    { date: 12, load: 0, weekend: true },
    { date: 13, load: 0, weekend: true },
  ],
  // Week 3 — 14-20 apr
  [
    { date: 14, load: 1 },
    { date: 15, load: 1 },
    { date: 16, load: 2 },
    { date: 17, load: 1, pills: ['frans'] },
    { date: 18, load: 2 },
    { date: 19, load: 0, weekend: true },
    { date: 20, load: 0, weekend: true },
  ],
  // Week 4 — 21-27 apr (TODAY = 22)
  [
    { date: 21, load: 1, past: true },
    { date: 22, load: 2, today: true, pills: ['biologie'] },
    { date: 23, load: 1 },
    { date: 24, load: 1, pills: ['biologie'] },
    { date: 25, load: 3, pills: ['biologie'] },
    { date: 26, load: 0, weekend: true },
    { date: 27, load: 0, weekend: true },
  ],
  // Week 5 — 28-30 apr + 1-4 mei (overflow)
  [
    { date: 28, load: 2, pills: ['wiskunde'] },
    { date: 29, load: 1 },
    { date: 30, load: 2, pills: ['engels'] },
    { date: 1, suffix: 'mei', overflow: true, load: 1 },
    { date: 2, suffix: 'mei', overflow: true, load: 2, pills: ['scheikunde'] },
    { date: 3, suffix: 'mei', overflow: true, load: 0, weekend: true },
    { date: 4, suffix: 'mei', overflow: true, load: 0, weekend: true },
  ],
  // Week 6 — 5-11 mei (overflow vakantie)
  [
    { date: 5,  suffix: 'mei', overflow: true, vakantie: true },
    { date: 6,  suffix: 'mei', overflow: true, vakantie: true },
    { date: 7,  suffix: 'mei', overflow: true, vakantie: true },
    { date: 8,  suffix: 'mei', overflow: true, vakantie: true },
    { date: 9,  suffix: 'mei', overflow: true, vakantie: true },
    { date: 10, suffix: 'mei', overflow: true, vakantie: true, weekend: true },
    { date: 11, suffix: 'mei', overflow: true, vakantie: true, weekend: true },
  ],
];

const MEI_2026 = () => [
  // Week 1 — apr30 (overflow) + 1-4 mei + 5-... no wait, want mei start 5/5
  // Re-aligned: mei begins on... in our mock 5 mei = MA. So:
  // Row 1: 28 apr (MA overflow) - 4 mei (ZO overflow voor zover dat nog april is)
  // Actually: 5 mei = MA, so 4 mei = ZO (overflow april). Let's start on MA = 28 apr.
  [
    { date: 28, suffix: 'apr', overflow: true, load: 2 },
    { date: 29, suffix: 'apr', overflow: true, load: 1 },
    { date: 30, suffix: 'apr', overflow: true, load: 2 },
    { date: 1,  load: 1, past: true },
    { date: 2,  load: 2, past: true, pills: ['scheikunde'] },
    { date: 3,  load: 0, weekend: true, past: true },
    { date: 4,  load: 0, weekend: true, past: true },
  ],
  // Week 2 — 5-11 mei vakantie
  [
    { date: 5,  vakantie: true },
    { date: 6,  vakantie: true },
    { date: 7,  vakantie: true },
    { date: 8,  vakantie: true },
    { date: 9,  vakantie: true },
    { date: 10, vakantie: true, weekend: true },
    { date: 11, vakantie: true, weekend: true },
  ],
  // Week 3 — 12-18 mei (TODAY ergens, kies 13)
  [
    { date: 12, load: 1 },
    { date: 13, load: 3, today: true, pills: ['biologie', 'wiskunde'] },
    { date: 14, load: 2, pills: ['engels'] },
    { date: 15, load: 2, pills: ['geschiedenis', 'economie'] },
    { date: 16, load: 3, pills: ['biologie', 'scheikunde'], extra: 1 },
    { date: 17, load: 0, weekend: true },
    { date: 18, load: 0, weekend: true },
  ],
  // Week 4 — 19-25 mei
  [
    { date: 19, load: 1 },
    { date: 20, load: 2 },
    { date: 21, load: 1, pills: ['frans'] },
    { date: 22, load: 2 },
    { date: 23, load: 1 },
    { date: 24, load: 0, weekend: true },
    { date: 25, load: 0, weekend: true },
  ],
  // Week 5 — 26-31 mei + 1 jun
  [
    { date: 26, load: 2, pills: ['natuurkunde'] },
    { date: 27, load: 1 },
    { date: 28, load: 1 },
    { date: 29, load: 2, pills: ['nederlands'] },
    { date: 30, load: 0, weekend: true },
    { date: 31, load: 0, weekend: true },
    { date: 1,  suffix: 'jun', overflow: true, load: 0 },
  ],
];

const JULI_2026 = () => [
  // Week 1 — 29 jun (overflow) + 1-5 jul
  [
    { date: 29, suffix: 'jun', overflow: true, load: 0 },
    { date: 30, suffix: 'jun', overflow: true, load: 0 },
    { date: 1,  load: 0 },
    { date: 2,  load: 0 },
    { date: 3,  load: 0 },
    { date: 4,  load: 0, weekend: true },
    { date: 5,  load: 0, weekend: true },
  ],
  // Week 2
  [
    { date: 6,  load: 0 },
    { date: 7,  load: 0 },
    { date: 8,  load: 0 },
    { date: 9,  load: 0 },
    { date: 10, load: 0 },
    { date: 11, load: 0, weekend: true },
    { date: 12, load: 0, weekend: true },
  ],
  // Week 3
  [
    { date: 13, load: 0 },
    { date: 14, load: 0 },
    { date: 15, load: 0 },
    { date: 16, load: 0 },
    { date: 17, load: 0 },
    { date: 18, load: 0, weekend: true },
    { date: 19, load: 0, weekend: true },
  ],
  // Week 4
  [
    { date: 20, load: 0 },
    { date: 21, load: 0 },
    { date: 22, load: 0 },
    { date: 23, load: 0 },
    { date: 24, load: 0 },
    { date: 25, load: 0, weekend: true },
    { date: 26, load: 0, weekend: true },
  ],
  // Week 5
  [
    { date: 27, load: 0 },
    { date: 28, load: 0 },
    { date: 29, load: 0 },
    { date: 30, load: 0 },
    { date: 31, load: 0 },
    { date: 1, suffix: 'aug', overflow: true, load: 0, weekend: true },
    { date: 2, suffix: 'aug', overflow: true, load: 0, weekend: true },
  ],
];

/* ─── Frame 1 — April met deadlines ─── */
function Frame1_AprilDeadlines({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MaandTopbar t={t} title="April" subtitle="Vooruitblik · 4 weken" />
      <MaandToolbar t={t} view="maand" />
      <MaandNav t={t} label="April 2026" showVandaag={false} />
      <MaandBody>
        <MaandInfoBanner t={t} />
        <MaandGrid t={t} weeks={APRIL_2026()} />
        <MaandLegend t={t} />
      </MaandBody>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─── Frame 2 — Mei met vakantie ─── */
function Frame2_MeiVakantie({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MaandTopbar t={t} title="Mei" subtitle="Vooruitblik · 4 weken" />
      <MaandToolbar t={t} view="maand" />
      <MaandNav t={t} label="Mei 2026" showVandaag={true} />
      <MaandBody>
        <MaandGrid t={t} weeks={MEI_2026()} />
        <MaandVakantieFooter t={t} range="5–11 mei" label="meivakantie" />
        <MaandLegend t={t} />
      </MaandBody>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─── Frame 3 — Juli leeg ─── */
function Frame3_JuliLeeg({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MaandTopbar t={t} title="Juli" subtitle="Vooruitblik · 4 weken" />
      <MaandToolbar t={t} view="maand" />
      <MaandNav t={t} label="Juli 2026" showVandaag={true} />
      <MaandBody>
        <EmptyCard t={t} icon="calendar-x" iconColor={t.fgMute}
          title="Geen deadlines deze maand"
          body="Niets gepland of geïmporteerd. Voeg een deadline toe of koppel je schoolsysteem."
          ctas={<>
            <Btn t={t} variant="primary" size="sm" icon="plus">Deadline</Btn>
            <Btn t={t} variant="ghost" size="sm">Schoolsysteem koppelen</Btn>
          </>} />
        <MaandGrid t={t} weeks={JULI_2026()} dim />
      </MaandBody>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─── Frame 4 — Day-sheet medium over today (22 apr) ─── */
function Frame4_DaySheetMedium({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MaandTopbar t={t} title="April" subtitle="Vooruitblik · 4 weken" />
      <MaandToolbar t={t} view="maand" />
      <MaandNav t={t} label="April 2026" />
      <MaandBody>
        <MaandGrid t={t} weeks={APRIL_2026()} />
        <MaandLegend t={t} />
      </MaandBody>
      <MobileBottomNav t={t} active="plannen" />
      <DaySheetVandaagMedium t={t} />
    </PhoneShell>
  );
}

/* ─── Frame 5 — Day-sheet full expand ─── */
function Frame5_DaySheetFull({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MaandTopbar t={t} title="April" subtitle="Vooruitblik · 4 weken" />
      <MaandToolbar t={t} view="maand" />
      <MaandNav t={t} label="April 2026" />
      <MaandBody>
        <MaandGrid t={t} weeks={APRIL_2026()} />
      </MaandBody>
      <MobileBottomNav t={t} active="plannen" />
      <DaySheetVandaagFull t={t} />
    </PhoneShell>
  );
}

/* ─── Frame 6 — Day-sheet vakantie (7 mei) ─── */
function Frame6_DaySheetVakantie({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MaandTopbar t={t} title="Mei" subtitle="Vooruitblik · 4 weken" />
      <MaandToolbar t={t} view="maand" />
      <MaandNav t={t} label="Mei 2026" showVandaag={true} />
      <MaandBody>
        <MaandGrid t={t} weeks={MEI_2026()} />
        <MaandVakantieFooter t={t} />
      </MaandBody>
      <MobileBottomNav t={t} active="plannen" />
      <DaySheetVakantie t={t} />
    </PhoneShell>
  );
}

/* ─── Frame 7 — Day-sheet past (21 apr · gisteren) ─── */
function Frame7_DaySheetPast({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MaandTopbar t={t} title="April" subtitle="Vooruitblik · 4 weken" />
      <MaandToolbar t={t} view="maand" />
      <MaandNav t={t} label="April 2026" />
      <MaandBody>
        <MaandGrid t={t} weeks={APRIL_2026()} />
        <MaandLegend t={t} />
      </MaandBody>
      <MobileBottomNav t={t} active="plannen" />
      <DaySheetPast t={t} />
    </PhoneShell>
  );
}

/* ─── Row & Page ─── */
function MaandFrameRow({ label, dark, light }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 11,
        color: '#64748B', letterSpacing: 0.7, textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
        {dark}
        {light}
      </div>
    </div>
  );
}

function MaandPage() {
  return (
    <div style={{
      padding: 32, display: 'flex', flexDirection: 'column', gap: 56,
      background: '#F1F5F9', minHeight: '100vh',
    }}>
      <header>
        <div style={{
          fontSize: 11, fontWeight: 800, color: '#64748B',
          letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6,
        }}>Plannen Mobile · Maand &amp; Day-sheet</div>
        <h1 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 36, color: '#0F172A',
          letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>Maand-vooruitblik + day-detail · 7 frames</h1>
        <p style={{
          margin: '8px 0 0', fontSize: 13, color: '#475569',
          fontWeight: 500, lineHeight: 1.5, maxWidth: 720,
        }}>Maand-grid 7×N met intensiteit + max 2 deadline-pills per cel. Tap-dag opent day-sheet (medium → full expandable). 7 frames in dark + light, inclusief vakantie- en past-states.</p>
      </header>

      <MaandFrameRow label="Frame 1 · April 2026 · default · deadlines + mei-overflow vakantie"
        dark={<Frame1_AprilDeadlines t={TK_DARK} />}
        light={<Frame1_AprilDeadlines t={TK_LIGHT} />} />

      <MaandFrameRow label="Frame 2 · Mei 2026 · vakantie-week + meerdere deadlines + +1 indicator"
        dark={<Frame2_MeiVakantie t={TK_DARK} />}
        light={<Frame2_MeiVakantie t={TK_LIGHT} />} />

      <MaandFrameRow label="Frame 3 · Juli 2026 · leeg · EmptyCard"
        dark={<Frame3_JuliLeeg t={TK_DARK} />}
        light={<Frame3_JuliLeeg t={TK_LIGHT} />} />

      <MaandFrameRow label="Frame 4 · Day-sheet medium · 22 apr vandaag · 3 tasks + bio-deadline"
        dark={<Frame4_DaySheetMedium t={TK_DARK} />}
        light={<Frame4_DaySheetMedium t={TK_LIGHT} />} />

      <MaandFrameRow label="Frame 5 · Day-sheet full · niet-beschikbaar + past comparison"
        dark={<Frame5_DaySheetFull t={TK_DARK} />}
        light={<Frame5_DaySheetFull t={TK_LIGHT} />} />

      <MaandFrameRow label="Frame 6 · Day-sheet vakantie · 7 mei · sun-banner + empty"
        dark={<Frame6_DaySheetVakantie t={TK_DARK} />}
        light={<Frame6_DaySheetVakantie t={TK_LIGHT} />} />

      <MaandFrameRow label="Frame 7 · Day-sheet past · 21 apr gisteren · gedimd + gemiste taak + herstel-link"
        dark={<Frame7_DaySheetPast t={TK_DARK} />}
        light={<Frame7_DaySheetPast t={TK_LIGHT} />} />
    </div>
  );
}

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