/* Shared shell used by all 5 stress-test screens.
   Provides: StapelShell (sidebar+topbar+canvas wrapper)
             WeekStrip (compact)
             DeadlineCard variants
             TaskRow variants
             MissionRow, FlashcardRow, CoachFAB */

const { useState: useSt2, useEffect: useEf2 } = React;

function StapelShell({ title = 'Plannen', subtitle, rightExtra, children, height = 960 }) {
  const t = TK;
  return (
    <div className="is-dark" style={{
      display: 'flex', height, background: t.bg, color: t.fg, fontFamily: 'Nunito',
      position: 'relative',
    }}>
      <Sidebar />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, position: 'relative' }}>
        <Topbar title={title} subtitle={subtitle} rightExtra={rightExtra} />
        {children}
      </div>
    </div>
  );
}

// ───── (CompactWeekStrip removed — replaced by WeekGrid in flows/week-grid.jsx) ─────

// ───── Task row: 3 variants (active, queued, done) ─────
function TaskRow({ task, state = 'queued', variant = 'normal' }) {
  const t = TK;
  const s = SUBJECTS[task.subject];
  const typeIcon = {
    flashcards: 'layers', quiz: 'check-square', lezen: 'book-open',
    oefenen: 'pen-tool', video: 'play-circle',
  }[task.type] || 'circle';

  if (state === 'active') {
    return (
      <div style={{
        background: `linear-gradient(180deg, ${t.cardHi} 0%, ${t.card} 100%)`,
        border: `1.5px solid ${t.primary}`, borderRadius: 14,
        padding: '14px 16px', display: 'flex', gap: 12,
        boxShadow: `0 12px 32px rgba(0,180,216,0.15)`,
        position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: -40, right: -40, width: 140, height: 140,
          borderRadius: '50%', background: `radial-gradient(circle, ${t.primary}, transparent 70%)`,
          opacity: 0.18, pointerEvents: 'none',
        }} />
        <div style={{
          flexShrink: 0, width: 36, height: 36, borderRadius: 10,
          background: `color-mix(in srgb, ${s.color} 18%, transparent)`,
          color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
          position: 'relative', zIndex: 1,
        }}>
          <I name={s.icon} size={17} />
        </div>
        <div style={{ flex: 1, minWidth: 0, position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
            <SubjPill k={task.subject} size="sm" />
            <span style={{ fontSize: 10, fontWeight: 800, color: t.primary, letterSpacing: 0.5, textTransform: 'uppercase' }}>· nu</span>
          </div>
          <div style={{ fontSize: 14, fontWeight: 800, color: t.fg, lineHeight: 1.3, marginBottom: 2 }}>{task.title}</div>
          <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.45 }}>{task.detail}</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end', position: 'relative', zIndex: 1 }}>
          <button style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            height: 32, padding: '0 14px', borderRadius: 10,
            background: t.primary, color: '#07090F', border: 0, cursor: 'pointer',
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
          }}>
            <I name="play" size={12} fill="currentColor" strokeWidth={0} color="#07090F" />
            Start · {task.mins}m
          </button>
          <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>{task.source}</span>
        </div>
      </div>
    );
  }

  if (state === 'done') {
    return (
      <div style={{
        background: 'transparent', border: `1px dashed ${t.border}`, borderRadius: 12,
        padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, opacity: 0.55,
      }}>
        <div style={{
          width: 20, height: 20, borderRadius: 6, background: t.green, color: '#07090F',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <I name="check" size={13} strokeWidth={4} />
        </div>
        <SubjPill k={task.subject} size="sm" muted />
        <span style={{ fontSize: 12.5, fontWeight: 700, color: t.fgDim, textDecoration: 'line-through', flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{task.title}</span>
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>+12 <I name="zap" size={9} fill={t.gold} color={t.gold} strokeWidth={0} style={{verticalAlign:-1}} /></span>
      </div>
    );
  }

  if (state === 'missed') {
    return (
      <div style={{
        background: 'rgba(239,68,68,0.06)', border: `1px solid rgba(239,68,68,0.2)`,
        borderRadius: 12, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{
          width: 20, height: 20, borderRadius: 6, background: 'rgba(239,68,68,0.14)',
          border: '1.5px solid rgba(239,68,68,0.4)', flexShrink: 0,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name="clock" size={11} color={t.red} strokeWidth={3} />
        </div>
        <div style={{
          width: 30, height: 30, borderRadius: 8,
          background: `color-mix(in srgb, ${s.color} 14%, transparent)`,
          color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <I name={typeIcon} size={14} />
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
            <SubjPill k={task.subject} size="sm" />
            <span style={{ fontSize: 10, fontWeight: 800, color: t.red, letterSpacing: 0.4, textTransform: 'uppercase' }}>· {task.missedDay || 'di'}</span>
          </div>
          <div style={{ fontSize: 13, fontWeight: 800, color: t.fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{task.title}</div>
        </div>
        <div style={{ display: 'flex', gap: 5 }}>
          <button style={microBtn(t, 'primary')}>
            <I name="calendar-plus" size={11} /> Schuif
          </button>
          <button style={microBtn(t)}>
            <I name="check" size={11} />
          </button>
          <button style={microBtn(t)}>
            <I name="x" size={11} />
          </button>
        </div>
      </div>
    );
  }

  // queued
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 18, height: 18, borderRadius: 5, border: `1.5px solid ${t.fgMute}`,
        flexShrink: 0,
      }} />
      <div style={{
        width: 28, height: 28, borderRadius: 8,
        background: `color-mix(in srgb, ${s.color} 14%, transparent)`,
        color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <I name={typeIcon} size={13} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <SubjPill k={task.subject} size="sm" />
          {task.source && <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>· {task.source}</span>}
        </div>
        <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{task.title}</div>
      </div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 3,
        background: t.cardHi, color: t.fgDim, borderRadius: 9999,
        padding: '3px 9px', fontSize: 10.5, fontWeight: 800,
      }}>
        <I name="clock" size={10} /> {task.mins}m
      </div>
    </div>
  );
}

// ───── Mission row ─────
function MissionRow({ mission }) {
  const t = TK;
  const progress = mission.progress;
  const done = progress >= 1;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: '8px 10px', display: 'flex', alignItems: 'center', gap: 10,
      opacity: done ? 0.55 : 1,
    }}>
      <div style={{
        width: 24, height: 24, borderRadius: 7, flexShrink: 0,
        background: done ? t.green : 'rgba(255,208,0,0.14)',
        color: done ? '#07090F' : t.gold,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {done ? <I name="check" size={13} strokeWidth={4} /> : <I name={mission.icon} size={12} />}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11.5, fontWeight: 800, color: t.fg, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          {mission.title}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 3 }}>
          <div style={{ flex: 1, height: 3, background: t.cardHi, borderRadius: 9999, overflow: 'hidden' }}>
            <div style={{ width: `${Math.min(progress*100, 100)}%`, height: '100%',
              background: done ? t.green : t.gold, borderRadius: 9999 }} />
          </div>
          <span style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute }}>{mission.done}/{mission.target}</span>
        </div>
      </div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 3,
        color: t.gold, fontFamily: 'Fredoka One', fontSize: 11,
      }}>
        +{mission.reward} <I name="zap" size={9} fill={t.gold} color={t.gold} strokeWidth={0} />
      </div>
    </div>
  );
}

