// Cross-brief icon-consistency patch — Briefs 01 / 03 / 04
// Adds three reusable helpers built on the canonical QTYPE mapping from qweb-v3.jsx.
// All sizes/colors per brief: 18px badges in QuizCards, 20–28px badges in detail/result panels.

(function(){
  const { QTYPE, hexA, LucideIcon } = window;
  if (!QTYPE || !hexA) { console.warn('qtype-fix-patch: qweb-v3.jsx must load first'); return; }

  // ───────── Theme helper (light/dark surface tokens) ─────────
  function theme(dark) {
    return dark ? {
      bg:        '#0A0F1E',
      card:      '#111827',
      cardSoft:  '#1A2235',
      border:    '#1E293B',
      borderSoft:'#1E293B',
      text:      '#F1F5F9',
      textSub:   '#CBD5E1',
      textDim:   '#94A3B8',
    } : {
      bg:        '#F8FAFC',
      card:      '#FFFFFF',
      cardSoft:  '#F8FAFC',
      border:    '#E2E8F0',
      borderSoft:'#F1F5F9',
      text:      '#0F172A',
      textSub:   '#475569',
      textDim:   '#64748B',
    };
  }
  window.theme = theme;

  // ───────── QtypeIconBadge — single colored icon-badge ─────────
  // The atomic primitive used in all three briefs. Defaults to 20px (the canonical
  // per-row size from Brief 03/04). Brief 01 QuizCard uses 18px; Brief 02 v3 uses 28–32.
  function QtypeIconBadge({ type, size = 20, dark = false }) {
    const t = QTYPE[type];
    if (!t) return null;
    // Inner icon ~58% of badge for legibility at all sizes.
    const ic = Math.max(10, Math.round(size * 0.58));
    return (
      <span style={{
        width: size, height: size, borderRadius: Math.max(5, Math.round(size * 0.28)),
        flexShrink: 0,
        background: hexA(t.color, dark ? 0.20 : 0.12),
        border: `1px solid ${hexA(t.color, dark ? 0.40 : 0.28)}`,
        color: t.color,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <LucideIcon name={t.icon} size={ic} />
      </span>
    );
  }
  window.QtypeIconBadge = QtypeIconBadge;

  // ───────── QtypeMiniRow — compact row of badges (Brief 01 QuizCard) ─────────
  // Up to `max` badges; overflow collapses to "+N" pill in the textDim tone.
  function QtypeMiniRow({ types = [], max = 5, size = 18, dark = false }) {
    const t = theme(dark);
    const visible = types.slice(0, max);
    const overflow = types.length - visible.length;
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
        {visible.map((qt, i) => <QtypeIconBadge key={i} type={qt} size={size} dark={dark} />)}
        {overflow > 0 && (
          <span style={{
            height: size, padding: '0 6px', borderRadius: Math.max(5, Math.round(size * 0.28)),
            display: 'inline-flex', alignItems: 'center',
            fontSize: 10, fontWeight: 800, color: t.textDim,
            background: dark ? '#1E293B' : '#F1F5F9',
            border: `1px solid ${t.border}`,
          }}>+{overflow}</span>
        )}
      </div>
    );
  }
  window.QtypeMiniRow = QtypeMiniRow;

  // ───────── QtypeRow — labelled row (Brief 04 result-header counts) ─────────
  // Inline pill: [icon-badge] · Label · "X vragen". Used in summary headers
  // where a count needs to sit next to the qtype name.
  function QtypeRow({ type, count, t, dark = false, size = 22 }) {
    const tk = t || theme(dark);
    const q = QTYPE[type];
    if (!q) return null;
    return (
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 8,
        padding: '5px 11px 5px 5px', borderRadius: 9999,
        background: hexA(q.color, dark ? 0.14 : 0.08),
        border: `1px solid ${hexA(q.color, dark ? 0.32 : 0.20)}`,
      }}>
        <QtypeIconBadge type={type} size={size} dark={dark} />
        <span style={{ fontSize: 12, fontWeight: 800, color: q.color, letterSpacing: 0.2 }}>
          {q.label}
        </span>
        <span style={{ fontSize: 11, fontWeight: 700, color: tk.textDim }}>
          · {count} {count === 1 ? 'vraag' : 'vragen'}
        </span>
      </span>
    );
  }
  window.QtypeRow = QtypeRow;
})();