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

interface MCPServer {
  id: number
  name: string
  status: 'running' | 'stopped' | 'error'
  type: string
  port: number
  createdAt: string
  description: string
}

const mcpServers = ref<MCPServer[]>([
  { id: 1, name: 'linear-demo', status: 'running', type: 'Linear', port: 3001, createdAt: '2025-04-10', description: 'Linear API integration for project management' },
  { id: 2, name: 'google-maps', status: 'running', type: 'Google Maps', port: 3002, createdAt: '2025-04-08', description: 'Google Maps API for location services' },
  { id: 3, name: 'explorer-mcp', status: 'error', type: 'File System', port: 3003, createdAt: '2025-04-05', description: 'File system explorer and editor' },
  { id: 4, name: 'postgres-mcp', status: 'running', type: 'PostgreSQL', port: 3004, createdAt: '2025-04-12', description: 'PostgreSQL database operations' },
  { id: 5, name: 'github-mcp', status: 'stopped', type: 'GitHub', port: 3005, createdAt: '2025-04-11', description: 'GitHub API integration' },
])

const editingServer = ref<MCPServer | null>(null)
const isEditing = ref(false)
const searchQuery = ref('')
const filterStatus = ref<string>('all')

const editForm = ref({
  name: '',
  type: '',
  port: 3000,
  description: '',
})

const openEdit = (server: MCPServer) => {
  editingServer.value = server
  editForm.value = {
    name: server.name,
    type: server.type,
    port: server.port,
    description: server.description,
  }
  isEditing.value = true
}

const saveEdit = () => {
  if (editingServer.value) {
    const index = mcpServers.value.findIndex(s => s.id === editingServer.value!.id)
    if (index !== -1) {
      mcpServers.value[index] = {
        ...mcpServers.value[index],
        ...editForm.value,
      }
    }
  }
  isEditing.value = false
}

const cancelEdit = () => {
  isEditing.value = false
  editingServer.value = null
}

const toggleStatus = (server: MCPServer) => {
  if (server.status === 'running') {
    server.status = 'stopped'
  } else if (server.status === 'stopped') {
    server.status = 'running'
  }
}

const deleteServer = (id: number) => {
  mcpServers.value = mcpServers.value.filter(s => s.id !== id)
}

const filteredServers = () => {
  return mcpServers.value.filter(server => {
    const matchSearch = server.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                       server.type.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchStatus = filterStatus.value === 'all' || server.status === filterStatus.value
    return matchSearch && matchStatus
  })
}

// 新建 Skill
const isCreating = ref(false)
const createStep = ref(1) // 步骤：1=基本信息， 2=配置页面
const newSkillForm = ref({
  name: '',
  type: 'API',
  provider: 'Custom',
  port: 3000,
  description: '',
  enabled: true,
  model: 'gpt-4o',
})

const availableModels = [
  { name: 'gpt-4o', provider: 'OpenAI', icon: 'fa-openai' },
  { name: 'gpt-4o-mini', provider: 'OpenAI', icon: 'fa-openai' },
  { name: 'claude-3-5-sonnet', provider: 'Anthropic', icon: 'fa-robot' },
  { name: 'gemini-2.0-flash', provider: 'Google', icon: 'fa-google' },
  { name: 'gpt-5', provider: 'OpenAI', icon: 'fa-openai' },
]

const goToStep2 = () => {
  if (!newSkillForm.value.name.trim()) return
  createStep.value = 2
  // 重置图谱状态
  isGraphGenerated.value = false
  isGeneratingGraph.value = false
}

const goBackToStep1 = () => {
  createStep.value = 1
}

// 文件管理相关 - VS Code 风格
interface FileItem {
  id: string
  name: string
  icon: string
  content: string
  type: 'file'
}

interface FolderItem {
  id: string
  name: string
  icon: string
  type: 'folder'
  expanded: boolean
  children: (FileItem | FolderItem)[]
}

// 默认文件内容
const skillMdContent = `# Skill Configuration

## Overview
This skill is designed to process user queries and generate appropriate responses.

## Data Sources
- user_data.csv
- config.json

## Scripts
- process.py
- transform.js

## Dependencies
- Python 3.8+
- Node.js 16+
`

const fileTree = ref<FolderItem[]>([
  {
    id: 'folder-1',
    name: 'Data',
    icon: 'fa-folder',
    type: 'folder',
    expanded: true,
    children: [
      { id: 'file-1', name: 'user_data.csv', icon: 'fa-file', content: 'id,name,email,age\n1,John Doe,john@example.com,28\n2,Jane Smith,jane@example.com,32', type: 'file' },
      { id: 'file-2', name: 'config.json', icon: 'fa-code', content: '{\n  "appName": "MyApp",\n  "version": "1.0.0",\n  "debug": true\n}', type: 'file' },
    ]
  },
  {
    id: 'folder-2',
    name: 'Script',
    icon: 'fa-folder',
    type: 'folder',
    expanded: true,
    children: [
      { id: 'file-3', name: 'process.py', icon: 'fa-code', content: 'import pandas as pd\n\ndef process_data(data):\n    """Process the input data"""\n    return data.apply(lambda x: x.strip())\n\nif __name__ == "__main__":\n    df = pd.read_csv("user_data.csv")\n    processed = process_data(df)\n    processed.to_csv("output.csv", index=False)', type: 'file' },
      { id: 'file-4', name: 'transform.js', icon: 'fa-code', content: 'function transformData(input) {\n  return input.map(item => ({\n    ...item,\n    processed: true,\n    timestamp: Date.now()\n  }));\n}\n\nmodule.exports = { transformData };', type: 'file' },
    ]
  },
  {
    id: 'folder-3',
    name: 'Reference',
    icon: 'fa-folder',
    type: 'folder',
    expanded: true,
    children: [
      { id: 'file-5', name: 'api_docs.md', icon: 'fa-code', content: '# API Documentation\n\n## Endpoints\n\n### GET /api/users\nReturns list of users.\n\n### POST /api/users\nCreate a new user.', type: 'file' },
    ]
  },
])

// 根目录文件
const rootFiles = ref<FileItem[]>([
  { id: 'file-root-1', name: 'SKILL.md', icon: 'fa-file', content: skillMdContent, type: 'file' },
])

// 展开/收起文件夹
const toggleFolder = (folder: FolderItem) => {
  folder.expanded = !folder.expanded
}

// 新建文件夹
const isCreatingFolder = ref(false)
const newFolderName = ref('')
const showNewFolderInput = () => {
  newFolderName.value = ''
  isCreatingFolder.value = true
}

const createFolder = () => {
  if (!newFolderName.value.trim()) {
    isCreatingFolder.value = false
    return
  }
  fileTree.value.push({
    id: 'folder-' + Date.now(),
    name: newFolderName.value,
    icon: 'fa-folder',
    type: 'folder',
    expanded: true,
    children: []
  })
  isCreatingFolder.value = false
}

