/* ui.jsx — shared primitives for the import/export admin: thin geometric line icons
   (consistent with the Circle-of-Equals mark, single weight — flagged as a net-new
   admin icon set, not house brand), status badges, diff chips, stat tiles, progress.
   Exported to window. */

const { useState: _uiUseState } = React;

/* ---------- Icon set: thin, single-weight, geometric ---------- */
const ICON_PATHS = {
  products: 'M3 7.5 12 3l9 4.5-9 4.5-9-4.5Zm0 0v9l9 4.5 9-4.5v-9M12 12v9',
  upload: 'M12 16V4m0 0-4 4m4-4 4 4M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3',
  download: 'M12 4v12m0 0-4-4m4 4 4-4M4 20h16',
  check: 'M4 12.5 9.5 18 20 6',
  x: 'M6 6l12 12M18 6 6 18',
  plus: 'M12 5v14M5 12h14',
  minus: 'M5 12h14',
  equal: 'M5 9h14M5 15h14',
  alert: 'M12 3 2 20h20L12 3Zm0 6v6m0 3h.01',
  clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-13v5l3.5 2',
  image: 'M3 5h18v14H3V5Zm0 11 5-5 4 4 3-3 6 6M9.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z',
  chevron: 'M9 6l6 6-6 6',
  chevronDown: 'M6 9l6 6 6-6',
  file: 'M6 2h8l4 4v16H6V2Zm8 0v4h4',
  home: 'M3 11.5 12 4l9 7.5M5 10v10h5v-6h4v6h5V10',
  cart: 'M3 4h2l2.5 12h11L21 7H6',
  gauge: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0-9 4-3',
  tag: 'M3 12V4h8l10 10-8 8L3 12Zm5-4.5a1 1 0 1 0 0-.01',
  signout: 'M14 4h5a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-5M10 16l-4-4 4-4M6 12h10',
  search: 'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm6 2-3.5-3.5',
  arrowRight: 'M5 12h14m0 0-5-5m5 5-5 5',
  arrowLeft: 'M19 12H5m0 0 5-5m-5 5 5 5',
  filter: 'M3 5h18l-7 8v6l-4-2v-4L3 5Z',
  refresh: 'M20 11a8 8 0 1 0-.5 4M20 5v6h-6',
  link: 'M9 15l6-6M8 12l-2 2a3 3 0 0 0 4 4l2-2M16 12l2-2a3 3 0 0 0-4-4l-2 2',
};

function Icon({ name, size = 18, stroke = 1.6, style, ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke="currentColor" strokeWidth={stroke} strokeLinecap="round"
      strokeLinejoin="round" style={{ flexShrink: 0, display: 'block', ...style }} {...rest}>
      <path d={ICON_PATHS[name]} />
    </svg>
  );
}

/* ---------- Circle-of-Equals mark (compact, for the admin lockup) ---------- */
function CircleMark({ size = 26 }) {
  const id = 'cm' + Math.random().toString(36).slice(2, 7);
  // six equal nodes on a ring, connected by one wiggling line, empty center
  const cx = 18, cy = 18, R = 13;
  const pts = [];
  for (let i = 0; i < 6; i++) {
    const a = (Math.PI / 3) * i - Math.PI / 2;
    pts.push([cx + R * Math.cos(a), cy + R * Math.sin(a)]);
  }
  // wiggle path: between each pair of nodes, bow the line in/out alternately
  let d = `M ${pts[0][0]} ${pts[0][1]}`;
  for (let i = 1; i <= 6; i++) {
    const p = pts[i % 6];
    const prev = pts[i - 1];
    const mx = (prev[0] + p[0]) / 2, my = (prev[1] + p[1]) / 2;
    const out = i % 2 === 0 ? 1.18 : 0.82;
    const ctrlx = cx + (mx - cx) * out, ctrly = cy + (my - cy) * out;
    d += ` Q ${ctrlx} ${ctrly} ${p[0]} ${p[1]}`;
  }
  return (
    <svg width={size} height={size} viewBox="0 0 36 36" fill="none" style={{ display: 'block' }}>
      <defs>
        <linearGradient id={id} x1="4" y1="6" x2="32" y2="30" gradientUnits="userSpaceOnUse">
          <stop stopColor="#9B8CFF" />
          <stop offset="1" stopColor="#F4C76B" />
        </linearGradient>
      </defs>
      <path d={d} stroke={`url(#${id})`} strokeWidth="1.9" strokeLinejoin="round" strokeLinecap="round" />
      {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.1" fill="#EDEAFF" />)}
    </svg>
  );
}

/* ---------- Status / kind badges ---------- */
const KIND_META = {
  add:       { glyph: 'plus',  label: 'Add',       cssvar: 'add' },
  update:    { glyph: 'equal', label: 'Update',    cssvar: 'update' },
  unchanged: { glyph: 'minus', label: 'Unchanged', cssvar: 'muted' },
  error:     { glyph: 'alert', label: 'Error',     cssvar: 'error' },
};

function KindBadge({ kind, size = 'md' }) {
  const m = KIND_META[kind];
  const pad = size === 'sm' ? '.12rem .5rem .12rem .42rem' : '.22rem .62rem .22rem .5rem';
  return (
    <span className="ie-kind" style={{
      display: 'inline-flex', alignItems: 'center', gap: '.34em',
      fontFamily: 'var(--font-display)', fontWeight: 600,
      fontSize: size === 'sm' ? '.72rem' : '.78rem',
      letterSpacing: '.01em', padding: pad, borderRadius: '999px',
      color: `var(--st-${m.cssvar})`, background: `var(--st-${m.cssvar}-tint)`,
      border: `1px solid var(--st-${m.cssvar}-line)`, whiteSpace: 'nowrap',
    }}>
      <Icon name={m.glyph} size={size === 'sm' ? 11 : 12} stroke={2.1} />
      {m.label}
    </span>
  );
}

/* ---------- Diff value: before → after ---------- */
function DiffPair({ before, after, noop }) {
  if (noop) {
    return <span style={{ color: 'var(--text-on-light-soft)', fontSize: '.9rem' }}>{after} <span style={{ opacity: .6 }}>(unchanged)</span></span>;
  }
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '.5em', flexWrap: 'wrap', fontSize: '.9rem' }}>
      <span style={{ color: 'var(--text-on-light-soft)', textDecoration: 'line-through', textDecorationColor: 'var(--st-error)', textDecorationThickness: '1px', opacity: .8 }}>{before}</span>
      <Icon name="arrowRight" size={13} stroke={1.8} style={{ color: 'var(--text-on-light-soft)', opacity: .7 }} />
      <span style={{ color: 'var(--st-update)', fontWeight: 600 }}>{after}</span>
    </span>
  );
}

