// 8-axis field — same look as the Master Equation calculator's orb.
// Spokes radiating from center, four dashed reference rings (25/50/75/100),
// per-axis colored dots, blurred glow polygon underneath the live shape.
// Values are 0..100; the dot at value 100 lives on the outer ring.
const AxisRadar = ({ values, ch }) => {
  const order = window.AXIS_ORDER || ['PO','NM','ER','SC','RS','ES','TA','PV'];
  const meta = window.AXIS_META || {};
  const tintFor = (c) => (meta[c] && meta[c].tint) || '#3DDC97';

  // Geometry — identical to the calculator orb's coordinate space.
  const CX = 120, CY = 120, R_MAX = 100, R_LABEL = 115;
  const angleFor = (i) => -Math.PI / 2 + (i * (Math.PI * 2 / 8));
  const point = (i, ratio) => {
    const a = angleFor(i);
    const r = Math.max(0, Math.min(100, ratio)) / 100 * R_MAX;
    return [CX + Math.cos(a) * r, CY + Math.sin(a) * r];
  };

  // Live polygon points string.
  const ptStr = order.map((c, i) => {
    const v = values[i] != null ? values[i] : 0;
    const [x, y] = point(i, v);
    return `${x.toFixed(2)},${y.toFixed(2)}`;
  }).join(' ');

  // CH-bracket color drives the orb gradient + center text.
  const scoreColor = (
    ch == null      ? '#9AA7B5'
    : ch >= 76      ? '#117A4D'
    : ch >= 60      ? '#2F9E6B'
    : ch >= 40      ? '#B08D3C'
    : ch >= 20      ? '#B23A2E'
    :                 '#7A1F18'
  );

  return (
    <div style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
      <svg viewBox="0 0 240 240" style={{ width: '100%', maxWidth: 280, height: 'auto', display: 'block' }} role="img" aria-label="Eight-axis orb">
        <defs>
          <radialGradient id="gobr-fill" cx="50%" cy="50%" r="55%">
            <stop offset="0%"   stopColor={scoreColor} stopOpacity="0.95"/>
            <stop offset="60%"  stopColor={scoreColor} stopOpacity="0.45"/>
            <stop offset="100%" stopColor={scoreColor} stopOpacity="0.10"/>
          </radialGradient>
          <radialGradient id="gobr-glow" cx="50%" cy="50%" r="55%">
            <stop offset="0%"   stopColor={scoreColor} stopOpacity="0.55"/>
            <stop offset="100%" stopColor={scoreColor} stopOpacity="0"/>
          </radialGradient>
        </defs>

        {/* Dashed reference rings at 25 / 50 / 75 / 100 */}
        {[25, 50, 75, 100].map(r => (
          <circle key={r} cx={CX} cy={CY} r={r} fill="none"
                  stroke="rgba(0,0,0,0.18)" strokeWidth="1" strokeDasharray="2 3" opacity="0.55" />
        ))}

        {/* Spokes */}
        {order.map((c, i) => {
          const [x, y] = point(i, 100);
          return <line key={c} x1={CX} y1={CY} x2={x} y2={y}
                       stroke="rgba(0,0,0,0.18)" strokeWidth="1" opacity="0.45" />;
        })}

        {/* Blurred glow polygon underneath */}
        <polygon points={ptStr} fill="url(#gobr-glow)" style={{ filter: 'blur(12px)', opacity: 0.55, transition: 'all 240ms ease' }} />

        {/* Live shape polygon (filled radial gradient + stroked) */}
        <polygon points={ptStr}
                 fill="url(#gobr-fill)"
                 stroke={scoreColor}
                 strokeWidth="1.5"
                 strokeOpacity="0.85"
                 fillOpacity="0.42"
                 style={{ transition: 'all 240ms ease' }} />

        {/* Axis dots, sized + tinted per-axis */}
        {order.map((c, i) => {
          const v = values[i] != null ? values[i] : 0;
          const [x, y] = point(i, v);
          const ratio = Math.max(0, Math.min(100, v)) / 100;
          const r = 3 + ratio * 3;
          return (
            <circle key={c} cx={x} cy={y} r={r.toFixed(2)}
                    fill={tintFor(c)} stroke="#FFFFFF" strokeWidth="1.5"
                    opacity={0.45 + ratio * 0.55}
                    style={{ transition: 'all 240ms ease' }}>
              <title>{c} · {(meta[c] && meta[c].name) || c}</title>
            </circle>
          );
        })}

        {/* Axis labels outside the outer ring */}
        {order.map((c, i) => {
          const a = angleFor(i);
          const tx = CX + Math.cos(a) * R_LABEL;
          const ty = CY + Math.sin(a) * R_LABEL;
          return (
            <text key={c} x={tx} y={ty}
                  textAnchor="middle" dominantBaseline="middle"
                  fontFamily="JetBrains Mono, monospace" fontSize="9"
                  fill={tintFor(c)} letterSpacing="0.1em"
                  fontWeight="600">{c}</text>
          );
        })}

        {/* Center CH score text */}
        {ch != null && (
          <React.Fragment>
            <text x={CX} y={CY - 4} textAnchor="middle" dominantBaseline="central"
                  fontFamily="var(--font-display)" fontWeight="600" fontSize="26"
                  fill={scoreColor} letterSpacing="-0.02em">{ch.toFixed(1)}</text>
            <text x={CX} y={CY + 14} textAnchor="middle" dominantBaseline="central"
                  fontFamily="JetBrains Mono, monospace" fontSize="8"
                  fill="rgba(0,0,0,0.55)" letterSpacing="0.16em">CH</text>
          </React.Fragment>
        )}
      </svg>
    </div>
  );
};
window.AxisRadar = AxisRadar;