export const manualRowMoveRenderer = (
  instance: any,
  td: HTMLTableCellElement,
  row: number,
  _col: number,
  _prop: string,
  _value: any,
  _cellProperties: any
) => {
  // 清空单元格内容
  td.innerHTML = ''
  td.classList.add('ht__manualRowMove')
  
  // 创建拖拽手柄元素
  const dragHandle = document.createElement('div')
  dragHandle.className = 'manualRowMover'
  dragHandle.innerHTML = '☰'
  dragHandle.style.cursor = 'move'
  dragHandle.style.textAlign = 'center'
  dragHandle.style.userSelect = 'none'
  dragHandle.style.width = '100%'
  dragHandle.style.height = '100%'
  dragHandle.style.display = 'flex'
  dragHandle.style.alignItems = 'center'
  dragHandle.style.justifyContent = 'center'
  
  let isDragging = false
  let startY = 0
  let currentRow = row
  
  // 鼠标按下开始拖拽
  const handleMouseDown = (e: MouseEvent) => {
    e.preventDefault()
    e.stopPropagation()
    e.stopImmediatePropagation()
    
    isDragging = true
    startY = e.clientY
    currentRow = row
    
    td.classList.add('on-moving--rows', 'show-ui')
    instance.selectRows(row)
    
    // 创建拖拽指示器
    const guideLine = document.createElement('div')
    guideLine.className = 'ht__manualRowMove--guideline'
    guideLine.style.cssText = `
      position: fixed;
      left: 0;
      right: 0;
      height: 2px;
      background-color: #1976d2;
      z-index: 9999;
      pointer-events: none;
      will-change: transform;
      transform: translateZ(0);
    `
    
    // 添加到表格容器而不是 body，避免触发页面重排
    const tableContainer = instance.rootElement.parentElement || instance.rootElement
    tableContainer.style.position = tableContainer.style.position || 'relative'
    tableContainer.appendChild(guideLine)
    
    // 鼠标移动
    const handleMouseMove = (moveEvent: MouseEvent) => {
      if (!isDragging) return
      
      const deltaY = moveEvent.clientY - startY
      const rowHeight = 23 // Handsontable 默认行高
      const rowsToMove = Math.round(deltaY / rowHeight)
      const targetRow = Math.max(0, Math.min(instance.countRows() - 1, row + rowsToMove))
      
      // 更新指示线位置
      const tableRect = instance.rootElement.getBoundingClientRect()
      const targetRowElement = instance.getCell(targetRow, 0)
      if (targetRowElement) {
        const targetRect = targetRowElement.getBoundingClientRect()
        guideLine.style.top = `${targetRect.top}px`
        guideLine.style.left = `${tableRect.left}px`
        guideLine.style.width = `${tableRect.width}px`
      }
      
      currentRow = targetRow
    }
    
    // 鼠标释放结束拖拽
    const handleMouseUp = () => {
      if (!isDragging) return
      
      isDragging = false
      td.classList.remove('on-moving--rows', 'show-ui')
      
      // 移除指示线
      guideLine.remove()
      
      // 执行行移动
      if (currentRow !== row) {
        const manualRowMovePlugin = instance.getPlugin('manualRowMove')
        const nestedRowsPlugin = instance.getPlugin('nestedRows')
        
        if (manualRowMovePlugin && manualRowMovePlugin.isEnabled()) {
          // 如果启用了 nestedRows 插件，使用 dragRows 方法
          if (nestedRowsPlugin && nestedRowsPlugin.isEnabled()) {
            // dragRows 方法的 targetRow 是移除前的位置，不需要调整
            console.log(`[nestedRows] 移动行 ${row} 到 ${currentRow}`)
            manualRowMovePlugin.dragRows([row], currentRow)
          } else {
            // moveRow 方法需要修复向下拖拽的偏移问题
            // 当向下移动时，由于先移除源行，后面的索引会减1，所以目标索引也需要减1
            let targetIndex = currentRow
            if (currentRow > row) {
              targetIndex = currentRow - 1
            }
            console.log(`[普通模式] 移动行 ${row} 到 ${targetIndex} (原目标: ${currentRow})`)
            manualRowMovePlugin.moveRow(row, targetIndex)
          }
          
          instance.render()
        }
      }
      
      // 取消选中效果
      instance.deselectCell()
      
      document.removeEventListener('mousemove', handleMouseMove)
      document.removeEventListener('mouseup', handleMouseUp)
    }
    
    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
  }
  
  // 绑定拖拽事件
  dragHandle.addEventListener('mousedown', handleMouseDown)
  
  // 悬停效果
  dragHandle.addEventListener('mouseenter', () => {
    if (!isDragging) {
      dragHandle.style.backgroundColor = '#f0f0f0'
    }
  })
  
  dragHandle.addEventListener('mouseleave', () => {
    if (!isDragging) {
      dragHandle.style.backgroundColor = ''
    }
  })
  
  td.appendChild(dragHandle)
  
  return td
}