<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import {
  FileText,
  Globe,
  Calculator,
  Code,
  Braces,
  Github,
  MessageSquare,
  Mail,
  Database,
  Folder,
  GitBranch,
  Box,
  Wrench,
  Server,
  Terminal,
  Search,
  Plus,
  Pause,
  Play,
  Edit,
  Trash2,
  X,
} from 'lucide-vue-next'
import { useTools } from './tools/useTools'
import '@/views/database/database.css'

// 使用工具 composable
const { tools, toolsLoading, fetchTools, syncTools, deleteTool: deleteToolApi, createTool } = useTools()

// 图标组件映射
const iconComponents: Record<string, any> = {
  FileText,
  Globe,
  Calculator,
  Code,
  Braces,
  Github,
  MessageSquare,
  Mail,
  Database,
  Folder,
  GitBranch,
  Box,
  Wrench,
  Server,
  Terminal,
}

const getIconComponent = (iconName?: string) => {
  if (!iconName) return Box
  return iconComponents[iconName] || Box
}

interface Tool {
  id: string
  name: string
  description: string
  category: string
  provider: string
  security_level: string
  require_approval: boolean
  parameters: string
  status: string
  type: 'built-in' | 'mcp'
  icon?: string
  created_at?: string
}

// 页面加载时获取工具列表
onMounted(async () => {
  await fetchTools()
})

// 按类型分类工具
const builtInTools = computed(() => {
  return tools.value.filter(t => t.provider === 'system')
})

const mcpTools = computed(() => {
  return tools.value.filter(t => t.provider !== 'system')
})

const activeTab = ref<'built-in' | 'mcp'>('built-in')
const searchQuery = ref('')
const filterStatus = ref('all')
const editingTool = ref<Tool | null>(null)
const isEditing = ref(false)

const editForm = ref({
  name: '',
  description: '',
  provider: '',
  icon: '',
})

// Statistics
const stats = computed(() => ({
  total: tools.value.length,
  active: tools.value.filter(t => t.status === 'active').length,
  builtIn: builtInTools.value.length,
  mcp: mcpTools.value.length
}))

const currentTools = computed(() => {
  let toolsList: Tool[] = []
  switch (activeTab.value) {
    case 'built-in': toolsList = builtInTools.value as Tool[]; break
    case 'mcp': toolsList = mcpTools.value as Tool[]; break
  }
  return toolsList.filter(tool => {
    const matchSearch = tool.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
                       tool.description.toLowerCase().includes(searchQuery.value.toLowerCase())
    const matchStatus = filterStatus.value === 'all' || tool.status === filterStatus.value
    return matchSearch && matchStatus
  })
})

const tabCounts = computed(() => ({
  'built-in': builtInTools.value.length,
  'mcp': mcpTools.value.length,
}))

const openEdit = (tool: any) => {
  editingTool.value = tool
  editForm.value = { name: tool.name, description: tool.description, provider: tool.provider || '', icon: tool.icon || '' }
  isEditing.value = true
}

const saveEdit = () => {
  isEditing.value = false
}

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

// 状态切换确认弹窗
const showStatusConfirm = ref(false)
const toolToToggle = ref<any>(null)

const confirmToggleStatus = (tool: any) => {
  toolToToggle.value = tool
  showStatusConfirm.value = true
}

const toggleStatus = async () => {
  if (!toolToToggle.value) return

  const tool = toolToToggle.value
  const newStatus = tool.status === 'active' ? 'inactive' : 'active'
  const action = newStatus === 'active' ? 'activate' : 'deactivate'

  // TODO: 调用 API 更新状态
  console.log(`${action} tool:`, tool.name)

  showStatusConfirm.value = false
  toolToToggle.value = null
}

const cancelToggleStatus = () => {
  showStatusConfirm.value = false
  toolToToggle.value = null
}

const handleDeleteTool = async (id: string) => {
  if (confirm('Are you sure you want to delete this tool?')) {
    await deleteToolApi(id)
  }
}

// 同步工具
const handleSyncTools = async () => {
  await syncTools()
}

// Add MCP 弹窗
const showAddMcp = ref(false)
const mcpForm = ref({
  name: '',
  description: '',
  description_cn: '',
  transport: 'stdio',
  command: '',
  args: '',
  env: '',
})