// 新建文件
const isCreatingFile = ref(false)
const newFileName = ref('')
const newFileParentFolder = ref<string | null>(null)
const showNewFileInput = (folderId: string | null = null) => {
  newFileName.value = ''
  newFileParentFolder.value = folderId
  isCreatingFile.value = true
}

const createFile = () => {
  if (!newFileName.value.trim()) {
    isCreatingFile.value = false
    return
  }

  const newFile: FileItem = {
    id: 'file-' + Date.now(),
    name: newFileName.value,
    icon: getFileIconByName(newFileName.value),
    content: '',
    type: 'file'
  }

  if (newFileParentFolder.value) {
    // 添加到指定文件夹
    const folder = fileTree.value.find(f => f.id === newFileParentFolder.value)
    if (folder && folder.children) {
      folder.children.push(newFile)
    }
  } else {
    // 添加到根目录
    rootFiles.value.push(newFile)
  }

  isCreatingFile.value = false
}

// 根据文件名获取图标 - 使用通用图标
const getFileIconByName = (filename: string): string => {
  const ext = filename.split('.').pop()?.toLowerCase()
  const codeExtensions = ['js', 'ts', 'py', 'html', 'css', 'json', 'xml', 'yaml', 'yml', 'java', 'c', 'cpp', 'go', 'rs', 'php', 'rb', 'swift', 'kt', 'sql', 'sh', 'bash', 'md']
  if (codeExtensions.includes(ext || '')) {
    return 'fa-code'
  }
  return 'fa-file'
}

// 上传文件
const handleFileUpload = (event: Event, folderId: string | null = null) => {
  const input = event.target as HTMLInputElement
  if (!input.files?.length) return

  Array.from(input.files).forEach(file => {
    const reader = new FileReader()
    reader.onload = (e) => {
      const newFile: FileItem = {
        id: 'file-' + Date.now() + Math.random(),
        name: file.name,
        icon: getFileIconByName(file.name),
        content: e.target?.result as string || '',
        type: 'file'
      }

      if (folderId) {
        const folder = fileTree.value.find(f => f.id === folderId)
        if (folder && folder.children) {
          folder.children.push(newFile)
        }
      } else {
        rootFiles.value.push(newFile)
      }
    }
    reader.readAsText(file)
  })

  input.value = ''
}

// 递归查找文件
const findFile = (items: (FileItem | FolderItem)[], fileId: string): FileItem | null => {
  for (const item of items) {
    if (item.type === 'file' && item.id === fileId) {
      return item
    }
    if (item.type === 'folder' && item.children) {
      const found = findFile(item.children, fileId)
      if (found) return found
    }
  }
  return null
}

// 文件编辑相关
const isEditingFile = ref(false)
const isEditingFileClosing = ref(false)

// AI 对话面板
const isChatOpen = ref(false)

// 流程生成相关
const isGeneratingGraph = ref(false)
const isGraphGenerated = ref(false)

const generateGraph = () => {
  isGeneratingGraph.value = true
  // 模拟生成流程的等待过程
  setTimeout(() => {
    isGeneratingGraph.value = false
    isGraphGenerated.value = true
    // 初始化树结构 - 默认展开第一层
    if (workflowData.value.length > 0) {
      workflowData.value[0].expanded = true
      if (workflowData.value[0].children) {
        workflowData.value[0].children.forEach(child => {
          child.expanded = false
          if (child.children) {
            child.children.forEach(gc => gc.expanded = false)
          }
        })
      }
    }
  }, 2500)
}

const toggleChat = () => {
  isChatOpen.value = !isChatOpen.value
}
const editingFile = ref<FileItem | null>(null)
const editingFileName = ref('')
const editingFileContent = ref('')
const editingFileType = ref('')

// 选中文件/文件夹状态
// 鼠标悬停状态
const hoveringItem = ref<string | null>(null)

// 删除文件
const deleteFile = (file: FileItem, parentId: string | null) => {
  if (!parentId) {
    // 根目录文件
    rootFiles.value = rootFiles.value.filter(f => f.id !== file.id)
  } else {
    // 文件夹内文件
    const folder = fileTree.value.find(f => f.id === parentId)
    if (folder && folder.children) {
      folder.children = folder.children.filter(c => (c as FileItem).id !== file.id)
    }
  }
}

// 删除文件夹
const deleteFolder = (folder: FolderItem) => {
  fileTree.value = fileTree.value.filter(f => f.id !== folder.id)
}

// 打开文件编辑器
const openFile = (file: FileItem) => {
  editingFile.value = file
  editingFileName.value = file.name
  editingFileContent.value = file.content
  editingFileType.value = 'file'
  isEditingFile.value = true
}

const saveFileEdit = () => {
  if (!editingFile.value) return

  // 更新文件内容
  editingFile.value.content = editingFileContent.value

  isEditingFileClosing.value = true
  setTimeout(() => {
    isEditingFile.value = false
    isEditingFileClosing.value = false
    editingFile.value = null
  }, 300)
}

const cancelFileEdit = () => {
  isEditingFileClosing.value = true
  setTimeout(() => {
    isEditingFile.value = false
    isEditingFileClosing.value = false
    editingFile.value = null
  }, 300)
}

// 对话相关
const chatInput = ref('')
const chatMessages = ref<{ id: number; text: string }[]>([])

const sendMessage = () => {
  if (!chatInput.value.trim()) return

  chatMessages.value.push({
    id: Date.now(),
    text: chatInput.value
  })

  const userInput = chatInput.value
  chatInput.value = ''

  // 模拟 AI 回复
  setTimeout(() => {
    chatMessages.value.push({
      id: Date.now(),
      text: `I've updated the configuration based on your request: "${userInput}". The changes have been applied to your skill settings.`
    })
  }, 1000)
}

// 流程相关 - 金字塔结构

// 流程节点 - 树形结构
interface WorkflowNode {
  id: string
  name: string
  description: string
  icon: string
  color: string
  bgColor: string
  borderColor: string
  status: 'pending' | 'processing' | 'completed'
  expanded: boolean
  children?: WorkflowNode[]
}

