// Icons + shared UI primitives for Saif Group Portal
// Stroke icons, 1.6px line weight, 16x16 default

const Icon = ({ name, size = 16, className = '' }) => {
  const s = size;
  const props = {
    width: s, height: s, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: 1.6,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    className,
  };
  const paths = {
    home: <><path d="M3 11l9-7 9 7v9a2 2 0 01-2 2h-4v-7h-6v7H5a2 2 0 01-2-2v-9z"/></>,
    inbox: <><path d="M3 13h4l2 3h6l2-3h4"/><path d="M5 5h14l2 8v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6l2-8z"/></>,
    suppliers: <><path d="M3 9l9-5 9 5"/><path d="M5 9v10h14V9"/><path d="M10 19v-5h4v5"/></>,
    docs: <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></>,
    po: <><rect x="4" y="6" width="16" height="14" rx="2"/><path d="M4 10h16"/><path d="M9 4v4M15 4v4"/></>,
    chart: <><path d="M3 21h18"/><path d="M6 17v-6M11 17V7M16 17v-9"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M5 5l2 2M17 17l2 2M2 12h3M19 12h3M5 19l2-2M17 7l2-2"/></>,
    users: <><circle cx="9" cy="8" r="3.5"/><path d="M2 21c0-3.5 3-6 7-6s7 2.5 7 6"/><circle cx="17" cy="9" r="2.5"/><path d="M22 19c0-2.5-2-4-4.5-4"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.5-4.5"/></>,
    bell: <><path d="M6 9a6 6 0 0112 0c0 5 2 6 2 6H4s2-1 2-6z"/><path d="M10 19a2 2 0 004 0"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    chevronDown: <><path d="M6 9l6 6 6-6"/></>,
    chevronRight: <><path d="M9 6l6 6-6 6"/></>,
    chevronLeft: <><path d="M15 6l-6 6 6 6"/></>,
    check: <><path d="M5 13l4 4L19 7"/></>,
    x: <><path d="M6 6l12 12M18 6L6 18"/></>,
    alert: <><path d="M12 9v4M12 17h.01"/><path d="M10.3 3.3L2.6 17a2 2 0 001.7 3h15.4a2 2 0 001.7-3L13.7 3.3a2 2 0 00-3.4 0z"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    filter: <><path d="M3 5h18M6 12h12M10 19h4"/></>,
    upload: <><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 16v3a1 1 0 001 1h14a1 1 0 001-1v-3"/></>,
    download: <><path d="M12 4v12M7 11l5 5 5-5"/><path d="M4 19h16"/></>,
    paperclip: <><path d="M21 11l-9 9a5 5 0 01-7-7l9-9a3 3 0 014 4l-9 9a1 1 0 01-1-1l8-8"/></>,
    eye: <><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/></>,
    edit: <><path d="M16 3l5 5L8 21H3v-5L16 3z"/></>,
    comment: <><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2v10z"/></>,
    flag: <><path d="M4 21V4M4 4h12l-2 4 2 4H4"/></>,
    arrowRight: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    arrowUp: <><path d="M12 19V5M5 12l7-7 7 7"/></>,
    arrowDown: <><path d="M12 5v14M5 12l7 7 7-7"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    phone: <><path d="M22 17v3a2 2 0 01-2 2A18 18 0 012 4a2 2 0 012-2h3a2 2 0 012 2 12 12 0 00.6 3.6 2 2 0 01-.5 2L6 11a16 16 0 007 7l1.4-1.1a2 2 0 012-.5 12 12 0 003.6.6 2 2 0 012 2z"/></>,
    map: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></>,
    bank: <><path d="M3 10l9-6 9 6"/><path d="M5 10v8M9 10v8M15 10v8M19 10v8"/><path d="M3 21h18"/></>,
    file: <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z"/><path d="M14 3v5h5"/></>,
    grid: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></>,
    chat: <><path d="M21 12a8 8 0 01-11.5 7.2L3 21l1.8-6.5A8 8 0 1121 12z"/></>,
    send: <><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></>,
    sparkle: <><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z"/></>,
    workflow: <><circle cx="6" cy="6" r="2.5"/><circle cx="18" cy="6" r="2.5"/><circle cx="12" cy="18" r="2.5"/><path d="M8 7l8 0M7 8l4 8M17 8l-4 8"/></>,
    play: <><path d="M6 4l14 8-14 8V4z"/></>,
    pause: <><rect x="6" y="5" width="4" height="14"/><rect x="14" y="5" width="4" height="14"/></>,
    shield: <><path d="M12 3l8 3v6c0 5-4 8-8 9-4-1-8-4-8-9V6l8-3z"/></>,
    refresh: <><path d="M3 12a9 9 0 0115-7l3 3M21 4v5h-5"/><path d="M21 12a9 9 0 01-15 7l-3-3M3 20v-5h5"/></>,
    moreH: <><circle cx="5" cy="12" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="19" cy="12" r="1.5"/></>,
    star: <><path d="M12 3l2.6 6 6.4.6-4.8 4.4 1.4 6.4L12 17l-5.6 3.4L7.8 14 3 9.6l6.4-.6L12 3z"/></>,
    activity: <><path d="M3 12h4l3-9 4 18 3-9h4"/></>,
    building: <><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 9h2M13 9h2M9 13h2M13 13h2M9 17h6"/></>,
  };
  return <svg {...props}>{paths[name] || null}</svg>;
};