/* ---------- Stat tile (summary filter) ---------- */
function StatTile({ n, label, kind, active, onClick, disabled }) {
  const m = KIND_META[kind];
  const accent = `var(--st-${m.cssvar})`;
  return (
    <button onClick={onClick} disabled={disabled} className="ie-stat" data-active={active ? '1' : '0'} style={{
      flex: '1 1 0', minWidth: 0, textAlign: 'left', cursor: disabled ? 'default' : 'pointer',
      background: active ? `var(--st-${m.cssvar}-tint)` : 'var(--surface-card-light)',
      border: `1.5px solid ${active ? `var(--st-${m.cssvar}-line)` : 'var(--paper-line)'}`,
      borderRadius: '12px', padding: '.85rem 1rem .9rem', position: 'relative',
      transition: 'transform var(--dur-fast) var(--ease), border-color var(--dur-fast), background var(--dur-fast)',
      opacity: disabled ? .55 : 1, font: 'inherit',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '.4em' }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: accent, display: 'inline-block' }} />
        <span style={{ fontSize: '.74rem', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.06em', color: 'var(--text-on-light-soft)' }}>{label}</span>
      </div>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '1.9rem', lineHeight: 1.05, marginTop: '.3rem', color: kind === 'unchanged' ? 'var(--text-on-light)' : accent }}>
        {n.toLocaleString()}
      </div>
    </button>
  );
}

/* ---------- Progress bar ---------- */
function ProgressBar({ value, max, accent = 'var(--wv-violet)', height = 8 }) {
  const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
  return (
    <div style={{ background: 'var(--paper-line)', borderRadius: 999, height, overflow: 'hidden', width: '100%' }}>
      <div style={{ width: pct + '%', height: '100%', background: accent, borderRadius: 999, transition: 'width .3s ease' }} />
    </div>
  );
}

/* ---------- Generic paper card ---------- */
function Card({ children, style, pad = '1.5rem', ...rest }) {
  return (
    <div style={{ background: 'var(--surface-card-light)', border: '1px solid var(--paper-line)', borderRadius: '14px', padding: pad, ...style }} {...rest}>
      {children}
    </div>
  );
}

/* ---------- Spinner (thin, geometric) ---------- */
function Spinner({ size = 16, stroke = 2 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ display: 'block', animation: 'ie-spin .8s linear infinite' }}>
      <circle cx="12" cy="12" r="9" stroke="var(--paper-line)" strokeWidth={stroke} />
      <path d="M12 3a9 9 0 0 1 9 9" stroke="var(--wv-violet)" strokeWidth={stroke} strokeLinecap="round" />
    </svg>
  );
}

Object.assign(window, {
  Icon, CircleMark, KindBadge, DiffPair, StatTile, ProgressBar, Card, Spinner, KIND_META,
});
