/* soccerarena.ai — shared visual atoms. */

const SA = {
  turf:      '#0a1f0f',
  turf2:     '#0c2613',
  surface:   '#0e2a16',
  surfaceHi: '#123420',
  line:      'rgba(200,245,58,0.10)',
  line2:     'rgba(255,255,255,0.07)',
  white:     '#f4f7f2',
  dim:       'rgba(244,247,242,0.62)',
  faint:     'rgba(244,247,242,0.38)',
  lime:      '#c8f53a',
  limeDim:   'rgba(200,245,58,0.55)',
  orange:    '#ff9d3d',
  orangeDim: 'rgba(255,157,61,0.16)',
  mono:      "'JetBrains Mono', ui-monospace, monospace",
  sans:      "'Archivo', system-ui, sans-serif",
};

function Sparkline({ data, w = 64, h = 22, color = SA.lime, strokeWidth = 1.5 }) {
  const min = Math.min(...data), max = Math.max(...data);
  const span = max - min || 1;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * (w - 2) + 1;
    const y = h - 1 - ((v - min) / span) * (h - 2);
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  });
  const last = data[data.length - 1];
  const lx = w - 1;
  const ly = h - 1 - ((last - min) / span) * (h - 2);
  return (
    <svg width={w} height={h} style={{ display: 'block', overflow: 'visible' }}>
      <polyline points={pts.join(' ')} fill="none" stroke={color}
        strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
      <circle cx={lx} cy={ly} r={1.9} fill={color} />
    </svg>
  );
}

function FlipBadge({ label = 'FLIPPED', when, compact = false }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      background: SA.orangeDim, color: SA.orange,
      border: `1px solid rgba(255,157,61,0.32)`,
      padding: compact ? '1px 5px' : '2px 7px',
      fontFamily: SA.mono, fontSize: compact ? 9 : 10, fontWeight: 500,
      letterSpacing: '0.06em', lineHeight: 1.4, whiteSpace: 'nowrap',
    }}>
      <span style={{ fontSize: compact ? 10 : 11, lineHeight: 1 }}>↺</span>
      {label}{when ? ` ${when}` : ''}
    </span>
  );
}

function SplitBar({ split, height = 6 }) {
  const total = split.home + split.draw + split.away || 1;
  const seg = (n, color) => n > 0 ? (
    <div style={{ width: `${(n / total) * 100}%`, background: color, height: '100%' }} />
  ) : null;
  return (
    <div style={{ display: 'flex', width: '100%', height, gap: 2, background: 'transparent' }}>
      {seg(split.home, SA.lime)}
      {seg(split.draw, 'rgba(244,247,242,0.28)')}
      {seg(split.away, SA.white)}
    </div>
  );
}

function ConfBar({ value, w = 54 }) {
  return (
    <div style={{ width: w, height: 4, background: SA.line2, position: 'relative' }}>
      <div style={{ position: 'absolute', inset: 0, width: `${value * 100}%`, background: SA.limeDim }} />
    </div>
  );
}

function Delta({ value }) {
  const up = value >= 0;
  return (
    <span style={{
      fontFamily: SA.mono, fontSize: 11, fontWeight: 500,
      color: up ? SA.lime : SA.orange, fontVariantNumeric: 'tabular-nums',
    }}>
      {up ? '▲' : '▼'} {Math.abs(value)}
    </span>
  );
}

function PitchMarkings() {
  const s = SA.line;
  return (
    <svg viewBox="0 0 1200 520" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 0 }}>
      <line x1="600" y1="0" x2="600" y2="520" stroke={s} strokeWidth="1.5" />
      <circle cx="600" cy="260" r="120" stroke={s} strokeWidth="1.5" fill="none" />
      <circle cx="600" cy="260" r="3" fill={s} />
      <rect x="0" y="120" width="150" height="280" stroke={s} strokeWidth="1.5" fill="none" />
      <rect x="0" y="200" width="56" height="120" stroke={s} strokeWidth="1.5" fill="none" />
      <path d="M150 200 A 70 70 0 0 1 150 320" stroke={s} strokeWidth="1.5" fill="none" />
      <rect x="1050" y="120" width="150" height="280" stroke={s} strokeWidth="1.5" fill="none" />
      <rect x="1144" y="200" width="56" height="120" stroke={s} strokeWidth="1.5" fill="none" />
      <path d="M1050 200 A 70 70 0 0 0 1050 320" stroke={s} strokeWidth="1.5" fill="none" />
    </svg>
  );
}

function LiveDot() {
  return (
    <span style={{ position: 'relative', display: 'inline-flex', width: 8, height: 8 }}>
      <span className="sa-pulse" style={{
        position: 'absolute', inset: 0, borderRadius: '50%', background: SA.lime,
      }} />
      <span style={{ position: 'absolute', inset: 0, borderRadius: '50%', background: SA.lime }} />
    </span>
  );
}

function ProviderMark({ code, size = 26 }) {
  return (
    <div style={{
      width: size, height: size, flexShrink: 0,
      border: `1px solid ${SA.line2}`, background: 'rgba(244,247,242,0.04)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: SA.mono, fontSize: size <= 26 ? 9 : 11, fontWeight: 600,
      color: SA.dim, letterSpacing: '0.02em',
    }}>{code}</div>
  );
}

Object.assign(window, {
  SA, Sparkline, FlipBadge, SplitBar, ConfBar, Delta, PitchMarkings, LiveDot, ProviderMark,
});