/* MitaOS · shared UI primitives used across screens.
   Assembled from the Starboard kit; a few small bespoke pieces
   (HelpTip, icon set, mono KpiTile) layered on the tokens. */

/* ── line icon set (SVG, no emoji/icon-font per Starboard) ── */
const I = {
  command:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>,
  discovery:<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>,
  outreach: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18v12H3z"/><path d="m3 7 9 6 9-6"/></svg>,
  briefs:   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M5 3h9l5 5v13H5z"/><path d="M14 3v5h5"/><path d="M8 13h8M8 17h6"/></svg>,
  qa:       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12l2 2 4-4"/><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/></svg>,
  publish:  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="17" rx="2"/><path d="M3 9h18M8 2v4M16 2v4"/></svg>,
  perf:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19V5"/><path d="M4 19h16"/><path d="m7 15 3-4 3 2 4-6"/></svg>,
  learning: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3a9 9 0 1 0 9 9"/><path d="M21 3v6h-6"/><circle cx="12" cy="12" r="3"/></svg>,
  bolt:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg>,
  check:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>,
  x:        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="m6 6 12 12M18 6 6 18"/></svg>,
  plus:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>,
  arrow:    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  chev:     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6"/></svg>,
};

/* ── HelpTip — teaches a term on hover/focus (taste: help-icon) ── */
const HelpTip = ({ children }) => (
  <span className="mt-help">
    <button type="button" className="mt-help__btn" aria-label="More info">?</button>
    <span className="mt-help__bubble" role="tooltip">{children}</span>
  </span>
);

/* ── ScreenHead — question-led page header ── */
const ScreenHead = ({ eyebrow, question, sub, actions }) => (
  <div className="mt-page__head mt-fade">
    <div className="mt-spread">
      <div>
        {eyebrow && <p className="mt-eyebrow">{eyebrow}</p>}
        <h1 className="mt-question">{question}</h1>
        {sub && <p className="mt-sub">{sub}</p>}
      </div>
      {actions && <div className="mt-cluster">{actions}</div>}
    </div>
  </div>
);

const SectionH = ({ title, sub, action }) => (
  <div className="mt-section__h mt-spread">
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--space-2xs)' }}>
      <h2>{title}</h2>
      {sub && <span className="mt-sub">{sub}</span>}
    </div>
    {action}
  </div>
);

/* ── Mono KPI tile with optional count-up on mount ── */
const Kpi = ({ label, value, raw, delta, dir = 'up', help, countTo, format }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current && typeof countTo === 'number' && window.adCountUp) {
      const fmt = format || ((v) => Math.round(v).toLocaleString('en-US'));
      return window.adCountUp(ref.current, { to: countTo, duration: 850, format: fmt });
    }
  }, [countTo]);
  return (
    <div className="mt-kpi">
      <p className="mt-kpi__label">{label}{help && <HelpTip>{help}</HelpTip>}</p>
      <p className="mt-kpi__value" ref={typeof countTo === 'number' ? ref : null}>{value}</p>
      {delta != null && (
        <p className={`mt-kpi__delta ${dir}`}>{dir === 'up' ? '▴' : '▾'} {delta} <span>{/* hint slot */}</span></p>
      )}
    </div>
  );
};

/* ── Product chip (icon avatar + name) ── */
const ProductChip = ({ id, mono }) => {
  const p = MITA.products.find((x) => x.id === id);
  if (!p) return null;
  return (
    <span className="mt-cluster" style={{ gap: 8 }}>
      <Avatar initials={p.initials} gradient={p.gradient} size="sm" square />
      <span style={{ fontWeight: 600, fontSize: 13 }}>{p.name}</span>
      {mono && <span className="mt-tag">{p.domain}</span>}
    </span>
  );
};

/* small helper: a labelled status dot color by key */
const STATUS_TONE = {
  pass: 'success', Published: 'success', Healthy: 'success', active: 'success', Approved: 'success',
  review: 'warning', Scheduled: 'info', Warming: 'warning', 'In review': 'warning', shortlisted: 'info', contacted: 'info',
  fail: 'error', Failed: 'error', 'Rate-limited': 'error', rejected: 'error',
};

Object.assign(window, { I, HelpTip, ScreenHead, SectionH, Kpi, ProductChip, STATUS_TONE });