const openAddMcp = () => {
  mcpForm.value = {
    name: '',
    description: '',
    description_cn: '',
    transport: 'stdio',
    command: '',
    args: '',
    env: '',
  }
  showAddMcp.value = true
}

const closeAddMcp = () => {
  showAddMcp.value = false
}

const submitMcp = async () => {
  try {
    // 组装参数
    const argsArray = mcpForm.value.args ? mcpForm.value.args.split('\n').filter((a: string) => a.trim()) : []
    const envObj: Record<string, string> = {}
    if (mcpForm.value.env) {
      mcpForm.value.env.split('\n').forEach((line: string) => {
        const [key, ...valueParts] = line.split('=')
        if (key && valueParts.length > 0) {
          envObj[key.trim()] = valueParts.join('=').trim()
        }
      })
    }

    await createTool({
      name: mcpForm.value.name,
      description: mcpForm.value.description,
      description_cn: mcpForm.value.description_cn,
      category: 'mcp',
      provider: 'mcp',
      transport: mcpForm.value.transport,
      command: mcpForm.value.command,
      args: JSON.stringify(argsArray),
      env: JSON.stringify(envObj),
      status: 'active',
    })
    closeAddMcp()
  } catch (error) {
    console.error('Failed to add MCP:', error)
  }
}
</script>

