<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
import { useVueFileStore } from '../../stores/vueFileStore'
import { useDesignStore } from '../../stores/designStore'
import config from './index.json'

const TEMPLATE_SERVICE_URL = 'http://localhost:3001'

const vueFileStore = useVueFileStore()
const designStore = useDesignStore()

// 元素树节点类型
interface ElementNode {
  type: 'row' | 'col'
  path: string
  label: string
  componentName?: string | null
  children?: ElementNode[]
}

// 元素树数据
const elementTree = ref<ElementNode[]>([])
const loading = ref(false)

// 拖拽状态
const draggingNode = ref<ElementNode | null>(null)
const dropTarget = ref<{ node: ElementNode, position: 'before' | 'after' | 'inside' } | null>(null)

// 右键菜单状态
const contextMenu = ref<{ x: number, y: number, node: ElementNode } | null>(null)

// 选中的节点
const selectedPath = ref<string | null>(null)

// 获取页面元素结构
const fetchElementTree = async () => {
  if (!vueFileStore.selectedFilePath) {
    elementTree.value = []
    return
  }
  
  loading.value = true
  try {
    const response = await fetch(
      `${TEMPLATE_SERVICE_URL}/api/element-tree?pagePath=${encodeURIComponent(vueFileStore.selectedFilePath)}`
    )
    const result = await response.json()
    
    if (result.success) {
      elementTree.value = result.tree || []
    } else {
      elementTree.value = []
    }
  } catch (error) {
    elementTree.value = []
  } finally {
    loading.value = false
  }
}

// 获取节点显示文本
const getNodeText = (node: ElementNode): string => {
  if (node.type === 'row') return node.path
  if (node.componentName) return `${node.path}-${node.componentName}`
  return node.path
}

// 判断是否为叶子节点
const isLeafNode = (node: ElementNode): boolean => {
  return node.type === 'col' && !!node.componentName && (!node.children || node.children.length === 0)
}

// 计算允许的放置位置
const getAllowedPosition = (source: ElementNode, target: ElementNode): 'before' | 'after' | 'inside' | null => {
  if (source.path === target.path) return null
  if (target.path.startsWith(source.path)) return null
  
  if (source.type === 'col' && target.type === 'col') return 'after'
  if (source.type === 'row' && target.type === 'row') return 'after'
  if (source.type === 'col' && target.type === 'row') return 'inside'
  if (source.type === 'row' && target.type === 'col' && !isLeafNode(target)) return 'inside'
  
  return null
}

// 点击节点 - 选中组件
const handleNodeClick = (node: ElementNode) => {
  selectedPath.value = node.path
  
  // 如果是叶子节点，选中组件显示元数据
  if (isLeafNode(node) && node.componentName && vueFileStore.selectedFilePath) {
    designStore.selectComponent(node.path, node.componentName, vueFileStore.selectedFilePath)
  }
  
  // 高亮设计中心对应元素
  highlightDesignCenterElement(node.path)
}

// 高亮设计中心的对应元素
const highlightDesignCenterElement = (path: string) => {
  // 移除其他选中
  document.querySelectorAll('.fauto-selected').forEach(el => {
    el.classList.remove('fauto-selected')
  })
  // 找到对应元素并选中
  const element = document.querySelector(`[data-path="${path}"]`)
  if (element) {
    element.classList.add('fauto-selected')
    // 滚动到可见区域
    element.scrollIntoView({ behavior: 'smooth', block: 'center' })
  }
}

// 监听设计中心的选中事件，同步选中结构树
const handleDesignComponentSelected = (e: CustomEvent) => {
  const { path } = e.detail
  if (path) {
    selectedPath.value = path
  }
}

// 右键菜单
const handleContextMenu = (e: MouseEvent, node: ElementNode) => {
  e.preventDefault()
  e.stopPropagation()
  contextMenu.value = { x: e.clientX, y: e.clientY, node }
}

// 关闭右键菜单
const closeContextMenu = () => {
  contextMenu.value = null
}

// 删除节点
const deleteNode = async (node: ElementNode) => {
  if (!vueFileStore.selectedFilePath) return
  
  if (!confirm(`确定要删除 ${getNodeText(node)} 吗？`)) return
  
  try {
    const response = await fetch(`${TEMPLATE_SERVICE_URL}/api/delete-element`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        pagePath: vueFileStore.selectedFilePath,
        elementPath: node.path
      })
    })
    
    const result = await response.json()
    
    if (result.success) {
      console.log('[结构] 删除成功:', node.path)
      window.dispatchEvent(new CustomEvent('vue-template-updated', { 
        detail: { pagePath: vueFileStore.selectedFilePath } 
      }))
      
      // 如果删除的是选中的组件，清除选中
      if (designStore.selectedComponent?.path === node.path) {
        designStore.clearSelection()
      }
    } else {
      alert('删除失败: ' + result.error)
    }
  } catch (error) {
    console.error('[结构] 删除失败:', error)
  }
  
  closeContextMenu()
}

