import { ref } from 'vue'
import type { MCPServer } from './types'

export function useSkillServers() {
  // MCP Server 列表
  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
    })
  }

  // 状态样式
  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'
    }
  }

  return {
    // State
    mcpServers,
    editingServer,
    isEditing,
    searchQuery,
    filterStatus,
    editForm,

    // Methods
    openEdit,
    saveEdit,
    cancelEdit,
    toggleStatus,
    deleteServer,
    filteredServers,
    statusClass,
  }
}
