import type { DiagramEdge as DiagramEdgeType } from '../../api/queries/diagrams';

interface DiagramEdgeProps {
  edge: DiagramEdgeType;
  offsetY?: number;
  /** undefined = no overlay (default gray solid), true = traversed (green solid), false = not traversed (gray dashed) */
  traversed?: boolean | undefined;
}

export function DiagramEdge({ edge, offsetY = 0, traversed }: DiagramEdgeProps) {
  const pts = edge.points;
  if (!pts || pts.length < 2) return null;

  // Build SVG path: move to first point, then cubic bezier or line to rest
  let d = `M ${pts[0][0]} ${pts[0][1] + offsetY}`;

  if (pts.length === 2) {
    d += ` L ${pts[1][0]} ${pts[1][1] + offsetY}`;
  } else if (pts.length === 4) {
    // 4 points: start, control1, control2, end → cubic bezier
    d += ` C ${pts[1][0]} ${pts[1][1] + offsetY}, ${pts[2][0]} ${pts[2][1] + offsetY}, ${pts[3][0]} ${pts[3][1] + offsetY}`;
  } else {
    // Multiple points: connect with line segments through intermediate points
    for (let i = 1; i < pts.length; i++) {
      d += ` L ${pts[i][0]} ${pts[i][1] + offsetY}`;
    }
  }

  return (
    <g className="diagram-edge">
      <path
        d={d}
        fill="none"
        stroke={traversed === true ? '#3D7C47' : '#9CA3AF'}
        strokeWidth={traversed === true ? 1.5 : traversed === false ? 1 : 1.5}
        strokeDasharray={traversed === false ? '4,3' : undefined}
        markerEnd={traversed === true ? 'url(#arrowhead-green)' : traversed === false ? undefined : 'url(#arrowhead)'}
      />
      {edge.label && pts.length >= 2 && (
        <text
          x={(pts[0][0] + pts[pts.length - 1][0]) / 2}
          y={(pts[0][1] + pts[pts.length - 1][1]) / 2 + offsetY - 6}
          fill="#9C9184"
          fontSize={9}
          textAnchor="middle"
        >
          {edge.label}
        </text>
      )}
    </g>
  );
}
