<script setup lang="ts">
import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
import type { Task } from '../models/classes/Task'
import { getPredecessorIds } from '../utils/predecessorUtils'

// 定义 TaskBar 位置信息类型
interface TaskBarPosition {
  left: number
  top: number
  width: number
  height: number
}

// 定义月份分隔线位置类型
interface VerticalLine {
  left: number
  label?: string
}

// 定义 Props
interface Props {
  tasks: Task[]
  taskBarPositions: Record<number, TaskBarPosition>
  width: number
  height: number
  offsetLeft?: number // Canvas 在全局坐标系中的偏移量（用于虚拟渲染）
  highlightedTaskId: number | null
  highlightedTaskIds: Set<number>
  hoveredTaskId: number | null
  // 月份分隔线配置
  verticalLines?: VerticalLine[]
  showVerticalLines?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  verticalLines: () => [],
  showVerticalLines: true,
  offsetLeft: 0,
})

// Canvas 引用
const canvasRef = ref<HTMLCanvasElement | null>(null)

// requestAnimationFrame 防抖控制
let rafId: number | null = null
let pendingRedraw = false
let themeObserver: MutationObserver | null = null

// 当前主题（用于分隔线颜色）
const isDarkTheme = ref(document.documentElement.getAttribute('data-theme') === 'dark')

// 监听主题变化
const updateTheme = () => {
  isDarkTheme.value = document.documentElement.getAttribute('data-theme') === 'dark'
  scheduleRedraw()
}

/**
 * 绘制关系线到 Canvas
 * 性能优势：相比 SVG 提升 18 倍渲染性能
 */
