/* global React */

// Logomark — Argyle diamond lattice
const Logomark = ({ size = 22 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 1.5 L22.5 12 L12 22.5 L1.5 12 Z" fill="var(--bg-inverse)" />
    <path d="M12 5 L19 12 L12 19 L5 12 Z" stroke="var(--amber)" strokeWidth="1.2" fill="none" />
    <path d="M12 8.2 L15.8 12 L12 15.8 L8.2 12 Z" fill="var(--amber)" />
  </svg>
);

const Icon = ({ name, size = 16 }) => {
  const paths = {
    search:   <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></>,
    bell:     <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    user:     <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    chev:     <path d="m6 9 6 6 6-6"/>,
    right:    <path d="m9 6 6 6-6 6"/>,
    left:     <path d="m15 6-6 6 6 6"/>,
    download: <><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M4 21h16"/></>,
    plus:     <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    filter:   <><path d="M3 5h18"/><path d="M6 12h12"/><path d="M10 19h4"/></>,
    check:    <path d="m5 12 5 5L20 7"/>,
    x:        <><path d="M6 6l12 12"/><path d="M18 6 6 18"/></>,
    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.5v.3a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.6 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.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 0 1 0-4h.1A1.7 1.7 0 0 0 4.7 9a1.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 9 4.7a1.7 1.7 0 0 0 1-1.5V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 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 0 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></>,
    dot:      <circle cx="12" cy="12" r="3" />,
    lock:     <><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></>,
    external: <><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/></>,
    arrow:    <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"
         style={{flex:'none'}} aria-hidden="true">
      {paths[name] || null}
    </svg>
  );
};

const Pill = ({ kind = 'default', dot = false, children }) => {
  const cls = ['pill'];
  if (kind !== 'default') cls.push('pill--' + kind);
  if (dot) cls.push('pill--dot');
  return <span className={cls.join(' ')}>{children}</span>;
};

const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;

const Help = () => <span className="help-ring" title="More info">?</span>;

const CardHead = ({ title, help, actions, eyebrow }) => (
  <header className="card__head">
    <div>
      {eyebrow && <div className="eyebrow" style={{marginBottom:4}}>{eyebrow}</div>}
      <div className="card__title">
        <h3 className="h3">{title}</h3>
        {help && <Help />}
      </div>
    </div>
    {actions && <div className="card__actions">{actions}</div>}
  </header>
);

const Kpi = ({ label, value, delta, deltaKind }) => (
  <div className="kpi">
    <div className="kpi__label">{label}</div>
    <div className="kpi__value">{value}</div>
    {delta && <div className={`kpi__delta kpi__delta--${deltaKind||'pos'}`}>{delta}</div>}
  </div>
);

const Stat = ({ label, value, hint }) => (
  <div className="stat">
    <div className="stat__label">{label}</div>
    <div className="stat__value">{value}</div>
    {hint && <div className="muted text-sm" style={{marginTop:4}}>{hint}</div>}
  </div>
);

const Segmented = ({ value, options, onChange }) => (
  <div className="segmented">
    {options.map(o => (
      <button key={o.value} aria-pressed={value === o.value} onClick={() => onChange(o.value)}>{o.label}</button>
    ))}
  </div>
);

const Tabs = ({ value, onChange, items }) => (
  <div className="tabs" role="tablist">
    {items.map(t => (
      <button key={t.value} role="tab" aria-selected={value === t.value}
              onClick={() => onChange(t.value)} className="tab">
        {t.label}
        {t.count != null && <span className="count">{t.count}</span>}
      </button>
    ))}
  </div>
);

const fmtUSD = (n, compact) => {
  if (n == null) return '—';
  if (compact && Math.abs(n) >= 1e6) return '$' + (n/1e6).toFixed(2) + 'M';
  if (compact && Math.abs(n) >= 1e3) return '$' + (n/1e3).toFixed(1) + 'k';
  return '$' + n.toLocaleString(undefined, { maximumFractionDigits: 2 });
};
const fmtPct = (n, sign=false) => (sign && n > 0 ? '+' : '') + n.toFixed(2) + '%';
const fmtNum = (n) => n.toLocaleString();

Object.assign(window, {
  Logomark, Icon, Pill, Eyebrow, Help, CardHead, Kpi, Stat, Segmented, Tabs,
  fmtUSD, fmtPct, fmtNum,
});