/* ============================================================
   ZERO — Builder shared primitives. window.BUILD
   ============================================================ */
(function () {
  const { useId } = React;
  const I = window.Icon;

  // ---- Slider ----
  function Slider({ label, value, onChange, color = 'var(--violet)' }) {
    return (
      <div>
        <div className="row between" style={{ marginBottom: 8 }}>
          <span style={{ fontSize: 12.5, color: 'var(--tx-1)', fontWeight: 600 }}>{label}</span>
          <span className="mono" style={{ fontSize: 11, fontWeight: 700, color: color, padding: '1px 8px', borderRadius: 99,
            background: `color-mix(in oklab, ${color}, transparent 86%)` }}>{value}</span>
        </div>
        <input type="range" min="0" max="100" value={value} className="zr"
          onChange={e => onChange(+e.target.value)}
          style={{ '--zr-accent': color, background: `linear-gradient(90deg, ${color} ${value}%, oklch(1 0 0 /.1) ${value}%)` }} />
      </div>
    );
  }

  // ---- Radar (hexagon personality graph) ----
  function Radar({ values, dims, color = 'var(--violet)', size = 200 }) {
    const id = useId();
    const cx = size / 2, cy = size / 2, r = size / 2 - 26;
    const n = dims.length;
    const pt = (i, rad) => {
      const a = (Math.PI * 2 * i) / n - Math.PI / 2;
      return [cx + Math.cos(a) * rad, cy + Math.sin(a) * rad];
    };
    const rings = [0.25, 0.5, 0.75, 1];
    const poly = (rad) => dims.map((_, i) => pt(i, rad).join(',')).join(' ');
    const dataPts = dims.map((d, i) => pt(i, r * (values[d.id] / 100)));
    const dataPoly = dataPts.map(p => p.join(',')).join(' ');
    return (
      <svg width={size} height={size} style={{ display: 'block', margin: '0 auto', overflow: 'visible' }}>
        <defs>
          <radialGradient id={'rg' + id}>
            <stop offset="0%" stopColor={color} stopOpacity="0.45" />
            <stop offset="100%" stopColor={color} stopOpacity="0.12" />
          </radialGradient>
        </defs>
        {rings.map((f, i) => <polygon key={i} points={poly(r * f)} fill="none" stroke="var(--line)" strokeWidth="1" />)}
        {dims.map((_, i) => { const [x, y] = pt(i, r); return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="var(--line)" strokeWidth="1" />; })}
        <polygon points={dataPoly} fill={`url(#rg${id})`} stroke={color} strokeWidth="2" strokeLinejoin="round" />
        {dataPts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="2.6" fill={color} />)}
        {dims.map((d, i) => {
          const [x, y] = pt(i, r + 15);
          return <text key={i} x={x} y={y} fontSize="9" fill="var(--tx-2)" textAnchor="middle" dominantBaseline="middle" fontWeight="600">{d.label}</text>;
        })}
      </svg>
    );
  }

  // ---- Agent avatar (icon glyph in colored tile/circle) ----
  function AgentAvatar({ icon = 'spark', color = 'var(--violet)', size = 44, round = false, w }) {
    const Ic = I[icon] || I.spark;
    return (
      <div style={{ width: size, height: size, borderRadius: round ? '50%' : size * 0.27, flex: 'none',
        background: `linear-gradient(145deg, color-mix(in oklab, ${color}, white 18%), ${color})`,
        display: 'grid', placeItems: 'center', color: 'white',
        boxShadow: `0 4px 16px color-mix(in oklab, ${color}, transparent 60%), 0 1px 0 oklch(1 0 0 /.25) inset` }}>
        <Ic w={w || size * 0.5} />
      </div>
    );
  }

  window.BUILD = { Slider, Radar, AgentAvatar };
})();