/* Shared UI primitives + icon set (lucide-style paths, matches the real app) */

const ICONS = {
  dashboard: '<path d="M3 10.5 12 3l9 7.5"/><path d="M5.5 9.8V20.5h13V9.8"/>',
  flow: '<circle cx="5" cy="6" r="2.2"/><circle cx="5" cy="18" r="2.2"/><circle cx="19" cy="12" r="2.2"/><path d="M7.2 6H13a3 3 0 0 1 3 3v.4M7.2 18H13a3 3 0 0 0 3-3v-.4"/>',
  board: '<rect x="4" y="5" width="4" height="14" rx="1"/><rect x="10" y="5" width="4" height="9" rx="1"/><rect x="16" y="5" width="4" height="12" rx="1"/>',
  book: '<path d="M12 7v13"/><path d="M3 17.5V5a1 1 0 0 1 1-1h4.5A3.5 3.5 0 0 1 12 7a3.5 3.5 0 0 1 3.5-3H20a1 1 0 0 1 1 1v12.5a1 1 0 0 1-1 1h-5a2.5 2.5 0 0 0-3 0 2.5 2.5 0 0 0-3 0H4a1 1 0 0 1-1-1z"/>',
  settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2Z"/><circle cx="12" cy="12" r="3"/>',
  bell: '<path d="M18 8.5a6 6 0 0 0-12 0c0 6-2.5 7.5-2.5 7.5h17S18 14.5 18 8.5"/><path d="M10 19.5a2 2 0 0 0 4 0"/>',
  boxes: '<path d="M3.5 8 12 4l8.5 4-8.5 4z"/><path d="M3.5 8v8l8.5 4 8.5-4V8"/><path d="M12 12v8"/>',
  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/>',
  back: '<path d="M15 5l-7 7 7 7"/>',
  close: '<path d="M6 6l12 12M18 6L6 18"/>',
  chevR: '<path d="M9 6l6 6-6 6"/>',
  chevD: '<path d="M6 9l6 6 6-6"/>',
  plus: '<path d="M12 5v14M5 12h14"/>',
  search: '<circle cx="11" cy="11" r="7"/><path d="M21 21l-3.5-3.5"/>',
  filter: '<path d="M4 6h16M7 12h10M10 18h4"/>',
  sort: '<path d="M7 4v16M7 4 4 7M7 4l3 3M17 20V4M17 20l-3-3M17 20l3-3"/>',
  view: '<circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="9"/>',
  rows: '<path d="M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01"/>',
  target: '<circle cx="12" cy="12" r="8" stroke-dasharray="3 3"/>',
  triangle: '<path d="M12 3 2 20h20z"/>',
  alertTri: '<path d="M10.3 4 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/>',
  check: '<path d="M20 6 9 17l-5-5"/>',
  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
  pkg: '<path d="M3.5 8 12 4l8.5 4-8.5 4z"/><path d="M3.5 8v8l8.5 4 8.5-4V8"/>',
  pin: '<path d="M12 21s7-5.7 7-11a7 7 0 0 0-14 0c0 5.3 7 11 7 11z"/><circle cx="12" cy="10" r="2.5"/>',
  users: '<circle cx="9" cy="8" r="3.2"/><path d="M3.5 20c0-3.3 2.5-5.5 5.5-5.5s5.5 2.2 5.5 5.5"/><path d="M16 5.5a3 3 0 0 1 0 6"/>',
  shield: '<path d="M12 3 5 6v6c0 4 3 6.5 7 8 4-1.5 7-4 7-8V6z"/>',
  factory: '<path d="M4 20V9l6 4V9l6 4V6h4v14z"/><path d="M8 20v-4M12 20v-4M16 20v-4"/>',
  scissors: '<circle cx="6" cy="6" r="2.4"/><circle cx="6" cy="18" r="2.4"/><path d="M20 4 8.1 15.9M14.5 14.5 20 20M8.1 8.1 12 12"/>',
  swatch: '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>',
  flag: '<path d="M5 21V4M5 4h11l-2 4 2 4H5"/>',
  pause: '<circle cx="12" cy="12" r="9"/><path d="M10 9v6M14 9v6"/>',
  google: '<path d="M21 12.2c0-.6-.1-1.2-.2-1.8H12v3.5h5.1a4.4 4.4 0 0 1-1.9 2.9v2.4h3.1c1.8-1.7 2.8-4.2 2.8-7z"/><path d="M12 21c2.5 0 4.7-.8 6.3-2.3l-3.1-2.4c-.9.6-2 .9-3.2.9-2.4 0-4.5-1.6-5.2-3.8H3.6v2.5A9 9 0 0 0 12 21z"/><path d="M6.8 13.4a5.4 5.4 0 0 1 0-3.4V7.5H3.6a9 9 0 0 0 0 8.1z"/><path d="M12 6.6c1.3 0 2.5.5 3.5 1.4l2.6-2.6A9 9 0 0 0 3.6 7.5l3.2 2.5c.7-2.2 2.8-3.4 5.2-3.4z"/>',
};

function Icon({ name, style, cls }) {
  return (
    <svg viewBox="0 0 24 24" className={cls} style={style} fill="none" stroke="currentColor"
      dangerouslySetInnerHTML={{ __html: ICONS[name] || '' }} />
  );
}

function Pill({ kind, children }) {
  return <span className={`pill ${kind}`}>{children}</span>;
}

function Signal({ kind, children }) {
  if (!children) return <span className="sig empty">Sin alerta</span>;
  return <span className="sig"><span className={`d ${kind}`}></span>{children}</span>;
}

function ProgressBar({ pct, kind }) {
  if (pct === null || pct === undefined)
    return <span style={{ color: 'var(--stone)' }}>—</span>;
  return (
    <div className="prog">
      <div className="bar"><i className={kind} style={{ width: pct + '%' }}></i></div>
      <span className="pct">{pct}%</span>
    </div>
  );
}

function Tile({ mono, kind }) {
  return <div className={`mtile ${kind || ''}`}>{mono}</div>;
}

/* Panel top row — back (left) + close (right), matching the Companies layout.
   `crumb` sits next to the back arrow; `right` holds an optional action before close. */
function TopBar({ crumb, right, onBack, onClose }) {
  return (
    <div className="topbar">
      {onBack && <button className="icon-btn" aria-label="Volver" onClick={onBack}><Icon name="back" /></button>}
      {crumb}
      <div className="topbar-end">
        {right}
        {onClose && <button className="icon-btn" aria-label="Cerrar" onClick={onClose}><Icon name="close" /></button>}
      </div>
    </div>
  );
}

Object.assign(window, { Icon, Pill, Signal, ProgressBar, Tile, TopBar });