/* Edges layer — SVG paths between nodes */

function edgePath(a, b) {
  // Smooth bezier from a to b (top-down preferred)
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  const cy = Math.abs(dy) * 0.5;
  const c1x = a.x;
  const c1y = a.y + cy;
  const c2x = b.x;
  const c2y = b.y - cy;
  return `M ${a.x} ${a.y} C ${c1x} ${c1y}, ${c2x} ${c2y}, ${b.x} ${b.y}`;
}

function EdgesLayer({ edges, nodes, hiddenNodes, previewEdge, onEdgeClick, selectedEdgeId }) {
  return (
    <svg className="edges">
      {edges.map(e => {
        if (hiddenNodes.has(e.from) || hiddenNodes.has(e.to)) return null;
        const a = nodes[e.from];
        const b = nodes[e.to];
        if (!a || !b) return null;
        const d = edgePath(a, b);
        const sel = selectedEdgeId === e.id;
        return (
          <g key={e.id}>
            <path className="edge-hit" d={d} onClick={(ev) => { ev.stopPropagation(); onEdgeClick(e.id); }} />
            <path className={`edge-path ${sel ? '' : ''}`} d={d}
              style={sel ? { stroke: 'var(--ink)', strokeWidth: 2.2 } : null} />
          </g>
        );
      })}
      {previewEdge && (
        <path className="edge-path preview" d={edgePath(previewEdge.from, previewEdge.to)} />
      )}
    </svg>
  );
}

window.EdgesLayer = EdgesLayer;