<template>
  <div class="p-6 min-h-screen">
    <!-- 顶部导航 -->
    <div class="flex justify-between items-center mb-6 h-10">
      <div class="flex items-center gap-2">
        <Wrench class="w-5 h-5 text-orange-500" />
        <span class="font-medium">Tools</span>
      </div>
      <div class="h-10 flex gap-2">
        <button v-if="activeTab === 'built-in'" @click="handleSyncTools" class="btn-secondary">
          <i class="fa-solid fa-sync mr-1"></i>
          Sync Tools
        </button>
        <button v-if="activeTab === 'mcp'" @click="openAddMcp" class="btn-primary">
          <Plus class="w-4 h-4 mr-1" />
          Add MCP
        </button>
      </div>
    </div>

    <!-- Tab 导航 -->
    <div class="flex items-center gap-2 mb-6">
      <button
        v-for="(label, tab) in { 'built-in': 'Built-in', 'mcp': 'MCP Servers' }"
        :key="tab"
        @click="activeTab = tab as 'built-in' | 'mcp'"
        class="px-4 py-2 rounded-lg font-medium flex items-center gap-2 transition-all"
        :class="activeTab === tab
          ? 'bg-orange-500 text-white'
          : 'bg-dark-700 text-gray-400 hover:bg-dark-600 hover:text-white'"
      >
        <span>{{ label }}</span>
        <span class="px-2 py-0.5 rounded-full text-xs" :class="activeTab === tab ? 'bg-white/20' : 'bg-dark-600'">
          {{ tabCounts[tab as keyof typeof tabCounts] }}
        </span>
      </button>
    </div>

    <!-- 搜索和筛选 -->
    <div class="flex gap-4 mb-6">
      <div class="flex-1 relative">
        <Search class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
        <input
          v-model="searchQuery"
          type="text"
          placeholder="Search tools by name or description..."
          class="search-input w-full pl-10"
        >
      </div>
      <el-select v-model="filterStatus" placeholder="Select" class="w-40" size="large">
        <el-option label="All Status" value="all" />
        <el-option label="Active" value="active" />
        <el-option label="Inactive" value="inactive" />
      </el-select>
    </div>

    <!-- Tools 列表 -->
    <div class="bg-dark-700 rounded-xl overflow-hidden">
      <!-- Loading -->
      <div v-if="toolsLoading" class="py-12 text-center text-gray-500">
        <i class="fa-solid fa-spinner fa-spin text-2xl"></i>
      </div>
      <table v-else-if="currentTools.length > 0" class="w-full">
        <thead class="bg-dark-600">
          <tr>
            <th class="text-left px-5 py-3 text-sm font-medium text-gray-400">Tool Name</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Provider</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Status</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Created</th>
            <th class="text-center px-5 py-3 text-sm font-medium text-gray-400">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="tool in currentTools" :key="tool.id" class="table-row">
            <td class="px-5 py-4">
              <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-lg flex items-center justify-center" :class="tool.type === 'built-in' ? 'bg-orange-500/20' : 'bg-emerald-500/20'">
                  <component :is="getIconComponent(tool.icon)" class="w-5 h-5" :class="tool.type === 'built-in' ? 'text-orange-400' : 'text-emerald-400'" />
                </div>
                <div>
                  <div class="font-medium">{{ tool.name }}</div>
                  <div class="text-sm text-gray-500">{{ tool.description }}</div>
                </div>
              </div>
            </td>
            <td class="px-5 py-4 text-center">
              <span class="text-gray-400 text-sm">{{ tool.provider || (tool.type === 'built-in' ? 'System' : 'MCP Server') }}</span>
            </td>
            <td class="px-5 py-4 text-center">
              <span class="inline-flex items-center gap-1.5 px-2 py-1 rounded-full text-xs" :class="tool.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'">
                <span class="w-1.5 h-1.5 rounded-full" :class="tool.status === 'active' ? 'bg-green-500' : 'bg-gray-400'"></span>
                <span class="capitalize">{{ tool.status }}</span>
              </span>
            </td>
            <td class="px-5 py-4 text-center text-gray-400 text-sm">{{ tool.created_at || '-' }}</td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-center gap-2">
                <!-- 激活/停用按钮 - 所有工具都有 -->
                <button @click="confirmToggleStatus(tool)" class="btn-icon" :title="tool.status === 'active' ? 'Deactivate' : 'Activate'">
                  <component :is="tool.status === 'active' ? Pause : Play" class="w-4 h-4 text-gray-400 hover:text-white" />
                </button>
                <!-- 编辑和删除按钮 - 只有 MCP 工具才有 -->
                <template v-if="tool.provider !== 'system'">
                  <button @click="openEdit(tool)" class="btn-icon" title="Edit">
                    <Edit class="w-4 h-4 text-gray-400 hover:text-white" />
                  </button>
                  <button @click="handleDeleteTool(tool.id)" class="btn-icon" title="Delete">
                    <Trash2 class="w-4 h-4 text-gray-400 hover:text-red-400" />
                  </button>
                </template>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 空状态 -->
      <div v-else class="empty-box">
        <div class="empty-icon">
          <Wrench class="w-12 h-12" />
        </div>
        <p class="empty-text">No tools found</p>
        <p class="empty-tip">Click "Add MCP" to add a new MCP server</p>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <Teleport to="body">
      <div v-if="isEditing" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 modal-overlay">
        <div class="bg-dark-700 rounded-2xl w-full max-w-lg border border-dark-500 shadow-2xl modal-content">
          <div class="flex items-center justify-between p-5 border-b border-dark-500">
            <h3 class="text-lg font-semibold">Edit Tool</h3>
            <button @click="cancelEdit" class="btn-icon">
              <X class="w-5 h-5" />
            </button>
          </div>

          <div class="p-5 space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Tool Name</label>
              <input v-model="editForm.name" type="text" class="input-field">
            </div>
            <div v-if="activeTab !== 'built-in'">
              <label class="block text-sm font-medium text-gray-300 mb-2">Provider</label>
              <input v-model="editForm.provider" type="text" class="input-field">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Icon</label>
              <input v-model="editForm.icon" type="text" placeholder="e.g., FileText, Globe, Code" class="input-field">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description</label>
              <textarea v-model="editForm.description" rows="3" class="input-field 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="btn-secondary">Cancel</button>
            <button @click="saveEdit" class="btn-primary">Save Changes</button>
          </div>
        </div>
      </div>
    </Teleport>

    <!-- 状态切换确认弹窗 -->
    <Teleport to="body">
      <Transition name="fade">
        <div v-if="showStatusConfirm" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50" @click="cancelToggleStatus">
          <div class="bg-dark-700 rounded-xl w-full max-w-sm border border-dark-500 shadow-2xl" @click.stop>
            <div class="p-6 text-center">
              <div class="w-14 h-14 rounded-full flex items-center justify-center mx-auto mb-4" :class="toolToToggle?.status === 'active' ? 'bg-yellow-500/20' : 'bg-green-500/20'">
                <component :is="toolToToggle?.status === 'active' ? Pause : Play" class="text-xl" :class="toolToToggle?.status === 'active' ? 'text-yellow-400' : 'text-green-400'" />
              </div>
              <h3 class="text-lg font-semibold text-white mb-2">
                {{ toolToToggle?.status === 'active' ? 'Stop Tool' : 'Activate Tool' }}
              </h3>
              <p class="text-gray-400 text-sm">
                {{ toolToToggle?.status === 'active'
                  ? `Are you sure you want to stop "${toolToToggle?.name}"? This tool will no longer be available.`
                  : `Are you sure you want to activate "${toolToToggle?.name}"? This tool will become available.`
                }}
              </p>
            </div>
            <div class="flex border-t border-dark-500">
              <button @click="cancelToggleStatus" class="flex-1 py-3 text-gray-400 hover:text-white hover:bg-dark-600 transition-colors">
                Cancel
              </button>
              <button @click="toggleStatus" class="flex-1 py-3 transition-colors border-l border-dark-500" :class="toolToToggle?.status === 'active' ? 'text-yellow-400 hover:bg-yellow-500/10' : 'text-green-400 hover:bg-green-500/10'">
                {{ toolToToggle?.status === 'active' ? 'Stop' : 'Activate' }}
              </button>
            </div>
          </div>
        </div>
      </Transition>
    </Teleport>

    <!-- Add MCP 弹窗 -->
    <Teleport to="body">
      <div v-if="showAddMcp" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 modal-overlay" @click="closeAddMcp">
        <div class="bg-dark-700 rounded-2xl w-full max-w-xl border border-dark-500 shadow-2xl modal-content" @click.stop>
          <div class="flex items-center justify-between p-5 border-b border-dark-500">
            <h3 class="text-lg font-semibold">Add MCP Server</h3>
            <button @click="closeAddMcp" class="btn-icon">
              <X class="w-5 h-5" />
            </button>
          </div>

          <div class="p-5 space-y-4 max-h-[70vh] overflow-y-auto">
            <!-- MCP Name -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">MCP Name <span class="text-red-400">*</span></label>
              <input v-model="mcpForm.name" type="text" class="input-field" placeholder="e.g., filesystem, memory">
            </div>

            <!-- Description -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description (English)</label>
              <textarea v-model="mcpForm.description" rows="2" class="input-field resize-none" placeholder="Describe what this MCP server does"></textarea>
            </div>

            <!-- Description CN -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Description (中文)</label>
              <textarea v-model="mcpForm.description_cn" rows="2" class="input-field resize-none" placeholder="描述这个 MCP 服务器的功能"></textarea>
            </div>

            <!-- Transport -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Transport Protocol <span class="text-red-400">*</span></label>
              <select v-model="mcpForm.transport" class="input-field">
                <option value="stdio">stdio</option>
                <option value="http">HTTP</option>
                <option value="sse">SSE</option>
              </select>
            </div>

            <!-- Command -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Start Command <span class="text-red-400">*</span></label>
              <input v-model="mcpForm.command" type="text" class="input-field" placeholder="e.g., npx, python, node">
            </div>

            <!-- Args -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Arguments</label>
              <textarea v-model="mcpForm.args" rows="3" class="input-field resize-none" placeholder="One argument per line, e.g.:&#10;-y&#10;@modelcontextprotocol/server-filesystem&#10;/path/to/dir"></textarea>
            </div>

            <!-- Environment Variables -->
            <div>
              <label class="block text-sm font-medium text-gray-300 mb-2">Environment Variables</label>
              <textarea v-model="mcpForm.env" rows="3" class="input-field resize-none" placeholder="KEY=value format, one per line, e.g.:&#10;API_KEY=xxx&#10;DEBUG=true"></textarea>
            </div>
          </div>

          <div class="flex items-center justify-end gap-3 p-5 border-t border-dark-500">
            <button @click="closeAddMcp" class="btn-secondary">Cancel</button>
            <button @click="submitMcp" class="btn-primary" :disabled="!mcpForm.name || !mcpForm.command">
              Add MCP
            </button>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<style scoped>
/* 使用全局样式 */
</style>
