// ============================================================================
// Sandbox atoms — small re-usable React components.
// All exposed to window so the screens can use them.
// ============================================================================

const Mono = ({ children, style }) => (
  <span style={{ fontFamily: 'var(--font-mono)', ...style }}>{children}</span>
);

const Tick = ({ children, color = 'var(--steel-500)', size = 10, style }) => (
  <span style={{
    fontFamily: 'var(--font-mono)', fontSize: size,
    letterSpacing: '0.18em', textTransform: 'uppercase', color, ...style,
  }}>{children}</span>
);

const Stamp = ({ children, color = 'var(--paper)', size = 10 }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    border: `1.5px solid ${color}`, color, padding: '4px 10px',
    fontFamily: 'var(--font-mono)', fontSize: size,
    textTransform: 'uppercase', letterSpacing: '0.14em',
  }}>{children}</span>
);

const Btn = ({ kind = 'ghost', children, onClick, style = {}, ...rest }) => {
  const map = {
    approve: { bg: 'var(--green)',  fg: 'var(--ink-900)' },
    reject:  { bg: 'var(--rust)',   fg: 'var(--paper)' },
    edit:    { bg: 'var(--ink-700)',fg: 'var(--paper)' },
    primary: { bg: 'var(--signal)', fg: 'var(--paper)' },
    ghost:   { bg: 'transparent',   fg: 'var(--paper)', border: '1px solid var(--line-strong)' },
  };
  const s = map[kind];
  return (
    <button onClick={onClick} {...rest} style={{
      background: s.bg, color: s.fg, border: s.border ?? 0,
      padding: '8px 14px', fontFamily: 'var(--font-body)',
      fontWeight: 600, fontSize: 12, borderRadius: 2, cursor: 'pointer',
      transition: 'background 120ms cubic-bezier(.2,.7,.2,1)', ...style,
    }}>{children}</button>
  );
};

const Dot = ({ color = 'var(--green)', pulse = false, size = 8 }) => (
  <span style={{
    display: 'inline-block', width: size, height: size, borderRadius: '50%',
    background: color, animation: pulse ? 'sx-pulse 1.6s ease-in-out infinite' : 'none',
  }} />
);

const HarnessMark = ({ size = 28, pulse = false }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" style={{ flexShrink: 0 }}>
    <rect x="14" y="14" width="72" height="10" fill="currentColor"/>
    <rect x="14" y="76" width="72" height="10" fill="currentColor"/>
    <rect x="44" y="24" width="12" height="52" fill="currentColor"/>
    <line x1="20" y1="24" x2="80" y2="76" stroke="currentColor" strokeWidth="3"/>
    <line x1="80" y1="24" x2="20" y2="76" stroke="currentColor" strokeWidth="3"/>
    <circle cx="50" cy="50" r="7" fill="#3B82F6">
      {pulse && <animate attributeName="opacity" values="1;0.35;1" dur="1.6s" repeatCount="indefinite"/>}
    </circle>
    <circle cx="50" cy="50" r="11" stroke="#3B82F6" strokeWidth="1" opacity="0.4"/>
  </svg>
);

const TierTag = ({ tier }) => {
  const map = {
    1: ['rgba(34,197,94,0.15)',  '#22C55E', 'rgba(34,197,94,0.3)'],
    2: ['rgba(59,130,246,0.15)', '#60A5FA', 'rgba(59,130,246,0.3)'],
    3: ['rgba(245,158,11,0.15)', '#F59E0B', 'rgba(245,158,11,0.3)'],
    4: ['rgba(193,67,45,0.18)',  '#E47862', 'rgba(193,67,45,0.4)'],
  };
  const [bg, fg, bd] = map[tier] ?? map[2];
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap',
      background: bg, color: fg, border: `1px solid ${bd}`,
      padding: '2px 8px', fontFamily: 'var(--font-mono)',
      fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em',
    }}>tier {tier}</span>
  );
};

const DeptTag = ({ children }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap',
    background: 'rgba(232,237,243,0.06)', color: 'var(--paper-dim)',
    padding: '2px 8px', fontFamily: 'var(--font-mono)',
    fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em',
  }}>{children}</span>
);

const StatusStamp = ({ status }) => {
  const map = {
    approved: ['var(--green)', '✓ APPROVED'],
    rejected: ['var(--rust)', '× REJECTED'],
    edited:   ['var(--amber)', '✎ EDITED'],
    expired:  ['var(--steel-500)', '⊘ EXPIRED'],
    conflict: ['var(--rust)', '! CONFLICT'],
  };
  const [color, label] = map[status] ?? ['var(--paper)', status];
  return (
    <span style={{
      border: `1.2px solid ${color}`, color,
      padding: '3px 8px', fontFamily: 'var(--font-mono)',
      fontSize: 9, textTransform: 'uppercase', letterSpacing: '0.18em',
    }}>{label}</span>
  );
};

const KPI = ({ label, value, color = 'green', note }) => {
  const colors = {
    green: ['rgba(34,197,94,0.06)','rgba(34,197,94,0.3)','#22C55E'],
    amber: ['rgba(245,158,11,0.06)','rgba(245,158,11,0.3)','#F59E0B'],
    red:   ['rgba(193,67,45,0.08)', 'rgba(193,67,45,0.4)', '#E47862'],
    signal:['rgba(59,130,246,0.06)','rgba(59,130,246,0.3)','#60A5FA'],
  }[color];
  return (
    <div style={{ background: colors[0], border: `1px solid ${colors[1]}`, padding: '14px 16px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Tick size={9}>{label}</Tick>
        <Dot color={colors[2]} pulse={color === 'signal'} />
      </div>
      <Mono style={{ fontSize: 26, fontWeight: 600, color: 'var(--paper)', display: 'block', marginTop: 6 }}>{value}</Mono>
      {note && <div style={{ fontSize: 11, color: 'var(--paper-dim)', marginTop: 4 }}>{note}</div>}
    </div>
  );
};

const fmtUSD = (cents, frac = 0) => new Intl.NumberFormat('en-US', {
  style: 'currency', currency: 'USD', maximumFractionDigits: frac,
}).format((cents ?? 0) / 100);

Object.assign(window, {
  Mono, Tick, Stamp, Btn, Dot, HarnessMark,
  TierTag, DeptTag, StatusStamp, KPI, fmtUSD,
});