<template>
  <div class="tools">
    <h1>工具管理</h1>
    <p>系统内置工具列表，支持启用/禁用。</p>
    <div v-if="loading">加载中...</div>
    <div v-else>
      <table class="table">
        <thead>
          <tr>
            <th>名称</th>
            <th>描述</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="tool in tools" :key="tool.name">
            <td>{{ tool.name }}</td>
            <td>{{ tool.description }}</td>
            <td>
              <span :class="['badge', tool.enabled ? 'enabled' : 'disabled']">
                {{ tool.enabled ? '已启用' : '已禁用' }}
              </span>
            </td>
            <td>
              <button @click="toggleTool(tool)" class="btn-toggle">
                {{ tool.enabled ? '禁用' : '启用' }}
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const loading = ref(true)
const tools = ref([])

// 模拟获取工具列表
const fetchTools = async () => {
  loading.value = true
  // TODO: 替换为真实 API 调用
  await new Promise(resolve => setTimeout(resolve, 500))
  tools.value = [
    { name: 'code', description: '代码执行工具', enabled: true },
    { name: 'crawler', description: '网页爬虫工具', enabled: true },
    { name: 'data', description: '数据分析工具', enabled: false },
  ]
  loading.value = false
}

const toggleTool = (tool) => {
  tool.enabled = !tool.enabled
  // TODO: 调用 API 更新状态
}

onMounted(() => {
  fetchTools()
})
</script>

<style scoped>
.tools {
  padding: 2rem;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.table th, .table td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: left;
}

.badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.875rem;
}

.badge.enabled {
  background-color: #d4edda;
  color: #155724;
}

.badge.disabled {
  background-color: #f8d7da;
  color: #721c24;
}

.btn-toggle {
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f8f9fa;
  cursor: pointer;
}
</style>