// Workforce OS — shared atoms (avatars, pills, metric tiles, icons).

const wfosColors = {
  bg: '#F9F9F9',
  cream: '#FDFBFA',
  surface: '#FFFFFF',
  border: '#EBEBEB',
  borderStrong: '#C1C1C1',
  text: '#000000',
  muted: '#4D4D4D',
  dim: '#62748E',
  purple: '#7E80FF',
  purpleSoft: '#DEDFFF',
  purpleDeep: '#202166',
  pink: '#FFD3F4',
  pinkStrong: '#E45BC2',
  pinkDeep: '#71205D',
  yellow: '#FFCD00',
  yellowSoft: '#FFF2BF',
  orange: '#FF8C00',
  orangeSoft: '#FFE0BA',
  red: '#FF404C',
  redSoft: '#FFE5E7',
  redDeep: '#a82530',
  green: '#277852',
  greenSoft: '#DDF0E5',
};

function Avatar({ name, size = 32, hue = '#DEDFFF' }) {
  const initials = (name || '?').split(' ').map(p => p[0]).slice(0, 2).join('').toUpperCase();
  return (
    <div style={{
      width: size, height: size, borderRadius: 999,
      background: hue, color: '#202166',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'Urbanist, sans-serif', fontWeight: 800,
      fontSize: size <= 28 ? 10 : size <= 36 ? 11 : 14,
      flexShrink: 0,
    }}>{initials}</div>
  );
}

const STATUS_TONES = {
  'IN TREATMENT':   { bg: '#FFD3F4', fg: '#71205D' },
  'PENDING REVIEW': { bg: '#FFF2BF', fg: '#AC9121' },
  'AWAITING LAB':   { bg: '#FFE0BA', fg: '#8D622D' },
  'INTAKE':         { bg: '#DEDFFF', fg: '#202166' },
  'STIM CYCLE':     { bg: '#FFD3F4', fg: '#71205D' },
  'RETRIEVAL':      { bg: '#DEDFFF', fg: '#202166' },
  'TRANSFER':       { bg: '#DDF0E5', fg: '#277852' },
  'POST-TRANSFER':  { bg: '#FFE0BA', fg: '#8D622D' },
  'ARCHIVED':       { bg: '#EBEBEB', fg: '#4D4D4D' },
  'ACTION NEEDED':  { bg: '#FFE5E7', fg: '#a82530' },
  'ON TRACK':       { bg: '#DDF0E5', fg: '#277852' },
  'OVERDUE':        { bg: '#FFE5E7', fg: '#a82530' },
  'NEW':            { bg: '#DEDFFF', fg: '#202166' },
};

function Pill({ label, tone }) {
  const s = STATUS_TONES[label.toUpperCase()] || { bg: '#EBEBEB', fg: '#4D4D4D' };
  const tones = tone ? STATUS_TONES[tone.toUpperCase()] || s : s;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '3px 9px', borderRadius: 999,
      background: tones.bg, color: tones.fg,
      fontFamily: 'Urbanist, sans-serif',
      fontSize: 10, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase',
      whiteSpace: 'nowrap',
    }}>{label}</span>
  );
}

function PriorityDot({ priority }) {
  const map = { P0: '#FF404C', P1: '#FF8C00', P2: '#FFCD00', P3: '#C1C1C1' };
  return (
    <span title={priority} style={{
      width: 8, height: 8, borderRadius: 999,
      background: map[priority] || '#C1C1C1',
      flexShrink: 0, display: 'inline-block',
    }}></span>
  );
}

function MetricTile({ label, value, sub, accent, delta, trend }) {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  return (
    <div style={{
      background: '#fff', border: '1px solid #EBEBEB', borderRadius: 12,
      padding: 16, display: 'flex', flexDirection: 'column', gap: 4,
      minWidth: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        <div style={{ fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800, letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase' }}>
          {label}
        </div>
        {accent && <div style={{ width: 6, height: 6, borderRadius: 999, background: accent }}></div>}
      </div>
      <div style={{ fontFamily: 'Urbanist', fontWeight: 800, fontSize: 28, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
        {value}
      </div>
      {(sub || delta) && (
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'Urbanist', fontSize: 11 }}>
          {delta && (
            <span style={{ color: trend === 'down' ? '#a82530' : '#277852', fontWeight: 700 }}>
              {trend === 'down' ? '↓' : '↑'} {delta}
            </span>
          )}
          {sub && <span style={{ color: '#62748E' }}>{sub}</span>}
        </div>
      )}
    </div>
  );
}

function SectionHead({ eyebrow, title, right }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 14 }}>
      <div>
        {eyebrow && (
          <div style={{
            fontFamily: 'Urbanist', fontSize: 10, fontWeight: 800,
            letterSpacing: '0.08em', color: '#62748E', textTransform: 'uppercase',
          }}>{eyebrow}</div>
        )}
        {title && (
          <div style={{ fontFamily: 'Urbanist', fontSize: 18, fontWeight: 700, marginTop: 2, letterSpacing: '-0.01em' }}>
            {title}
          </div>
        )}
      </div>
      <div style={{ flex: 1, height: 1, background: '#EBEBEB' }}></div>
      {right}
    </div>
  );
}

function LivePulse({ color = '#FF404C', size = 8 }) {
  return (
    <span style={{ position: 'relative', width: size, height: size, display: 'inline-block', flexShrink: 0 }}>
      <span style={{ position: 'absolute', inset: 0, borderRadius: 999, background: color }}></span>
      <span className="wfos-pulse-ring" style={{
        position: 'absolute', inset: -2, borderRadius: 999,
        border: `2px solid ${color}`,
      }}></span>
    </span>
  );
}

function Sparkline({ data, color = '#7E80FF', height = 36 }) {
  const max = Math.max(...data), min = Math.min(...data);
  const range = max - min || 1;
  const w = 160;
  const pts = data.map((v, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = height - ((v - min) / range) * (height - 4) - 2;
    return `${x},${y}`;
  }).join(' ');
  return (
    <svg viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none" style={{ width: '100%', height }}>
      <defs>
        <linearGradient id={`spark-${color.slice(1)}`} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.22" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <polygon points={`0,${height} ${pts} ${w},${height}`} fill={`url(#spark-${color.slice(1)})`} />
      <polyline points={pts} fill="none" stroke={color} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round" />
    </svg>
  );
}

Object.assign(window, {
  wfosColors, Avatar, Pill, PriorityDot, MetricTile, SectionHead, LivePulse, Sparkline,
});