/* Polish desktop hero-frames — set 1: Stapel + Herstel-bak.
   3-koloms layout: Deadlines | Vandaag | Morgen/Deze-week.
   Week-strip zit ALTIJD tussen topbar en kolommen. */

/* ─── Week-data per scène ──────────────────────────────── */
// Scène 1 — rustige dinsdag, Bio-toets op vrijdag
const WEEK_STAPEL = [
  { day: 'ma', date: 21, items: [{ s: 'biologie', dots: 1 }, { s: 'wiskunde', dots: 1 }] },
  { day: 'di', date: 22, items: [{ s: 'biologie', dots: 1 }, { s: 'wiskunde', dots: 1 }, { s: 'engels', dots: 1 }], today: true },
  { day: 'wo', date: 23, items: [{ s: 'scheikunde', dots: 1 }, { s: 'frans', dots: 1 }] },
  { day: 'do', date: 24, items: [{ s: 'biologie', dots: 2 }] },
  { day: 'vr', date: 25, items: [{ s: 'engels', dots: 1 }], deadline: 'biologie', dlLabel: 'Bio H4', dlType: 'Toets' },
  { day: 'za', date: 26, items: [] },
  { day: 'zo', date: 27, items: [{ s: 'wiskunde', dots: 1 }] },
];

// Scène 2 — Herstel-bak, vorige week gemist, nu maandag
const WEEK_HERSTEL = [
  { day: 'ma', date: 21, items: [{ s: 'biologie', dots: 1 }], missed: true },
  { day: 'di', date: 22, items: [{ s: 'wiskunde', dots: 1 }], missed: true },
  { day: 'wo', date: 23, items: [{ s: 'engels', dots: 1 }], missed: true },
  { day: 'do', date: 24, items: [{ s: 'scheikunde', dots: 1 }], missed: true },
  { day: 'vr', date: 25, items: [] },
  { day: 'za', date: 26, items: [] },
  { day: 'zo', date: 27, items: [] },
];
// Scène 2 — deze week (week 44)
const WEEK_HERSTEL_CURRENT = [
  { day: 'ma', date: 28, items: [{ s: 'biologie', dots: 1 }, { s: 'wiskunde', dots: 1 }], today: true },
  { day: 'di', date: 29, items: [{ s: 'biologie', dots: 2 }, { s: 'engels', dots: 1 }] },
  { day: 'wo', date: 30, items: [{ s: 'wiskunde', dots: 1 }, { s: 'scheikunde', dots: 1 }] },
  { day: 'do', date: 31, items: [{ s: 'biologie', dots: 1 }, { s: 'engels', dots: 1 }] },
  { day: 'vr', date:  1, items: [], deadline: 'biologie', dlLabel: 'Bio H4', dlType: 'Toets' },
  { day: 'za', date:  2, items: [] },
  { day: 'zo', date:  3, items: [] },
];

/* ─── StapelPage wrapper — topbar + WeekStrip + 3 kolommen ─ */
function StapelPage({ t, topbarSubtitle, week, weekLabel, weekRange, weekContext, columns }) {
  return (
    <BrowserShell t={t}>
      <Sidebar t={t} active="plannen" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar t={t} title="Plannen" subtitle={topbarSubtitle} />
        {/* WeekStrip — altijd tussen topbar en kolommen */}
        <div style={{
          padding: '18px 24px 14px',
          background: t.bg,
          borderBottom: `1px solid ${t.border}`,
        }}>
          <WeekStrip t={t} week={week} label={weekLabel} range={weekRange} context={weekContext} />
        </div>
        {columns}
      </div>
    </BrowserShell>
  );
}

