<script setup lang="ts">
import { ref, computed } from 'vue'
import '@/views/database/database.css'

interface Tool {
  id: number
  name: string
  type: 'built-in' | 'custom' | 'mcp'
  description: string
  status: 'active' | 'inactive'
  icon?: string
  provider?: string
  config?: object
  createdAt: string
}

// Mock data for tools
const builtInTools = ref<Tool[]>([
  { id: 1, name: 'File Reader', type: 'built-in', description: 'Read files from the filesystem', status: 'active', icon: 'fa-file-lines', createdAt: '2025-01-15' },
  { id: 2, name: 'Web Search', type: 'built-in', description: 'Search the web for information', status: 'active', icon: 'fa-globe', createdAt: '2025-01-15' },
  { id: 3, name: 'Calculator', type: 'built-in', description: 'Perform mathematical calculations', status: 'active', icon: 'fa-calculator', createdAt: '2025-01-15' },
  { id: 4, name: 'Code Executor', type: 'built-in', description: 'Execute code in a sandbox', status: 'active', icon: 'fa-code', createdAt: '2025-01-15' },
  { id: 5, name: 'JSON Parser', type: 'built-in', description: 'Parse and validate JSON data', status: 'active', icon: 'fa-brackets-curly', createdAt: '2025-01-15' },
])

const customTools = ref<Tool[]>([
  { id: 101, name: 'GitHub API', type: 'custom', description: 'Interact with GitHub REST API', status: 'active', icon: 'fa-github', provider: 'Custom', createdAt: '2025-03-01' },
  { id: 102, name: 'Slack Notifier', type: 'custom', description: 'Send notifications to Slack', status: 'inactive', icon: 'fa-slack', provider: 'Custom', createdAt: '2025-03-05' },
  { id: 103, name: 'Email Sender', type: 'custom', description: 'Send emails via SMTP', status: 'active', icon: 'fa-envelope', provider: 'Custom', createdAt: '2025-03-08' },
])

const mcpTools = ref<Tool[]>([
  { id: 201, name: 'Puppeteer', type: 'mcp', description: 'Browser automation via Puppeteer', status: 'active', icon: 'fa-browser', provider: 'MCP Server', createdAt: '2025-02-10' },
  { id: 202, name: 'SQL Database', type: 'mcp', description: 'Execute SQL queries on databases', status: 'active', icon: 'fa-database', provider: 'MCP Server', createdAt: '2025-02-12' },
  { id: 203, name: 'Filesystem', type: 'mcp', description: 'File operations via MCP', status: 'active', icon: 'fa-folder', provider: 'MCP Server', createdAt: '2025-02-15' },
  { id: 204, name: 'Git Operations', type: 'mcp', description: 'Git repository operations', status: 'inactive', icon: 'fa-git-alt', provider: 'MCP Server', createdAt: '2025-02-18' },
])

const activeTab = ref<'built-in' | 'custom' | '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: '',
})

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

const currentTools = computed(() => {
  let tools: Tool[] = []
  switch (activeTab.value) {
    case 'built-in': tools = builtInTools.value; break
    case 'custom': tools = customTools.value; break
    case 'mcp': tools = mcpTools.value; break
  }
  return tools.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,
  'custom': customTools.value.length,
  'mcp': mcpTools.value.length,
}))

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

const saveEdit = () => {
  if (editingTool.value) {
    const targetArray = editingTool.value.type === 'built-in' ? builtInTools.value :
                        editingTool.value.type === 'custom' ? customTools.value : mcpTools.value
    const index = targetArray.findIndex(t => t.id === editingTool.value!.id)
    if (index !== -1) targetArray[index] = { ...targetArray[index], ...editForm.value }
  }
  isEditing.value = false
}

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

const toggleStatus = (tool: Tool) => {
  const targetArray = tool.type === 'built-in' ? builtInTools.value :
                      tool.type === 'custom' ? customTools.value : mcpTools.value
  const found = targetArray.find(t => t.id === tool.id)
  if (found) found.status = found.status === 'active' ? 'inactive' : 'active'
}

const deleteTool = (id: number) => {
  switch (activeTab.value) {
    case 'built-in': builtInTools.value = builtInTools.value.filter(t => t.id !== id); break
    case 'custom': customTools.value = customTools.value.filter(t => t.id !== id); break
    case 'mcp': mcpTools.value = mcpTools.value.filter(t => t.id !== id); break
  }
}
</script>

<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-tools text-orange-500"></i>
        <span class="font-medium">Tools</span>
      </div>
      <button class="btn-primary">
        <i class="fa-solid fa-plus"></i>
        New Tool
      </button>
    </div>

    <!-- Tab 导航 -->
    <div class="flex items-center gap-2 mb-6">
      <button
        v-for="(label, tab) in { 'built-in': 'Built-in', 'custom': 'Custom', 'mcp': 'MCP Servers' }"
        :key="tab"
        @click="activeTab = tab as 'built-in' | 'custom' | '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">
        <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 tools by name or description..."
          class="search-input w-full"
        >
      </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">
      <table v-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' : tool.type === 'custom' ? 'bg-blue-500/20' : 'bg-emerald-500/20'">
                  <i :class="['fa-solid', tool.icon || 'fa-cube', 'text-lg', tool.type === 'built-in' ? 'text-orange-400' : tool.type === 'custom' ? 'text-blue-400' : 'text-emerald-400']"></i>
                </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' : 'Custom') }}</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.createdAt }}</td>
            <td class="px-5 py-4">
              <div class="flex items-center justify-center gap-2">
                <button @click="toggleStatus(tool)" class="btn-icon" :title="tool.status === 'active' ? 'Deactivate' : 'Activate'">
                  <i :class="['fa-solid', tool.status === 'active' ? 'fa-pause' : 'fa-play', 'text-gray-400 hover:text-white']"></i>
                </button>
                <button @click="openEdit(tool)" class="btn-icon" title="Edit">
                  <i class="fa-solid fa-pen text-gray-400 hover:text-white"></i>
                </button>
                <button @click="deleteTool(tool.id)" class="btn-icon" title="Delete">
                  <i class="fa-solid fa-trash text-gray-400 hover:text-red-400"></i>
                </button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <!-- 空状态 -->
      <div v-else class="empty-box">
        <div class="empty-icon">
          <i class="fa-solid fa-tools"></i>
        </div>
        <p class="empty-text">No tools found</p>
        <p class="empty-tip">Click "New Tool" to add a tool</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">
              <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">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">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>
  </div>
</template>

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