import { BaseEdge, getBezierPath } from 'reactflow';
import type { EdgeProps } from 'reactflow';

interface MergedEdgeData {
  gradient?: string;
  isMerged?: boolean;
  colors?: string[];
}

const MergedEdge = ({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  style = {},
  data,
  markerEnd,
}: EdgeProps<MergedEdgeData>) => {
  const [edgePath] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  });

  // If this is a merged trace, create a gradient
  const isMerged = data?.isMerged;
  const colors = data?.colors || [];
  
  if (isMerged && colors.length >= 2) {
    const gradientId = `gradient-${id}`;
    
    return (
      <>
        <defs>
          <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
            {colors.map((color, idx) => (
              <stop 
                key={idx} 
                offset={`${(idx / (colors.length - 1)) * 100}%`} 
                stopColor={color} 
              />
            ))}
          </linearGradient>
        </defs>
        <BaseEdge
          id={id}
          path={edgePath}
          style={{
            ...style,
            stroke: `url(#${gradientId})`,
            strokeWidth: 3,
          }}
          markerEnd={markerEnd}
        />
      </>
    );
  }

  // Regular edge
  return (
    <BaseEdge
      id={id}
      path={edgePath}
      style={style}
      markerEnd={markerEnd}
    />
  );
};

export default MergedEdge;