// Icons + small shared UI primitives.

const Icon = ({ name, size = 16, ...rest }) => {
  const s = { width: size, height: size, ...(rest.style || {}) };
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round', ...rest, style: s };
  const paths = {
    sidebar:   <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></>,
    plus:      <><path d="M12 5v14M5 12h14"/></>,
    search:    <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    send:      <><path d="M5 12l14-7-4 7 4 7-14-7z"/></>,
    settings:  <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1A2 2 0 1 1 4.3 17l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.7 9 1.7 1.7 0 0 0 4.4 7.2l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
    bookmark:  <><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    schedule:  <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    upload:    <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></>,
    download:  <><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></>,
    copy:      <><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></>,
    thumb_up:  <><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.3a2 2 0 0 0 2-1.7l1.4-9A2 2 0 0 0 19.7 9z"/><path d="M7 22V11"/></>,
    thumb_dn:  <><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.7a2 2 0 0 0-2 1.7l-1.4 9A2 2 0 0 0 4.3 15z"/><path d="M17 2v11"/></>,
    chevron_r: <><path d="M9 18l6-6-6-6"/></>,
    chevron_d: <><path d="M6 9l6 6 6-6"/></>,
    x:         <><path d="M18 6L6 18M6 6l12 12"/></>,
    sparkle:   <><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 17l.7 2L21.5 20l-1.8.6-.7 1.7-.7-1.7L16.5 20l1.8-.7z"/></>,
    check:     <><path d="M5 13l4 4L19 7"/></>,
    info:      <><circle cx="12" cy="12" r="9"/><path d="M12 8h.01M11 12h1v5h1"/></>,
    warning:   <><path d="M12 3l11 19H1z"/><path d="M12 9v6M12 18h.01"/></>,
    dax:       <><path d="M4 7h16M4 12h12M4 17h8"/></>,
    table:     <><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/></>,
    chart:     <><path d="M3 21V3M3 21h18"/><path d="M7 17V11M11 17V7M15 17V13M19 17V9"/></>,
    pin:       <><path d="M12 17v5M9 7l6 0M8 7l8 0c.6 4-1.5 6-4 6S8 11 8 7z"/></>,
    file:      <><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"/></>,
    globe:     <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z"/></>,
    mic:       <><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v4"/></>,
    paperclip: <><path d="M21 12l-9 9a5 5 0 0 1-7-7l9-9a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8-8"/></>,
    layers:    <><path d="M12 2L2 7l10 5 10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></>,
    history:   <><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l4 2"/></>,
    branches:  <><circle cx="6" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="12" r="2"/><path d="M6 8v8M8 18h6a2 2 0 0 0 2-2v-2M8 6h6a2 2 0 0 1 2 2v2"/></>,
    flask:     <><path d="M9 3h6M10 3v6L4 19c-1 2 1 2 2 2h12c1 0 3 0 2-2L14 9V3"/></>,
    deck:      <><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/></>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

const AgentChip = ({ agent, withReason, reason }) => {
  const A = window.OMNI_DATA.AGENTS.find(a => a.id === agent);
  if (!A) return null;
  return (
    <div className="agent-chip" title={A.desc}>
      <span className="glyph" style={{ background: A.tint }}>{A.icon}</span>
      <span className="name">{A.name}</span>
      {withReason && reason && (
        <>
          <span className="reason" style={{ marginLeft: 4 }}>
            <span className="arrow">›</span> {reason}
          </span>
        </>
      )}
    </div>
  );
};

const fmtMoney = (n) => '$' + n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const fmtInt = (n) => n.toLocaleString('en-US');

Object.assign(window, { Icon, AgentChip, fmtMoney, fmtInt });