// Avatar with deterministic colored background based on name
const Avatar = ({ name, initials, size = 'md', tone, className = '' }) => {
  const init = initials || (name ? name.split(' ').map(n => n[0]).slice(0, 2).join('') : '?');
  const bg = tone || `oklch(0.72 0.10 ${(name || '').charCodeAt(0) * 7 % 360})`;
  return (
    <div className={`avatar avatar-${size} ${className}`} style={{ background: bg }}>
      {init.toUpperCase()}
    </div>
  );
};

// Status badge
const Badge = ({ kind = 'grey', children, dot = true, className = '' }) => (
  <span className={`badge badge-${kind} ${className}`}>
    {dot && <span className="badge-dot"></span>}
    {children}
  </span>
);

const DocPill = ({ status, children }) => {
  const tone = status === 'green' ? { bg: 'var(--green-soft)', dot: 'var(--green)', fg: 'oklch(0.42 0.10 145)' }
    : status === 'amber' ? { bg: 'var(--amber-soft)', dot: 'var(--amber)', fg: 'oklch(0.48 0.13 65)' }
    : { bg: 'var(--red-soft)', dot: 'var(--red)', fg: 'oklch(0.42 0.16 25)' };
  return (
    <span className="doc-pill" style={{ background: tone.bg, color: tone.fg }}>
      <span className="doc-pill-dot" style={{ background: tone.dot }}></span>
      {children}
    </span>
  );
};

// Avatar stack
const AvatarStack = ({ users, max = 3, size = 'sm' }) => {
  const shown = users.slice(0, max);
  const more = users.length - max;
  return (
    <div className="avatar-stack">
      {shown.map((u, i) => <Avatar key={i} name={u.name} initials={u.initials} size={size} tone={u.tone} />)}
      {more > 0 && <div className={`avatar avatar-${size} more`}>+{more}</div>}
    </div>
  );
};

// Format helpers
const fmtCurrency = (n) => 'AED ' + n.toLocaleString('en-US');
const fmtDate = (iso) => {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
};
const fmtDateShort = (iso) => {
  if (!iso) return '—';
  const d = new Date(iso);
  return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
};
const daysFromNow = (iso) => {
  const d = new Date(iso);
  const today = new Date('2026-04-29');
  return Math.round((d - today) / 86400000);
};

const statusToBadge = (s) => {
  if (s === 'approved' || s === 'done' || s === 'fulfilled') return 'green';
  if (s === 'pending' || s === 'pending review' || s === 'pending approval' || s === 'in progress') return 'amber';
  if (s === 'rejected') return 'red';
  if (s === 'new' || s === 'open') return 'blue';
  if (s === 'quote') return 'accent';
  return 'grey';
};

// Toast container — hooks into window.showToast(...)
const ToastStack = () => {
  const [toasts, setToasts] = React.useState([]);
  React.useEffect(() => {
    window.showToast = (toast) => {
      const id = Math.random().toString(36).slice(2);
      setToasts(t => [...t, { ...toast, id }]);
      setTimeout(() => setToasts(t => t.filter(x => x.id !== id)), toast.duration || 4200);
    };
  }, []);
  return (
    <div className="toast-stack">
      {toasts.map(t => (
        <div key={t.id} className="toast">
          <div className="toast-icon"><Icon name={t.icon || 'check'} size={14}/></div>
          <div style={{ flex: 1 }}>
            <div className="toast-title">{t.title}</div>
            {t.body && <div className="toast-body">{t.body}</div>}
          </div>
        </div>
      ))}
    </div>
  );
};

// Modal
const Modal = ({ open, onClose, title, children, footer, size = 'md', headerExtra }) => {
  if (!open) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className={`modal ${size === 'lg' ? 'modal-lg' : ''}`} onClick={e => e.stopPropagation()}>
        <div className="modal-header">
          <div>
            <h3 className="modal-title">{title}</h3>
            {headerExtra}
          </div>
          <button className="icon-btn" style={{ color: 'var(--text-mute)' }} onClick={onClose}><Icon name="x"/></button>
        </div>
        <div className="modal-body">{children}</div>
        {footer && <div className="modal-footer">{footer}</div>}
      </div>
    </div>
  );
};

// Empty placeholder div for product/people imagery
const Placeholder = ({ label, height = 120 }) => (
  <div style={{
    height,
    background: 'repeating-linear-gradient(135deg, var(--surface-3) 0 8px, var(--surface-2) 8px 16px)',
    borderRadius: 'var(--radius-md)',
    display: 'grid', placeItems: 'center',
    fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-mute)',
    border: '1px dashed var(--line)',
  }}>{label}</div>
);

// Saif Al Khyeli Group lockup — original brand SVG, referenced as-is.
// `size` is the rendered height in px; aspect ratio (1481.5:915.53 ≈ 1.62:1) is preserved.
const SaifLogo = ({ size = 44, className = '' }) => {
  return (
    <img src="saif-logo.svg?v=3" alt="Saif Al Khyeli Group"
      className={className}
      style={{ height: size, width: 'auto', display: 'block' }}/>
  );
};

Object.assign(window, { Icon, Avatar, AvatarStack, Badge, DocPill, ToastStack, Modal, Placeholder, SaifLogo, fmtCurrency, fmtDate, fmtDateShort, daysFromNow, statusToBadge });