// DonutChart — data: [{ label, value, color }]
function DonutChart({ data, size = 180, thickness = 28, centerLabel, centerValue }) {
  const total = data.reduce((a, b) => a + b.value, 0);
  const r = size / 2 - 2;
  const inner = r - thickness;
  const cx = size / 2, cy = size / 2;
  let angle = -Math.PI / 2;

  const arcs = data.map((d, i) => {
    const pct = d.value / total;
    const a0 = angle;
    const a1 = angle + pct * Math.PI * 2;
    angle = a1;
    const large = pct > 0.5 ? 1 : 0;
    const x0 = cx + Math.cos(a0) * r, y0 = cy + Math.sin(a0) * r;
    const x1 = cx + Math.cos(a1) * r, y1 = cy + Math.sin(a1) * r;
    const xi0 = cx + Math.cos(a0) * inner, yi0 = cy + Math.sin(a0) * inner;
    const xi1 = cx + Math.cos(a1) * inner, yi1 = cy + Math.sin(a1) * inner;
    const path = `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${inner} ${inner} 0 ${large} 0 ${xi0} ${yi0} Z`;
    return { path, color: d.color, pct };
  });

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
      <svg width={size} height={size} style={{ flexShrink: 0 }}>
        {arcs.map((a, i) => (
          <path key={i} d={a.path} fill={a.color} stroke="var(--bg-elev)" strokeWidth="2"/>
        ))}
        {centerValue && (
          <>
            <text x={cx} y={cy - 6} textAnchor="middle" fontSize="11" fill="var(--text-tertiary)">{centerLabel}</text>
            <text x={cx} y={cy + 14} textAnchor="middle" fontSize="18" fill="var(--text)"
                  fontFamily="Fraunces, serif">{centerValue}</text>
          </>
        )}
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        {data.map((d, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ width: 10, height: 10, borderRadius: 3, background: d.color }}/>
            <span style={{ fontSize: 13, flex: 1 }}>{d.label}</span>
            <span style={{ fontSize: 13, color: 'var(--text-secondary)', fontVariantNumeric: 'tabular-nums' }}>{fmt$(d.value, { compact: true })}</span>
            <span style={{ fontSize: 11.5, color: 'var(--text-tertiary)', fontVariantNumeric: 'tabular-nums', minWidth: 34, textAlign: 'right' }}>{(d.value / total * 100).toFixed(0)}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { DonutChart });