import { computed } from 'vue'
import { useEditorStore } from '@/stores'

/**
 * 画布交互组合式函数
 * 提供拖拽约束、缩放等功能
 */
export function useCanvasInteraction() {
  const editorStore = useEditorStore()

  /**
   * 横线拖拽约束函数
   * 只允许垂直方向移动
   */
  function horizontalLineDragBound(pos: { x: number; y: number }, originalX: number) {
    return {
      x: originalX,  // X 保持不变
      y: Math.max(0, Math.min(pos.y, editorStore.imageSize.height * editorStore.scaleFactor))
    }
  }

  /**
   * 竖线拖拽约束函数
   * 只允许水平方向移动
   */
  function verticalLineDragBound(pos: { x: number; y: number }, originalY: number) {
    return {
      x: Math.max(0, Math.min(pos.x, editorStore.imageSize.width * editorStore.scaleFactor)),
      y: originalY  // Y 保持不变
    }
  }

  /**
   * 处理缩放
   */
  function handleZoom(delta: number) {
    const newZoom = editorStore.zoom + delta
    editorStore.setZoom(newZoom)
  }

  /**
   * 重置视图
   */
  function resetView() {
    editorStore.setZoom(1.0)
    editorStore.setStagePos(0, 0)
  }

  /**
   * 适应窗口
   */
  function fitToWindow(containerWidth: number, containerHeight: number) {
    const { width, height } = editorStore.imageSize
    const scale = editorStore.scaleFactor
    
    const imageDisplayWidth = width * scale
    const imageDisplayHeight = height * scale
    
    const zoomX = containerWidth / imageDisplayWidth
    const zoomY = containerHeight / imageDisplayHeight
    const fitZoom = Math.min(zoomX, zoomY, 1.0) * 0.95  // 留一点边距
    
    editorStore.setZoom(fitZoom)
    editorStore.setStagePos(0, 0)
  }

  /**
   * 将显示坐标转换为原图坐标
   */
  function displayToOriginal(value: number): number {
    return Math.round(value / editorStore.scaleFactor)
  }

  /**
   * 将原图坐标转换为显示坐标
   */
  function originalToDisplay(value: number): number {
    return value * editorStore.scaleFactor
  }

  /**
   * 计算线条在画布上的显示坐标
   */
  const displayHorizontalLines = computed(() => {
    return editorStore.structure.horizontal_lines.map(y => originalToDisplay(y))
  })

  const displayVerticalLines = computed(() => {
    return editorStore.structure.vertical_lines.map(x => originalToDisplay(x))
  })
  
  /**
   * 表格边界框的显示坐标 [x1, y1, x2, y2]
   */
  const displayTableBbox = computed(() => {
    const bbox = editorStore.effectiveTableBbox
    return [
      originalToDisplay(bbox[0]),
      originalToDisplay(bbox[1]),
      originalToDisplay(bbox[2]),
      originalToDisplay(bbox[3])
    ]
  })
  
  /**
   * 横线的起止点（受table_bbox限制）
   */
  const horizontalLineEndpoints = computed(() => {
    const bbox = displayTableBbox.value
    return {
      x1: bbox[0],
      x2: bbox[2]
    }
  })
  
  /**
   * 竖线的起止点（受table_bbox限制）
   */
  const verticalLineEndpoints = computed(() => {
    const bbox = displayTableBbox.value
    return {
      y1: bbox[1],
      y2: bbox[3]
    }
  })

  return {
    horizontalLineDragBound,
    verticalLineDragBound,
    handleZoom,
    resetView,
    fitToWindow,
    displayToOriginal,
    originalToDisplay,
    displayHorizontalLines,
    displayVerticalLines,
    displayTableBbox,
    horizontalLineEndpoints,
    verticalLineEndpoints
  }
}