// 键盘事件处理
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Delete' && selectedPath.value) {
    const node = findNodeByPath(elementTree.value, selectedPath.value)
    if (node) {
      deleteNode(node)
    }
  }
  if (e.key === 'Escape') {
    closeContextMenu()
  }
}

// 查找节点
const findNodeByPath = (nodes: ElementNode[], path: string): ElementNode | null => {
  for (const node of nodes) {
    if (node.path === path) return node
    if (node.children) {
      const found = findNodeByPath(node.children, path)
      if (found) return found
    }
  }
  return null
}

// 拖拽事件
const handleDragStart = (e: DragEvent, node: ElementNode) => {
  draggingNode.value = node
  if (e.dataTransfer) {
    e.dataTransfer.effectAllowed = 'move'
    e.dataTransfer.setData('text/plain', node.path)
  }
}

const handleDragOver = (e: DragEvent, node: ElementNode) => {
  if (!draggingNode.value) return
  const position = getAllowedPosition(draggingNode.value, node)
  if (position) {
    e.preventDefault()
    dropTarget.value = { node, position }
  } else {
    dropTarget.value = null
  }
}

const handleDragLeave = () => {
  dropTarget.value = null
}

const handleDrop = async (e: DragEvent, node: ElementNode) => {
  e.preventDefault()
  
  if (!draggingNode.value || !vueFileStore.selectedFilePath) {
    resetDragState()
    return
  }
  
  const position = getAllowedPosition(draggingNode.value, node)
  if (!position) {
    resetDragState()
    return
  }
  
  let direction: string
  if (position === 'inside') {
    direction = 'inside'
  } else if (position === 'after') {
    direction = node.type === 'row' ? 'bottom' : 'right'
  } else {
    direction = node.type === 'row' ? 'top' : 'left'
  }
  
  try {
    const response = await fetch(`${TEMPLATE_SERVICE_URL}/api/move-element`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        pagePath: vueFileStore.selectedFilePath,
        source: {
          type: 'canvas-element',
          path: draggingNode.value.path,
          elementType: draggingNode.value.type === 'row' ? 'er' : 'ec'
        },
        targetPath: node.path,
        targetType: node.type === 'row' ? 'er' : 'ec',
        direction
      })
    })
    
    const result = await response.json()
    
    if (result.success) {
      window.dispatchEvent(new CustomEvent('vue-template-updated', { 
        detail: { pagePath: vueFileStore.selectedFilePath } 
      }))
    }
  } catch (error) {
    console.error('[结构] 移动失败:', error)
  }
  
  resetDragState()
}

const handleDragEnd = () => {
  resetDragState()
}

const resetDragState = () => {
  draggingNode.value = null
  dropTarget.value = null
}

// 递归渲染树
const flattenTree = (nodes: ElementNode[], depth = 0): Array<{ node: ElementNode, depth: number }> => {
  const result: Array<{ node: ElementNode, depth: number }> = []
  for (const node of nodes) {
    result.push({ node, depth })
    if (node.children && node.children.length > 0) {
      result.push(...flattenTree(node.children, depth + 1))
    }
  }
  return result
}

// 获取节点样式类
const getNodeClass = (node: ElementNode) => {
  const classes: string[] = []
  if (node.type === 'row') classes.push('is-row')
  if (node.type === 'col') classes.push('is-col')
  if (draggingNode.value?.path === node.path) classes.push('is-dragging')
  if (selectedPath.value === node.path) classes.push('is-selected')
  if (dropTarget.value?.node.path === node.path) {
    classes.push('is-drop-target')
    classes.push(`drop-${dropTarget.value.position}`)
  }
  return classes
}

// 监听
watch(() => vueFileStore.selectedFilePath, () => {
  fetchElementTree()
}, { immediate: true })

onMounted(() => {
  window.addEventListener('vue-template-updated', () => {
    setTimeout(fetchElementTree, 300)
  })
  // 监听设计中心的选中事件
  window.addEventListener('design-component-selected', handleDesignComponentSelected as EventListener)
  document.addEventListener('keydown', handleKeyDown)
  document.addEventListener('click', closeContextMenu)
  // 阻止组件内的浏览器默认右键菜单
  document.addEventListener('contextmenu', handleGlobalContextMenu)
})

