<template>
  <svg class="connection-svg" ref="svgRef">
    <defs>
      <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
        <polygon points="0 0, 10 3.5, 0 7" fill="#409eff" />
      </marker>
      <marker id="arrowhead-warn" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
        <polygon points="0 0, 10 3.5, 0 7" fill="#e6a23c" />
      </marker>
    </defs>

    <!-- 固定跨层箭头：从下层泳道到上层泳道（因果连线） -->
    <path
      v-for="(arrow, idx) in fixedLayerArrows"
      :key="'fixed-' + idx"
      :d="arrow.path"
      fill="none"
      stroke="#c0c4cc"
      stroke-width="1.5"
      stroke-dasharray="6,4"
      marker-end="url(#arrowhead)"
      class="fixed-layer-arrow"
    >
      <title>{{ arrow.from }} → {{ arrow.to }}</title>
    </path>

    <!-- 用户自定义连线 -->
    <line
      v-for="(line, idx) in connectionLines"
      :key="'conn-' + idx"
      :x1="line.x1" :y1="line.y1" :x2="line.x2" :y2="line.y2"
      :class="['conn-line', { 'conn-selected': selectedConnIdx === idx }]"
      :style="{ '--from-color': line.fromColor, '--to-color': line.toColor }"
      marker-end="url(#arrowhead)"
      :stroke="selectedConnIdx === idx ? '#f56c6c' : '#409eff'"
      :stroke-width="selectedConnIdx === idx ? 3 : 2"
      @click.stop="$emit('select-connection', idx)"
      @mouseenter="hoverConnIdx = idx"
      @mouseleave="hoverConnIdx = null"
    />

    <!-- 连线提示浮层 -->
    <g v-if="hoverConnIdx !== null && connectionLines[hoverConnIdx] && hoverConnIdx !== selectedConnIdx">
      <rect
        :x="connectionLines[hoverConnIdx].mx - 60"
        :y="connectionLines[hoverConnIdx].my - 36"
        width="120" height="22" rx="4" fill="rgba(0,0,0,0.65)"
      />
      <text
        :x="connectionLines[hoverConnIdx].mx"
        :y="connectionLines[hoverConnIdx].my - 21"
        text-anchor="middle" fill="#fff" font-size="11"
      >点击选中连线</text>
    </g>

    <!-- 删除按钮（选中连线时） -->
    <g v-if="selectedConnIdx !== null && connectionLines[selectedConnIdx]">
      <rect
        :x="connectionLines[selectedConnIdx].mx - 18"
        :y="connectionLines[selectedConnIdx].my - 24"
        width="88" height="24" rx="12" fill="#f56c6c" class="del-btn-bg"
        @click.stop="$emit('delete-connection', selectedConnIdx)"
      />
      <text
        :x="connectionLines[selectedConnIdx].mx"
        :y="connectionLines[selectedConnIdx].my - 8"
        text-anchor="middle" fill="#fff" font-size="13" font-weight="bold"
        class="del-btn-text"
        @click.stop="$emit('delete-connection', selectedConnIdx)"
      >✕ 删除连线</text>
    </g>

    <!-- 绘制中的临时线 -->
    <line v-if="tempLine"
      :x1="tempLine.x1" :y1="tempLine.y1"
      :x2="tempLine.x2" :y2="tempLine.y2"
      stroke="#e6a23c" stroke-width="2" stroke-dasharray="6,3"
      marker-end="url(#arrowhead-warn)"
    />
  </svg>
</template>

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

const props = defineProps<{
  connectionLines: any[]
  selectedConnIdx: number | null
  tempLine: any
  fixedLayerArrows: { from: string; to: string; path: string }[]
}>()

const emit = defineEmits<{
  (e: 'select-connection', idx: number): void
  (e: 'delete-connection', idx: number): void
}>()

const svgRef = ref<SVGSVGElement | null>(null)
const hoverConnIdx = ref<number | null>(null)

defineExpose({ svgRef })
</script>

<style scoped>
.connection-svg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 5; pointer-events: none;
  overflow: visible;
}
.conn-line {
  cursor: pointer; transition: stroke .15s, stroke-width .15s;
  pointer-events: stroke;
}
.conn-line:hover { stroke: #e6a23c !important; stroke-width: 4 !important; cursor: pointer; }
.conn-selected { stroke: #f56c6c !important; stroke-width: 3; }
.del-btn-bg { cursor: pointer; pointer-events: all; }
.del-btn-bg:hover { fill: #e74c3c !important; }
.del-btn-text { cursor: pointer; pointer-events: all; user-select: none; }
.fixed-layer-arrow {
  pointer-events: none;
  opacity: 0.5;
}
</style>