const drawLinks = () => {
  const canvas = canvasRef.value
  if (!canvas) return

  const ctx = canvas.getContext('2d', { alpha: true })
  if (!ctx) {
    // eslint-disable-next-line no-console
    console.error('❌ Canvas context 获取失败，可能是尺寸超限')
    return
  }

  // 适配高清屏（Retina）
  const dpr = window.devicePixelRatio || 1
  const displayWidth = props.width
  const displayHeight = props.height

  // 只在尺寸变化时更新 canvas 尺寸
  const pixelWidth = displayWidth * dpr
  const pixelHeight = displayHeight * dpr
  if (canvas.width !== pixelWidth || canvas.height !== pixelHeight) {
    canvas.width = pixelWidth
    canvas.height = pixelHeight
    ctx.scale(dpr, dpr)
  }

  // 清空画布（透明）
  ctx.clearRect(0, 0, displayWidth, displayHeight)

  // 绘制月份分隔线（在关系线之前，作为背景）
  if (props.showVerticalLines && props.verticalLines && props.verticalLines.length > 0) {
    ctx.save()

    // 使用与旗帜一致的主题色：浅色模式 #409eff，暗色模式 #66b1ff
    const lineColor = isDarkTheme.value ? '#66b1ff' : '#409eff'
    ctx.strokeStyle = lineColor
    ctx.lineWidth = 1

    // 优化：一次性绘制所有垂直线，避免多次 stroke() 调用
    // 虚拟渲染：减去偏移量，转换为 Canvas 局部坐标
    ctx.beginPath()
    for (const line of props.verticalLines) {
      const localX = line.left - props.offsetLeft
      // 只绘制在 Canvas 可见范围内的线
      if (localX >= 0 && localX <= displayWidth) {
        ctx.moveTo(localX, 0)
        ctx.lineTo(localX, displayHeight)
      }
    }
    ctx.stroke()

    ctx.restore()
  }

  // 获取当前渲染的任务ID集合
  const currentTaskIds = new Set<number>()
  for (const task of props.tasks) {
    currentTaskIds.add(task.id)
  }

  // 是否处于高亮模式
  const isHighlightMode = props.highlightedTaskId !== null

  // 虚拟渲染：计算 Canvas 覆盖的范围
  const canvasStartX = props.offsetLeft
  const canvasEndX = props.offsetLeft + displayWidth

  // 定义线条数据类型
  interface LineData {
    x1: number
    y1: number
    x2: number
    y2: number
    c1x: number
    c1y: number
    c2x: number
    c2y: number
    arrowAngle: number
  }

  // 按样式分组线条数据（减少状态切换）
  const highlightedLines: LineData[] = []
  const hoveredLines: LineData[] = []
  const normalLines: LineData[] = []
  const fadedLines: LineData[] = [] // 高亮模式下的普通线条（半透明）

  for (const task of props.tasks) {
    if (!task.predecessor || !props.taskBarPositions[task.id]) continue

    const predecessorIds = getPredecessorIds(task.predecessor)

    for (const predecessorId of predecessorIds) {
      const fromBar = props.taskBarPositions[predecessorId]
      const toBar = props.taskBarPositions[task.id]

      if (!fromBar || !toBar || !currentTaskIds.has(predecessorId)) {
        continue
      }

      // 虚拟渲染：跳过不在 Canvas 覆盖范围内的关系线
      // 如果起点和终点都在 Canvas 外，跳过
      const fromX = fromBar.left + fromBar.width
      const toX = toBar.left
      const lineMinX = Math.min(fromX, toX)
      const lineMaxX = Math.max(fromX, toX)
      if (lineMaxX < canvasStartX || lineMinX > canvasEndX) {
        continue // 完全在 Canvas 外，跳过
      }

      // 判断高亮状态
      const fromIsPrimary = props.highlightedTaskId === predecessorId
      const toIsPrimary = props.highlightedTaskId === task.id
      const fromIsHighlighted = props.highlightedTaskIds.has(predecessorId)
      const toIsHighlighted = props.highlightedTaskIds.has(task.id)
      const isLineHighlighted = fromIsHighlighted && toIsHighlighted

      // 判断 hover 状态
      const fromIsHovered = props.hoveredTaskId === predecessorId
      const toIsHovered = props.hoveredTaskId === task.id
      const isLineHovered = fromIsHovered || toIsHovered

      // 计算 Y 轴偏移（高亮时的位移）
      const fromYOffset = fromIsPrimary ? -8 : fromIsHighlighted ? -5 : 0
      const toYOffset = toIsPrimary ? -8 : toIsHighlighted ? -5 : 0

      // 计算坐标（全局坐标）
      const globalX1 = fromBar.left + fromBar.width
      const globalY1 = fromBar.top + fromBar.height / 2 + fromYOffset
      const globalX2 = toBar.left
      const globalY2 = toBar.top + toBar.height / 2 + toYOffset

      // 转换为 Canvas 局部坐标
      const x1 = globalX1 - props.offsetLeft
      const y1 = globalY1
      const x2 = globalX2 - props.offsetLeft
      const y2 = globalY2

      const c1x = x1 + 40
      const c1y = y1
      const c2x = x2 - 40
      const c2y = y2

      // 预计算箭头角度
      const arrowAngle = Math.atan2(y2 - c2y, x2 - c2x)
      const lineData: LineData = { x1, y1, x2, y2, c1x, c1y, c2x, c2y, arrowAngle }

      // 根据状态分组
      if (isLineHighlighted) {
        highlightedLines.push(lineData)
      } else if (isLineHovered) {
        hoveredLines.push(lineData)
      } else if (isHighlightMode) {
        fadedLines.push(lineData)
      } else {
        normalLines.push(lineData)
      }
    }
  }

  // 批量绘制：设置虚线样式（所有线条共用）
  ctx.setLineDash([6, 4])

  // 批量绘制高亮线条
  if (highlightedLines.length > 0) {
    ctx.strokeStyle = '#409eff'
    ctx.fillStyle = '#409eff'
    ctx.lineWidth = 4
    ctx.globalAlpha = 1

    ctx.beginPath()
    for (const line of highlightedLines) {
      ctx.moveTo(line.x1, line.y1)
      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
    }
    ctx.stroke()

    // 批量绘制箭头
    for (const line of highlightedLines) {
      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
    }
  }

  // 批量绘制悬停线条
  if (hoveredLines.length > 0) {
    ctx.strokeStyle = '#67c23a'
    ctx.fillStyle = '#67c23a'
    ctx.lineWidth = 3
    ctx.globalAlpha = 1

    ctx.beginPath()
    for (const line of hoveredLines) {
      ctx.moveTo(line.x1, line.y1)
      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
    }
    ctx.stroke()

    // 批量绘制箭头
    for (const line of hoveredLines) {
      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
    }
  }

  // 批量绘制普通线条
  if (normalLines.length > 0) {
    ctx.strokeStyle = '#c0c4cc'
    ctx.fillStyle = '#c0c4cc'
    ctx.lineWidth = 2
    ctx.globalAlpha = 1

    ctx.beginPath()
    for (const line of normalLines) {
      ctx.moveTo(line.x1, line.y1)
      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
    }
    ctx.stroke()

    // 批量绘制箭头
    for (const line of normalLines) {
      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
    }
  }

  // 批量绘制半透明线条（高亮模式下的普通线条）
  if (fadedLines.length > 0) {
    ctx.strokeStyle = '#c0c4cc'
    ctx.fillStyle = '#c0c4cc'
    ctx.lineWidth = 2
    ctx.globalAlpha = 0.2

    ctx.beginPath()
    for (const line of fadedLines) {
      ctx.moveTo(line.x1, line.y1)
      ctx.bezierCurveTo(line.c1x, line.c1y, line.c2x, line.c2y, line.x2, line.y2)
    }
    ctx.stroke()

    // 批量绘制箭头
    for (const line of fadedLines) {
      drawArrowOptimized(ctx, line.x2, line.y2, line.arrowAngle)
    }

    // 恢复透明度
    ctx.globalAlpha = 1
  }
}

