/* AIWine CRM — shared UI primitives + formatting helpers (window.UI) */
const UI = {};

UI.Ic = function Ic({ name, w = 18, c, style }) {
  const svg = (window.CRMICON[name] || window.CRMICON.sparkle)({ w, c });
  return <span className="ic" style={{ display: 'inline-flex', ...style }} dangerouslySetInnerHTML={{ __html: svg }} />;
};

/* ---------- formatting ---------- */
UI.fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString('en-NZ', { day: 'numeric', month: 'short', year: 'numeric' }) : '—';
UI.fmtShort = (iso) => iso ? new Date(iso).toLocaleDateString('en-NZ', { day: 'numeric', month: 'short' }) : '—';
UI.rel = (iso) => {
  if (!iso) return '—';
  const d = (Date.now() - new Date(iso).getTime()) / 86400000;
  if (d < 0) { const a = Math.abs(d); if (a < 1) return 'today'; if (a < 2) return 'tomorrow'; return 'in ' + Math.round(a) + 'd'; }
  if (d < 1 / 24) return 'just now';
  if (d < 1) return Math.round(d * 24) + 'h ago';
  if (d < 30) return Math.round(d) + 'd ago';
  if (d < 365) return Math.round(d / 30) + 'mo ago';
  return Math.round(d / 365) + 'y ago';
};
UI.money = (n, country) => {
  const cur = country === 'AU' ? 'AUD' : 'NZD';
  return new Intl.NumberFormat('en-NZ', { style: 'currency', currency: cur, maximumFractionDigits: 0 }).format(n);
};
UI.initials = (name) => (name || '?').split(' ').map((x) => x[0]).slice(0, 2).join('').toUpperCase();
UI.pct = (n, of) => of ? Math.round((n / of) * 100) + '%' : '—';

/* ---------- status maps ---------- */
UI.TIER_LABEL = { prospect: 'Prospect', listed: 'Listed', partner: 'Partner', founding: 'Founding' };
UI.TIER_CLASS = { prospect: 'badge-muted', listed: '', partner: 'badge-brass', founding: 'badge-claret' };
UI.STATUS_CLASS = { active: 'badge-green', onboarding: 'badge-brass', stale: 'badge-claret', prospect: 'badge-muted', churned: 'badge-muted', open: 'badge-claret', waiting: 'badge-brass', closed: 'badge-green', sent: 'badge-green', sending: 'badge-brass', scheduled: 'badge-brass', draft: 'badge-muted', live: 'badge-green', in: 'badge-green', low: 'badge-brass', out: 'badge-muted', complete: 'badge-green', partial: 'badge-brass', pending: 'badge-muted', premium: 'badge-claret', taster: '', processed: 'badge-green', 'needs review': 'badge-brass' };

UI.Badge = function Badge({ v, dot, children }) {
  return <span className={'badge ' + (UI.STATUS_CLASS[v] || '')}>{dot && <span className={'dot' + (v === 'open' ? ' pulse' : '')}></span>}{children || v}</span>;
};
UI.CTag = ({ c }) => <span className={'ctag ' + (c || '').toLowerCase()}>{c}</span>;

UI.Score = function Score({ v, color }) {
  const col = color || (v >= 70 ? 'var(--green)' : v >= 40 ? 'var(--brass)' : 'var(--claret)');
  return (
    <span className="score">
      <span className="bar"><i style={{ width: v + '%', background: col }}></i></span>
      <span className="val">{v}</span>
    </span>
  );
};

/* ---------- layout pieces ---------- */
UI.StatTile = function StatTile({ label, num, delta, deltaClass, onClick }) {
  return (
    <div className={'stat-tile' + (onClick ? ' clickable' : '')} onClick={onClick}>
      <div className="label">{label}</div>
      <div className="num">{num}</div>
      {delta != null && <div className={'delta ' + (deltaClass || 'up')}>{delta}</div>}
    </div>
  );
};

UI.Tabs = function Tabs({ items, value, onChange }) {
  return (
    <div className="tabs">
      {items.map((it) => (
        <button key={it.id} className={value === it.id ? 'on' : ''} onClick={() => onChange(it.id)}>
          {it.label}{it.count != null && <span className="count">{it.count}</span>}
        </button>
      ))}
    </div>
  );
};

UI.Seg = function Seg({ options, value, onChange, mono }) {
  return (
    <div className={'seg' + (mono ? ' seg-mono' : '')}>
      {options.map((o) => {
        const v = typeof o === 'string' ? o : o.value;
        const l = typeof o === 'string' ? o : o.label;
        return <button key={v} className={value === v ? 'on' : ''} onClick={() => onChange(v)}>{l}</button>;
      })}
    </div>
  );
};

