/* ═════════════════════════════════════════════════════════
   Proefweek shared helpers
   Gebruikt door de 6 proefweek-scenes.
   — de "toets-ladder" (sequentiële toets-strip, vervangt week-strip)
   — deadline-kaart voor proefweek-context
   — kleine visuele helpers
   ═════════════════════════════════════════════════════════ */

/* Toets-ladder — de belangrijkste visuele verandering.
   Tijdens een proefweek toont Stapel geen week-strip (7 dagen naast elkaar)
   maar een ladder van toetsen in volgorde. Dat is waar het oog naartoe wil.

   Props:
     exams: [{ k, label, dayLabel, time?, status, detail?, past?, active? }]
     title?: titel-links
     subtitle?: tekst eronder
     compact?: smaller variant voor sidebar
     highlight?: index to highlight with glow
*/
function ToetsLadder({ exams, title = 'Proefweek', subtitle, compact = false, highlight = -1 }) {
  const t = TK;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 14,
      padding: compact ? '12px 14px' : '14px 18px',
      display: 'flex', flexDirection: 'column', gap: compact ? 10 : 12,
      flexShrink: 0,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* subtle top accent */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 2,
        background: `linear-gradient(90deg, ${t.red}, ${t.warn}, ${t.gold}, ${t.green})`,
        opacity: 0.5, pointerEvents: 'none',
      }} />
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: compact ? 13 : 15, color: t.fg,
          letterSpacing: '-0.01em',
        }}>{title}</div>
        {subtitle && (
          <div style={{ fontSize: compact ? 10.5 : 11.5, color: t.fgDim, fontWeight: 700 }}>
            · {subtitle}
          </div>
        )}
        <span style={{ flex: 1 }} />
        <ProefweekPill />
      </div>
      {/* ladder row */}
      <div style={{ display: 'flex', gap: compact ? 6 : 8 }}>
        {exams.map((e, i) => (
          <ExamStep key={i} e={e} compact={compact} highlight={i === highlight}
            connector={i < exams.length - 1} />
        ))}
      </div>
    </div>
  );
}