const workflowData = ref<WorkflowNode[]>([
  {
    id: 'output',
    name: '最终输出',
    description: '生成最终结果返回给用户',
    icon: 'fa-check-circle',
    color: 'text-green-400',
    bgColor: 'from-green-500/20 to-green-500/5',
    borderColor: 'border-green-500/30',
    status: 'pending',
    expanded: false,
    children: [
      {
        id: 'generate',
        name: '方案生成',
        description: '基于分析结果构建解决方案',
        icon: 'fa-lightbulb',
        color: 'text-primary-orange',
        bgColor: 'from-primary-orange/20 to-primary-orange/5',
        borderColor: 'border-primary-orange/30',
        status: 'pending',
        expanded: false,
        children: [
          {
            id: 'analyze',
            name: '问题分析',
            description: '拆解问题、提取关键信息、理解用户意图',
            icon: 'fa-microscope',
            color: 'text-purple-400',
            bgColor: 'from-purple-500/20 to-purple-500/5',
            borderColor: 'border-purple-500/30',
            status: 'pending',
            expanded: false,
            children: [
              {
                id: 'question',
                name: '用户问题',
                description: '输入原始需求和问题描述',
                icon: 'fa-question',
                color: 'text-primary-cyan',
                bgColor: 'from-primary-cyan/20 to-primary-cyan/5',
                borderColor: 'border-primary-cyan/30',
                status: 'pending',
                expanded: false,
              }
            ]
          },
          {
            id: 'data',
            name: '数据获取',
            description: '从知识库、向量数据库获取相关信息',
            icon: 'fa-database',
            color: 'text-green-400',
            bgColor: 'from-green-500/20 to-green-500/5',
            borderColor: 'border-green-500/30',
            status: 'pending',
            expanded: false,
          }
        ]
      },
      {
        id: 'evaluate',
        name: '方案评估',
        description: '验证方案可行性和效果',
        icon: 'fa-clipboard-check',
        color: 'text-yellow-400',
        bgColor: 'from-yellow-500/20 to-yellow-500/5',
        borderColor: 'border-yellow-500/30',
        status: 'pending',
        expanded: false,
      }
    ]
  }
])

// 展开/收起节点
const toggleNode = (node: WorkflowNode) => {
  node.expanded = !node.expanded
}

// 递归渲染节点
const renderWorkflow = (nodes: WorkflowNode[], level: number = 0) => {
  return nodes
}

const openCreate = () => {
  newSkillForm.value = {
    name: '',
    type: 'API',
    provider: 'Custom',
    port: 3000,
    description: '',
    enabled: true,
    model: 'gpt-4o',
  }
  createStep.value = 1
  isCreating.value = true
}

const closeCreate = () => {
  isCreating.value = false
  createStep.value = 1
}

const saveNewSkill = () => {
  const newId = Math.max(...mcpServers.value.map(s => s.id)) + 1
  mcpServers.value.push({
    id: newId,
    name: newSkillForm.value.name || 'Untitled Skill',
    status: 'stopped',
    type: newSkillForm.value.type,
    port: newSkillForm.value.port,
    createdAt: new Date().toISOString().split('T')[0],
    description: newSkillForm.value.description,
  })
  isCreating.value = false
}

const statusClass = (status: string) => {
  switch (status) {
    case 'running': return 'bg-primary-success'
    case 'stopped': return 'bg-gray-500'
    case 'error': return 'bg-primary-danger'
    default: return 'bg-gray-500'
  }
}
</script>