// ───── Deadline card (sidebar-sized, v2) ─────
function DeadlineCardCompact({ d, active = false, onClick }) {
  const t = TK;
  const s = SUBJECTS[d.subject];
  const soon = d.days <= 3;
  return (
    <button onClick={onClick} style={{
      width: '100%', textAlign: 'left', cursor: 'pointer',
      background: active ? `color-mix(in srgb, ${s.color} 10%, ${t.card})` : t.card,
      border: active ? `1.5px solid ${s.color}` : `1px solid ${t.border}`,
      borderRadius: 12, padding: 12, display: 'flex', flexDirection: 'column', gap: 8,
      position: 'relative', overflow: 'hidden', fontFamily: 'Nunito',
    }}>
      <div style={{
        position: 'absolute', left: 0, top: 0, bottom: 0, width: 3,
        background: s.color, opacity: active ? 1 : 0.6,
      }} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <SubjPill k={d.subject} size="sm" />
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>· {d.type}</span>
        <span style={{ flex: 1 }} />
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 3,
          background: soon ? t.redDim : t.cardHi, color: soon ? t.red : t.fgDim,
          border: `1px solid ${soon ? 'rgba(239,68,68,0.3)' : t.border}`,
          borderRadius: 9999, padding: '2px 8px',
          fontFamily: 'Fredoka One', fontSize: 11, lineHeight: 1,
        }}>
          {d.days}<span style={{ fontFamily: 'Nunito', fontSize: 9, fontWeight: 800 }}>d</span>
        </div>
      </div>
      <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg, lineHeight: 1.3 }}>{d.title}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1, height: 4, 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 }}>{Math.round(d.progress*100)}%</span>
      </div>
    </button>
  );
}

