import { BaseEdge, type EdgeProps, getBezierPath } from '@xyflow/react'

export interface AnimatedEdgeData {
  label?: string
  status?: 'healthy' | 'degraded' | 'error'
}

const statusColor: Record<string, string> = {
  healthy: '#94a3b8',
  degraded: '#fbbf24',
  error: '#fb7185',
}

export function AnimatedEdge({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  data,
}: EdgeProps & { data?: AnimatedEdgeData }) {
  const [edgePath, labelX, labelY] = getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
  })

  const color = statusColor[data?.status ?? 'healthy']

  return (
    <>
      {/* Glow under-layer */}
      <BaseEdge
        id={`${id}-glow`}
        path={edgePath}
        style={{
          stroke: color,
          strokeWidth: 4,
          strokeOpacity: 0.1,
          fill: 'none',
        }}
      />
      {/* Animated dashed line */}
      <path
        id={id}
        d={edgePath}
        fill="none"
        stroke={color}
        strokeWidth={1.5}
        strokeDasharray="6 4"
        strokeLinecap="round"
        className="topology-edge-animated"
      />
      {/* Label pill */}
      {data?.label && (
        <foreignObject
          x={labelX - 40}
          y={labelY - 10}
          width={80}
          height={20}
          className="pointer-events-none overflow-visible"
        >
          <div className="flex items-center justify-center">
            <span className="whitespace-nowrap rounded-full bg-white px-2 py-0.5 text-[9px] font-semibold tabular-nums text-slate-600 shadow-sm ring-1 ring-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
              {data.label}
            </span>
          </div>
        </foreignObject>
      )}
    </>
  )
}