/* ─── 3-kolom wrapper ──────────────────────────────────── */
function StapelColumns({ t, leftChildren, centerChildren, rightChildren }) {
  return (
    <main style={{
      flex: 1, minHeight: 0, overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '280px 1fr 320px', gap: 0,
    }}>
      <section style={{
        borderRight: `1px solid ${t.border}`, background: t.bg,
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        <ColumnHeader t={t} title="Deadlines" subtitle="komende 14d" />
        <div style={{ flex: 1, overflow: 'auto', padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {leftChildren}
        </div>
      </section>
      <section style={{
        background: t.cardAlt, display: 'flex', flexDirection: 'column', overflow: 'hidden',
        borderRight: `1px solid ${t.border}`,
      }}>
        <ColumnHeader t={t} title="Vandaag" accent={t.primary} count={3} subtitle="dinsdag 22 okt" />
        <div style={{ flex: 1, overflow: 'auto', padding: '14px 18px 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {centerChildren}
        </div>
      </section>
      <section style={{ background: t.bg, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
        <ColumnHeader t={t} title="Morgen" subtitle="wo 23 okt" />
        <div style={{ flex: 1, overflow: 'auto', padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
          {rightChildren}
        </div>
      </section>
    </main>
  );
}

/* ─── Deadline-rij (left col) ─────────────────────────── */
function DeadlineRow({ t, subject, label, days, variant = 'neutral' }) {
  const urgencyColor = variant === 'urgent' ? t.red : variant === 'soon' ? t.warn : t.fgDim;
  return (
    <GradientBorderCard t={t} subject={subject} radius={10}>
      <div style={{
        padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <SubjectChip t={t} subject={subject} size="sm" />
          <div style={{ fontSize: 12.5, color: t.fg, fontWeight: 700, marginTop: 5, lineHeight: 1.3 }}>{label}</div>
        </div>
        <div style={{
          fontSize: 11, fontWeight: 800, color: urgencyColor,
          padding: '3px 7px', borderRadius: 6,
          background: variant === 'urgent' ? t.redDim : variant === 'soon' ? t.warnDim : 'transparent',
          border: variant === 'neutral' ? `1px solid ${t.border}` : 'none',
          letterSpacing: 0.2, whiteSpace: 'nowrap', flexShrink: 0,
        }}>{days}</div>
      </div>
    </GradientBorderCard>
  );
}

/* ─── Frame 1 · Stapel (rustige dinsdag) ───────────────── */
function FrameStapel({ t }) {
  return (
    <StapelPage t={t}
      topbarSubtitle="Dinsdag 22 oktober · 16:03"
      week={WEEK_STAPEL}
      weekLabel="Week 43"
      weekRange="21–27 okt"
      weekContext="vrijdag is je toetsdag"
      columns={
        <StapelColumns t={t}
          leftChildren={<>
            <SectionLabel t={t}>Toetsen</SectionLabel>
            <DeadlineRow t={t} subject="biologie" label="Bio-toets H4 — celbiologie" days="over 3d" variant="urgent" />
            <DeadlineRow t={t} subject="wiskunde" label="Wisk SO — statistiek" days="over 8d" variant="soon" />
            <DeadlineRow t={t} subject="engels" label="Essay inleveren" days="over 11d" />
            <SectionLabel t={t}>Inleveren</SectionLabel>
            <DeadlineRow t={t} subject="scheikunde" label="Samenvatting H4" days="over 5d" variant="soon" />
            <DeadlineRow t={t} subject="frans" label="Woordenschat-lijst H6" days="over 14d" />
          </>}
          centerChildren={<>
            <PulseCard t={t} prominent={false} mood="idle"
              label="Pulse · goedemorgen"
              title="Rustige middag vandaag."
              body="Drie taken, kost je ongeveer 50 minuten. Bio doe je eerst — toets is het dichtstbij."
            />
            <SectionLabel t={t}>3 taken · ~50 min</SectionLabel>
            <TaskCard t={t} subject="biologie" title="Celbiologie — flashcards ronde 2" mins={15} source="Bio · H4" type="flashcards" />
            <TaskCard t={t} subject="wiskunde" title="Statistiek — 3 oefenopgaves" mins={20} source="Wisk · H7" type="oefenen" />
            <TaskCard t={t} subject="engels" title="Essay-paragraaf 2 schrijven" mins={15} source="Engels · week 42" type="schrijven" />
          </>}
          rightChildren={<>
            <SectionLabel t={t}>2 taken · ~35 min</SectionLabel>
            <TaskCard t={t} subject="scheikunde" title="§ 4.2 samenvatting lezen" mins={20} source="Schk · H4" type="lezen" compact />
            <TaskCard t={t} subject="frans" title="Woordenschat H6 overhoren" mins={15} source="Frans · H6" type="overhoren" compact />
            <div style={{
              marginTop: 4, padding: '10px 12px',
              background: 'transparent', border: `1px dashed ${t.border}`,
              borderRadius: 10, fontSize: 11, color: t.fgMute, fontWeight: 600, textAlign: 'center',
            }}>nog 4 taken deze week</div>
          </>}
        />
      }
    />
  );
}

/* ─── Frame 2 · Stapel met Herstel-bak ────────────────── */
function FrameHerstelBak({ t }) {
  return (
    <StapelPage t={t}
      topbarSubtitle="Maandag 28 oktober · 15:48"
      week={WEEK_HERSTEL_CURRENT}
      weekLabel="Week 44"
      weekRange="28 okt – 3 nov"
      weekContext="4 taken uit week 43 liggen nog open"
      columns={
        <StapelColumns t={t}
          leftChildren={<>
            <SectionLabel t={t}>Toetsen</SectionLabel>
            <DeadlineRow t={t} subject="biologie" label="Bio-toets H4 — celbiologie" days="over 2d" variant="urgent" />
            <DeadlineRow t={t} subject="wiskunde" label="Wisk SO — statistiek" days="over 5d" variant="soon" />
            <DeadlineRow t={t} subject="engels" label="Essay inleveren" days="over 7d" variant="soon" />
            <SectionLabel t={t}>Inleveren</SectionLabel>
            <DeadlineRow t={t} subject="scheikunde" label="Samenvatting H4" days="over 4d" variant="soon" />
          </>}
          centerChildren={<>
            <HerstelBakStrook t={t} />
            <SectionLabel t={t}>2 taken · ~35 min</SectionLabel>
            <TaskCard t={t} subject="biologie" title="Celbiologie — flashcards ronde 2" mins={15} source="Bio · H4" type="flashcards" />
            <TaskCard t={t} subject="wiskunde" title="Statistiek — 3 oefenopgaves" mins={20} source="Wisk · H7" type="oefenen" />
          </>}
          rightChildren={<>
            <SectionLabel t={t}>3 taken · ~55 min</SectionLabel>
            <TaskCard t={t} subject="biologie" title="H4 oefen-vragen" mins={20} source="Bio · H4" type="oefenen" compact />
            <TaskCard t={t} subject="scheikunde" title="§ 4.2 samenvatting lezen" mins={20} source="Schk · H4" type="lezen" compact />
            <TaskCard t={t} subject="engels" title="Essay-paragraaf 2" mins={15} source="Engels" type="schrijven" compact />
          </>}
        />
      }
    />
  );
}

/* ─── Herstel-bak strook ─────────────────────────────── */
function HerstelBakStrook({ t }) {
  return (
    <section style={{
      background: t.herstelBg, border: `1px solid ${t.herstelBorder}`,
      borderRadius: 12, padding: '14px 16px',
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: t.mode === 'dark' ? 'rgba(239,68,68,0.18)' : 'rgba(220,38,38,0.12)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <PI name="rotate-ccw" size={14} color={t.herstelTitle} strokeWidth={2.5} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{
            fontSize: 10.5, fontWeight: 800, letterSpacing: 0.6,
            textTransform: 'uppercase', color: t.herstelTitle, marginBottom: 2,
          }}>Herstel-bak · 4 taken gemist</div>
          <div style={{ fontSize: 13, color: t.herstelFg, fontWeight: 600, lineHeight: 1.45 }}>
            Vorige week bleven vier taken liggen. <b>Pulse stelt voor:</b> verdelen over deze week, of archiveren?
          </div>
        </div>
      </div>

      {/* mini-preview */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6,
        padding: '10px 12px', background: t.mode === 'dark' ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.55)',
        borderRadius: 8, border: `1px dashed ${t.herstelBorder}`,
      }}>
        <MissedRow t={t} subject="biologie" title="H4 flashcards ronde 1" date="ma 21" />
        <MissedRow t={t} subject="wiskunde" title="Statistiek set A" date="di 22" />
        <MissedRow t={t} subject="engels" title="Essay-paragraaf 1" date="wo 23" />
        <MissedRow t={t} subject="scheikunde" title="§ 4.1 lezen" date="do 24" />
      </div>

      <div style={{ display: 'flex', gap: 8 }}>
        <button style={{
          flex: 1, padding: '10px 12px', borderRadius: 10,
          background: t.mode === 'dark' ? '#EF4444' : '#DC2626',
          color: '#FFFFFF', fontSize: 12.5, fontWeight: 800,
          border: 'none', cursor: 'pointer', letterSpacing: 0.2,
        }}>Herplannen naar deze week</button>
        <button style={{
          padding: '10px 14px', borderRadius: 10,
          background: 'transparent',
          border: `1px solid ${t.herstelBorder}`,
          color: t.herstelFg, fontSize: 12.5, fontWeight: 700, cursor: 'pointer',
        }}>Archiveren</button>
      </div>
    </section>
  );
}

function MissedRow({ t, subject, title, date }) {
  const hex = SUBJECTS[subject] || '#64748B';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11.5, minWidth: 0 }}>
      <span style={{ width: 5, height: 5, borderRadius: 999, background: hex, flexShrink: 0 }} />
      <span style={{ color: t.herstelTitle, fontWeight: 700, flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</span>
      <span style={{ color: t.herstelFg, fontWeight: 600, fontSize: 10.5, letterSpacing: 0.3, flexShrink: 0 }}>{date}</span>
    </div>
  );
}

Object.assign(window, { FrameStapel, FrameHerstelBak, WEEK_STAPEL, DeadlineRow });