import React from 'react';
import { EdgeProps, getBezierPath } from '@xyflow/react';

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

  // Filter out stroke from style to ensure SVG attribute takes precedence (allows hover effect)
  const { stroke, ...restStyle } = style || {};

  const gradientId = `edge-gradient-${id}`;

  return (
    <g className="group/line pointer-events-auto">
      <defs>
        <linearGradient id={gradientId} x1={sourceX} y1={sourceY} x2={targetX} y2={targetY} gradientUnits="userSpaceOnUse">
          <stop offset="0%" stopColor="#22d3ee" stopOpacity="0.8" />
          <stop offset="100%" stopColor="#a855f7" stopOpacity="0.8" />
        </linearGradient>
      </defs>
      {/* Interaction path - wider for easier selection */}
      <path
        d={edgePath}
        fill="none"
        stroke="transparent"
        strokeWidth={20}
        className="react-flow__edge-interaction cursor-pointer"
      />
      {/* Fallback path - visible if gradient fails */}
      <path
        d={edgePath}
        fill="none"
        stroke="#555"
        strokeWidth={5}
        className="react-flow__edge-path opacity-50"
      />
      {/* Visible path with gradient */}
      <path
        id={id}
        d={edgePath}
        fill="none"
        stroke={`url(#${gradientId})`}
        strokeWidth={5}
        strokeOpacity={1}
        className="react-flow__edge-path transition-colors duration-300 group-hover/line:stroke-white group-hover/line:stroke-opacity-40"
        style={{ ...restStyle, stroke: `url(#${gradientId})` }}
        markerEnd={markerEnd}
      />
    </g>
  );
};
