// primitives.jsx — shared atoms: TierGlyph, Pill, BandStripMini, utility colors

const ASI_COLORS = {
  accent: '#7f35b2',
  accentTint: '#f3eef9',
  accentDark: '#48086f',
  canvas: '#f0f1f3',
  surface: '#ffffff',
  paper: '#f5f5f4',
  ink: '#1a1d21',
  inkSoft: '#4a4f57',
  inkMuted: '#8b919a',
  line: '#e8eaed',
  perfHigh: '#7f35b2',
  perfMeets: '#327fef',
  perfLow:  '#c4462a',
  band1: '#dbe7fb',
  band2: '#86aff6',
  band3: '#327fef',
  band4: '#86aff6',
  band5: '#dbe7fb',
  risk:  '#8a0074',
  riskBg:'#fce4f2',
  warn:  '#6e5200',
  warnBg:'#fdf6e1',
  safe:  '#005a46',
  safeBg:'#e8f8f5',
};

// Tier glyph: circle / diamond / square
function TierGlyph({ tier, size = 20 }) {
  const s = size;
  if (tier === 'High') {
    return (
      <svg width={s} height={s} viewBox="0 0 34 34" style={{display:'block'}}>
        <circle cx="17" cy="17" r="12" fill={ASI_COLORS.perfHigh}/>
      </svg>
    );
  }
  if (tier === 'Meets') {
    return (
      <svg width={s} height={s} viewBox="0 0 34 34" style={{display:'block'}}>
        <rect x="8" y="8" width="18" height="18" transform="rotate(45 17 17)" fill={ASI_COLORS.perfMeets}/>
      </svg>
    );
  }
  return (
    <svg width={s} height={s} viewBox="0 0 34 34" style={{display:'block'}}>
      <rect x="5" y="5" width="24" height="24" fill={ASI_COLORS.perfLow}/>
    </svg>
  );
}

// Status pill
function Pill({ tone = 'neutral', children, size = 12 }) {
  const tones = {
    safe: { bg: ASI_COLORS.safeBg, ink: ASI_COLORS.safe },
    warn: { bg: ASI_COLORS.warnBg, ink: ASI_COLORS.warn },
    risk: { bg: ASI_COLORS.riskBg, ink: ASI_COLORS.risk },
    accent: { bg: ASI_COLORS.accentTint, ink: ASI_COLORS.accentDark },
    neutral: { bg: '#eceef1', ink: ASI_COLORS.inkSoft },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: t.bg, color: t.ink,
      fontSize: size, fontWeight: 600,
      padding: '3px 9px', borderRadius: 999,
      fontFeatureSettings: "'tnum' 1",
      letterSpacing: '0.005em',
      lineHeight: 1.2,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// Tiny band strip
function BandStripMini({ compa, width = 120, showLabels = false }) {
  const pct = Math.max(0.02, Math.min(0.98, (compa - 0.7) / 0.6));
  const offBand = compa < 0.8 || compa > 1.2;
  return (
    <div style={{ width, display: 'flex', flexDirection: 'column', gap: 3 }}>
      <div style={{ position: 'relative', height: 10, display: 'flex', gap: 1 }}>
        <div style={{ flex: 1, background: ASI_COLORS.band1, borderRadius: '3px 0 0 3px' }}/>
        <div style={{ flex: 1, background: ASI_COLORS.band2 }}/>
        <div style={{ flex: 1, background: ASI_COLORS.band3 }}/>
        <div style={{ flex: 1, background: ASI_COLORS.band4 }}/>
        <div style={{ flex: 1, background: ASI_COLORS.band5, borderRadius: '0 3px 3px 0' }}/>
        <div style={{
          position: 'absolute', left: `${pct*100}%`, top: -3, bottom: -3,
          width: 2, background: offBand ? ASI_COLORS.risk : ASI_COLORS.ink,
          transform: 'translateX(-1px)',
        }}/>
      </div>
      {showLabels && (
        <div style={{
          display:'flex', justifyContent:'space-between',
          fontSize: 16, color: ASI_COLORS.inkMuted,
          fontFamily: 'JetBrains Mono, monospace',
        }}>
          <span>0.7</span><span>1.0</span><span>1.3</span>
        </div>
      )}
    </div>
  );
}

// A small card frame
function Card({ children, style = {}, pad = 18 }) {
  return (
    <div style={{
      background: ASI_COLORS.surface,
      borderRadius: 14,
      boxShadow: '0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04)',
      padding: pad,
      ...style,
    }}>{children}</div>
  );
}

// Section label (UPPERCASE 10.4px 0.04em)
function SectionLabel({ children, style = {} }) {
  return (
    <div style={{
      fontSize: 16, fontWeight: 600,
      letterSpacing: '0.04em', textTransform: 'uppercase',
      color: ASI_COLORS.inkMuted,
      ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { ASI_COLORS, TierGlyph, Pill, BandStripMini, Card, SectionLabel });