/* States frames — 7 frames, dark + light per row. */

/* ─── Shared frame wrapper ─── */
function StatesRow({ label, dark, light }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 0 }}>
      <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>
  );
}

const SUBT_DI = 'Dinsdag 22 april · 14:03';
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' },
];

/* ═════════════════════════════════════════════════════════
   FRAME 1 — LOADING SKELETON · STAPEL
   ═════════════════════════════════════════════════════════ */
function F1_LoadingStapel({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      {/* Topbar with skeleton subtitle */}
      <header style={{
        background: t.topbar, borderBottom: `1px solid ${t.border}`,
        padding: '8px 16px 10px', display: 'flex', alignItems: 'center',
        gap: 10, flexShrink: 0, minHeight: 56, boxSizing: 'border-box',
      }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontFamily: 'Fredoka One', fontSize: 20, color: t.fg,
            letterSpacing: '-0.01em', lineHeight: 1.15,
          }}>Plannen</div>
          <Skel t={t} w={140} h={12} style={{ marginTop: 4 }} />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <SnapsPillSm t={t} count={240} />
          <StreakPillSm t={t} count={5} />
          <button style={{
            width: 32, height: 32, borderRadius: 9, background: 'transparent',
            border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><MI name="bell" size={18} color={t.fgDim} /></button>
        </div>
      </header>

      <SkelMiniWeekStrip t={t} headerLabel="Week 17" />
      <SkelSegmented t={t} active={0} />

      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: t.bgApp }}>
        <div style={{ padding: '14px 14px 90px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Skel t={t} w={180} h={12} />
          <SkelTaskCard t={t} />
          <SkelTaskCard t={t} />
          <SkelTaskCard t={t} />
          <SkelTaskCard t={t} />
        </div>
        <PulseToast t={t} body="Je planning wordt geladen…" />
      </div>

      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 2 — LOADING SKELETON · WEEK-VIEW
   ═════════════════════════════════════════════════════════ */
function F2_LoadingWeek({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <header style={{
        background: t.topbar, borderBottom: `1px solid ${t.border}`,
        padding: '8px 16px 10px', display: 'flex', alignItems: 'center',
        gap: 10, flexShrink: 0, minHeight: 56, boxSizing: 'border-box',
      }}>
        <div style={{ flex: 1 }}>
          <div style={{
            fontFamily: 'Fredoka One', fontSize: 20, color: t.fg,
            letterSpacing: '-0.01em', lineHeight: 1.15,
          }}>Week 17</div>
          <Skel t={t} w={200} h={12} style={{ marginTop: 4 }} />
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          <SnapsPillSm t={t} count={240} />
          <StreakPillSm t={t} count={5} />
          <button style={{
            width: 32, height: 32, borderRadius: 9, background: 'transparent',
            border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><MI name="bell" size={18} color={t.fgDim} /></button>
        </div>
      </header>

      {/* week-view toolbar (back + segmented + plus) — normal */}
      <div style={{
        height: 56, padding: '0 12px', background: t.card,
        borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
      }}>
        <button style={{
          width: 32, height: 32, borderRadius: 8, background: 'transparent',
          border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><MI name="chevron-left" size={22} color={t.fgDim} strokeWidth={2.4} /></button>
        <div style={{
          height: 36, padding: 4, borderRadius: 999,
          background: t.cardSunken, border: `1px solid ${t.border}`,
          display: 'inline-flex', gap: 2,
        }}>
          <div style={{
            height: 28, padding: '0 14px', borderRadius: 999,
            background: t.card, boxShadow: t.shadowCard,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: t.fg, fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, letterSpacing: 0.2,
          }}>Week</div>
          <div style={{
            height: 28, padding: '0 14px', borderRadius: 999,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            color: t.fgDim, fontFamily: 'Nunito', fontWeight: 600, fontSize: 12, letterSpacing: 0.2,
          }}>Maand</div>
        </div>
        <div style={{ flex: 1 }} />
        <button style={{
          width: 32, height: 32, borderRadius: 8,
          background: t.primaryDim, border: `1px solid ${hexToRgba(t.primary, 0.30)}`,
          color: t.primary,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}><MI name="plus" size={20} color={t.primary} strokeWidth={2.6} /></button>
      </div>

      {/* Day-strip — all skeleton */}
      <div style={{
        background: t.card, borderBottom: `1px solid ${t.border}`,
        padding: '10px 12px 12px', flexShrink: 0,
        display: 'flex', gap: 4,
      }}>
        {['MA','DI','WO','DO','VR','ZA','ZO'].map((d, i) => (
          <div key={i} style={{
            flex: 1, minHeight: 60, borderRadius: 10,
            background: t.cardSunken, border: `1px solid ${t.border}`,
            padding: '6px 4px', display: 'flex', flexDirection: 'column',
            alignItems: 'center', gap: 4,
          }}>
            <span style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 9.5,
              color: t.fgDim, letterSpacing: 0.6,
            }}>{d}</span>
            <Skel t={t} w={18} h={16} />
            <div style={{ display: 'flex', gap: 2, marginTop: 3 }}>
              {[0,1,2].map(k => (
                <span key={k} style={{
                  width: 4, height: 4, borderRadius: 999,
                  background: t.mode === 'dark' ? 'rgba(255,255,255,0.12)' : 'rgba(15,23,42,0.12)',
                  animation: 'statesPulse 1.6s ease-in-out infinite',
                  animationDelay: `${k * 0.15}s`,
                }} />
              ))}
            </div>
          </div>
        ))}
      </div>

      <div style={{ flex: 1, overflow: 'hidden', background: t.bgApp }}>
        <div style={{ padding: '14px 14px 90px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          <Skel t={t} w={220} h={14} />
          <SkelDeadlineCard t={t} />
          <SkelTaskBlock t={t} />
          <SkelTaskBlock t={t} />
          <SkelTaskBlock t={t} />
        </div>
      </div>

      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 3 — LOADING SKELETON · MAAND-VIEW
   ═════════════════════════════════════════════════════════ */
function F3_LoadingMaand({ 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" />
      <div style={{
        flex: 1, overflow: 'hidden',
        padding: '12px 8px 90px',
        display: 'flex', flexDirection: 'column', gap: 12,
        background: t.bgApp,
      }}>
        {/* maand-info skeleton banner */}
        <div style={{
          height: 60, borderRadius: 12,
          background: t.mode === 'dark' ? 'rgba(255,255,255,0.05)' : 'rgba(15,23,42,0.05)',
          border: `1px solid ${t.border}`,
          animation: 'statesPulse 1.8s ease-in-out infinite',
        }} />
        <SkelMaandGrid t={t} weeks={5} />
      </div>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   Frame helper — full Stapel frame for empty/error states
   ═════════════════════════════════════════════════════════ */
function StapelShell({ t, activeTab = 0, counts = [3,2,5], subtitle = SUBT_DI,
                       weekProps, children, fab = true, topBar = null, bellAlert = true }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MobileTopbar t={t} title="Plannen" subtitle={subtitle} bellAlert={bellAlert} />
      {topBar}
      <MiniWeekStrip t={t} {...(weekProps || {})} />
      <SegmentedSwitcher t={t} active={activeTab} counts={counts} />
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: t.bgApp }}>
        <div style={{ padding: '14px 14px 90px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {children}
        </div>
        {fab && (
          <div style={{ position: 'absolute', right: 18, bottom: 18, zIndex: 3 }}>
            <Fab t={t} />
          </div>
        )}
      </div>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 4 — EMPTY · VANDAAG LEEG (heeft wel deadlines)
   ═════════════════════════════════════════════════════════ */
function F4_VandaagLeeg({ t }) {
  return (
    <StapelShell t={t} activeTab={0} counts={[0, 2, 5]}
      weekProps={{ loads: [0, 0, 1, 0, 2, 0, 0], summary: '0 vandaag · 2 morgen' }}>
      <EmptyCard t={t} icon="check-circle-2" iconColor={t.green}
        title="Niets ingepland voor vandaag"
        body="Geen taken of toetsen — relax of start nu alvast met morgen."
        ctas={<div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%', maxWidth: 280 }}>
          <Btn t={t} variant="primary" size="sm" icon="arrow-right" full>Begin alvast met morgen</Btn>
          <Btn t={t} variant="ghost" size="sm" icon="plus" full>Voeg losse taak toe</Btn>
        </div>} />
    </StapelShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 5 — EMPTY · DEADLINES LEEG
   ═════════════════════════════════════════════════════════ */
function F5_DeadlinesLeeg({ t }) {
  return (
    <StapelShell t={t} activeTab={2} counts={[3, 2, 0]}
      weekProps={{ loads: [1, 3, 1, 0, 2, 0, 0], summary: 'Geen deadlines' }}>
      <EmptyCard t={t} icon="calendar-plus" iconColor={t.primary}
        title="Geen deadlines"
        body="Voeg je eerste toets of inlever-werk toe — Pulse helpt je inplannen."
        ctas={<div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%', maxWidth: 280 }}>
          <Btn t={t} variant="primary" size="sm" icon="plus" full>Eerste deadline</Btn>
          <Btn t={t} variant="ghost" size="sm" icon="link" full>Schoolsysteem koppelen</Btn>
        </div>} />
    </StapelShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 6 — ERROR · GEEN INTERNET
   ═════════════════════════════════════════════════════════ */
function F6_GeenInternet({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MobileTopbar t={t} title="Plannen" subtitle={SUBT_DI} bellAlert />
      <OfflineBar t={t} />
      <MiniWeekStrip t={t} loads={[1, 3, 1, 0, 2, 0, 0]} summary="Bio-toets vrij" />
      <SegmentedSwitcher t={t} active={0} counts={[3, 2, 5]} />
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: t.bgApp }}>
        <div style={{ padding: '14px 14px 90px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <OfflineCard t={t} />
          <Overline t={t}>Vandaag · 3 taken · ~50 min</Overline>
          <div style={{ opacity: 0.55, pointerEvents: 'none' }}>
            {TASKS_TODAY.map((task, i) => <TaskCard key={i} t={t} {...task} />)}
          </div>
        </div>
      </div>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 7 — ERROR · OPSLAAN MISLUKT
   ═════════════════════════════════════════════════════════ */
function F7_OpslaanMislukt({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <MobileTopbar t={t} title="Plannen" subtitle={SUBT_DI} bellAlert />
      <SaveErrorBanner t={t} />
      <MiniWeekStrip t={t} loads={[1, 3, 1, 0, 2, 0, 0]} summary="Bio-toets vrij" />
      <SegmentedSwitcher t={t} active={0} counts={[3, 2, 5]} />
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: t.bgApp }}>
        <div style={{ padding: '14px 14px 90px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Overline t={t}>Vandaag · 3 taken · ~50 min</Overline>
          {TASKS_TODAY.map((task, i) => <TaskCard key={i} t={t} {...task} />)}
        </div>
        <div style={{ position: 'absolute', right: 18, bottom: 18, zIndex: 3 }}>
          <Fab t={t} />
        </div>
      </div>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─── Page ─── */
function StatesPage() {
  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 · Cross-cutting states</div>
        <h1 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 36, color: '#0F172A',
          letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>Loading · Empty · Error · 7 frames</h1>
        <p style={{
          margin: '8px 0 0', fontSize: 13, color: '#475569',
          fontWeight: 500, lineHeight: 1.5, maxWidth: 720,
        }}>Skeletons pulsen 1.6s ease-in-out met shimmer-gradient. Empty-states gebruiken EmptyCard met dashed border + 2 CTAs. Offline-bar warn, opslaan-mislukt destructive met retry-knop.</p>
      </header>

      <StatesRow label="Frame 1 · Loading · Stapel · 4 skeleton-cards + Pulse-toast"
        dark={<F1_LoadingStapel t={TK_DARK} />}
        light={<F1_LoadingStapel t={TK_LIGHT} />} />

      <StatesRow label="Frame 2 · Loading · Week-view · day-strip + deadline + 3 task-blocks skeleton"
        dark={<F2_LoadingWeek t={TK_DARK} />}
        light={<F2_LoadingWeek t={TK_LIGHT} />} />

      <StatesRow label="Frame 3 · Loading · Maand-view · 5 weken × 7 dagen skeleton-cellen"
        dark={<F3_LoadingMaand t={TK_DARK} />}
        light={<F3_LoadingMaand t={TK_LIGHT} />} />

      <StatesRow label="Frame 4 · Empty · Vandaag leeg · check-circle + 2 CTAs (Morgen · 2, Deadlines · 5 wel data)"
        dark={<F4_VandaagLeeg t={TK_DARK} />}
        light={<F4_VandaagLeeg t={TK_LIGHT} />} />

      <StatesRow label="Frame 5 · Empty · Deadlines leeg · calendar-plus + 2 CTAs"
        dark={<F5_DeadlinesLeeg t={TK_DARK} />}
        light={<F5_DeadlinesLeeg t={TK_LIGHT} />} />

      <StatesRow label="Frame 6 · Error · Geen internet · sticky warn-bar + offline-card + tasks gedimd"
        dark={<F6_GeenInternet t={TK_DARK} />}
        light={<F6_GeenInternet t={TK_LIGHT} />} />

      <StatesRow label="Frame 7 · Error · Opslaan mislukt · destructive banner + retry, inputs editable"
        dark={<F7_OpslaanMislukt t={TK_DARK} />}
        light={<F7_OpslaanMislukt t={TK_LIGHT} />} />
    </div>
  );
}

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