/* global React */
// ============================================
// Icons (inline SVG) + small helpers
// ============================================

function Icon({ name, size = 16, ...rest }) {
  const paths = {
    inbox: 'M22 12h-6l-2 3h-4l-2-3H2M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z',
    home: 'M3 9.5 12 3l9 6.5V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9.5z M9 22V12h6v10',
    plus: 'M12 5v14 M5 12h14',
    send: 'm22 2-7 20-4-9-9-4 20-7z',
    bell: 'M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M10.3 21a1.94 1.94 0 0 0 3.4 0',
    fileText: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8',
    edit3: 'M12 20h9 M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z',
    check: 'm5 12 5 5L20 7',
    x: 'M18 6 6 18 M6 6l12 12',
    search: 'M21 21l-4.35-4.35 M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16z',
    settings: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z',
    archive: 'M21 8H3v13h18V8z M1 3h22v5H1z M10 12h4',
    upload: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M17 8l-5-5-5 5 M12 3v12',
    download: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 M7 10l5 5 5-5 M12 15V3',
    user: 'M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z',
    users: 'M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
    clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M12 6v6l4 2',
    alert: 'M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z M12 9v4 M12 17h.01',
    sparkle: 'M12 3v3 M12 18v3 M3 12h3 M18 12h3 M5.6 5.6 7.7 7.7 M16.3 16.3l2.1 2.1 M5.6 18.4 7.7 16.3 M16.3 7.7l2.1-2.1',
    chevronRight: 'm9 18 6-6-6-6',
    chevronDown: 'm6 9 6 6 6-6',
    eye: 'M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
    pen: 'M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z',
    paperclip: 'm21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48',
    stamp: 'M5 22h14 M19 14l-3-2.5V8a2 2 0 0 0-2-2h-1.5a2 2 0 0 0-1.7.96 M11 8H7a2 2 0 0 0-2 2v3.5L2 16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2z',
    arrowRight: 'M5 12h14 M12 5l7 7-7 7',
    telegram: 'm22 2-7 20-4-9-9-4 20-7z',
    moreH: 'M5 12h.01 M12 12h.01 M19 12h.01',
    menu: 'M3 12h18 M3 6h18 M3 18h18',
    filter: 'M22 3H2l8 9.46V19l4 2v-8.54L22 3z',
    save: 'M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z M17 21v-8H7v8 M7 3v5h8',
    refresh: 'M23 4v6h-6 M1 20v-6h6 M3.51 9a9 9 0 0 1 14.85-3.36L23 10 M1 14l4.64 4.36A9 9 0 0 0 20.49 15',
    trash: 'M3 6h18 M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2',
    bookOpen: 'M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z',
    layers: 'M12 2 2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5',
    school: 'M22 10v6 M2 10l10-5 10 5-10 5z M6 12v5c0 1.5 2.5 3 6 3s6-1.5 6-3v-5',
    lock: 'M19 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2z M7 11V7a5 5 0 0 1 10 0v4',
    logOut: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4 M16 17l5-5-5-5 M21 12H9',
    key: 'M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4',
    userPlus: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M19 8v6 M22 11h-6',
    shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
    building: 'M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2 M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2 M10 6h4 M10 10h4 M10 14h4 M10 18h4',
  };
  const d = paths[name];
  if (!d) return null;
  return React.createElement('svg', {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: 1.8,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    ...rest,
  },
    d.split(' M').map((seg, i) => React.createElement('path', { key: i, d: (i === 0 ? '' : 'M') + seg }))
  );
}

// urgency pill — 4 levels (ปกติ / ด่วน / ด่วนมาก / ด่วนที่สุด)
function UrgencyPill({ level }) {
  const meta = (typeof URGENCY !== 'undefined' && URGENCY[level]) || { label: 'ปกติ' };
  if (!level || level === 'normal') {
    return React.createElement('span', { className: 'urg normal' }, meta.label);
  }
  const palette = {
    express:     { bg: 'var(--amber-soft)', fg: 'var(--amber-deep)' },
    urgent:      { bg: 'var(--amber-soft)', fg: 'var(--amber-deep)' },
    most_urgent: { bg: 'var(--red-soft)',   fg: 'var(--red)' },
  };
  const p = palette[level] || palette.urgent;
  return React.createElement('span', {
    className: 'urg',
    style: {
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 9px', borderRadius: 999, fontSize: 11.5, fontWeight: 700,
      background: p.bg, color: p.fg, whiteSpace: 'nowrap',
    },
  },
    React.createElement(Icon, { name: 'alert', size: 11 }),
    meta.label,
  );
}

// status badge
function StatusBadge({ status, short = false }) {
  const s = STATUS[status];
  if (!s) return null;
  return React.createElement('span', { className: `badge ${s.color}` },
    React.createElement('span', { className: 'dot' }),
    short ? s.short : s.label
  );
}

// stepper
function Stepper({ status }) {
  const steps = [
    { key: 'pending_director', label: 'รอเกษียณ' },
    { key: 'director_signed', label: 'ลงนามแล้ว' },
    { key: 'assigned', label: 'มอบหมาย' },
    { key: 'sent_to_teacher', label: 'ส่งครู' },
    { key: 'archived', label: 'จัดเก็บ' },
  ];
  const idx = steps.findIndex(s => s.key === status);
  return React.createElement('div', { className: 'stepper' },
    steps.map((s, i) => {
      const done = i < idx;
      const current = i === idx;
      return [
        React.createElement('div', { key: s.key, className: `step ${done ? 'done' : ''} ${current ? 'current' : ''}` },
          React.createElement('div', { className: 'num' }, done ? '✓' : (i + 1)),
          React.createElement('div', { className: 'label' }, s.label),
        ),
        i < steps.length - 1 ? React.createElement('div', { key: `c-${i}`, className: `connector ${done ? 'done' : ''}` }) : null
      ];
    })
  );
}

// due-date badge — เหลือง = ใกล้ครบกำหนด (<7วัน), แดง = เลยกำหนด
function DueBadge({ dueDate, status }) {
  const info = (typeof dueInfo !== 'undefined') ? dueInfo(dueDate, status) : null;
  if (!info || info.kind === 'ok') return null;
  const overdue = info.kind === 'overdue';
  return React.createElement('span', {
    style: {
      display: 'inline-flex', alignItems: 'center', gap: 4,
      padding: '2px 8px', borderRadius: 999, fontSize: 11, fontWeight: 700, whiteSpace: 'nowrap',
      background: overdue ? 'var(--red-soft)' : 'var(--amber-soft)',
      color: overdue ? 'var(--red)' : 'var(--amber-deep)',
    },
  },
    React.createElement(Icon, { name: overdue ? 'alert' : 'clock', size: 11 }),
    info.label,
  );
}

Object.assign(window, { Icon, UrgencyPill, StatusBadge, Stepper, DueBadge });