// admin/admin-ui.jsx — shared icons + UI primitives for the admin

const AIcon = ({ name, size = 18, style, className }) => {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round', style, className };
  switch (name) {
    case 'dashboard': return <svg {...p}><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>;
    case 'box': return <svg {...p}><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>;
    case 'layers': return <svg {...p}><path d="m12 2 9 5-9 5-9-5 9-5z"/><path d="m3 12 9 5 9-5"/><path d="m3 17 9 5 9-5"/></svg>;
    case 'truck': return <svg {...p}><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="1.7"/><circle cx="17" cy="18" r="1.7"/></svg>;
    case 'users': return <svg {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 5.5a3 3 0 0 1 0 5.5M21 20a6 6 0 0 0-4-5.6"/></svg>;
    case 'chat': return <svg {...p}><path d="M21 12a8 8 0 0 1-11.5 7.2L3 21l1.8-6.5A8 8 0 1 1 21 12z"/></svg>;
    case 'wallet': return <svg {...p}><rect x="3" y="6" width="18" height="13" rx="2.5"/><path d="M16 12h3"/><path d="M3 9h12a2 2 0 0 1 0 4"/></svg>;
    case 'gear': return <svg {...p}><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1l2-1.6-2-3.4-2.3 1a7 7 0 0 0-1.7-1l-.4-2.5h-4l-.4 2.5a7 7 0 0 0-1.7 1l-2.3-1-2 3.4L4.1 11a7 7 0 0 0 0 2l-2 1.6 2 3.4 2.3-1a7 7 0 0 0 1.7 1l.4 2.5h4l.4-2.5a7 7 0 0 0 1.7-1l2.3 1 2-3.4-2-1.6a7 7 0 0 0 .1-1z"/></svg>;
    case 'plus': return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case 'search': return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case 'close': return <svg {...p}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case 'check': return <svg {...p}><path d="M4 12.5 9.5 18 20 6"/></svg>;
    case 'edit': return <svg {...p}><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>;
    case 'trash': return <svg {...p}><path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M5 6l1 14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-14"/></svg>;
    case 'copy': return <svg {...p}><rect x="9" y="9" width="12" height="12" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>;
    case 'download': return <svg {...p}><path d="M12 3v12m0 0 4-4m-4 4-4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>;
    case 'pdf': return <svg {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 16h1.5a1.5 1.5 0 0 0 0-3H8v5M14 13v5M14 13h2M14 16h1.5"/></svg>;
    case 'rupee': return <svg {...p}><path d="M6 4h12M6 8h12M16 4c0 4-3 6-7 6h-1l7 8"/></svg>;
    case 'whatsapp': return <svg {...p}><path d="M3 21l1.6-4.8A8.5 8.5 0 1 1 9 20.5L3 21z"/><path d="M8.5 9c.4 0 .7.4 1 1l.5 1c.1.3 0 .6-.2.8l-.4.4a5 5 0 0 0 2.4 2.4l.4-.4c.2-.2.5-.3.8-.2l1 .5c.6.3 1 .6 1 1 0 1.2-1 2-2 2-3 0-6-3-6-6 0-1 .8-2 2-2z"/></svg>;
    case 'send': return <svg {...p}><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>;
    case 'alert': return <svg {...p}><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/></svg>;
    case 'bell': return <svg {...p}><path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>;
    case 'menu': return <svg {...p}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'logout': return <svg {...p}><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5M21 12H9"/></svg>;
    case 'eye': return <svg {...p}><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'phone': return <svg {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.5a16 16 0 0 0 6 6l1.1-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg>;
    case 'pkg-check': return <svg {...p}><path d="M16 16h6M19 13v6"/><path d="M21 10V8l-9-5-9 5v8l9 5 1.5-.8"/><path d="m3 8 9 5 9-5"/></svg>;
    case 'tag': return <svg {...p}><path d="M20 12V4h-8L4 12l8 8z"/><circle cx="15" cy="9" r="1.3"/></svg>;
    case 'cal': return <svg {...p}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case 'star': return <svg {...p} fill="currentColor" stroke="none"><path d="m12 3 2.6 5.7 6.4.8-4.7 4.4 1.2 6.3L12 17l-5.5 3.2L7.7 14 3 9.5l6.4-.8z"/></svg>;
    case 'mic': return <svg {...p}><path d="M12 2a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z"/><path d="M19 11a7 7 0 0 1-14 0M12 18v3"/></svg>;
    case 'chevR': return <svg {...p}><path d="m9 18 6-6-6-6"/></svg>;
    case 'external': return <svg {...p}><path d="M7 17 17 7M8 7h9v9"/></svg>;
    case 'store': return <svg {...p}><path d="M3 9l1.5-5h15L21 9M4 9h16v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"/><path d="M9 20v-6h6v6"/></svg>;
    default: return null;
  }
};

function StatusBadge({ status }) {
  const label = APG.STATUS_LABEL[status] || status;
  return <span className={'badge b-' + status}><span className="badge-dot" style={{ background: 'currentColor' }}></span>{label}</span>;
}
function StockBadge({ p }) {
  const s = APG.stockStatus(p);
  const map = { in: ['b-in', 'In stock'], low: ['b-low', 'Low · ' + p.stock], out: ['b-out', 'Out of stock'] };
  const [cls, label] = map[s];
  return <span className={'badge ' + cls}>{label}</span>;
}

function Modal({ title, onClose, children, foot, wide }) {
  React.useEffect(() => {
    const esc = (e) => e.key === 'Escape' && onClose();
    window.addEventListener('keydown', esc);
    return () => window.removeEventListener('keydown', esc);
  }, []);
  return (
    <div className="scrim" onClick={onClose}>
      <div className={'modal' + (wide ? ' modal-lg' : '')} onClick={(e) => e.stopPropagation()}>
        <div className="modal__head">
          <h2>{title}</h2>
          <button className="btn btn-icon btn-ghost" onClick={onClose}><AIcon name="close" /></button>
        </div>
        <div className="modal__body">{children}</div>
        {foot && <div className="modal__foot">{foot}</div>}
      </div>
    </div>
  );
}

function money(n) { return '₹' + Math.round(n || 0).toLocaleString('en-IN'); }
function dateFmt(t, withTime) { return new Date(t).toLocaleString('en-IN', withTime ? { dateStyle: 'medium', timeStyle: 'short' } : { dateStyle: 'medium' }); }

function Empty({ icon, title, note, action }) {
  return (
    <div style={{ textAlign: 'center', padding: '56px 20px' }}>
      <div style={{ width: 52, height: 52, borderRadius: 999, background: 'var(--a-cream)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--a-forest)', marginBottom: 12 }}>
        <AIcon name={icon} size={24} />
      </div>
      <h3 className="serif" style={{ fontSize: '1.3rem' }}>{title}</h3>
      <p className="muted" style={{ marginTop: 6, maxWidth: 360, marginInline: 'auto' }}>{note}</p>
      {action && <div style={{ marginTop: 16 }}>{action}</div>}
    </div>
  );
}

Object.assign(window, { AIcon, StatusBadge, StockBadge, Modal, money, dateFmt, Empty });