// FRAZIER Finance OS — shared UI kit (ported pattern from the ops app's
// ops-ui.jsx/ops-kit.jsx: inline-SVG icon set + a few generic presentational
// components). Pure skin, no finance-data coupling, global scope (no build
// framework — see build/build.js).

function finCls(...xs) { return xs.filter(Boolean).join(' '); }

function finEscapeXml(v) {
  return String(v === null || v === undefined ? '' : v)
    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;').replace(/'/g, '&apos;');
}

// Trimmed icon set — only what Phase 1's shell/Home/Jarvis/login need.
// Same line style as the ops app's OPS_ICON_PATHS (viewBox 24, stroke 1.75).
const FIN_ICON_PATHS = {
  home:     '<path d="M4 10.4 12 4l8 6.4V19a1.5 1.5 0 0 1-1.5 1.5H15v-6H9v6H5.5A1.5 1.5 0 0 1 4 19z"/>',
  invoice:  '<path d="M6 3h8l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v4h4"/><path d="M9 12h6M9 16h4"/>',
  payroll:  '<circle cx="9" cy="8.2" r="3.4"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><path d="M15.5 4.9a3.4 3.4 0 0 1 0 6.6"/><path d="M18 14.4c2.1.8 3.5 2.7 3.5 5.6"/>',
  forecast: '<path d="M4 19V5"/><path d="M4 19h16"/><path d="m6.5 15 4-4.5 3 2.5 5-6"/>',
  jarvis:   '<path d="m12 3 1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z"/><path d="m18.5 15.5.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z"/>',
  files:    '<path d="M3.5 7a1.5 1.5 0 0 1 1.5-1.5h4l2 2.2h8A1.5 1.5 0 0 1 20.5 9v9A1.5 1.5 0 0 1 19 19.5H5A1.5 1.5 0 0 1 3.5 18z"/>',
  warn:     '<path d="M12 4.5 2.8 20h18.4z"/><path d="M12 10v4.5"/><circle cx="12" cy="17.6" r=".7" fill="currentColor" stroke="none"/>',
  check:    '<path d="m5 12.5 4.5 4.5L19 7.5"/>',
  chevr:    '<path d="m9.5 6 6 6-6 6"/>',
  chevl:    '<path d="m14.5 6-6 6 6 6"/>',
  x:        '<path d="M6 6l12 12M18 6 6 18"/>',
  logout:   '<path d="M14 4.5h4a1.5 1.5 0 0 1 1.5 1.5v12a1.5 1.5 0 0 1-1.5 1.5h-4"/><path d="M9.5 16.5 5 12l4.5-4.5"/><path d="M5 12h10"/>',
  clock:    '<circle cx="12" cy="12.5" r="8"/><path d="M12 8v5l3 2"/>',
  calendar: '<rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/>',
  send:     '<path d="M4.5 12 20 4.5l-3.2 15.5-4.6-4.9z"/><path d="m12.2 15.1-3.4 3.6v-5.1"/>',
  search:   '<circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.3-4.3"/>',
};
function FinIcon({ name, size = 16, className = '', title }) {
  const d = FIN_ICON_PATHS[name];
  if (!d) return null;
  return (
    <svg className={'fin-ic ' + className} width={size} height={size} viewBox="0 0 24 24"
      aria-hidden={title ? undefined : 'true'} role={title ? 'img' : undefined} focusable="false"
      fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"
      dangerouslySetInnerHTML={{ __html: (title ? '<title>' + finEscapeXml(title) + '</title>' : '') + d }} />
  );
}

function FinPageHead({ eyebrow, title, sub, actions }) {
  return (
    <header className="fin-pagehead">
      <div className="fin-pagehead-main">
        {eyebrow ? <div className="fin-eyebrow">{eyebrow}</div> : null}
        <h1>{title}</h1>
        {sub ? <p className="fin-pagehead-sub">{sub}</p> : null}
      </div>
      {actions ? <div className="fin-pagehead-cta">{actions}</div> : null}
    </header>
  );
}

function FinPanel({ title, sub, icon, action, children, className, tone }) {
  const adaKepala = title || sub || action || icon;
  return (
    <section className={finCls('fin-panel', tone ? 'is-' + tone : '', className)}>
      {adaKepala ? (
        <header className="fin-panel-h">
          {icon ? <span className="fin-panel-ico" aria-hidden="true"><FinIcon name={icon} size={16} /></span> : null}
          <div className="fin-panel-ht">
            {title ? <h2 className="fin-panel-t">{title}</h2> : null}
            {sub ? <p className="fin-panel-sub">{sub}</p> : null}
          </div>
          {action ? <div className="fin-panel-act">{action}</div> : null}
        </header>
      ) : null}
      {children}
    </section>
  );
}

// tone: 'ok' | 'warn' | 'crit' | 'info' | 'neutral'
function FinStatusPill({ tone = 'neutral', dot, children, className, title }) {
  return (
    <span className={finCls('fin-pill', 'is-' + tone, className)} title={title}>
      {dot ? <i className="fin-pill-dot" aria-hidden="true" /> : null}
      {children}
    </span>
  );
}

Object.assign(window, { finCls, FinIcon, FinPageHead, FinPanel, FinStatusPill, FIN_ICON_PATHS });