// Neurasea Exchange — shared UI helpers (built on ../app/ui.jsx primitives)
// Exports to window: exColors, TierBadge, ExStat, Ticker, ChangeTag, ExHead

function exColors(t) {
  return {
    up: t.live,
    down: 'oklch(0.62 0.19 25)',
    downSoft: 'oklch(0.62 0.19 25 / 0.13)',
    gold: t.idle,
  };
}

function tierTone(t, tier) {
  return { Frontier: t.draw, Balanced: t.live, Fast: t.idle, Reasoning: 'oklch(0.62 0.17 295)' }[tier] || t.ink2;
}

function TierBadge({ tier }) {
  const t = useTheme();
  const c = tierTone(t, tier);
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 650,
      fontFamily: t.mono, color: c, padding: '2px 8px', borderRadius: 6,
      background: `color-mix(in oklch, ${c} 12%, transparent)`, letterSpacing: '0.02em' }}>
      {tier}
    </span>
  );
}

function ChangeTag({ v, size = 12.5 }) {
  const t = useTheme();
  const c = exColors(t);
  const up = v >= 0;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3, fontSize: size, fontWeight: 650,
      fontFamily: t.mono, color: up ? c.up : c.down }}>
      <span style={{ fontSize: size - 2 }}>{up ? '▲' : '▼'}</span>{Math.abs(v).toFixed(1)}%
    </span>
  );
}

function ExStat({ label, value, unit, sub, accent }) {
  const t = useTheme();
  return (
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontSize: 11, color: t.ink3, fontFamily: t.mono, textTransform: 'uppercase', letterSpacing: '0.06em', whiteSpace: 'nowrap' }}>{label}</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginTop: 5 }}>
        <span style={{ fontSize: 23, fontWeight: 680, letterSpacing: '-0.02em', color: accent || t.ink }}>{value}</span>
        {unit && <span style={{ fontSize: 12, color: t.ink3, fontFamily: t.mono }}>{unit}</span>}
      </div>
      {sub && <div style={{ marginTop: 3 }}>{sub}</div>}
    </div>
  );
}

function ExHead({ kicker, title, sub, right }) {
  const t = useTheme();
  return (
    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 20, marginBottom: 22 }}>
      <div>
        {kicker && <div style={{ fontSize: 12, fontWeight: 650, color: t.live, fontFamily: t.mono, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8 }}>{kicker}</div>}
        <h1 style={{ margin: 0, fontSize: 30, fontWeight: 700, letterSpacing: '-0.03em', color: t.ink }}>{title}</h1>
        {sub && <p style={{ margin: '8px 0 0', fontSize: 15, color: t.ink2, maxWidth: 620, lineHeight: 1.5 }}>{sub}</p>}
      </div>
      {right}
    </div>
  );
}

// Scrolling price ticker strip
function Ticker() {
  const t = useTheme();
  const c = exColors(t);
  const row = EX_DATA.spot;
  const seq = [...row, ...row];
  return (
    <div style={{ borderTop: `1px solid ${t.line2}`, borderBottom: `1px solid ${t.line}`, background: t.panel2, overflow: 'hidden', position: 'relative' }}>
      <div style={{ display: 'inline-flex', gap: 30, padding: '9px 0', whiteSpace: 'nowrap', animation: 'exTicker 38s linear infinite' }}>
        {seq.map((s, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 12.5, fontFamily: t.mono }}>
            <span style={{ fontWeight: 650, color: t.ink }}>{s.model}</span>
            <span style={{ color: t.ink2 }}>{s.price.toFixed(2)}</span>
            <span style={{ color: s.chg >= 0 ? c.up : c.down, fontWeight: 600 }}>{s.chg >= 0 ? '+' : ''}{s.chg.toFixed(1)}%</span>
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { exColors, tierTone, TierBadge, ChangeTag, ExStat, ExHead, Ticker });