UI.Search = function Search({ value, onChange, placeholder }) {
  return (
    <div className="searchbox">
      <UI.Ic name="search" w={15} />
      <input className="input" value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder || 'Search…'} />
    </div>
  );
};

UI.Drawer = function Drawer({ title, sub, onClose, children, foot }) {
  React.useEffect(() => {
    const fn = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [onClose]);
  return (
    <React.Fragment>
      <div className="scrim" onClick={onClose}></div>
      <div className="drawer" role="dialog">
        <div className="drawer-head">
          <div>
            {sub && <div className="label" style={{ marginBottom: 5 }}>{sub}</div>}
            <h2 className="serif" style={{ margin: 0, fontSize: 24, fontWeight: 500 }}>{title}</h2>
          </div>
          <button className="btn-quiet" onClick={onClose} style={{ marginTop: 2 }}><UI.Ic name="x" w={17} /></button>
        </div>
        <div className="drawer-body">{children}</div>
        {foot && <div className="drawer-foot">{foot}</div>}
      </div>
    </React.Fragment>
  );
};

UI.Modal = function Modal({ title, sub, onClose, children, foot, wide }) {
  React.useEffect(() => {
    const fn = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', fn);
    return () => window.removeEventListener('keydown', fn);
  }, [onClose]);
  return (
    <React.Fragment>
      <div className="scrim" onClick={onClose}></div>
      <div className="modal-wrap" onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
        <div className="modal" style={wide ? { width: 'min(860px,100%)' } : null}>
          <div className="drawer-head">
            <div>
              {sub && <div className="label" style={{ marginBottom: 5 }}>{sub}</div>}
              <h2 className="serif" style={{ margin: 0, fontSize: 24, fontWeight: 500 }}>{title}</h2>
            </div>
            <button className="btn-quiet" onClick={onClose} style={{ marginTop: 2 }}><UI.Ic name="x" w={17} /></button>
          </div>
          <div className="drawer-body">{children}</div>
          {foot && <div className="drawer-foot">{foot}</div>}
        </div>
      </div>
    </React.Fragment>
  );
};

UI.Empty = ({ msg, hint }) => (
  <div className="empty">
    <div className="glyph">nothing here yet</div>
    <div style={{ fontWeight: 600, color: 'var(--ink-soft)' }}>{msg}</div>
    {hint && <div style={{ fontSize: 12.5, marginTop: 4 }}>{hint}</div>}
  </div>
);

UI.KV = ({ rows }) => (
  <div className="kv">
    {rows.map(([k, v], i) => <React.Fragment key={i}><div className="k">{k}</div><div className="v">{v == null || v === '' ? '—' : v}</div></React.Fragment>)}
  </div>
);

UI.Field = ({ label, children }) => (
  <div className="field"><span className="label">{label}</span>{children}</div>
);

UI.HBar = function HBar({ label, value, max, color, suffix }) {
  return (
    <div className="hbar-row">
      <span style={{ fontWeight: 600 }}>{label}</span>
      <span className="bar"><i style={{ width: Math.max(2, (value / (max || 1)) * 100) + '%', background: color || 'var(--claret)' }}></i></span>
      <span className="n">{value}{suffix || ''}</span>
    </div>
  );
};

UI.Spark = function Spark({ values, hotLast }) {
  const max = Math.max(...values, 1);
  return (
    <div className="spark">
      {values.map((v, i) => <i key={i} className={hotLast && i === values.length - 1 ? 'hot' : ''} style={{ height: Math.max(4, (v / max) * 100) + '%' }}></i>)}
    </div>
  );
};

UI.Avatar = ({ name, brass, lg }) => <span className={'avatar' + (brass ? ' brass' : '') + (lg ? ' lg' : '')}>{UI.initials(name)}</span>;

/* ---------- store hook + toast ---------- */
UI.useStore = function useStore() {
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => window.CRMStore.onChange(force), []);
  return window.CRMStore;
};

UI.toast = function toast(msg) {
  const host = document.getElementById('toast-host');
  const el = document.createElement('div');
  el.className = 'toast'; el.textContent = msg;
  host.appendChild(el);
  setTimeout(() => { el.style.opacity = '0'; el.style.transition = 'opacity 0.3s'; }, 2200);
  setTimeout(() => el.remove(), 2600);
};

/* country filter helper: 'ALL' | 'NZ' | 'AU' */
UI.inCountry = (row, c) => c === 'ALL' || row.country === c || row.country === 'ALL';

window.UI = UI;