<script setup lang="ts">
import { computed, inject, ref } from 'vue';

import { Plus } from '@vben/icons';

import { EdgeLabelRenderer, getBezierPath } from '@vue-flow/core';

defineOptions({
  inheritAttrs: false,
});

const props = defineProps<{
  data?: {
    status?: EdgeStatus;
  };
  id: string;
  markerEnd?: string;
  source: string;
  sourcePosition: any;
  sourceX: number;
  sourceY: number;
  style?: any;
  target: string;
  targetPosition: any;
  targetX: number;
  targetY: number;
}>();

// 边的执行状态类型
type EdgeStatus = 'completed' | 'failed' | 'idle' | 'running';

const isHovered = ref(false);

// 根据状态计算边的样式
const edgeStyle = computed(() => {
  const status = props.data?.status || 'idle';
  const baseStyle = { ...props.style };

  switch (status) {
    case 'completed': {
      return {
        ...baseStyle,
        stroke: '#22c55e',
        strokeWidth: 2.5,
      };
    }
    case 'failed': {
      return {
        ...baseStyle,
        stroke: '#ef4444',
        strokeWidth: 2.5,
      };
    }
    case 'running': {
      return {
        ...baseStyle,
        stroke: '#3b82f6',
        strokeWidth: 2.5,
        strokeDasharray: '5,5',
      };
    }
    default: {
      return baseStyle;
    }
  }
});

// 是否显示流动动画
const isRunning = computed(() => props.data?.status === 'running');

// 计算贝塞尔曲线路径和中点
const pathData = computed(() => {
  const [path, labelX, labelY] = getBezierPath({
    sourceX: props.sourceX,
    sourceY: props.sourceY,
    targetX: props.targetX,
    targetY: props.targetY,
    sourcePosition: props.sourcePosition,
    targetPosition: props.targetPosition,
  });
  return { path, labelX, labelY };
});

// 从父组件注入的添加节点函数
const onEdgeAddClick =
  inject<
    (
      edgeId: string,
      source: string,
      target: string,
      position: { x: number; y: number },
    ) => void
  >('onEdgeAddClick');

const handleAddClick = (event: MouseEvent) => {
  event.stopPropagation();
  if (onEdgeAddClick) {
    onEdgeAddClick(props.id, props.source, props.target, {
      x: event.clientX,
      y: event.clientY,
    });
  }
};
</script>

<template>
  <g>
    <!-- 主边路径 - 直接使用 path 以支持动画 -->
    <path
      :id="id"
      :d="pathData.path"
      fill="none"
      :stroke="edgeStyle.stroke || '#94a3b8'"
      :stroke-width="edgeStyle.strokeWidth || 2"
      :stroke-dasharray="edgeStyle.strokeDasharray"
      :marker-end="markerEnd"
      :class="{ 'edge-path-running': isRunning }"
    />

    <!-- 悬停检测区域 - 更宽的透明路径 -->
    <path
      :d="pathData.path"
      fill="none"
      stroke="transparent"
      stroke-width="30"
      class="cursor-pointer"
      @mouseenter="isHovered = true"
      @mouseleave="isHovered = false"
    />

    <!-- 中间的添加按钮 -->
    <EdgeLabelRenderer>
      <div
        class="nodrag nopan"
        :style="{
          position: 'absolute',
          transform: `translate(-50%, -50%) translate(${pathData.labelX}px, ${pathData.labelY}px)`,
          pointerEvents: 'all',
          zIndex: 1000,
        }"
        @mouseenter="isHovered = true"
        @mouseleave="isHovered = false"
      >
        <button
          v-show="isHovered"
          class="bg-primary text-primary-foreground border-card flex size-6 items-center justify-center rounded-full border-2 shadow-lg transition-all duration-200 hover:scale-110"
          title="在此处插入节点"
          @click="handleAddClick"
        >
          <Plus class="size-3.5" />
        </button>
      </div>
    </EdgeLabelRenderer>
  </g>
</template>

<style>
/* 执行中的边 - 流动动画 */
.edge-path-running {
  animation: edge-dash-flow 0.5s linear infinite;
}

@keyframes edge-dash-flow {
  to {
    stroke-dashoffset: -10;
  }
}
</style>
