/* Add-flows components — wizard chrome, chip-row, segmented variants,
   block rows, day-cards, import-rows. */

/* ─── Flow topbar (back · title · close) ─── */
function FlowTopbar({ t, title, showBack = true }) {
  return (
    <header style={{
      height: 56, padding: '0 8px', flexShrink: 0,
      background: t.topbar, borderBottom: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 4,
    }}>
      <button style={{
        width: 40, height: 40, borderRadius: 9, background: 'transparent',
        border: 'none', cursor: 'pointer', visibility: showBack ? 'visible' : 'hidden',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="chevron-left" size={22} color={t.fgDim} strokeWidth={2.4} /></button>
      <div style={{
        flex: 1, textAlign: 'center',
        fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em',
      }}>{title}</div>
      <button style={{
        width: 40, height: 40, borderRadius: 9, background: 'transparent',
        border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="x" size={20} color={t.fgDim} strokeWidth={2.4} /></button>
    </header>
  );
}

/* ─── Progress dots ─── */
function ProgressDots({ t, step = 1, total = 3 }) {
  return (
    <div style={{
      height: 56, padding: '0 16px', flexShrink: 0,
      background: t.card, borderBottom: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 0 }}>
        {Array.from({ length: total }).map((_, i) => {
          const idx = i + 1;
          const completed = idx < step;
          const active = idx === step;
          const bg = completed ? t.green : (active ? t.primary : 'transparent');
          const bd = completed || active ? bg : t.fgFaint;
          return (
            <React.Fragment key={i}>
              <div style={{
                width: 24, height: 24, borderRadius: 999,
                background: bg, border: `1.5px solid ${bd}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
                fontFamily: 'Nunito', fontWeight: 800, fontSize: 11,
                color: completed || active ? '#FFFFFF' : t.fgMute,
              }}>{completed
                ? <MI name="check" size={13} color="#FFFFFF" strokeWidth={3} />
                : idx}</div>
              {i < total - 1 && (
                <div style={{
                  flex: 1, height: 2,
                  background: idx <= step - 1 ? t.primary : hexToRgba(t.fgMute, 0.3),
                  marginLeft: 4, marginRight: 4,
                }} />
              )}
            </React.Fragment>
          );
        })}
      </div>
      <span style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5,
        color: t.fgDim, letterSpacing: 0.2, marginLeft: 8,
      }}>Stap {step} van {total}</span>
    </div>
  );
}

/* ─── Sticky footer (left optional + right) ─── */
function StickyFooter({ t, left, right }) {
  return (
    <div style={{
      flexShrink: 0, padding: '12px 16px 16px',
      borderTop: `1px solid ${t.border}`, background: t.card,
      display: 'flex', gap: 8,
    }}>
      {left && <div style={{ flex: 1 }}>{left}</div>}
      <div style={{ flex: left ? 2 : 1 }}>{right}</div>
    </div>
  );
}

/* ─── Subject chip-row (selectable) ─── */
function SubjectChipRow({ t, selected = 'biologie', subjects, showMore = true }) {
  const items = subjects || ['biologie','wiskunde','scheikunde','engels','nederlands','geschiedenis','frans'];
  const labels = {
    biologie: 'Biologie', wiskunde: 'Wiskunde', scheikunde: 'Scheikunde',
    engels: 'Engels', nederlands: 'Nederlands', geschiedenis: 'Geschiedenis',
    frans: 'Frans', natuurkunde: 'Natuurkunde',
  };
  const ICONS = {
    wiskunde: 'calculator', biologie: 'leaf', scheikunde: 'flask-conical',
    natuurkunde: 'zap', geschiedenis: 'landmark', engels: 'book',
    nederlands: 'book-open-text', frans: 'languages', duits: 'languages',
  };
  return (
    <div style={{ display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap' }}>
      {items.map(s => {
        const hex = SUBJECTS[s] || t.fgMute;
        const on = s === selected;
        const fg = t.subjectFg(hex);
        return (
          <div key={s} style={{
            height: 30, padding: '0 11px', borderRadius: 999,
            background: on ? hexToRgba(hex, t.mode === 'dark' ? 0.22 : 0.16) : t.cardSunken,
            border: `1.5px solid ${on ? hexToRgba(hex, 0.55) : t.border}`,
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
            color: on ? fg : t.fgDim, letterSpacing: 0.1,
            flexShrink: 0,
          }}>
            <MI name={ICONS[s] || 'book'} size={13} color={on ? fg : t.fgDim} strokeWidth={2.4} />
            {labels[s] || s}
          </div>
        );
      })}
      {showMore && (
        <button style={{
          height: 30, padding: '0 10px', borderRadius: 999, flexShrink: 0,
          background: 'transparent', border: `1px solid ${t.border}`, cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 11.5, color: t.fgDim,
          display: 'inline-flex', alignItems: 'center', gap: 3,
        }}>Meer <MI name="chevron-down" size={12} color={t.fgDim} strokeWidth={2.4} /></button>
      )}
    </div>
  );
}

/* ─── Generic preset-pills ─── */
function PresetPills({ t, items, selected, accent = 'primary' }) {
  const accentHex = t[accent] || t.primary;
  return (
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
      {items.map(it => {
        const val = typeof it === 'string' ? it : it.value;
        const label = typeof it === 'string' ? it : it.label;
        const on = val === selected;
        return (
          <div key={val} style={{
            height: 34, padding: '0 14px', borderRadius: 999,
            background: on ? hexToRgba(accentHex, t.mode === 'dark' ? 0.20 : 0.14) : t.cardSunken,
            border: `1.5px solid ${on ? hexToRgba(accentHex, 0.45) : t.border}`,
            color: on ? accentHex : t.fgDim,
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, letterSpacing: 0.2,
          }}>{label}</div>
        );
      })}
    </div>
  );
}

/* ─── Block row (Stap 2) ─── */
function BlokRow({ t, idx, subject, value, placeholder, duur }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  const fg = t.subjectFg(hex);
  return (
    <div style={{
      padding: '10px 12px', background: t.cardSunken,
      border: `1px solid ${t.border}`, borderRadius: 10,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        height: 22, padding: '0 8px', borderRadius: 6,
        background: hexToRgba(hex, 0.18), border: `1px solid ${hexToRgba(hex, 0.35)}`,
        display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0,
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10, letterSpacing: 0.5, color: fg,
      }}>
        <MI name="leaf" size={11} color={fg} strokeWidth={2.4} />
        BLOK {idx}
      </div>
      <div style={{
        flex: 1, minWidth: 0, height: 36, padding: '0 10px', borderRadius: 8,
        background: t.card, border: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center',
        fontFamily: 'Nunito', fontWeight: value ? 600 : 500, fontSize: 12.5,
        color: value ? t.fg : t.fgMute,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{value || placeholder}</div>
      <span style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, color: t.fgDim, flexShrink: 0,
      }}>{duur}</span>
    </div>
  );
}

/* ─── Day card (Stap 3) ─── */
function DayCard({ t, header, headerKind = 'today', blocks }) {
  const headerColor = headerKind === 'today' ? t.primary : t.fgDim;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: 12,
      display: 'flex', flexDirection: 'column', gap: 8, minWidth: 0,
    }}>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
        color: headerColor, letterSpacing: 0.7,
      }}>{header}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {blocks.map((b, i) => <BlockPill key={i} t={t} {...b} />)}
      </div>
    </div>
  );
}

function BlockPill({ t, subject, title, time }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  const fg = t.subjectFg(hex);
  return (
    <div style={{
      padding: '8px 10px', borderRadius: 8,
      background: hexToRgba(hex, t.mode === 'dark' ? 0.16 : 0.10),
      border: `1px solid ${hexToRgba(hex, 0.30)}`,
      display: 'flex', alignItems: 'center', gap: 8,
    }}>
      <MI name="leaf" size={13} color={fg} strokeWidth={2.4} />
      <span style={{
        flex: 1, minWidth: 0,
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 12, color: t.fg,
        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
      }}>{title}</span>
      <span style={{
        fontFamily: 'Nunito', fontWeight: 600, fontSize: 11, color: t.fgDim, flexShrink: 0,
      }}>{time}</span>
      <MI name="chevron-right" size={12} color={t.fgMute} strokeWidth={2.4} />
    </div>
  );
}

/* ─── Pulse-suggestie card ─── */
function PulseSuggestionCard({ t, label = 'Pulse stelt voor', body }) {
  return (
    <div style={{
      background: hexToRgba(t.primary, 0.08),
      border: `1px solid ${hexToRgba(t.primary, 0.22)}`,
      borderRadius: 12, padding: 12,
      display: 'flex', alignItems: 'flex-start', gap: 10,
    }}>
      <PulseMascotImg size={36} mood="thinking" />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
          color: t.primary, letterSpacing: 0.7, textTransform: 'uppercase', marginBottom: 4,
        }}>{label}</div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 12.5,
          color: t.fg, lineHeight: 1.45,
        }}>{body}</div>
      </div>
    </div>
  );
}

/* ─── Import row (Frame 6) ─── */
function ImportRow({ t, subject, title, dateLabel, checked = true }) {
  return (
    <div style={{
      padding: '10px 12px', background: t.card,
      border: `1px solid ${t.border}`, borderRadius: 12,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{ flexShrink: 0 }}>
        <SubjectChip t={t} subject={subject} size="sm" />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 13,
          color: t.fg, lineHeight: 1.3,
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
        }}>{title}</div>
        <div style={{
          marginTop: 2,
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 11,
          color: t.fgDim, letterSpacing: 0.2,
        }}>{dateLabel} · uit schoolsysteem</div>
      </div>
      <div style={{
        width: 22, height: 22, borderRadius: 6, flexShrink: 0,
        background: checked ? t.primary : 'transparent',
        border: `1.5px solid ${checked ? t.primary : t.fgFaint}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {checked && <MI name="check" size={14} color="#FFFFFF" strokeWidth={3} />}
      </div>
    </div>
  );
}

/* ─── Sheet header (used by quick-add / losse-taak / import) ─── */
function SheetHeader({ t, title, subtitle, mascot }) {
  return (
    <div style={{
      position: 'relative', flexShrink: 0,
      padding: '20px 16px 14px',
      borderBottom: `1px solid ${t.border}`,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, paddingRight: 36 }}>
        {mascot && <PulseMascotImg size={32} mood="thinking" />}
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 19, color: t.fg, letterSpacing: '-0.01em',
        }}>{title}</div>
      </div>
      {subtitle && (
        <div style={{
          marginTop: 4, paddingRight: 36,
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 12, color: t.fgDim, lineHeight: 1.4,
        }}>{subtitle}</div>
      )}
      <button style={{
        position: 'absolute', top: 16, right: 12,
        width: 32, height: 32, borderRadius: 8, background: 'transparent',
        border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="x" size={20} color={t.fgDim} strokeWidth={2.4} /></button>
    </div>
  );
}

Object.assign(window, {
  FlowTopbar, ProgressDots, StickyFooter, SubjectChipRow, PresetPills,
  BlokRow, DayCard, BlockPill, PulseSuggestionCard, ImportRow, SheetHeader,
});