// Small reusable primitives

function StatusPill({ status, children }) {
  return (
    <span className="status-pill" data-status={status}>
      <span className="status-dot" />
      {children}
    </span>
  );
}

function Radar({ dims, size = 160 }) {
  const cx = size / 2, cy = size / 2;
  const R = size / 2 - 18;
  const n = dims.length;
  const angle = (i) => (Math.PI * 2 * i) / n - Math.PI / 2;
  const point = (i, r) => [cx + Math.cos(angle(i)) * r, cy + Math.sin(angle(i)) * r];
  const pts = dims.map((d, i) => point(i, R * (d[1] / 100)));
  const path = pts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1)).join(' ') + 'Z';
  const rings = [0.33, 0.66, 1];
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      {rings.map((r, ri) => {
        const ringPts = Array.from({length: n}, (_, i) => point(i, R * r));
        const d = ringPts.map((p, i) => (i === 0 ? 'M' : 'L') + p[0].toFixed(1) + ',' + p[1].toFixed(1)).join(' ') + 'Z';
        return <path key={ri} d={d} fill="none" stroke="var(--border)" strokeWidth="1" />;
      })}
      {Array.from({length: n}, (_, i) => {
        const [x, y] = point(i, R);
        return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="var(--border)" strokeWidth="1" />;
      })}
      <path d={path} fill="oklch(0.68 0.14 45 / 0.22)" stroke="var(--accent)" strokeWidth="1.5" />
      {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.5" fill="var(--accent)" />)}
    </svg>
  );
}

function Avatar({ label, hue = 260, size = 28 }) {
  const s = { width: size, height: size, fontSize: size * 0.36,
    background: `linear-gradient(135deg, oklch(0.7 0.12 ${hue}), oklch(0.5 0.12 ${(hue + 40) % 360}))` };
  return <div className="staff-avatar" style={s}>{label}</div>;
}

function ImagePlaceholder({ hue = 260, label, video }) {
  const bg = `linear-gradient(135deg, oklch(0.88 0.05 ${hue}), oklch(0.72 0.08 ${hue}))`;
  return (
    <div className="asset-thumb" style={{ background: bg }} data-video={video || undefined}>
    </div>
  );
}

Object.assign(window, { StatusPill, Radar, Avatar, ImagePlaceholder });