'use client'

import { memo } from 'react'
import { EdgeProps, getBezierPath, EdgeLabelRenderer, BaseEdge } from 'reactflow'

export const CustomEdge = memo(
  ({ id, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, data, selected }: EdgeProps) => {
    const [edgePath, labelX, labelY] = getBezierPath({
      sourceX,
      sourceY,
      sourcePosition,
      targetX,
      targetY,
      targetPosition,
    })

    const edgeColor = selected ? '#fbbf24' : data?.type === 'tunnel' ? '#3b82f6' : '#10b981'
    const label = data?.metadata?.bandwidth || data?.type || ''

    return (
      <>
        <BaseEdge
          id={id}
          path={edgePath}
          style={{
            stroke: edgeColor,
            strokeWidth: selected ? 3 : 2,
          }}
          markerEnd="url(#arrowhead)"
        />
        {label && (
          <EdgeLabelRenderer>
            <div
              style={{
                position: 'absolute',
                transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
                pointerEvents: 'all',
              }}
              className="nodrag nopan"
            >
              <div className="px-2 py-1 text-xs bg-studio-dark border border-studio-medium rounded text-white">
                {label}
              </div>
            </div>
          </EdgeLabelRenderer>
        )}
      </>
    )
  }
)

CustomEdge.displayName = 'CustomEdge'

