/* Deadline-detail frames — 5 frames × dark/light.
   Background: dimmed Stapel (Vandaag) with backdrop. Sheets/dialogs over. */

function DDRow({ 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>
  );
}

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' },
];

/* ─── Dimmed Stapel — background for every frame ─── */
function DimmedStapelBg({ t, dim = true }) {
  return (
    <>
      <MobileTopbar t={t} title="Plannen" subtitle="Dinsdag 22 april · 14:03" bellAlert />
      <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>
        {dim && <SheetBackdrop t={t} />}
      </div>
    </>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 1 — DETAIL MEDIUM (op schema)
   ═════════════════════════════════════════════════════════ */
function F1_DetailMedium({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg t={t} />
      <MobileBottomNav t={t} active="plannen" />
      <BottomSheet t={t} height="medium">
        <DetailHeader t={t}
          subject="biologie"
          title="Bio-toets H4 — celbiologie"
          dateLabel="zaterdag 25 april"
          urgency={{ kind: 'safe', label: 'OVER 3 DAGEN' }} />
        <DetailBody>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <SectionOverline t={t}>Voortgang · 90 van 180 min</SectionOverline>
            <StackedBar t={t} segments={[
              { kind: 'done',    pct: 50, label: 'Gedaan · 90m' },
              { kind: 'planned', pct: 35, label: 'Ingepland · 63m' },
              { kind: 'todo',    pct: 15, label: 'Nog plannen · 27m' },
            ]} />
            <StatusBanner t={t} kind="success"
              headline="Je ligt op schema."
              body="Nog 27 min in te plannen. Je hebt tot zaterdag 80 min vrij — past ruim." />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <SectionOverline t={t}>Toets-ladder · 3 van 6 stappen</SectionOverline>
            <LadderStep t={t} status="done" title="Blok 1 · Lees § 4.1–4.2" meta="Gedaan · 22 apr · 30m" />
            <LadderStep t={t} status="done" title="Flashcards ronde 1" meta="Gedaan · 22 apr · 25m" />
            <LadderStep t={t} status="now" title="Flashcards ronde 2" meta="Vandaag 15:30 · 15m" />
            <ExpandLink t={t}>Toon alle 6 stappen</ExpandLink>
          </div>
        </DetailBody>
        <DetailFooter t={t} />
      </BottomSheet>
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 2 — DETAIL FULL
   ═════════════════════════════════════════════════════════ */
function F2_DetailFull({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg t={t} />
      <MobileBottomNav t={t} active="plannen" />
      <BottomSheet t={t} height="full">
        <DetailHeader t={t}
          subject="biologie"
          title="Bio-toets H4 — celbiologie"
          dateLabel="zaterdag 25 april"
          urgency={{ kind: 'safe', label: 'OVER 3 DAGEN' }} />
        <DetailBody>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <SectionOverline t={t}>Voortgang · 90 van 180 min</SectionOverline>
            <StackedBar t={t} segments={[
              { kind: 'done',    pct: 50, label: 'Gedaan · 90m' },
              { kind: 'planned', pct: 35, label: 'Ingepland · 63m' },
              { kind: 'todo',    pct: 15, label: 'Nog plannen · 27m' },
            ]} />
            <StatusBanner t={t} kind="success"
              headline="Je ligt op schema."
              body="Nog 27 min in te plannen. Je hebt tot zaterdag 80 min vrij — past ruim." />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <SectionOverline t={t}>Toets-ladder · 3 van 6 stappen</SectionOverline>
            <LadderStep t={t} status="done" title="Blok 1 · Lees § 4.1–4.2" meta="Gedaan · 22 apr · 30m" />
            <LadderStep t={t} status="done" title="Flashcards ronde 1" meta="Gedaan · 22 apr · 25m" />
            <LadderStep t={t} status="now" title="Flashcards ronde 2" meta="Vandaag 15:30 · 15m" />
            <LadderStep t={t} status="planned" title="Oefenopgaves" meta="Woensdag 16:00 · 30m" />
            <LadderStep t={t} status="todo" title="Samenvatting maken" meta="Nog inplannen · 30m" />
            <LadderStep t={t} status="todo" title="Probeer-toets" meta="Nog inplannen · 30m" />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <SectionOverline t={t}>Gekoppeld</SectionOverline>
            <LinkRow t={t} icon="brain" title="Quiz: Celbiologie kernbegrippen"
              meta="50 vragen · 12 keer gespeeld" />
            <LinkRow t={t} icon="book-open" title="Hoofdstuk 4 — Cel"
              meta="Bio · 24 pagina's" />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <SectionOverline t={t}>Acties</SectionOverline>
            <ActieGroup t={t}>
              <ActieRow t={t} icon="bell" label="Reminder instellen" />
              <ActieRow t={t} icon="calendar-clock" label="Herplannen" divider />
              <ActieRow t={t} icon="trash-2" label="Verwijder" destructive divider />
            </ActieGroup>
          </div>
        </DetailBody>
        <DetailFooter t={t} />
      </BottomSheet>
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 3 — URGENT
   ═════════════════════════════════════════════════════════ */
function F3_DetailUrgent({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg t={t} />
      <MobileBottomNav t={t} active="plannen" />
      <BottomSheet t={t} height="medium">
        <DetailHeader t={t}
          subject="biologie"
          title="Bio-toets H4 — celbiologie"
          dateLabel="vrijdag 25 april"
          urgency={{ kind: 'danger', label: 'MORGEN' }} />
        <DetailBody>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <SectionOverline t={t}>Voortgang · 60 van 180 min</SectionOverline>
            <StackedBar t={t} segments={[
              { kind: 'done',    pct: 33, label: 'Gedaan · 60m' },
              { kind: 'planned', pct: 22, label: 'Ingepland · 40m' },
              { kind: 'todo',    pct: 45, label: 'Nog plannen · 80m' },
            ]} />
            <StatusBanner t={t} kind="warn"
              headline="Je loopt achter."
              body="Plan 80 min in om morgen klaar te zijn."
              cta="Plan in" />
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <SectionOverline t={t}>Toets-ladder · 2 van 6 stappen</SectionOverline>
            <LadderStep t={t} status="done" title="Blok 1 · Lees § 4.1–4.2" meta="Gedaan · 22 apr · 30m" />
            <LadderStep t={t} status="done" title="Flashcards ronde 1" meta="Gedaan · 22 apr · 25m" />
            <LadderStep t={t} status="now" title="Flashcards ronde 2" meta="Vandaag 15:30 · 15m" />
            <LadderStep t={t} status="todo" title="Oefenopgaves" meta="Nog inplannen · 30m" />
            <LadderStep t={t} status="todo" title="Samenvatting maken" meta="Nog inplannen · 30m" />
            <LadderStep t={t} status="todo" title="Probeer-toets" meta="Nog inplannen · 30m" />
          </div>
        </DetailBody>
        <DetailFooter t={t} />
      </BottomSheet>
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 4 — EDIT (stack)
   ═════════════════════════════════════════════════════════ */
function F4_Edit({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg t={t} />
      <MobileBottomNav t={t} active="plannen" />
      {/* base detail sheet (medium) */}
      <BottomSheet t={t} height="medium" zIndex={3}>
        <DetailHeader t={t}
          subject="biologie"
          title="Bio-toets H4 — celbiologie"
          dateLabel="zaterdag 25 april"
          urgency={{ kind: 'safe', label: 'OVER 3 DAGEN' }} />
        <DetailBody>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <SectionOverline t={t}>Voortgang · 90 van 180 min</SectionOverline>
            <StackedBar t={t} segments={[
              { kind: 'done',    pct: 50, label: 'Gedaan · 90m' },
              { kind: 'planned', pct: 35, label: 'Ingepland · 63m' },
              { kind: 'todo',    pct: 15, label: 'Nog plannen · 27m' },
            ]} />
          </div>
        </DetailBody>
        <DetailFooter t={t} />
      </BottomSheet>

      {/* Stacked edit sheet over it */}
      <div style={{
        position: 'absolute', inset: 0, zIndex: 4,
        background: t.mode === 'dark' ? 'rgba(0,0,0,0.45)' : 'rgba(15,23,42,0.32)',
        pointerEvents: 'none',
      }} />
      <BottomSheet t={t} height="full" zIndex={5}>
        <EditHeader t={t} title="Bewerken" />
        <div style={{
          flex: 1, overflow: 'hidden', padding: 16,
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <div>
            <FieldLabel t={t}>Vak</FieldLabel>
            <SubjectChip t={t} subject="biologie" />
          </div>
          <div>
            <FieldLabel t={t}>Titel</FieldLabel>
            <TextInput t={t} value="Bio-toets H4 — celbiologie" />
          </div>
          <div>
            <FieldLabel t={t}>Type</FieldLabel>
            <TypeSegmented t={t} active="toets" />
          </div>
          <div>
            <FieldLabel t={t}>Datum</FieldLabel>
            <DateInputRow t={t} />
          </div>
          <div>
            <FieldLabel t={t}>Geschatte uren</FieldLabel>
            <div style={{
              background: t.cardSunken, border: `1px solid ${t.border}`,
              borderRadius: 12, padding: '4px 8px',
            }}>
              <UrenStepper t={t} />
            </div>
            <div style={{
              marginTop: 8,
              fontFamily: 'Nunito', fontWeight: 500, fontSize: 11.5,
              color: t.fgDim, lineHeight: 1.4,
            }}>Je kunt dit straks opknippen in blokken · standaard voor toets: 3u</div>
          </div>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
            color: t.primary, letterSpacing: 0.1,
            display: 'inline-flex', alignItems: 'center', gap: 4,
          }}>Meer opties <MI name="chevron-down" size={14} color={t.primary} strokeWidth={2.4} /></div>
        </div>
        <EditFooter t={t} />
      </BottomSheet>
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 5 — VERWIJDER ALERT
   ═════════════════════════════════════════════════════════ */
function F5_DeleteAlert({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg t={t} />
      <MobileBottomNav t={t} active="plannen" />
      <BottomSheet t={t} height="medium">
        <DetailHeader t={t}
          subject="biologie"
          title="Bio-toets H4 — celbiologie"
          dateLabel="zaterdag 25 april"
          urgency={{ kind: 'safe', label: 'OVER 3 DAGEN' }} />
        <DetailBody>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <SectionOverline t={t}>Voortgang · 90 van 180 min</SectionOverline>
            <StackedBar t={t} segments={[
              { kind: 'done',    pct: 50, label: 'Gedaan · 90m' },
              { kind: 'planned', pct: 35, label: 'Ingepland · 63m' },
              { kind: 'todo',    pct: 15, label: 'Nog plannen · 27m' },
            ]} />
            <StatusBanner t={t} kind="success"
              headline="Je ligt op schema."
              body="Nog 27 min in te plannen." />
          </div>
        </DetailBody>
        <DetailFooter t={t} />
      </BottomSheet>
      <AlertDialog t={t}
        icon="alert-triangle" iconColor={t.red}
        title="Verwijder deze deadline?"
        body="Bio-toets H4 — celbiologie. Alle 6 stappen + 3 ingeplande taken worden ook verwijderd."
        primaryLabel="Verwijder"
        primaryVariant="destructive" />
    </PhoneShell>
  );
}

/* ─── Page ─── */
function DeadlineDetailPage() {
  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 · Deadline-detail</div>
        <h1 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 36, color: '#0F172A',
          letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>Detail · Edit · Verwijder · 5 frames</h1>
        <p style={{
          margin: '8px 0 0', fontSize: 13, color: '#475569',
          fontWeight: 500, lineHeight: 1.5, maxWidth: 720,
        }}>BottomSheet ipv side-drawer. Sticky header (subject-chip + Fredoka-titel + datum + urgency-pill), scrollbare body, sticky footer met ⋯ + Start quiz. Stacked-bar voor voortgang (done · ingepland · te plannen), toets-ladder met 4 status-states, edit als full-sheet over de detail-sheet.</p>
      </header>

      <DDRow label="Frame 1 · Detail medium · op schema · 3 van 6 ladder-stappen"
        dark={<F1_DetailMedium t={TK_DARK} />}
        light={<F1_DetailMedium t={TK_LIGHT} />} />

      <DDRow label="Frame 2 · Detail full · alle 6 ladder-stappen + Gekoppeld + Acties"
        dark={<F2_DetailFull t={TK_DARK} />}
        light={<F2_DetailFull t={TK_LIGHT} />} />

      <DDRow label="Frame 3 · Urgent · 'MORGEN' destructive-pill + warn-banner met Plan in CTA"
        dark={<F3_DetailUrgent t={TK_DARK} />}
        light={<F3_DetailUrgent t={TK_LIGHT} />} />

      <DDRow label="Frame 4 · Edit-modus · sheet stack · titel/type/datum/uren-stepper"
        dark={<F4_Edit t={TK_DARK} />}
        light={<F4_Edit t={TK_LIGHT} />} />

      <DDRow label="Frame 5 · Verwijder-bevestiging · alert-dialog over detail"
        dark={<F5_DeleteAlert t={TK_DARK} />}
        light={<F5_DeleteAlert t={TK_LIGHT} />} />
    </div>
  );
}

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