// radar.jsx — generic 樂齡六力 radar (墨色近期實線 + 灰虛線初評)
// geometry from reference artifact: center (170,160), 1.2px per unit, clockwise from top.
const RADAR_CENTER = { x: 170, y: 160 };
const RADAR_SCALE = 1.2; // px per point (value 0–100)
// clockwise from top — matches SIX_ORDER
const RADAR_DIRS = [
  { dx: 0, dy: -1 },              // 認知力 top
  { dx: 0.866, dy: -0.5 },        // 反應力 upper-right
  { dx: 0.866, dy: 0.5 },         // 自主力 lower-right
  { dx: 0, dy: 1 },               // 體適能力 bottom
  { dx: -0.866, dy: 0.5 },        // 情緒力 lower-left
  { dx: -0.866, dy: -0.5 },       // 社交力 upper-left
];

function radarPt(i, value) {
  const r = value * RADAR_SCALE;
  return [RADAR_CENTER.x + RADAR_DIRS[i].dx * r, RADAR_CENTER.y + RADAR_DIRS[i].dy * r];
}
function ringPoly(value) {
  return RADAR_DIRS.map((_, i) => radarPt(i, value).map((n) => Math.round(n * 10) / 10).join(',')).join(' ');
}

function Radar({ student, size = 360 }) {
  const order = window.SIX_ORDER;
  const baseVals = order.map((k) => student.sp[k][0]);
  const recentVals = order.map((k) => student.sp[k][1]);
  const basePoly = baseVals.map((v, i) => radarPt(i, v).map((n) => Math.round(n * 10) / 10).join(',')).join(' ');
  const recentPoly = recentVals.map((v, i) => radarPt(i, v).map((n) => Math.round(n * 10) / 10).join(',')).join(' ');
  const labels = [
    { i: 0, x: 170, y: 20, anchor: 'middle' },
    { i: 1, x: 296.4, y: 91, anchor: 'start' },
    { i: 2, x: 296.4, y: 237, anchor: 'start' },
    { i: 3, x: 170, y: 306, anchor: 'middle' },
    { i: 4, x: 43.6, y: 237, anchor: 'end' },
    { i: 5, x: 43.6, y: 91, anchor: 'end' },
  ];
  return (
    <svg width="100%" viewBox="0 0 360 320" role="img" style={{ display: 'block' }}>
      <title>{student.name} 樂齡六力雷達圖</title>
      {/* rings */}
      {[100, 75, 50, 25].map((v, idx) => (
        <polygon key={v} points={ringPoly(v)} fill="none"
          stroke={idx === 0 ? 'var(--border-strong)' : 'var(--border)'} strokeWidth="0.5" />
      ))}
      {/* spokes */}
      {RADAR_DIRS.map((_, i) => {
        const [x, y] = radarPt(i, 100);
        return <line key={i} x1="170" y1="160" x2={x} y2={y} stroke="var(--border)" strokeWidth="0.5" />;
      })}
      {/* baseline (初評) dashed grey */}
      <polygon points={basePoly} fill="none" stroke="var(--ink-3)" strokeWidth="1.5" strokeDasharray="4 3" />
      {/* recent (近期) ink */}
      <polygon points={recentPoly} fill="#33342C" fillOpacity="0.12" stroke="var(--mark)" strokeWidth="1.5" />
      {recentVals.map((v, i) => { const [x, y] = radarPt(i, v); return <circle key={i} cx={x} cy={y} r="3" fill="var(--mark)" />; })}
      {/* labels — 功能=ink, 心理社會=ink-2 */}
      {labels.map((l) => {
        const name = order[l.i];
        const soft = window.PSYCHOSOCIAL.includes(name);
        return (
          <text key={l.i} x={l.x} y={l.y} textAnchor={l.anchor}
            fontFamily="'Noto Sans TC',sans-serif" fontSize="13" fill={soft ? 'var(--ink-2)' : 'var(--ink)'}>
            {name}{soft ? '◦' : ''}
          </text>
        );
      })}
    </svg>
  );
}

Object.assign(window, { Radar });