function ExamStep({ e, compact, highlight, connector }) {
  const t = TK;
  const s = SUBJECTS[e.k];
  const status = e.status || (e.past ? 'past' : e.active ? 'active' : 'upcoming');

  const palette = {
    past:     { bg: 'transparent',                       bd: t.border,                              fg: t.fgMute,      dotBg: t.cardHi,           dotFg: t.fgMute },
    active:   { bg: `color-mix(in srgb, ${s.color} 16%, ${t.card})`,
                                                           bd: s.color,                                fg: t.fg,          dotBg: s.color,            dotFg: '#07090F' },
    upcoming: { bg: t.cardAlt,                           bd: t.border,                              fg: t.fg,          dotBg: `color-mix(in srgb, ${s.color} 22%, transparent)`,
                                                                                                                                              dotFg: s.color },
    next:     { bg: `color-mix(in srgb, ${s.color} 10%, ${t.card})`,
                                                           bd: `color-mix(in srgb, ${s.color} 45%, transparent)`,
                                                                                                       fg: t.fg,          dotBg: `color-mix(in srgb, ${s.color} 30%, transparent)`,
                                                                                                                                              dotFg: s.color },
  }[status];

  const height = compact ? 62 : 84;

  return (
    <div style={{ flex: 1, minWidth: 0, position: 'relative' }}>
      <div style={{
        background: palette.bg, border: `1.5px solid ${palette.bd}`, borderRadius: 10,
        padding: compact ? '7px 9px' : '10px 11px', height,
        display: 'flex', flexDirection: 'column', gap: compact ? 2 : 4,
        opacity: status === 'past' ? 0.55 : 1,
        boxShadow: highlight ? `0 0 0 3px ${palette.bd}33, 0 8px 24px ${s.color}22` : 'none',
        position: 'relative',
      }}>
        {/* status dot — top-right */}
        <div style={{
          position: 'absolute', top: compact ? 7 : 10, right: compact ? 7 : 10,
          width: compact ? 14 : 16, height: compact ? 14 : 16, borderRadius: 9999,
          background: palette.dotBg, color: palette.dotFg,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {status === 'past'
            ? <I name="check" size={compact ? 8 : 10} strokeWidth={4} />
            : status === 'active'
              ? <I name="zap" size={compact ? 8 : 10} fill="currentColor" strokeWidth={0} />
              : <I name={s.icon} size={compact ? 8 : 10} />}
        </div>

        <div style={{
          fontSize: compact ? 8.5 : 9.5, fontWeight: 800,
          color: status === 'active' ? t.primary : t.fgMute,
          letterSpacing: 0.5, textTransform: 'uppercase',
        }}>
          {e.dayLabel}{e.time ? ` · ${e.time}` : ''}
        </div>
        <div style={{
          fontFamily: 'Nunito', fontSize: compact ? 11 : 12.5, fontWeight: 800,
          color: palette.fg, lineHeight: 1.2,
        }}>
          {e.label}
        </div>
        {!compact && e.detail && (
          <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.3,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: 'auto' }}>
            {e.detail}
          </div>
        )}
        {e.status === 'active' && !compact && (
          <div style={{ fontSize: 9.5, color: t.primary, fontWeight: 800, letterSpacing: 0.4,
            textTransform: 'uppercase', marginTop: 'auto' }}>
            ← je bent hier
          </div>
        )}
      </div>
      {/* connector chevron, not between last */}
      {connector && (
        <div style={{
          position: 'absolute', top: '50%', right: -6, transform: 'translateY(-50%)',
          color: t.fgMute, pointerEvents: 'none', zIndex: 2,
        }}>
          <I name="chevron-right" size={10} />
        </div>
      )}
    </div>
  );
}

function ProefweekPill({ size = 'md' }) {
  const t = TK;
  const compact = size === 'sm';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      height: compact ? 22 : 24, padding: compact ? '0 9px' : '0 11px', borderRadius: 9999,
      background: `linear-gradient(90deg, rgba(239,68,68,0.16), rgba(245,158,11,0.16))`,
      border: `1px solid rgba(239,68,68,0.3)`,
      color: '#FCA5A5',
      fontSize: compact ? 10 : 10.5, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
      fontFamily: 'Nunito',
    }}>
      <I name="flame" size={compact ? 10 : 11} color="#FCA5A5" />
      Proefweek
    </span>
  );
}

