/* charts.jsx — spider/radar skills chart + small report charts */

/* polygon point for axis i of N at given radius from center */
function radarPoint(cx, cy, r, i, n) {
  const a = -Math.PI / 2 + (i * 2 * Math.PI) / n;
  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
}

function RadarChart({ data, size = 320, max = 100, levels = 4, fill = "var(--vh-blue-500)", showLabels = true }) {
  const pad = showLabels ? 58 : 16;
  const cx = size / 2, cy = size / 2, R = size / 2 - pad;
  const n = data.length;
  const ring = (frac) => data.map((_, i) => radarPoint(cx, cy, R * frac, i, n).join(",")).join(" ");
  const dataPts = data.map((d, i) => radarPoint(cx, cy, R * (d.pct / max), i, n));
  const dataPoly = dataPts.map(p => p.join(",")).join(" ");

  return (
    <svg viewBox={`0 0 ${size} ${size}`} width="100%" style={{ maxWidth: size, display: "block", margin: "0 auto", overflow: "visible" }}>
      {/* concentric grid */}
      {Array.from({ length: levels }).map((_, l) => (
        <polygon key={l} points={ring((l + 1) / levels)} fill="none" stroke="var(--line)" strokeWidth="1" />
      ))}
      {/* axes */}
      {data.map((d, i) => {
        const [x, y] = radarPoint(cx, cy, R, i, n);
        return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="var(--line)" strokeWidth="1" />;
      })}
      {/* data polygon */}
      <polygon points={dataPoly} fill={`color-mix(in oklab, ${fill}, transparent 78%)`} stroke={fill} strokeWidth="2.5" strokeLinejoin="round" />
      {/* vertices */}
      {dataPts.map((p, i) => (
        <g key={i}>
          <circle cx={p[0]} cy={p[1]} r="5" fill="var(--surface)" stroke={data[i].color || fill} strokeWidth="3" />
        </g>
      ))}
      {/* labels */}
      {showLabels && data.map((d, i) => {
        const [x, y] = radarPoint(cx, cy, R + 26, i, n);
        const anchor = Math.abs(x - cx) < 8 ? "middle" : x > cx ? "start" : "end";
        return (
          <g key={i}>
            <text x={x} y={y - 4} textAnchor={anchor} dominantBaseline="middle"
              style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 12.5, fill: "var(--ink)" }}>{d.short}</text>
            <text x={x} y={y + 11} textAnchor={anchor} dominantBaseline="middle"
              style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 11, fill: d.color || fill }}>{d.pct}%</text>
          </g>
        );
      })}
    </svg>
  );
}

/* tiny sparkline (area + line) for report trends */
function Sparkline({ data, w = 220, h = 56, color = "var(--vh-blue-500)" }) {
  const max = Math.max(...data), min = Math.min(...data);
  const span = max - min || 1;
  const step = w / (data.length - 1);
  const pts = data.map((v, i) => [i * step, h - 6 - ((v - min) / span) * (h - 12)]);
  const line = pts.map(p => p.join(",")).join(" ");
  const area = `0,${h} ` + line + ` ${w},${h}`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} width="100%" style={{ display: "block", maxWidth: w }}>
      <polygon points={area} fill={`color-mix(in oklab, ${color}, transparent 86%)`} />
      <polyline points={line} fill="none" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      {pts.map((p, i) => i === pts.length - 1 && <circle key={i} cx={p[0]} cy={p[1]} r="3.5" fill={color} />)}
    </svg>
  );
}

/* horizontal bar row for "completion by course" */
function BarRow({ label, pct, color }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <span style={{ width: 78, fontSize: 12.5, fontWeight: 600, flex: "none", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{label}</span>
      <div className="bar" style={{ flex: 1, height: 11 }}><i style={{ width: pct + "%", background: color }} /></div>
      <span style={{ width: 38, textAlign: "right", fontFamily: "var(--display)", fontWeight: 700, fontSize: 13 }}>{pct}%</span>
    </div>
  );
}

Object.assign(window, { RadarChart, Sparkline, BarRow });