// 全局右键菜单处理，阻止浏览器默认菜单
const handleGlobalContextMenu = (e: MouseEvent) => {
  // 检查是否在树节点上点击
  const target = e.target as HTMLElement
  if (target.closest('.tree-node')) {
    e.preventDefault()
  }
}

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeyDown)
  document.removeEventListener('click', closeContextMenu)
  document.removeEventListener('contextmenu', handleGlobalContextMenu)
  window.removeEventListener('design-component-selected', handleDesignComponentSelected as EventListener)
})
</script>

<template>
  <div class="tree-viewer">
    <div class="viewer-header">
      <span class="title">{{ config.name }}</span>
    </div>
    <div class="viewer-body">
      <div v-if="loading" class="loading-tip">加载中...</div>
      
      <div v-else-if="elementTree.length === 0" class="empty-tip">
        {{ vueFileStore.selectedFilePath ? '暂无布局元素' : '请先选择页面' }}
      </div>
      
      <div v-else class="tree-container">
        <div 
          v-for="item in flattenTree(elementTree)" 
          :key="item.node.path"
          class="tree-node"
          :class="getNodeClass(item.node)"
          :style="{ paddingLeft: (item.depth * 16 + 8) + 'px' }"
          draggable="true"
          @click="handleNodeClick(item.node)"
          @contextmenu="handleContextMenu($event, item.node)"
          @dragstart="handleDragStart($event, item.node)"
          @dragover="handleDragOver($event, item.node)"
          @dragleave="handleDragLeave"
          @drop="handleDrop($event, item.node)"
          @dragend="handleDragEnd"
        >
          <span class="node-text">{{ getNodeText(item.node) }}</span>
          <span v-if="dropTarget?.node.path === item.node.path" class="drop-hint">
            {{ dropTarget.position === 'inside' ? '放入' : '后面' }}
          </span>
          <span class="delete-icon" @click.stop="deleteNode(item.node)" title="删除">🗑️</span>
        </div>
      </div>
    </div>
    
    <!-- 右键菜单 -->
    <div 
      v-if="contextMenu" 
      class="context-menu"
      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
    >
      <div class="menu-item" @click="deleteNode(contextMenu.node)">
        <span class="menu-icon">🗑️</span>
        <span>删除</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tree-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #1e1e1e;
  position: relative;
}

.viewer-header {
  padding: 8px 12px;
  background: #2d2d2d;
  border-bottom: 1px solid #3c3c3c;
}

.title {
  color: #cccccc;
  font-size: 13px;
  font-weight: 500;
}

.viewer-body {
  flex: 1;
  padding: 8px;
  overflow: auto;
}

.tree-container {
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
}

.tree-node {
  padding: 4px 8px;
  cursor: grab;
  border-radius: 3px;
  color: #888;
  user-select: none;
  margin-bottom: 1px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-node:hover {
  background: #2a2d2e;
}

.tree-node:hover .delete-icon {
  opacity: 1;
}

.tree-node:active {
  cursor: grabbing;
}

.tree-node.is-row {
  color: #4fc3f7;
}

.tree-node.is-col {
  color: #c586c0;
}

.tree-node.is-dragging {
  opacity: 0.5;
}

.tree-node.is-selected {
  background: #094771;
}

.tree-node.is-drop-target {
  background: #094771;
}

.tree-node.drop-inside {
  border: 1px dashed #4fc3f7;
}

.tree-node.drop-after {
  border-bottom: 2px solid #4fc3f7;
}

.node-text {
  flex: 1;
}

.drop-hint {
  font-size: 10px;
  color: #4fc3f7;
  background: rgba(79, 195, 247, 0.2);
  padding: 1px 4px;
  border-radius: 2px;
}

.delete-icon {
  opacity: 0;
  cursor: pointer;
  font-size: 12px;
  transition: opacity 0.15s;
}

.delete-icon:hover {
  transform: scale(1.1);
}

.loading-tip,
.empty-tip {
  color: #666666;
  text-align: center;
  padding: 20px;
  font-size: 12px;
}

/* 右键菜单 */
.context-menu {
  position: fixed;
  background: #2d2d2d;
  border: 1px solid #3c3c3c;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  z-index: 1000;
  min-width: 120px;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ccc;
  font-size: 12px;
}

.menu-item:hover {
  background: #094771;
}

.menu-icon {
  font-size: 14px;
}
</style>
