import { memo } from 'react'
import {
  BaseEdge,
  EdgeLabelRenderer,
  getBezierPath,
  getSmoothStepPath,
  type Edge,
  type EdgeProps,
} from '@xyflow/react'
import { Badge } from '@/components/reui/badge'
import { cn } from '@cfdm/ui/lib/utils'
import {
  edgeRelationShortLabel,
  formatEdgeTunnelIps,
  type TopologyEdgeData,
} from '../types'

function TopologyEdgeComponent(props: EdgeProps<Edge<TopologyEdgeData>>) {
  const {
    id,
    sourceX,
    sourceY,
    targetX,
    targetY,
    sourcePosition,
    targetPosition,
    style,
    markerEnd,
    markerStart,
    selected,
    data,
  } = props

  const relation = data?.relation ?? 'network'
  const title = data?.label?.trim() ?? ''
  const protocol = data?.protocol?.trim() ?? ''
  const tunnelIps = formatEdgeTunnelIps(data ?? {})
  const membership = relation === 'membership'
  const pathParams = {
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  }
  const [edgePath, labelX, labelY] = membership
    ? getBezierPath(pathParams)
    : getSmoothStepPath(pathParams)

  return (
    <>
      <BaseEdge
        id={id}
        path={edgePath}
        markerEnd={markerEnd}
        markerStart={markerStart}
        style={{
          ...style,
          strokeWidth: selected ? 2.5 : 1.5,
        }}
      />
      {membership ? null : (
      <EdgeLabelRenderer>
        <div
          className={cn(
            'nodrag nopan absolute z-[1000] flex max-w-[220px] flex-wrap items-center justify-center gap-1 rounded-md border border-border bg-background px-1.5 py-1 shadow-sm',
            selected && 'ring-1 ring-primary/40',
          )}
          style={{
            // Смещение вверх от центра линии, чтобы легенда была над stroke
            transform: `translate(-50%, -100%) translate(${labelX}px,${labelY - 6}px)`,
            pointerEvents: 'all',
          }}
        >
          <Badge variant="info-light" size="xs" radius="full">
            {edgeRelationShortLabel(relation)}
          </Badge>
          {title ? (
            <Badge variant="outline" size="xs" radius="full">
              {title}
            </Badge>
          ) : null}
          {protocol ? (
            <Badge variant="primary-light" size="xs" radius="full" className="font-mono">
              {protocol}
            </Badge>
          ) : null}
          {tunnelIps ? (
            <Badge variant="secondary" size="xs" radius="full" className="font-mono">
              {tunnelIps}
            </Badge>
          ) : null}
        </div>
      </EdgeLabelRenderer>
      )}
    </>
  )
}

export const TopologyEdge = memo(TopologyEdgeComponent)