// ───── Coach FAB ─────
function CoachFAB({ style }) {
  const t = TK;
  return (
    <button style={{
      position: 'absolute', right: 24, bottom: 24, zIndex: 30,
      display: 'flex', alignItems: 'center', gap: 10,
      height: 52, padding: '0 18px 0 14px', borderRadius: 9999,
      background: `linear-gradient(135deg, ${t.purple}, #6D28D9)`,
      color: '#fff', border: 0, cursor: 'pointer', fontFamily: 'Nunito',
      boxShadow: '0 12px 28px rgba(157,78,221,0.4), 0 0 0 4px rgba(157,78,221,0.14)',
      ...(style || {}),
    }}>
      <div style={{ width: 32, height: 32, borderRadius: 9999, background: 'rgba(255,255,255,0.18)',
        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <I name="sparkles" size={16} fill="currentColor" color="#fff" strokeWidth={0} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', lineHeight: 1 }}>
        <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: 0.5, opacity: 0.8, textTransform: 'uppercase' }}>AI Coach</span>
        <span style={{ fontSize: 13, fontWeight: 800, marginTop: 2 }}>Vraag Pulse</span>
      </div>
    </button>
  );
}

// ───── Small buttons ─────
function microBtn(t, variant = 'neutral') {
  const isPrim = variant === 'primary';
  return {
    display: 'inline-flex', alignItems: 'center', gap: 4,
    height: 26, padding: '0 9px', borderRadius: 7,
    background: isPrim ? 'rgba(0,180,216,0.16)' : t.cardHi,
    color: isPrim ? t.primary : t.fgDim,
    border: `1px solid ${isPrim ? 'rgba(0,180,216,0.28)' : t.border}`,
    fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, cursor: 'pointer',
  };
}
function shellBtn(t, variant = 'ghost') {
  const map = {
    primary: { bg: t.primary, fg: '#07090F', bd: 'transparent' },
    ghost:   { bg: t.card, fg: t.fgDim, bd: t.border },
    danger:  { bg: 'rgba(239,68,68,0.12)', fg: t.red, bd: 'rgba(239,68,68,0.3)' },
  };
  const v = map[variant];
  return {
    display: 'inline-flex', alignItems: 'center', gap: 6,
    height: 32, padding: '0 12px', borderRadius: 9,
    background: v.bg, color: v.fg, border: `1px solid ${v.bd}`,
    fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, cursor: 'pointer',
    whiteSpace: 'nowrap',
  };
}
function colHeader(t, color = t.fg) {
  return {
    fontFamily: 'Fredoka One', fontSize: 16, fontWeight: 400,
    color, letterSpacing: '-0.01em', lineHeight: 1, margin: 0,
  };
}
function sectionChip(t, color = t.fgMute, bg = t.cardHi) {
  return {
    display: 'inline-flex', alignItems: 'center', height: 20, padding: '0 8px',
    borderRadius: 9999, background: bg, color,
    fontSize: 10, fontWeight: 800, letterSpacing: 0.3,
  };
}

// expose
window.StapelShell = StapelShell;
window.TaskRow = TaskRow;
window.MissionRow = MissionRow;
window.DeadlineCardCompact = DeadlineCardCompact;
window.CoachFAB = CoachFAB;
window.microBtn = microBtn;
window.shellBtn = shellBtn;
window.colHeader = colHeader;
window.sectionChip = sectionChip;