/* Day-sheet bottom-sheets — 4 varianten:
   vandaag-medium, vandaag-full, vakantie, past */

/* ─── DaySheetShell — gedeelde wrapper ─── */
function DaySheetShell({ t, height = 'medium', children, footer }) {
  const heights = { small: 0.40, medium: 0.65, full: 1 };
  const ratio = heights[height] || 0.65;
  return (
    <div style={{
      position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
      justifyContent: 'flex-end', zIndex: 5,
    }}>
      <div style={{ position: 'absolute', inset: 0, background: t.scrim }} />
      <div style={{
        position: 'relative',
        height: height === 'full' ? `calc(100% - 24px)` : `${ratio * 100}%`,
        background: t.card,
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        boxShadow: '0 -8px 32px rgba(0,0,0,0.20)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8 }}>
          <div style={{ width: 32, height: 4, borderRadius: 999, background: t.fgFaint, opacity: 0.55 }} />
        </div>
        {children}
        {footer && (
          <div style={{
            padding: '12px 16px 16px', borderTop: `1px solid ${t.border}`,
            background: t.card, display: 'flex', gap: 8,
          }}>{footer}</div>
        )}
      </div>
    </div>
  );
}

/* ─── DaySheetHeader ─── */
function DaySheetHeader({ t, overline, overlineColor, date, dateColor, caption }) {
  return (
    <div style={{
      padding: '8px 16px 12px', borderBottom: `1px solid ${t.border}`,
      position: 'relative', flexShrink: 0,
    }}>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10,
        color: overlineColor || t.primary,
        letterSpacing: 1, textTransform: 'uppercase', marginBottom: 4,
      }}>{overline}</div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 22,
        color: dateColor || t.fg,
        letterSpacing: '-0.01em', lineHeight: 1.1,
      }}>{date}</div>
      {caption && (
        <div style={{
          fontFamily: 'Nunito', fontWeight: 600, fontSize: 11.5,
          color: t.fgDim, marginTop: 3, lineHeight: 1.3,
        }}>{caption}</div>
      )}
      <button style={{
        position: 'absolute', top: 10, right: 12,
        width: 30, height: 30, borderRadius: 8,
        background: 'transparent', border: 'none', color: t.fgDim, cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="x" size={20} color={t.fgDim} /></button>
    </div>
  );
}

/* ─── DaySheetOverline — interne sectie-kop ─── */
function DaySheetOverline({ t, children, color }) {
  return (
    <div style={{
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
      color: color || t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
      padding: '2px 2px 0',
    }}>{children}</div>
  );
}

/* ─── DeadlineFlagCard — toets-card binnen day-sheet ─── */
function DeadlineFlagCard({ t, kind = 'toets', subject = 'biologie', time, title, progress }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  const bg = hexToRgba(hex, t.mode === 'dark' ? 0.16 : 0.12);
  const bd = `1.5px solid ${hexToRgba(hex, 0.50)}`;
  return (
    <div style={{
      background: bg, border: bd, borderRadius: 12, padding: 13,
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <TypePill t={t} kind={kind} />
        <span style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 11,
          color: t.fg, letterSpacing: 0.3,
        }}>{time}</span>
        <div style={{ flex: 1 }} />
        <MI name="chevron-right" size={16} color={t.fgDim} strokeWidth={2.4} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <SubjectChip t={t} subject={subject} size="sm" />
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
        color: t.fg, lineHeight: 1.3,
      }}>{title}</div>
      <div style={{
        width: '100%', height: 6, borderRadius: 999,
        background: t.cardSunken, overflow: 'hidden',
      }}>
        <div style={{ width: `${progress}%`, height: '100%', background: t.primary, borderRadius: 999 }} />
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 600, fontSize: 11,
        color: t.fgDim,
      }}>{progress}% voorbereid</div>
    </div>
  );
}