/* Rich deadline kaart, full-width, voor proefweek-contexten. */
function DeadlineCardWide({ d, onClick, prog = true, showChecklist = false, compact = false }) {
  const t = TK;
  const s = SUBJECTS[d.subject];
  const soon = d.days <= 1;

  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left', cursor: 'pointer',
      background: d.active
        ? `linear-gradient(180deg, color-mix(in srgb, ${s.color} 12%, ${t.card}) 0%, ${t.card} 100%)`
        : t.card,
      border: d.active ? `1.5px solid ${s.color}` : `1px solid ${t.border}`,
      borderRadius: 12, padding: compact ? '10px 12px' : '12px 14px',
      display: 'flex', flexDirection: 'column', gap: compact ? 6 : 8,
      position: 'relative', overflow: 'hidden', fontFamily: 'Nunito',
      boxShadow: d.active ? `0 8px 20px color-mix(in srgb, ${s.color} 18%, transparent)` : 'none',
    }}>
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
        background: s.color, opacity: d.active ? 1 : 0.55,
      }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <SubjPill k={d.subject} size="sm" />
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase' }}>{d.type}</span>
        <span style={{ flex: 1 }} />
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          background: soon ? 'rgba(239,68,68,0.16)' : t.cardHi,
          color: soon ? '#FCA5A5' : t.fgDim,
          border: `1px solid ${soon ? 'rgba(239,68,68,0.32)' : t.border}`,
          borderRadius: 9999, padding: '3px 9px',
          fontFamily: 'Fredoka One', fontSize: 11, lineHeight: 1,
        }}>
          {d.days === 0 ? 'morgen' : d.days < 0 ? 'verleden' :
            <>{d.days}<span style={{ fontFamily: 'Nunito', fontSize: 9, fontWeight: 800, marginLeft: 1 }}>d</span></>}
        </span>
      </div>
      <div style={{ fontSize: compact ? 12.5 : 13.5, fontWeight: 800, color: t.fg, lineHeight: 1.3 }}>
        {d.title}
      </div>
      {prog && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ flex: 1, height: 5, background: t.cardHi, borderRadius: 9999, overflow: 'hidden' }}>
            <div style={{ width: `${d.progress * 100}%`, height: '100%',
              background: `linear-gradient(90deg, ${s.color}, color-mix(in srgb, ${s.color} 70%, #FFF))`,
              borderRadius: 9999 }} />
          </div>
          <span style={{ fontSize: 10, fontWeight: 800, color: t.fgDim, minWidth: 32, textAlign: 'right' }}>
            {Math.round(d.progress * 100)}%
          </span>
        </div>
      )}
      {showChecklist && d.checklist && (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 3, marginTop: 2 }}>
          {d.checklist.map((c, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10.5 }}>
              <I name={c.done ? 'check-square' : 'square'} size={10}
                color={c.done ? t.green : t.fgMute} strokeWidth={c.done ? 3 : 2} />
              <span style={{ color: c.done ? t.fgMute : t.fgDim, fontWeight: 600,
                textDecoration: c.done ? 'line-through' : 'none' }}>{c.label}</span>
            </div>
          ))}
        </div>
      )}
    </button>
  );
}

/* Scene frame — label + desktop viewport shadow wrapper */
function SceneFrame({ num, title, context, children, height }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
        <div style={{
          background: 'rgba(239,68,68,0.14)', color: '#FCA5A5',
          padding: '5px 11px', borderRadius: 8,
          fontFamily: 'Fredoka One', fontSize: 14, letterSpacing: '-0.01em',
        }}>{num}</div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.fg, letterSpacing: '-0.01em' }}>
          {title}
        </div>
        {context && (
          <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, fontStyle: 'italic' }}>
            {context}
          </div>
        )}
      </div>
      <div style={{
        background: t.bg, borderRadius: 14, border: `1px solid ${t.border}`,
        overflow: 'hidden', boxShadow: '0 22px 60px rgba(0,0,0,0.38)',
        height, position: 'relative',
      }}>
        {children}
      </div>
    </div>
  );
}

/* Small banner used when Pulse has something small to say */
function PulseWhisper({ text, mood = 'encouraging', action }) {
  const t = TK;
  return (
    <div style={{
      padding: '9px 12px', background: 'rgba(0,180,216,0.06)',
      border: `1px solid rgba(0,180,216,0.18)`, borderRadius: 10,
      display: 'flex', gap: 10, alignItems: 'center',
    }}>
      <div style={{ width: 22, height: 22, borderRadius: 6,
        background: 'rgba(0,180,216,0.18)', display: 'flex',
        alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <PulseMascot variant="glow" mood={mood} size="sm" />
      </div>
      <div style={{ flex: 1, fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.45 }}>
        {text}
      </div>
      {action && (
        <button style={{
          height: 24, padding: '0 9px', borderRadius: 6,
          background: t.cardHi, color: t.fgDim, border: `1px solid ${t.border}`,
          fontSize: 10.5, fontWeight: 800, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
        }}>{action}</button>
      )}
    </div>
  );
}

window.ToetsLadder = ToetsLadder;
window.ProefweekPill = ProefweekPill;
window.DeadlineCardWide = DeadlineCardWide;
window.SceneFrame = SceneFrame;
window.PulseWhisper = PulseWhisper;