/**
 * MCP 服务管理组件
 * 支持 SSE / stdio 两种传输类型的 MCP Server 配置管理
 * 功能：列表展示、新建/编辑/删除、启用/禁用切换、测试连接、刷新连接、分页
 */
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as api from '../js/api.js'
import { toast, formatDate } from '../js/utils.js'

// 传输类型选项
const TRANSPORT_OPTIONS = [
  { value: 'sse', label: 'SSE（HTTP 服务）' },
  { value: 'stdio', label: 'Stdio（本地进程）' }
]

export default {
  template: `
    <div class="card">
      <h2>MCP 服务管理</h2>
      <p style="font-size:13px;color:var(--sub);margin:-4px 0 16px;">
        管理 MCP (Model Context Protocol) 服务端配置，支持 SSE 和 Stdio 两种传输方式
      </p>

      <!-- 操作栏 -->
      <div class="input-row" style="flex-wrap:wrap;margin-bottom:16px;">
        <button class="btn btn-primary btn-sm" @click="openAddModal">新建配置</button>
        <button class="btn btn-outline btn-sm" @click="refreshConnections" :disabled="refreshLoading">
          {{ refreshLoading ? '刷新中...' : '刷新连接' }}
        </button>
        <button class="btn btn-outline btn-sm" @click="load(currentPage)">刷新列表</button>
        <span style="margin-left:auto;font-size:12px;color:var(--sub);">
          共 {{ total }} 条配置
        </span>
      </div>

      <!-- 列表表格 -->
      <div style="overflow-x:auto;">
        <table class="data-table">
          <thead>
            <tr>
              <th>名称</th>
              <th>传输类型</th>
              <th>URL / 命令</th>
              <th>启用状态</th>
              <th>描述</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="servers.length === 0">
              <td colspan="7" style="text-align:center;color:var(--sub);">暂无 MCP 服务配置</td>
            </tr>
            <tr v-for="s in servers" :key="s.id">
              <td><strong>{{ s.name || '-' }}</strong></td>
              <td>
                <span class="badge" :class="s.transport_type === 'sse' ? 'badge-get' : ''">
                  {{ s.transport_type === 'sse' ? 'SSE' : 'Stdio' }}
                </span>
              </td>
              <td style="font-size:12px;color:#6b7280;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                :title="getDisplayUrl(s)">
                {{ getDisplayUrl(s) || '-' }}
              </td>
              <td>
                <label class="toggle-switch" :title="s.is_active ? '已启用' : '已禁用'">
                  <input type="checkbox" :checked="s.is_active" @change="toggleActive(s)">
                  <span class="toggle-slider"></span>
                </label>
              </td>
              <td style="font-size:12px;color:#6b7280;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                :title="s.description">
                {{ s.description || '-' }}
              </td>
              <td style="font-size:12px;color:#6b7280;">{{ formatDate(s.create_time) }}</td>
              <td style="white-space:nowrap;">
                <button class="btn btn-sm btn-outline" @click="testConnection(s)" :disabled="testLoading[s.id]" title="测试连接">
                  {{ testLoading[s.id] ? '测试中...' : '测试' }}
                </button>
                <button class="btn btn-sm btn-outline" @click="openEditModal(s)" title="编辑">编辑</button>
                <button class="btn btn-sm btn-danger" @click="remove(s.id, s.name)" title="删除">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination" v-if="totalPages > 1">
        <button :disabled="currentPage <= 1" @click="load(currentPage - 1)">上一页</button>
        <template v-for="i in totalPages" :key="i">
          <button v-if="i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)"
            :class="{ active: i === currentPage }" @click="load(i)">{{ i }}</button>
          <span v-else-if="i === currentPage - 3 || i === currentPage + 3" style="padding:6px;">...</span>
        </template>
        <button :disabled="currentPage >= totalPages" @click="load(currentPage + 1)">下一页</button>
      </div>

      <!-- 测试结果提示 -->
      <div v-if="testResult.visible" class="test-result-toast"
        :style="{ position: 'fixed', bottom: '20px', right: '20px', padding: '12px 20px', borderRadius: '8px', zIndex: 9999, color: 'white', maxWidth: '400px', boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
          background: testResult.success ? '#16a34a' : '#dc2626' }">
        <div style="font-weight:600;">{{ testResult.success ? '连接成功' : '连接失败' }}</div>
        <div v-if="testResult.message" style="font-size:12px;margin-top:4px;opacity:0.9;">{{ testResult.message }}</div>
      </div>
    </div>

    <!-- 新建/编辑弹窗 -->
    <div class="modal-overlay" :class="{ active: showModal }">
      <div class="modal-box" style="max-width:600px;">
        <button class="modal-close" @click="closeModal">&times;</button>
        <h2 style="margin-bottom:16px;">{{ modalMode === 'add' ? '新建 MCP 服务配置' : '编辑 MCP 服务配置' }}</h2>

        <div style="display:flex;flex-direction:column;gap:16px;">
          <!-- 名称 -->
          <div>
            <label style="font-size:13px;font-weight:600;display:block;margin-bottom:4px;">
              服务名称 <span style="color:#dc2626;">*</span>
            </label>
            <input type="text" class="input" v-model.trim="form.name" placeholder="如：天气查询服务">
          </div>

          <!-- 传输类型 -->
          <div>
            <label style="font-size:13px;font-weight:600;display:block;margin-bottom:8px;">
              传输类型 <span style="color:#dc2626;">*</span>
            </label>
            <div style="display:flex;gap:8px;">
              <button v-for="opt in transportOptions" :key="opt.value"
                type="button"
                @click="form.transportType = opt.value"
                style="padding:6px 16px;border-radius:6px;font-size:13px;cursor:pointer;transition:all 0.15s;"
                :style="form.transportType === opt.value
                  ? 'background:#2563eb;color:white;border:2px solid #2563eb;font-weight:600;'
                  : 'background:white;color:#374151;border:2px solid #e5e7eb;font-weight:400;'">
                {{ opt.label }}
              </button>
            </div>
          </div>

          <!-- SSE 模式：URL -->
          <div v-if="form.transportType === 'sse'">
            <label style="font-size:13px;font-weight:600;display:block;margin-bottom:4px;">
              Server URL <span style="color:#dc2626;">*</span>
            </label>
            <input type="text" class="input" v-model.trim="form.url" placeholder="如：http://localhost:3001/sse">
            <div style="font-size:11px;color:#6b7280;margin-top:4px;">
              MCP 服务的 SSE 端点地址
            </div>
          </div>

          <!-- Stdio 模式：Command + Args -->
          <template v-if="form.transportType === 'stdio'">
            <div>
              <label style="font-size:13px;font-weight:600;display:block;margin-bottom:4px;">
                Command <span style="color:#dc2626;">*</span>
              </label>
              <input type="text" class="input" v-model.trim="form.command" placeholder="如：npx, python, node">
              <div style="font-size:11px;color:#6b7280;margin-top:4px;">
                启动 MCP 服务的可执行命令
              </div>
            </div>
            <div>
              <label style="font-size:13px;font-weight:600;display:block;margin-bottom:4px;">
                Args（命令参数，每行一个）
              </label>
              <textarea class="input" v-model="form.argsText" rows="3"
                placeholder="-m&#10;mcp-server-fetch&#10;--verbose"></textarea>
              <div style="font-size:11px;color:#6b7280;margin-top:4px;">
                每行一个参数，留空则不传参
              </div>
            </div>
          </template>

          <!-- 环境变量 -->
          <div>
            <label style="font-size:13px;font-weight:600;display:block;margin-bottom:4px;">
              环境变量（可选）
            </label>
            <textarea class="input" v-model="form.envText" rows="2"
              placeholder="KEY1=value1&#10;KEY2=value2"></textarea>
            <div style="font-size:11px;color:#6b7280;margin-top:4px;">
              格式：KEY=value，每行一组，留空则不设置
            </div>
          </div>

          <!-- 描述 -->
          <div>
            <label style="font-size:13px;font-weight:600;display:block;margin-bottom:4px;">描述说明</label>
            <textarea class="input" v-model.trim="form.description" rows="2" placeholder="可选，填写服务用途说明"></textarea>
          </div>
        </div>

        <!-- 按钮 -->
        <div style="display:flex;gap:10px;margin-top:20px;justify-content:flex-end;">
          <button class="btn btn-outline" @click="closeModal">取消</button>
          <button class="btn btn-primary" @click="save" :disabled="saving">
            {{ saving ? '保存中...' : '保存' }}
          </button>
        </div>
      </div>
    </div>
  `,

  setup() {
    // ==================== 列表状态 ====================
    const servers = ref([])
    const currentPage = ref(1)
    const totalPages = ref(1)
    const total = ref(0)
    const pageSize = 10

    // ==================== 弹窗状态 ====================
    const showModal = ref(false)
    const modalMode = ref('add') // 'add' | 'edit'
    const editId = ref(null)
    const saving = ref(false)

    // 表单数据
    const form = ref(createEmptyForm())

    function createEmptyForm() {
      return {
        name: '',
        transportType: 'sse',
        url: '',
        command: '',
        argsText: '',
        envText: '',
        description: ''
      }
    }

    // ==================== 测试连接状态 ====================
    const testLoading = ref({})
    const testResult = ref({ visible: false, success: false, message: '' })
    let testResultTimer = null

    // ==================== 刷新连接状态 ====================
    const refreshLoading = ref(false)

    // ==================== 传输类型选项 ====================
    const transportOptions = TRANSPORT_OPTIONS

    // ==================== 数据加载 ====================

    async function load(p = 1) {
      currentPage.value = p
      try {
        const json = await api.listMcpServers(p, pageSize)
        if (json.success) {
          servers.value = json.data || []
          total.value = json.total || 0
          totalPages.value = json.pages || 1
        } else {
          toast(json.message || '查询失败', 'error')
        }
      } catch (e) {
        toast('加载列表失败：' + e.message, 'error')
      }
    }

    // ==================== 弹窗操作 ====================

    function openAddModal() {
      modalMode.value = 'add'
      editId.value = null
      form.value = createEmptyForm()
      showModal.value = true
    }

    function openEditModal(server) {
      modalMode.value = 'edit'
      editId.value = server.id

      // 解析 args 数组为换行文本
      let argsText = ''
      if (server.args && Array.isArray(server.args)) {
        argsText = server.args.join('\n')
      } else if (typeof server.args === 'string' && server.args) {
        try {
          const parsed = JSON.parse(server.args)
          if (Array.isArray(parsed)) argsText = parsed.join('\n')
          else argsText = server.args
        } catch (e) {
          argsText = server.args
        }
      }

      // 解析环境变量对象为换行文本
      let envText = ''
      if (server.env_vars && typeof server.env_vars === 'object') {
        envText = Object.entries(server.env_vars).map(([k, v]) => k + '=' + v).join('\n')
      } else if (typeof server.env_vars === 'string' && server.env_vars) {
        try {
          const parsed = JSON.parse(server.env_vars)
          if (typeof parsed === 'object' && parsed !== null) {
            envText = Object.entries(parsed).map(([k, v]) => k + '=' + v).join('\n')
          } else {
            envText = server.env_vars
          }
        } catch (e) {
          envText = server.env_vars
        }
      }

      form.value = {
        name: server.name || '',
        transportType: server.transport_type || 'sse',
        url: server.server_url || '',
        command: server.command || '',
        argsText: argsText,
        envText: envText,
        description: server.description || ''
      }
      showModal.value = true
    }

    function closeModal() {
      showModal.value = false
    }

    // ==================== 保存 ====================

    function buildSaveData() {
      const f = form.value
      const data = {
        name: f.name,
        transportType: f.transportType,
        description: f.description
      }

      if (f.transportType === 'sse') {
        data.serverUrl = f.url
      } else {
        data.command = f.command
        // 解析 args：按换行拆分，过滤空行
        if (f.argsText && f.argsText.trim()) {
          data.args = f.argsText.split('\n').map(s => s.trim()).filter(Boolean)
        } else {
          data.args = []
        }
      }

      // 解析环境变量：按换行拆分，解析 KEY=value
      if (f.envText && f.envText.trim()) {
        const envObj = {}
        f.envText.split('\n').forEach(line => {
          const trimmed = line.trim()
          if (!trimmed) return
          const eqIdx = trimmed.indexOf('=')
          if (eqIdx > 0) {
            envObj[trimmed.substring(0, eqIdx)] = trimmed.substring(eqIdx + 1)
          }
        })
        data.envVars = envObj
      }

      return data
    }

    async function save() {
      const f = form.value

      // 校验
      if (!f.name || !f.name.trim()) {
        toast('请填写服务名称', 'error')
        return
      }
      if (f.transportType === 'sse') {
        if (!f.url || !f.url.trim()) {
          toast('请填写 Server URL', 'error')
          return
        }
      } else {
        if (!f.command || !f.command.trim()) {
          toast('请填写 Command', 'error')
          return
        }
      }

      saving.value = true
      try {
        const data = buildSaveData()
        let json
        if (modalMode.value === 'add') {
          json = await api.createMcpServer(data)
        } else {
          json = await api.updateMcpServer(editId.value, data)
        }

        if (json.success) {
          toast(modalMode.value === 'add' ? '创建成功' : '更新成功', 'success')
          closeModal()
          load(currentPage.value)
        } else {
          toast(json.message || '操作失败', 'error')
        }
      } catch (e) {
        toast('保存失败：' + e.message, 'error')
      } finally {
        saving.value = false
      }
    }

    // ==================== 删除 ====================

    async function remove(id, name) {
      if (!confirm('确定删除配置「' + (name || id) + '」？删除后不可恢复。')) return
      try {
        const json = await api.deleteMcpServer(id)
        if (json.success) {
          toast('删除成功', 'success')
          load(currentPage.value)
        } else {
          toast(json.message || '删除失败', 'error')
        }
      } catch (e) {
        toast('删除失败：' + e.message, 'error')
      }
    }

    // ==================== 启用/禁用 ====================

    async function toggleActive(server) {
      const newActive = !server.is_active
      try {
        const json = await api.toggleMcpServer(server.id, newActive)
        if (json.success) {
          toast(newActive ? '已启用' : '已禁用', 'success')
          // 乐观更新本地状态，避免刷新列表
          server.is_active = newActive
        } else {
          toast(json.message || '操作失败', 'error')
        }
      } catch (e) {
        toast('操作失败：' + e.message, 'error')
      }
    }

    // ==================== 测试连接 ====================

    async function testConnection(server) {
      testLoading.value = { ...testLoading.value, [server.id]: true }
      try {
        const json = await api.testMcpServer(server.id)
        showTestResult(json)
      } catch (e) {
        showTestResult({ success: false, message: e.message })
      } finally {
        testLoading.value = { ...testLoading.value, [server.id]: false }
      }
    }

    function showTestResult(result) {
      if (testResultTimer) clearTimeout(testResultTimer)
      testResult.value = {
        visible: true,
        success: result.success,
        message: result.message || ''
      }
      testResultTimer = setTimeout(() => { testResult.value.visible = false }, 5000)
    }

    // ==================== 刷新连接 ====================

    async function refreshConnections() {
      refreshLoading.value = true
      try {
        const json = await api.refreshMcpServers()
        if (json.success) {
          toast('连接已刷新', 'success')
          load(currentPage.value)
        } else {
          toast(json.message || '刷新失败', 'error')
        }
      } catch (e) {
        toast('刷新失败：' + e.message, 'error')
      } finally {
        refreshLoading.value = false
      }
    }

    // ==================== 工具函数 ====================

    function getDisplayUrl(server) {
      if (server.transport_type === 'sse') {
        return server.server_url || '-'
      }
      // stdio 模式：显示 command + args
      let display = server.command || ''
      if (server.args) {
        // args 可能是字符串或数组
        const argsStr = Array.isArray(server.args) ? server.args.join(' ') : server.args
        display += ' ' + argsStr
      }
      return display || '-'
    }

    // ==================== 生命周期 ====================

    onMounted(() => {
      load()
    })

    onUnmounted(() => {
      if (testResultTimer) clearTimeout(testResultTimer)
    })

    return {
      // 列表
      servers, currentPage, totalPages, total,
      // 弹窗
      showModal, modalMode, form, saving, transportOptions,
      // 测试
      testLoading, testResult,
      // 刷新
      refreshLoading,
      // 方法
      load, openAddModal, openEditModal, closeModal, save, remove,
      toggleActive, testConnection, refreshConnections, getDisplayUrl, formatDate
    }
  }
}