/* ─── DayTaskRow — task-rij in day-sheet (compact variant van TaskCard) ─── */
function DayTaskRow({ t, subject, duration, title, time, percent, toetsLink, done = false, missed = false }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  const borderLeft = missed
    ? `4px dashed ${t.red}`
    : `4px solid ${hex}`;
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 10,
      background: t.card, borderRadius: 12,
      border: `1px solid ${t.border}`, borderLeft,
      padding: '11px 12px 11px 10px',
      opacity: done ? 0.6 : 1,
      boxShadow: t.shadowCard,
    }}>
      {/* Checkbox */}
      <div style={{
        width: 22, height: 22, borderRadius: 6, flexShrink: 0, marginTop: 1,
        border: done ? 'none' : `1.5px solid ${missed ? t.red : t.fgFaint}`,
        background: done ? t.primary : 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {done && <MI name="check" size={14} color="#FFFFFF" strokeWidth={3} />}
      </div>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
          <SubjectChip t={t} subject={subject} size="sm" />
          <span style={{ fontFamily: 'Nunito', fontWeight: 600, fontSize: 11, color: t.fgDim }}>· {duration}</span>
        </div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
          color: t.fg, lineHeight: 1.3,
          textDecoration: done ? 'line-through' : 'none',
          textDecorationColor: done ? t.fgFaint : 'inherit',
        }}>{title}</div>
        <div style={{
          display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap',
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 11,
          color: missed ? t.redFg : t.fgDim, lineHeight: 1.3,
        }}>
          {time && <span>{time}</span>}
          {time && (percent !== undefined || toetsLink || missed) && <span>·</span>}
          {percent !== undefined && <span>{percent}% af</span>}
          {toetsLink && <><span>·</span><span style={{ color: t.primary, fontWeight: 700 }}>{toetsLink}</span></>}
          {missed && <span style={{ fontWeight: 700 }}>gemist</span>}
        </div>
      </div>
      <MI name="chevron-right" size={16} color={t.fgFaint} strokeWidth={2.4} style={{ marginTop: 4, flexShrink: 0 }} />
    </div>
  );
}

/* ─── InlineAddTaak — dashed border button ─── */
function InlineAddTaakDay({ t, label = '+ Taak op 22 april' }) {
  return (
    <button style={{
      width: '100%', height: 44, borderRadius: 11,
      background: 'transparent', cursor: 'pointer',
      border: `2px dashed ${hexToRgba(t.primary, 0.32)}`,
      color: t.primary,
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 13, letterSpacing: 0.2,
    }}>{label}</button>
  );
}