<style scoped>
/* 模态框进入动画 */
@keyframes modal-in {
  0% {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes fade-in {
  0% { opacity: 0; transform: translateY(-5px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes scale-in {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

.animate-modal-in {
  animation: modal-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modal-out {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.95); }
}

.animate-modal-out {
  animation: modal-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slide-in {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-out {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.animate-slide-in {
  animation: slide-in 0.3s ease-out forwards;
}

@keyframes progress-width {
  0% { width: 0%; }
  100% { width: 100%; }
}

.animate-progress-width {
  animation: progress-width 2.5s ease-in-out forwards;
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

@keyframes pulse-slow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

.animate-pulse-slow {
  animation: pulse-slow 2s ease-in-out infinite;
}

@keyframes float-particle {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
  50% { transform: translateY(-10px) scale(1.2); opacity: 1; }
}

.animate-float-particle {
  animation: float-particle 3s ease-in-out infinite;
}

@keyframes scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.animate-scan {
  animation: scan 1.5s ease-in-out infinite;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-scale-in {
  animation: scale-in 0.5s ease-out forwards;
}

/* 流程节点动画 */
.graph-node {
  transition: transform 0.3s ease;
}

.graph-node:hover {
  transform: scale(1.1);
}

.center-node {
  transition: transform 0.3s ease;
}

.center-node:hover {
  transform: scale(1.05);
}

.animate-pulse-slow {
  animation: pulse-slow 3s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% { box-shadow: 0 0 20px rgba(30, 107, 249, 0.3); }
  50% { box-shadow: 0 0 40px rgba(30, 107, 249, 0.5); }
}

@keyframes draw-line {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

.animate-draw-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-line 1.5s ease forwards;
}

</style>

<template>
  <div class="p-6 min-h-screen">
    <div class="flex justify-between items-center mb-6">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-wand-magic-sparkles text-gray-400"></i>
        <span class="font-medium">Skills</span>
      </div>
      <button @click="openCreate" class="bg-gradient-to-r from-primary-orange to-red-500 hover:from-orange-500 hover:to-red-600 text-white px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all">
        <i class="fa-solid fa-plus"></i>
        New Skill
      </button>
    </div>

    <div class="flex gap-4 mb-6">
      <div class="flex-1 relative">
        <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search skills..."
          class="w-full bg-dark-600 border border-dark-500 rounded-lg py-2 pl-10 pr-4 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
        >
      </div>
      <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
        <el-option label="All Status" value="all" />
        <el-option label="Running" value="running" />
        <el-option label="Stopped" value="stopped" />
        <el-option label="Error" value="error" />
      </el-select>
    </div>

    <div class="bg-dark-700 rounded-xl overflow-hidden">
      <table class="w-full">
        <thead class="bg-dark-600">
          <tr>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Skill Name</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Type</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Port</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Status</th>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Created</th>
            <th class="text-right px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="server in filteredServers()" :key="server.id" class="border-t border-dark-600 hover:bg-dark-600/50 transition-colors">
            <td class="px-5 py-4">
              <div class="font-medium">{{ server.name }}</div>
              <div class="text-sm text-gray-500">{{ server.description }}</div>
            </td>
            <td class="px-5 py-4">
              <span class="bg-dark-500 px-2 py-1 rounded text-sm">{{ server.type }}</span>
            </td>
            <td class="px-5 py-4 text-gray-300">{{ server.port }}</td>
            <td class="px-5 py-4">
              <div class="flex items-center gap-2">
                <span class="w-2 h-2 rounded-full" :class="statusClass(server.status)"></span>
                <span class="capitalize text-sm">{{ server.status }}</span>
              </div>
            </td>
            <td class="px-5 py-4 text-gray-400 text-sm">{{ server.createdAt }}</td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-end gap-2">
                <button
                  @click="toggleStatus(server)"
                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
                  :title="server.status === 'running' ? 'Stop' : 'Start'"
                >
                  <i :class="['fa-solid', server.status === 'running' ? 'fa-stop' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
                </button>
                <button
                  @click="openEdit(server)"
                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
                  title="Edit"
                >
                  <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
                </button>
                <button
                  @click="deleteServer(server.id)"
                  class="p-2 rounded-lg hover:bg-dark-500 transition-colors"
                  title="Delete"
                >
                  <i class="fa-solid fa-trash text-gray-400 hover:text-primary-danger"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <div v-if="filteredServers().length === 0" class="py-12 text-center text-gray-500">
        <i class="fa-solid fa-code text-4xl mb-3"></i>
        <p>No skills found</p>
      </div>
    </div>

    <Teleport to="body">
      <div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
        <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl">
          <div class="flex items-center justify-between p-5 border-b border-dark-500">
            <h3 class="text-lg font-semibold">Edit Skill</h3>
            <button @click="cancelEdit" class="text-gray-400 hover:text-white transition-colors">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <div class="p-5 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Skill Name</label>
              <input
                v-model="editForm.name"
                type="text"
                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Type</label>
              <el-select v-model="editForm.type" placeholder="Select" class="w-full" size="large">
                <el-option label="Linear" value="Linear" />
                <el-option label="Google Maps" value="Google Maps" />
                <el-option label="File System" value="File System" />
                <el-option label="PostgreSQL" value="PostgreSQL" />
                <el-option label="GitHub" value="GitHub" />
              </el-select>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Port</label>
              <input
                v-model="editForm.port"
                type="number"
                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange"
              >
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
              <textarea
                v-model="editForm.description"
                rows="3"
                class="w-full bg-dark-600 border border-dark-500 rounded-lg px-4 py-2.5 text-white focus:outline-none focus:border-primary-orange resize-none"
              ></textarea>
            </div>
          </div>

          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
            <button
              @click="cancelEdit"
              class="px-4 py-2 rounded-lg bg-dark-600 text-gray-300 hover:bg-dark-500 transition-colors"
            >
              Cancel
            </button>
            <button
              @click="saveEdit"
              class="px-4 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all"
            >
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 新建 Skill 模态框 -->
    <Teleport to="body">
      <div v-if="isCreating" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-6">
        <!-- 步骤1：基本信息 -->
        <div v-if="createStep === 1" class="bg-dark-800 rounded-2xl w-full max-w-lg border border-dark-600 shadow-2xl overflow-hidden animate-modal-in">
          <!-- 头部 -->
          <div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-orange to-red-500 flex items-center justify-center">
                <i class="fa-solid fa-wand-magic-sparkles text-white"></i>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-white">Create New Skill</h3>
                <p class="text-sm text-gray-400">Step 1 of 2 - Basic Info</p>
              </div>
            </div>
            <button @click="closeCreate" class="text-gray-400 hover:text-white transition-all p-2 hover:bg-dark-600 rounded-lg">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <!-- 表单内容 -->
          <div class="p-6 space-y-5">
            <!-- Skill Name -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                <i class="fa-solid fa-tag mr-2 text-primary-orange"></i>Skill Name
              </label>
              <input
                v-model="newSkillForm.name"
                type="text"
                placeholder="Enter skill name..."
                class="w-full bg-dark-600 border border-dark-500 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange transition-colors"
              >
            </div>

            <!-- Description -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                <i class="fa-solid fa-align-left mr-2 text-gray-400"></i>Description
              </label>
              <textarea
                v-model="newSkillForm.description"
                rows="3"
                placeholder="Describe your skill's purpose..."
                class="w-full bg-dark-600 border border-dark-500 rounded-xl px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange transition-colors resize-none"
              ></textarea>
            </div>

            <!-- Model Selection -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">
                <i class="fa-solid fa-brain mr-2 text-primary-cyan"></i>Select Model
              </label>
              <div class="grid grid-cols-2 gap-3">
                <div
                  v-for="model in availableModels"
                  :key="model.name"
                  @click="newSkillForm.model = model.name"
                  class="p-3 rounded-xl border-2 cursor-pointer transition-all hover:scale-105"
                  :class="newSkillForm.model === model.name
                    ? 'border-primary-orange bg-dark-600 shadow-lg shadow-primary-orange/20'
                    : 'border-dark-500 bg-dark-700 hover:border-gray-500'"
                >
                  <div class="flex items-center gap-2">
                    <i :class="['fa-solid', model.icon, 'text-lg']"></i>
                    <div>
                      <div class="font-medium text-white text-sm">{{ model.name }}</div>
                      <div class="text-xs text-gray-500">{{ model.provider }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 底部按钮 -->
          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-600 bg-dark-700/50">
            <button
              @click="closeCreate"
              class="px-5 py-2.5 rounded-xl bg-dark-600 text-gray-300 hover:bg-dark-500 border border-dark-500 transition-all"
            >
              Cancel
            </button>
            <button
              @click="goToStep2"
              :disabled="!newSkillForm.name.trim()"
              class="px-6 py-2.5 rounded-xl bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              Next Step
              <i class="fa-solid fa-arrow-right"></i>
            </button>
          </div>
        </div>

        <!-- 步骤2：三栏配置界面 -->
        <div v-else class="bg-dark-800 rounded-2xl w-full max-w-[95vw] h-[90vh] border border-dark-600 shadow-2xl overflow-hidden flex animate-modal-in relative">
          <!-- 顶部进度指示 -->
          <div class="absolute top-0 left-0 right-0 h-1 bg-dark-700">
            <div class="h-full bg-gradient-to-r from-primary-orange to-red-500 w-full"></div>
          </div>

          <!-- 左侧边栏：VS Code 风格文件管理器 -->
          <div class="w-64 bg-dark-900 border-r border-dark-600 flex flex-col">
            <!-- 头部 -->
            <div class="p-3 border-b border-dark-600 flex items-center justify-between">
              <button
                @click="goBackToStep1"
                class="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
              >
                <i class="fa-solid fa-arrow-left text-sm"></i>
                <span class="font-semibold text-white text-sm">Explorer</span>
              </button>
              <div class="flex items-center gap-1">
                <button @click="showNewFolderInput" class="p-1.5 text-gray-500 hover:text-white hover:bg-dark-700 rounded transition-colors" title="New Folder">
                  <i class="fa-solid fa-folder-plus text-sm"></i>
                </button>
                <button @click="showNewFileInput(null)" class="p-1.5 text-gray-500 hover:text-white hover:bg-dark-700 rounded transition-colors" title="New File">
                  <i class="fa-solid fa-file-circle-plus text-sm"></i>
                </button>
                <label class="p-1.5 text-gray-500 hover:text-white hover:bg-dark-700 rounded transition-colors cursor-pointer" title="Upload File">
                  <i class="fa-solid fa-upload text-sm"></i>
                  <input type="file" class="hidden" multiple @change="handleFileUpload($event, null)">
                </label>
              </div>
            </div>

            <!-- VS Code 风格文件树 -->
            <div class="flex-1 overflow-y-auto py-2">
              <!-- 根目录文件 -->
              <div class="px-2">
                <div class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2 py-1">Workspace</div>
                <div
                  v-for="file in rootFiles"
                  :key="file.id"
                  @click="openFile(file)"
                  @mouseenter="hoveringItem = file.id"
                  @mouseleave="hoveringItem = null"
                  class="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer hover:bg-dark-700 group transition-colors"
                  :class="{ 'bg-dark-700': hoveringItem === file.id }"
                >
                  <i :class="['fa-solid', file.icon, 'text-primary-cyan text-sm']"></i>
                  <span class="text-sm text-gray-300 group-hover:text-white truncate flex-1">{{ file.name }}</span>
                  <button
                    @click.stop="deleteFile(file, null)"
                    class="text-red-400 hover:text-red-300 p-1 rounded hover:bg-dark-600 transition-colors opacity-0 group-hover:opacity-100"
                    title="Delete File"
                  >
                    <i class="fa-solid fa-trash text-xs"></i>
                  </button>
                </div>
              </div>

              <!-- 文件夹列表 -->
              <div class="mt-2">
                <div
                  v-for="folder in fileTree"
                  :key="folder.id"
                  class=""
                >
                  <!-- 文件夹标题 -->
                  <div
                    @mouseenter="hoveringItem = folder.id"
                    @mouseleave="hoveringItem = null"
                    class="flex items-center gap-2 px-2 py-1.5 cursor-pointer hover:bg-dark-700 group transition-colors"
                    :class="{ 'bg-dark-700': hoveringItem === folder.id }"
                  >
                    <i
                      @click.stop="toggleFolder(folder)"
                      :class="['fa-solid', folder.expanded ? 'fa-chevron-down' : 'fa-chevron-right', 'text-gray-500 text-xs']"
                    ></i>
                    <i
                      @click.stop="toggleFolder(folder)"
                      :class="['fa-solid', folder.expanded ? 'fa-folder-open' : 'fa-folder', 'text-yellow-400 text-sm']"
                    ></i>
                    <span
                      class="text-sm text-gray-300 group-hover:text-white font-medium flex-1"
                    >{{ folder.name }}</span>
                    <button
                      @click.stop="deleteFolder(folder)"
                      class="text-red-400 hover:text-red-300 p-1 rounded hover:bg-dark-600 transition-colors opacity-0 group-hover:opacity-100"
                      title="Delete Folder"
                    >
                      <i class="fa-solid fa-trash text-xs"></i>
                    </button>
                  </div>

                  <!-- 文件夹内的文件 -->
                  <div v-if="folder.expanded" class="ml-4">
                    <div
                      v-for="child in folder.children"
                      :key="child.id"
                      @click="openFile(child as FileItem)"
                      @mouseenter="hoveringItem = child.id"
                      @mouseleave="hoveringItem = null"
                      class="flex items-center gap-2 px-2 py-1.5 rounded cursor-pointer hover:bg-dark-700 group transition-colors"
                      :class="{ 'bg-dark-700': hoveringItem === child.id }"
                    >
                      <i :class="['fa-solid', (child as FileItem).icon, 'text-gray-400 text-sm']"></i>
                      <span class="text-sm text-gray-300 group-hover:text-white truncate flex-1">{{ child.name }}</span>
                      <button
                        @click.stop="deleteFile(child as FileItem, folder.id)"
                        class="text-red-400 hover:text-red-300 p-1 rounded hover:bg-dark-600 transition-colors opacity-0 group-hover:opacity-100"
                        title="Delete File"
                      >
                        <i class="fa-solid fa-trash text-xs"></i>
                      </button>
                    </div>
                    <!-- 文件夹内新建文件/上传按钮 -->
                    <div class="flex items-center gap-2 px-2 py-1">
                      <button
                        @click.stop="showNewFileInput(folder.id)"
                        class="flex items-center gap-1 text-xs text-gray-500 hover:text-white transition-colors opacity-0 group-hover:opacity-100"
                      >
                        <i class="fa-solid fa-plus"></i>
                        <span>New File</span>
                      </button>
                      <label
                        class="flex items-center gap-1 text-xs text-gray-500 hover:text-white transition-colors cursor-pointer opacity-0 group-hover:opacity-100"
                        title="Upload File"
                      >
                        <i class="fa-solid fa-upload"></i>
                        <input type="file" class="hidden" multiple @change="handleFileUpload($event, folder.id)">
                      </label>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 新建文件夹输入框 -->
            <div v-if="isCreatingFolder" class="p-2 border-t border-dark-600 bg-dark-800">
              <div class="flex items-center gap-2">
                <i class="fa-solid fa-folder text-yellow-400 text-sm"></i>
                <input
                  v-model="newFolderName"
                  type="text"
                  placeholder="Folder name..."
                  class="flex-1 bg-dark-700 border border-dark-500 rounded px-2 py-1 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
                  @keyup.enter="createFolder"
                  @blur="createFolder"
                  autofocus
                >
              </div>
            </div>

            <!-- 新建文件输入框 -->
            <div v-if="isCreatingFile" class="p-2 border-t border-dark-600 bg-dark-800">
              <div class="flex items-center gap-2">
                <i class="fa-solid fa-file text-gray-400 text-sm"></i>
                <input
                  v-model="newFileName"
                  type="text"
                  placeholder="File name..."
                  class="flex-1 bg-dark-700 border border-dark-500 rounded px-2 py-1 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
                  @keyup.enter="createFile"
                  @blur="createFile"
                  autofocus
                >
              </div>
            </div>

            <!-- 底部操作 -->
            <div class="p-3 border-t border-dark-600">
              <button
                @click="generateGraph"
                :disabled="isGeneratingGraph || isGraphGenerated"
                class="w-full bg-gradient-to-r from-primary-orange to-red-500 hover:from-orange-500 hover:to-red-600 text-white font-medium py-2 px-3 rounded-lg transition-all flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <i :class="['fa-solid fa-sitemap', isGraphGenerated ? 'text-green-400' : '']"></i>
                {{ isGraphGenerated ? '流程已生成' : (isGeneratingGraph ? '生成中...' : '生成流程') }}
              </button>
            </div>
          </div>

          <!-- 中间：流程视图 -->
          <div class="flex-1 relative overflow-hidden" style="background: linear-gradient(135deg, #0a0e1a 0%, #0f172a 50%, #0a0e1a 100%);">
            <!-- 未生成流程时的提示 -->
            <div v-if="!isGraphGenerated && !isGeneratingGraph" class="absolute inset-0 flex flex-col items-center justify-center z-10">
              <div class="w-24 h-24 rounded-2xl bg-dark-700 flex items-center justify-center mb-4">
                <i class="fa-solid fa-sitemap text-4xl text-gray-600"></i>
              </div>
              <p class="text-gray-500 text-sm">点击左侧按钮生成流程</p>
            </div>

            <!-- 生成中的加载动画 - 现代化设计 -->
            <div v-else-if="isGeneratingGraph" class="absolute inset-0 flex flex-col items-center justify-center z-10">
              <!-- 现代化加载动画 -->
              <div class="flex flex-col items-center">
                <!-- 多层旋转环 + 脉冲点 -->
                <div class="relative w-24 h-24 mb-8">
                  <!-- 外环 -->
                  <div class="absolute inset-0 border-2 border-primary-cyan/20 rounded-full"></div>
                  <div class="absolute inset-1 border-2 border-t-primary-cyan rounded-full loading-spin" style="animation-duration: 1.5s;"></div>
                  <!-- 中环 - 反向 -->
                  <div class="absolute inset-2 border-2 border-purple-500/30 rounded-full" style="animation: loading-spin 2s linear infinite reverse;"></div>
                  <!-- 内环 -->
                  <div class="absolute inset-4 border-2 border-primary-cyan/40 rounded-full" style="animation: loading-spin 1s linear infinite;"></div>
                  <!-- 中心脉冲 -->
                  <div class="absolute inset-0 flex items-center justify-center">
                    <div class="w-3 h-3 bg-primary-cyan rounded-full animate-pulse"></div>
                  </div>
                  <!-- 周围脉冲点 -->
                  <div class="absolute inset-0 flex items-center justify-center" style="animation: loading-dots 1.4s ease-in-out infinite both;">
                    <span class="absolute w-2 h-2 bg-primary-cyan rounded-full" style="top: 10%;"></span>
                    <span class="absolute w-2 h-2 bg-purple-500 rounded-full" style="right: 10%;"></span>
                    <span class="absolute w-2 h-2 bg-primary-orange rounded-full" style="bottom: 10%;"></span>
                    <span class="absolute w-2 h-2 bg-green-500 rounded-full" style="left: 10%;"></span>
                  </div>
                </div>

                <!-- 文字 -->
                <div class="text-center mb-6">
                  <p class="text-white font-medium text-lg mb-2">正在生成执行流程</p>
                  <p class="text-gray-400 text-sm">Building your workflow...</p>
                </div>

                <!-- 步骤指示器 -->
                <div class="flex items-center gap-2 mb-6">
                  <div class="flex items-center gap-1.5">
                    <div class="w-2 h-2 rounded-full bg-primary-cyan loading-pulse"></div>
                    <span class="text-xs text-gray-500">分析</span>
                  </div>
                  <div class="w-8 h-px bg-dark-600"></div>
                  <div class="flex items-center gap-1.5">
                    <div class="w-2 h-2 rounded-full bg-gray-600"></div>
                    <span class="text-xs text-gray-500">规划</span>
                  </div>
                  <div class="w-8 h-px bg-dark-600"></div>
                  <div class="flex items-center gap-1.5">
                    <div class="w-2 h-2 rounded-full bg-gray-600"></div>
                    <span class="text-xs text-gray-500">执行</span>
                  </div>
                  <div class="w-8 h-px bg-dark-600"></div>
                  <div class="flex items-center gap-1.5">
                    <div class="w-2 h-2 rounded-full bg-gray-600"></div>
                    <span class="text-xs text-gray-500">完成</span>
                  </div>
                </div>

                <!-- 进度条 -->
                <div class="w-64">
                  <div class="h-1 bg-dark-700 rounded-full overflow-hidden">
                    <div class="h-full bg-gradient-to-r from-primary-cyan via-purple-500 to-primary-orange loading-progress-bar rounded-full"></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 背景光效层 -->
            <div v-show="isGraphGenerated" class="absolute inset-0 overflow-hidden">
              <!-- 青色光晕 - 更亮更柔和 -->
              <div class="absolute top-0 left-0 w-[500px] h-[500px] rounded-full opacity-30" style="background: radial-gradient(circle, rgba(0, 217, 255, 0.4) 0%, transparent 70%); filter: blur(80px);"></div>
              <!-- 紫色光晕 - 更亮更柔和 -->
              <div class="absolute bottom-0 right-0 w-[400px] h-[400px] rounded-full opacity-25" style="background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%); filter: blur(80px);"></div>
              <!-- 中心补充光效 -->
              <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full opacity-15" style="background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%); filter: blur(100px);"></div>
            </div>

            <!-- 金字塔/树形流程图展示 -->
            <div v-show="isGraphGenerated" class="w-full h-full relative z-10 overflow-auto p-6">
              <!-- 流程标题 -->
              <div class="sticky top-0 bg-slate-900/80 backdrop-blur-sm px-4 py-3 border-b border-slate-700/50 mb-6 z-20">
                <div class="flex items-center justify-between">
                  <div class="flex items-center gap-2">
                    <i class="fa-solid fa-sitemap text-primary-cyan"></i>
                    <span class="text-sm font-medium text-white">执行流程</span>
                    <span class="px-2 py-0.5 rounded-full bg-slate-700 text-xs text-slate-300">4层</span>
                  </div>
                  <span class="text-xs text-slate-400">点击节点展开详情</span>
                </div>
              </div>

              <!-- 树形结构 - 深邃版本 -->
              <div class="flex flex-col items-center">
                <!-- 递归渲染树节点 -->
                <template v-for="node in workflowData" :key="node.id">
                  <div class="w-full flex flex-col items-center">
                    <!-- 根节点 - 深邃设计 -->
                    <div
                      @click="toggleNode(node)"
                      class="w-full max-w-lg cursor-pointer group"
                    >
                      <!-- 外层发光效果 -->
                      <div
                        class="relative p-1 rounded-2xl transition-all duration-500"
                        :class="node.expanded ? 'opacity-100' : 'opacity-80 hover:opacity-100'"
                      >
                        <!-- 内层背景 -->
                        <div
                          class="relative bg-slate-800/70 backdrop-blur-xl border rounded-2xl p-5 overflow-hidden"
                          :class="node.expanded ? `border-2 ${node.borderColor} shadow-lg shadow-${node.color.includes('green') ? 'green' : node.color.includes('orange') ? 'orange' : node.color.includes('purple') ? 'purple' : 'cyan'}-500/30` : 'border-slate-600/50'"
                        >
                          <!-- 背景光效 -->
                          <div
                            class="absolute inset-0 opacity-30 transition-opacity duration-500"
                            :class="node.expanded ? 'opacity-100' : 'opacity-0'"
                            :style="`background: linear-gradient(135deg, ${node.color.includes('green') ? 'rgba(34, 197, 94, 0.15)' : node.color.includes('orange') ? 'rgba(249, 115, 22, 0.15)' : node.color.includes('purple') ? 'rgba(168, 85, 247, 0.15)' : 'rgba(6, 182, 212, 0.15)'} 0%, transparent 100%);`"
                          ></div>

                          <!-- 网格纹理 -->
                          <div class="absolute inset-0 opacity-10" style="background-image: linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 20px 20px;"></div>

                          <!-- 主内容 -->
                          <div class="relative flex items-center gap-4">
                            <!-- 图标容器 - 多层设计 -->
                            <div class="relative">
                              <!-- 外层光晕 -->
                              <div
                                class="absolute inset-0 rounded-2xl blur-xl opacity-40 transition-all duration-500"
                                :class="node.expanded ? 'scale-150 opacity-40' : 'scale-100 opacity-0'"
                                :style="`background: ${node.color.includes('green') ? '#22c55e' : node.color.includes('orange') ? '#f97316' : node.color.includes('purple') ? '#a855f7' : '#06b6d4'};`"
                              ></div>
                              <!-- 图标框 -->
                              <div
                                class="relative w-16 h-16 rounded-2xl bg-gradient-to-br flex items-center justify-center border-2 backdrop-blur-sm"
                                :class="[node.bgColor, node.borderColor]"
                              >
                                <i :class="['fa-solid', node.icon, node.color, 'text-2xl']"></i>
                              </div>
                              <!-- 状态指示点 -->
                              <div
                                class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-slate-700 flex items-center justify-center"
                                :class="node.status === 'completed' ? 'bg-green-500' : node.status === 'processing' ? 'bg-yellow-500' : 'bg-gray-500'"
                              >
                                <i v-if="node.status === 'completed'" class="fa-solid fa-check text-[8px] text-white"></i>
                              </div>
                            </div>

                            <!-- 文字内容 -->
                            <div class="flex-1">
                              <div class="flex items-center gap-2 mb-1">
                                <h4 class="text-white font-bold text-lg tracking-wide">{{ node.name }}</h4>
                                <span
                                  class="px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wider backdrop-blur-sm"
                                  :class="[
                                    node.status === 'completed' ? 'bg-green-500/30 text-green-400 border border-green-500/50' :
                                    node.status === 'processing' ? 'bg-yellow-500/30 text-yellow-400 border border-yellow-500/50' :
                                    'bg-slate-500/30 text-slate-300 border border-slate-500/50'
                                  ]"
                                >
                                  {{ node.status === 'completed' ? '✓ 完成' : node.status === 'processing' ? '◐ 进行中' : '○ 待处理' }}
                                </span>
                              </div>
                              <p class="text-slate-300 text-sm">{{ node.description }}</p>
                              <!-- 底部信息 -->
                              <div class="flex items-center gap-4 mt-2 text-xs text-slate-400">
                                <span class="flex items-center gap-1">
                                  <i class="fa-solid fa-layer-group"></i>
                                  Level 1
                                </span>
                                <span class="flex items-center gap-1">
                                  <i class="fa-solid fa-code-branch"></i>
                                  {{ node.children?.length || 0 }} 个子任务
                                </span>
                              </div>
                            </div>

                            <!-- 展开箭头 -->
                            <div
                              v-if="node.children && node.children.length > 0"
                              class="flex items-center justify-center w-8 h-8 rounded-lg bg-slate-700/50 border border-slate-600"
                            >
                              <i
                                :class="['fa-solid fa-chevron-down text-slate-300 transition-transform duration-300', node.expanded ? 'rotate-180' : '']"
                              ></i>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <!-- 连接线 + 子节点 -->
                    <div v-if="node.expanded && node.children" class="w-full flex flex-col items-center mt-1">
                      <!-- 垂直连接线 - 复杂设计 -->
                      <div class="relative flex flex-col items-center">
                        <!-- 主线 -->
                        <div class="w-0.5 h-8 bg-gradient-to-b from-green-500/40 to-purple-500/40"></div>
                        <!-- 发光点 -->
                        <div class="absolute top-1/2 w-2 h-2 rounded-full bg-cyan-400 shadow-lg shadow-cyan-400/40"></div>
                      </div>

                      <!-- 子节点容器 -->
                      <div class="w-full flex justify-center gap-6">
                        <div v-for="(child, idx) in node.children" :key="child.id" class="flex-1 flex flex-col items-center max-w-md">
                          <!-- 水平连接线 -->
                          <div class="w-full h-0.5 bg-gradient-to-r from-transparent via-purple-500/40 to-transparent mb-3"></div>

                          <!-- 子节点 - 深邃设计 -->
                          <div
                            @click.stop="toggleNode(child)"
                            class="w-full cursor-pointer group"
                          >
                            <div
                              class="relative p-0.5 rounded-xl transition-all duration-300"
                              :class="child.expanded ? 'opacity-100' : 'opacity-80 hover:opacity-100'"
                            >
                              <div
                                class="relative bg-slate-800/60 backdrop-blur-xl border rounded-xl p-4"
                                :class="child.expanded ? `border-2 ${child.borderColor}` : 'border-slate-600/50'"
                              >
                                <!-- 背景微光 -->
                                <div
                                  class="absolute inset-0 opacity-20 rounded-xl"
                                  :style="`background: linear-gradient(135deg, ${child.color.includes('green') ? 'rgba(34, 197, 94, 0.2)' : child.color.includes('orange') ? 'rgba(249, 115, 22, 0.2)' : child.color.includes('yellow') ? 'rgba(234, 179, 8, 0.2)' : 'rgba(6, 182, 212, 0.2)'} 0%, transparent 100%);`"
                                ></div>

                                <div class="relative flex items-center gap-3">
                                  <!-- 图标 -->
                                  <div class="relative">
                                    <div
                                      class="w-12 h-12 rounded-xl bg-gradient-to-br flex items-center justify-center border"
                                      :class="[child.bgColor, child.borderColor]"
                                    >
                                      <i :class="['fa-solid', child.icon, child.color, 'text-xl']"></i>
                                    </div>
                                    <!-- 序号标签 -->
                                    <div class="absolute -top-2 -left-2 w-5 h-5 rounded-full bg-slate-700 border border-slate-500 flex items-center justify-center text-[10px] text-slate-300 font-bold">
                                      {{ idx + 1 }}
                                    </div>
                                  </div>

                                  <!-- 文字 -->
                                  <div class="flex-1 min-w-0">
                                    <div class="flex items-center gap-2 mb-0.5">
                                      <h5 class="text-white font-semibold">{{ child.name }}</h5>
                                      <span
                                        v-if="child.children && child.children.length > 0"
                                        class="px-1.5 py-0.5 rounded bg-slate-700 text-slate-300 text-xs"
                                      >
                                        {{ child.children.length }}
                                      </span>
                                    </div>
                                    <p class="text-slate-400 text-xs truncate">{{ child.description }}</p>
                                  </div>

                                  <!-- 箭头 -->
                                  <i
                                    v-if="child.children && child.children.length > 0"
                                    :class="['fa-solid fa-chevron-down text-slate-400 text-xs transition-transform duration-300', child.expanded ? 'rotate-180' : '']"
                                  ></i>
                                </div>
                              </div>
                            </div>

                            <!-- 孙子节点 -->
                            <div v-if="child.expanded && child.children" class="mt-2 ml-4 space-y-2">
                              <div
                                v-for="(grandchild, gidx) in child.children"
                                :key="grandchild.id"
                                class="relative pl-4 border-l-2 border-slate-600/50"
                              >
                                <!-- 连接点 -->
                                <div class="absolute -left-1 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full bg-slate-500"></div>

                                <div class="flex items-center gap-3 p-2 rounded-lg bg-slate-700/30 hover:bg-slate-700/60 transition-colors cursor-pointer border border-transparent hover:border-slate-500">
                                  <div
                                    class="w-8 h-8 rounded-lg bg-gradient-to-br flex items-center justify-center border"
                                    :class="[grandchild.bgColor, grandchild.borderColor]"
                                  >
                                    <i :class="['fa-solid', grandchild.icon, grandchild.color, 'text-sm']"></i>
                                  </div>
                                  <div class="flex-1 min-w-0">
                                    <h6 class="text-white font-medium text-sm">{{ grandchild.name }}</h6>
                                    <p class="text-slate-400 text-xs truncate">{{ grandchild.description }}</p>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>

            <!-- 底部提示 -->
            <div v-show="isGraphGenerated" class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-slate-800/80 backdrop-blur-sm border border-slate-600/50 rounded-lg px-4 py-2 text-xs text-slate-300 shadow-lg">
              <i class="fa-solid fa-sitemap mr-1 text-primary-cyan"></i>
              金字塔结构 · 4层执行流程 · 点击展开
            </div>
          </div>

          <!-- 右侧：对话面板 -->
          <!-- 悬浮图标按钮 -->
          <button
            v-if="!isChatOpen"
            @click="toggleChat"
            class="absolute right-4 bottom-4 w-14 h-14 rounded-full bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center shadow-lg shadow-purple-500/30 hover:scale-110 transition-transform z-20"
          >
            <i class="fa-solid fa-robot text-white text-xl animate-bounce"></i>
          </button>

          <!-- 展开的对话面板 -->
          <div
            v-else
            class="w-80 bg-dark-800 border-l border-dark-600 flex flex-col animate-slide-in"
          >
            <!-- 头部 -->
            <div class="p-4 border-b border-dark-600 flex items-center justify-between">
              <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center">
                  <i class="fa-solid fa-robot text-white text-sm"></i>
                </div>
                <div>
                  <div class="font-medium text-white text-sm">AI Assistant</div>
                  <div class="text-xs text-gray-500">Configure your skill</div>
                </div>
              </div>
              <button @click="toggleChat" class="text-gray-400 hover:text-white transition-colors">
                <i class="fa-solid fa-chevron-right"></i>
              </button>
            </div>

            <!-- 对话内容 -->
            <div class="flex-1 overflow-y-auto p-4 space-y-4">
              <!-- AI 消息 -->
              <div class="flex gap-3">
                <div class="w-7 h-7 rounded-lg bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center flex-shrink-0">
                  <i class="fa-solid fa-robot text-white text-xs"></i>
                </div>
                <div class="bg-dark-700 rounded-2xl rounded-tl-none px-4 py-3 text-sm text-gray-300">
                  <p>Hello! I'm your AI assistant. I can help you configure your skill by:</p>
                  <ul class="mt-2 space-y-1 text-gray-400">
                    <li>• Managing data files</li>
                    <li>• Adding reference documents</li>
                    <li>• Writing scripts</li>
                  </ul>
                  <p class="mt-2">What would you like to do?</p>
                </div>
              </div>

              <!-- 用户消息 -->
              <div v-for="msg in chatMessages" :key="msg.id" class="flex gap-3 flex-row-reverse">
                <div class="w-7 h-7 rounded-lg bg-dark-600 flex items-center justify-center flex-shrink-0">
                  <i class="fa-solid fa-user text-gray-400 text-xs"></i>
                </div>
                <div class="bg-dark-600 rounded-2xl rounded-tr-none px-4 py-3 text-sm text-white max-w-[80%]">
                  {{ msg.text }}
                </div>
              </div>
            </div>

            <!-- 输入框 -->
            <div class="p-4 border-t border-dark-600">
              <div class="relative">
                <input
                  v-model="chatInput"
                  type="text"
                  placeholder="Ask AI to help..."
                  class="w-full bg-dark-700 border border-dark-500 rounded-xl px-4 py-3 pr-12 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-primary-orange"
                  @keyup.enter="sendMessage"
                >
                <button
                  @click="sendMessage"
                  class="absolute right-2 top-1/2 -translate-y-1/2 w-8 h-8 rounded-lg bg-primary-orange text-white flex items-center justify-center hover:from-orange-500 hover:to-red-600 transition-all"
                >
                  <i class="fa-solid fa-paper-plane text-xs"></i>
                </button>
              </div>
            </div>

            <!-- 底部按钮 -->
            <div class="p-3 border-t border-dark-600 flex gap-2">
              <button
                @click="closeCreate"
                class="flex-1 py-2 rounded-lg bg-dark-700 text-gray-300 hover:bg-dark-600 text-sm transition-colors"
              >
                Cancel
              </button>
              <button
                @click="saveNewSkill"
                class="flex-1 py-2 rounded-lg bg-gradient-to-r from-primary-orange to-red-500 text-white hover:from-orange-500 hover:to-red-600 text-sm transition-all flex items-center justify-center gap-2"
              >
                <i class="fa-solid fa-check"></i>
                Create
              </button>
            </div>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 文件编辑弹窗 -->
    <Teleport to="body">
      <div v-if="isEditingFile" class="fixed inset-0 bg-black/80 flex items-center justify-center z-[60]">
        <div :class="['bg-dark-800 rounded-2xl w-full max-w-5xl h-[85vh] border border-dark-600 shadow-2xl overflow-hidden flex flex-col', isEditingFileClosing ? 'animate-modal-out' : 'animate-modal-in']">
          <!-- 头部 -->
          <div class="flex items-center justify-between p-5 border-b border-dark-600 bg-dark-700/50">
            <div class="flex items-center gap-3">
              <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-cyan to-purple-500 flex items-center justify-center">
                <i class="fa-solid fa-file-edit text-white"></i>
              </div>
              <div>
                <h3 class="text-lg font-semibold text-white">Edit File</h3>
                <p class="text-sm text-gray-400">{{ editingFileName }}</p>
              </div>
            </div>
            <button @click="cancelFileEdit" class="text-gray-400 hover:text-white transition-all p-2 hover:bg-dark-600 rounded-lg">
              <i class="fa-solid fa-xmark text-xl"></i>
            </button>
          </div>

          <!-- 编辑器内容 -->
          <div class="flex-1 p-5 overflow-hidden">
            <textarea
              v-model="editingFileContent"
              class="w-full h-full bg-dark-900 border border-dark-500 rounded-xl p-4 text-sm text-gray-300 font-mono focus:outline-none focus:border-primary-cyan resize-none"
              placeholder="File content..."
            ></textarea>
          </div>

          <!-- 底部按钮 -->
          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-600 bg-dark-700/50">
            <button
              @click="cancelFileEdit"
              class="px-5 py-2.5 rounded-xl bg-dark-600 text-gray-300 hover:bg-dark-500 border border-dark-500 transition-all"
            >
              Cancel
            </button>
            <button
              @click="saveFileEdit"
              class="px-6 py-2.5 rounded-xl bg-gradient-to-r from-primary-cyan to-purple-500 text-white hover:from-cyan-500 hover:to-purple-600 transition-all flex items-center gap-2"
            >
              <i class="fa-solid fa-save"></i>
              Save Changes
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>
