/**
 * [INPUT]: 依赖 react;props: geo(buildStarMap 输出的几何)、onNodeClick(i)
 * [OUTPUT]: 对外提供 StarMapSvg 组件——740×400 星图 SVG(星点/连线/脉冲光晕节点/站点文字)
 * [POS]: components/v4 共享原语,学习星图 A·B 变体共用;逐字还原 DC 模板(源行 208-222)
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

export function StarMapSvg({ geo, onNodeClick }) {
  return (
    <svg viewBox="0 0 740 400" style={{ width: '100%', display: 'block' }}>
      {geo.stars.map((t, i) => (
        <circle key={`s${i}`} cx={t.x} cy={t.y} r={t.r} fill="#1D1D1B" opacity={t.o} />
      ))}
      {geo.edges.map((e, i) => (
        <line key={`e${i}`} x1={e.x1} y1={e.y1} x2={e.x2} y2={e.y2}
          stroke={e.c} strokeWidth={e.w} strokeDasharray={e.d} />
      ))}
      {geo.nodes.map((n, i) => (
        <g key={`n${i}`} className="zzm-node" style={{ cursor: 'pointer' }}
          onClick={() => onNodeClick?.(i)}>
          <circle cx={n.x} cy={n.y} r={26} fill="transparent" />
          {n.haloR ? (
            <circle cx={n.x} cy={n.y} r={n.haloR} fill="none" stroke="var(--zzm-accent,#A6402F)"
              strokeWidth={1.5} style={{ animation: 'zzmPulse 2.6s ease-in-out infinite' }} />
          ) : null}
          <circle cx={n.x} cy={n.y} r={n.r} fill={n.fill} stroke={n.stroke} strokeWidth={1.5} />
          <text x={n.x} y={n.sy} textAnchor="middle" fontSize={9.5} fill="#B0B0AA"
            fontFamily="var(--zzm-mono)" style={{ userSelect: 'none' }}>{n.stn}</text>
          <text x={n.x} y={n.my} textAnchor="middle" fontSize={10.5} fontWeight={600}
            fill={n.mf} style={{ userSelect: 'none' }}>{n.mark}</text>
          <text x={n.x} y={n.ly} textAnchor="middle" fontSize={12.5} fontWeight={n.lw}
            fill={n.lf} style={{ userSelect: 'none' }}>{n.label}</text>
          {n.lessons.map((ln, j) => (
            <text key={j} x={n.x} y={ln.y} textAnchor="middle" fontSize={10.5}
              fontWeight={ln.w} fill={ln.f} style={{ userSelect: 'none' }}>{ln.t}</text>
          ))}
        </g>
      ))}
    </svg>
  )
}