/* ─── UnavailableConfirm — warn card binnen day-sheet (full) ─── */
function UnavailableConfirm({ t }) {
  return (
    <div style={{
      background: hexToRgba(t.warn, 0.12),
      border: `1px solid ${hexToRgba(t.warn, 0.30)}`,
      borderRadius: 12, padding: '11px 13px',
      display: 'flex', flexDirection: 'column', gap: 6,
    }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
        <MI name="sun" size={16} color={t.warnFg} strokeWidth={2.4} style={{ marginTop: 1 }} />
        <div style={{
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 12,
          color: t.fg, lineHeight: 1.45, flex: 1,
        }}>
          <div style={{ fontWeight: 800, marginBottom: 1 }}>Deze dag staat als niet-beschikbaar.</div>
          Pulse plant hier geen nieuwe taken.
        </div>
      </div>
      <a style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 12,
        color: t.warnFg, textDecoration: 'underline', textUnderlineOffset: 3,
        cursor: 'pointer', paddingLeft: 24,
      }}>Beschikbaarheid weer aanzetten →</a>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════
   DaySheet variants
   ════════════════════════════════════════════════════════════ */

/* Vandaag · medium */
function DaySheetVandaagMedium({ t }) {
  return (
    <DaySheetShell t={t} height="medium" footer={
      <>
        <div style={{ flex: 1 }}>
          <Btn t={t} variant="secondary" size="md" icon="ban" full>Onbeschikbaar</Btn>
        </div>
        <div style={{ flex: 1.4 }}>
          <Btn t={t} variant="primary" size="md" icon="calendar-clock" full>Herplan deze dag</Btn>
        </div>
      </>
    }>
      <DaySheetHeader t={t}
        overline="DI · NU · VANDAAG" overlineColor={t.primary}
        date="22 april"
        caption="3 taken · 1u 15m totaal" />
      <div style={{ flex: 1, overflow: 'auto', padding: '12px 16px 14px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <DaySheetOverline t={t}>Deadline op deze dag</DaySheetOverline>
        <DeadlineFlagCard t={t} kind="toets" subject="biologie" time="10:00"
          title="Bio-toets H4 — celbiologie" progress={60} />
        <DaySheetOverline t={t}>Geplande taken · 3</DaySheetOverline>
        <DayTaskRow t={t} subject="biologie" duration="15 min"
          title="Celbiologie — flashcards ronde 2"
          time="15:30" percent={60} toetsLink="naar Bio-toets" />
        <DayTaskRow t={t} subject="wiskunde" duration="20 min"
          title="Statistiek — 3 oefenopgaves"
          time="16:00" percent={0} />
        <DayTaskRow t={t} subject="engels" duration="15 min"
          title="Essay-paragraaf 2 schrijven"
          time="16:30" percent={0} />
        <InlineAddTaakDay t={t} />
      </div>
    </DaySheetShell>
  );
}

/* Vandaag · full (extra niet-beschikbaar + past comparison) */
function DaySheetVandaagFull({ t }) {
  return (
    <DaySheetShell t={t} height="full" footer={
      <>
        <div style={{ flex: 1 }}>
          <Btn t={t} variant="secondary" size="md" icon="ban" full>Onbeschikbaar</Btn>
        </div>
        <div style={{ flex: 1.4 }}>
          <Btn t={t} variant="primary" size="md" icon="calendar-clock" full>Herplan deze dag</Btn>
        </div>
      </>
    }>
      <DaySheetHeader t={t}
        overline="DI · NU · VANDAAG" overlineColor={t.primary}
        date="22 april"
        caption="3 taken · 1u 15m totaal" />
      <div style={{ flex: 1, overflow: 'auto', padding: '12px 16px 14px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <DaySheetOverline t={t}>Deadline op deze dag</DaySheetOverline>
        <DeadlineFlagCard t={t} kind="toets" subject="biologie" time="10:00"
          title="Bio-toets H4 — celbiologie" progress={60} />
        <DaySheetOverline t={t}>Geplande taken · 3</DaySheetOverline>
        <DayTaskRow t={t} subject="biologie" duration="15 min"
          title="Celbiologie — flashcards ronde 2"
          time="15:30" percent={60} toetsLink="naar Bio-toets" />
        <DayTaskRow t={t} subject="wiskunde" duration="20 min"
          title="Statistiek — 3 oefenopgaves"
          time="16:00" percent={0} />
        <DayTaskRow t={t} subject="engels" duration="15 min"
          title="Essay-paragraaf 2 schrijven"
          time="16:30" percent={0} />
        <InlineAddTaakDay t={t} />

        <DaySheetOverline t={t} color={t.warnFg}>Niet-beschikbaar</DaySheetOverline>
        <UnavailableConfirm t={t} />

        <DaySheetOverline t={t} color={t.fgFaint}>Vorig jaar op deze datum</DaySheetOverline>
        <DayTaskRow t={t} subject="geschiedenis" duration="20 min"
          title="WO2-aantekeningen herhalen" time="14:00" percent={100} done />
        <DayTaskRow t={t} subject="frans" duration="15 min"
          title="Woordenlijst H6 leren" time="15:30" percent={100} done />
        <DayTaskRow t={t} subject="nederlands" duration="25 min"
          title="Essay-thema kiezen" time="16:30" percent={100} done />
      </div>
    </DaySheetShell>
  );
}

/* Vakantie · medium */
function DaySheetVakantie({ t }) {
  return (
    <DaySheetShell t={t} height="medium" footer={
      <div style={{ flex: 1 }}>
        <Btn t={t} variant="secondary" size="md" icon="calendar-check" full>Markeer als wél beschikbaar</Btn>
      </div>
    }>
      <DaySheetHeader t={t}
        overline="WO 7 MEI · VAKANTIE" overlineColor={t.warnFg}
        date="7 mei"
        caption="Meivakantie" />
      <div style={{ flex: 1, overflow: 'auto', padding: '12px 16px 14px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{
          background: hexToRgba(t.warn, 0.12),
          border: `1px solid ${hexToRgba(t.warn, 0.30)}`,
          borderRadius: 12, padding: '12px 13px',
          display: 'flex', gap: 10, alignItems: 'flex-start',
        }}>
          <MI name="sun" size={22} color={t.warnFg} strokeWidth={2.4} style={{ marginTop: 1 }} />
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 13.5,
              color: t.fg, lineHeight: 1.3, marginBottom: 3,
            }}>Meivakantie · 5–11 mei</div>
            <div style={{
              fontFamily: 'Nunito', fontWeight: 500, fontSize: 12,
              color: t.fgDim, lineHeight: 1.45,
            }}>Pulse plant geen taken op deze dag tenzij je een toets erna hebt waar nog niet voor geleerd is.</div>
          </div>
        </div>
        <EmptyCard t={t} icon="sun" iconColor={t.gold}
          title="Vrij" body="Geen plannen voor vandaag."
          ctas={<Btn t={t} variant="ghost" size="sm">Toch een taak inplannen?</Btn>} />
      </div>
    </DaySheetShell>
  );
}

/* Past · medium (gisteren) */
function DaySheetPast({ t }) {
  return (
    <DaySheetShell t={t} height="medium" footer={
      <div style={{ flex: 1 }}>
        <Btn t={t} variant="ghost" size="md" icon="file-text" full>Bekijk dagrapport</Btn>
      </div>
    }>
      <DaySheetHeader t={t}
        overline="MA · GISTEREN" overlineColor={t.fgFaint}
        date="21 april" dateColor={t.fgDim}
        caption="2 taken afgevinkt · 1 gemist" />
      <div style={{ flex: 1, overflow: 'auto', padding: '12px 16px 14px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <DaySheetOverline t={t} color={t.fgFaint}>Taken van gisteren</DaySheetOverline>
        <DayTaskRow t={t} subject="wiskunde" duration="20 min"
          title="H7 oefenopgaves 1–8" time="15:30" percent={100} done />
        <DayTaskRow t={t} subject="frans" duration="10 min"
          title="Woordjes H6 — ronde 1" time="16:00" percent={100} done />
        <DayTaskRow t={t} subject="biologie" duration="25 min"
          title="Bio H4 lezen — celbiologie" missed />
        <div style={{
          background: t.cardSunken, border: `1px solid ${t.border}`,
          borderRadius: 10, padding: '10px 12px',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5,
            color: t.fg, letterSpacing: 0.1,
          }}>1 taak naar herstel-bak verplaatst.</div>
          <a style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 12,
            color: t.primary, textDecoration: 'underline',
            textUnderlineOffset: 3, cursor: 'pointer',
          }}>Bekijk in herstel-bak →</a>
        </div>
      </div>
    </DaySheetShell>
  );
}

Object.assign(window, {
  DaySheetShell, DaySheetHeader, DaySheetOverline,
  DeadlineFlagCard, DayTaskRow, InlineAddTaakDay, UnavailableConfirm,
  DaySheetVandaagMedium, DaySheetVandaagFull,
  DaySheetVakantie, DaySheetPast,
});