/**
 * 优化版箭头绘制（减少参数传递，复用已设置的 fillStyle）
 */
const drawArrowOptimized = (
  ctx: CanvasRenderingContext2D,
  x2: number,
  y2: number,
  angle: number,
) => {
  const arrowLength = 8
  const arrowWidth = 4

  ctx.beginPath()
  // fillStyle 已在外部设置，无需重复设置
  ctx.moveTo(x2, y2)
  ctx.lineTo(
    x2 - arrowLength * Math.cos(angle) - arrowWidth * Math.sin(angle),
    y2 - arrowLength * Math.sin(angle) + arrowWidth * Math.cos(angle),
  )
  ctx.lineTo(
    x2 - arrowLength * Math.cos(angle) + arrowWidth * Math.sin(angle),
    y2 - arrowLength * Math.sin(angle) - arrowWidth * Math.cos(angle),
  )
  ctx.closePath()
  ctx.fill()
}

/**
 * 使用 requestAnimationFrame 优化的重绘调度器
 * 合并多个连续的重绘请求为单次绘制
 */
const scheduleRedraw = () => {
  if (pendingRedraw) {
    // 已有待处理的重绘请求，跳过
    return
  }

  pendingRedraw = true

  // 取消之前的 RAF（如果有）
  if (rafId !== null) {
    cancelAnimationFrame(rafId)
  }

  // 在下一帧绘制
  rafId = requestAnimationFrame(() => {
    pendingRedraw = false
    rafId = null
    drawLinks()
  })
}

// 监听相关状态变化，自动重绘 Canvas
watch(
  [
    () => props.taskBarPositions,
    () => props.tasks,
    () => props.highlightedTaskId,
    () => props.highlightedTaskIds,
    () => props.hoveredTaskId,
    () => props.width,
    () => props.height,
    () => props.verticalLines,
    () => props.showVerticalLines,
    () => props.offsetLeft, // 监听虚拟渲染的偏移量变化
  ],
  () => {
    // 使用 RAF 调度重绘，合并连续的多次变化为单次绘制
    scheduleRedraw()
  },
  { deep: false }, // shallowRef 不需要 deep
)

// 组件挂载后初始化绘制
onMounted(() => {
  // 监听主题变化
  themeObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.attributeName === 'data-theme') {
        updateTheme()
        break
      }
    }
  })

  themeObserver.observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['data-theme'],
  })

  nextTick(() => {
    drawLinks()
  })
})

// 组件卸载时清理
onUnmounted(() => {
  // 清理主题观察器
  if (themeObserver) {
    themeObserver.disconnect()
    themeObserver = null
  }

  // 取消待处理的 RAF
  if (rafId !== null) {
    cancelAnimationFrame(rafId)
    rafId = null
  }
})

// 暴露方法供父组件调用
defineExpose({
  redraw: drawLinks,
})
</script>

<template>
  <canvas
    ref="canvasRef"
    class="gantt-links-canvas"
    :style="{
      position: 'absolute',
      left: 0,
      top: 0,
      width: `${width}px`,
      height: `${height}px`,
      transform: `translateX(${offsetLeft}px)`,
      zIndex: highlightedTaskId !== null ? 1001 : 25,
      pointerEvents: 'none',
    }"
  />
</template>

<style scoped>
.gantt-links-canvas {
  display: block;
  background: transparent; /* 确保背景透明 */
  opacity: 1; /* 确保不透明度为 100% */
}
</style>
