<template>
  <div class="ai-config-list">
    <h2 class="page-title">AI配置管理</h2>
    
    <el-card class="search-card">
      <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="关键词">
          <el-input v-model="searchForm.keyword" placeholder="配置名称/键值/描述" clearable style="width: 200px" />
        </el-form-item>
        <el-form-item label="配置类型">
          <el-select v-model="searchForm.configType" placeholder="请选择配置类型" clearable style="width: 150px">
            <el-option 
              v-for="item in CONFIG_TYPE_OPTIONS" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item label="服务提供商">
          <el-select v-model="searchForm.provider" placeholder="请选择服务提供商" clearable style="width: 150px">
            <el-option 
              v-for="item in PROVIDER_OPTIONS" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item label="使用场景">
          <el-select v-model="searchForm.usageScenario" placeholder="请选择使用场景" clearable style="width: 150px">
            <el-option 
              v-for="item in USAGE_SCENARIO_OPTIONS" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.isEnabled" placeholder="请选择状态" clearable style="width: 120px">
            <el-option label="启用" :value="1" />
            <el-option label="禁用" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="环境">
          <el-select v-model="searchForm.environment" placeholder="请选择环境" clearable style="width: 130px">
            <el-option 
              v-for="item in ENVIRONMENT_OPTIONS" 
              :key="item.value" 
              :label="item.label" 
              :value="item.value" 
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <span>AI配置列表</span>
          <div class="header-actions">
            <el-button type="success" @click="handleRefreshStats">刷新统计</el-button>
            <el-button type="primary" @click="handleAdd">新增配置</el-button>
          </div>
        </div>
      </template>
      
      <!-- 统计信息 -->
      <div class="stats-row">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-statistic title="总配置数" :value="stats.total" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="已启用" :value="stats.enabled" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="已禁用" :value="stats.disabled" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="默认配置" :value="stats.default" />
          </el-col>
        </el-row>
      </div>
      
      <el-table :data="tableData" v-loading="loading" stripe>
        <el-table-column prop="configName" label="配置名称" width="150" />
        <el-table-column prop="configKey" label="配置键值" width="150" />
        <el-table-column prop="configType" label="配置类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getConfigTypeTagType(row.configType)">
              {{ getConfigTypeLabel(row.configType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="provider" label="服务提供商" width="120">
          <template #default="{ row }">
            <el-tag :type="getProviderTagType(row.provider)">
              {{ getProviderLabel(row.provider) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="usageScenario" label="使用场景" width="120">
          <template #default="{ row }">
            <el-tag type="info">
              {{ getUsageScenarioLabel(row.usageScenario) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="environment" label="环境" width="100">
          <template #default="{ row }">
            <el-tag :type="getEnvironmentTagType(row.environment)">
              {{ getEnvironmentLabel(row.environment) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="80" />
        <el-table-column prop="isEnabled" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="row.isEnabled === 1 ? 'success' : 'danger'">
              {{ row.isEnabled === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="isDefault" label="默认" width="80">
          <template #default="{ row }">
            <el-tag v-if="row.isDefault === 1" type="warning">默认</el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150" />
        <el-table-column label="操作" width="320" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="info" link @click="handleView(row)">查看</el-button>
            <el-button type="success" link @click="handleTest(row)">测试</el-button>
            <el-button 
              :type="row.isEnabled === 1 ? 'warning' : 'success'" 
              link 
              @click="handleToggleStatus(row)"
            >
              {{ row.isEnabled === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button 
              v-if="row.isDefault !== 1"
              type="warning" 
              link 
              @click="handleSetDefault(row)"
            >
              设为默认
            </el-button>
            <el-button 
              v-else
              type="info" 
              link 
              @click="handleUnsetDefault(row)"
            >
              取消默认
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        v-model:current-page="pagination.current"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="fetchData"
        @current-change="fetchData"
        class="pagination"
      />
    </el-card>
    
    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      @close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
      >
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基础配置" name="basic">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="配置名称" prop="configName">
                  <el-input v-model="formData.configName" placeholder="请输入配置名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="配置键值" prop="configKey">
                  <el-input v-model="formData.configKey" placeholder="请输入配置键值" :disabled="isEdit" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="配置类型" prop="configType">
                  <el-select v-model="formData.configType" style="width: 100%">
                    <el-option 
                      v-for="item in CONFIG_TYPE_OPTIONS" 
                      :key="item.value" 
                      :label="item.label" 
                      :value="item.value" 
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务提供商" prop="provider">
                  <el-select v-model="formData.provider" style="width: 100%">
                    <el-option 
                      v-for="item in PROVIDER_OPTIONS" 
                      :key="item.value" 
                      :label="item.label" 
                      :value="item.value" 
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="使用场景" prop="usageScenario">
                  <el-select v-model="formData.usageScenario" style="width: 100%">
                    <el-option 
                      v-for="item in USAGE_SCENARIO_OPTIONS" 
                      :key="item.value" 
                      :label="item.label" 
                      :value="item.value" 
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="环境" prop="environment">
                  <el-select v-model="formData.environment" style="width: 100%">
                    <el-option 
                      v-for="item in ENVIRONMENT_OPTIONS" 
                      :key="item.value" 
                      :label="item.label" 
                      :value="item.value" 
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="API完整URL" prop="apiBaseUrl">
              <el-input v-model="formData.apiBaseUrl" placeholder="请输入完整的API URL，如：https://api.coze.cn/v3/chat" />
            </el-form-item>
            
            <el-form-item label="API访问令牌" prop="apiToken">
              <el-input 
                v-model="formData.apiToken" 
                type="password" 
                show-password 
                placeholder="请输入API访问令牌" 
              />
            </el-form-item>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="API版本">
                  <el-input v-model="formData.apiVersion" placeholder="请输入API版本" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="模型名称">
                  <el-input v-model="formData.modelName" placeholder="请输入模型名称" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="Client ID">
                  <el-input v-model="formData.clientId" placeholder="请输入OAuth客户端ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Grant Type">
                  <el-select v-model="formData.grantType" placeholder="请选择授权类型" clearable style="width: 100%">
                    <el-option label="client_credentials" value="client_credentials" />
                    <el-option label="authorization_code" value="authorization_code" />
                    <el-option label="password" value="password" />
                    <el-option label="refresh_token" value="refresh_token" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="Client Secret">
              <el-input 
                v-model="formData.clientSecret" 
                type="password" 
                show-password 
                placeholder="请输入OAuth客户端密钥" 
              />
            </el-form-item>
            
            <el-row :gutter="20" v-if="formData.configType === 'coze'">
              <el-col :span="12">
                <el-form-item label="Bot ID">
                  <el-input v-model="formData.botId" placeholder="请输入Bot ID" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="Workflow ID">
                  <el-input v-model="formData.workflowId" placeholder="请输入Workflow ID" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="参数配置" name="params">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="超时时间(ms)">
                  <el-input-number v-model="formData.timeoutMs" :min="1000" :max="300000" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="重试次数">
                  <el-input-number v-model="formData.retryCount" :min="0" :max="10" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="重试延迟(ms)">
                  <el-input-number v-model="formData.retryDelayMs" :min="100" :max="10000" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="最大Token数">
                  <el-input-number v-model="formData.maxTokens" :min="1" :max="100000" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="温度参数">
                  <el-input-number v-model="formData.temperature" :min="0" :max="2" :step="0.1" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="Top-p参数">
                  <el-input-number v-model="formData.topP" :min="0" :max="1" :step="0.1" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="支持流式输出">
                  <el-switch v-model="formData.supportStream" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="支持函数调用">
                  <el-switch v-model="formData.supportFunctionCall" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="支持视觉理解">
                  <el-switch v-model="formData.supportVision" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="支持文件上传">
                  <el-switch v-model="formData.supportFileUpload" :active-value="1" :inactive-value="0" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="优先级">
              <el-input-number v-model="formData.priority" :min="0" :max="100" style="width: 200px" />
              <span class="form-tip">数值越大优先级越高</span>
            </el-form-item>
          </el-tab-pane>
          
          <el-tab-pane label="费用配置" name="pricing">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="输入Token价格">
                  <el-input-number v-model="formData.inputPricePer1k" :min="0" :step="0.000001" :precision="6" style="width: 100%" />
                  <span class="form-tip">每1K Token价格</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="输出Token价格">
                  <el-input-number v-model="formData.outputPricePer1k" :min="0" :step="0.000001" :precision="6" style="width: 100%" />
                  <span class="form-tip">每1K Token价格</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="货币单位">
                  <el-select v-model="formData.currency" style="width: 100%">
                    <el-option 
                      v-for="item in CURRENCY_OPTIONS" 
                      :key="item.value" 
                      :label="item.label" 
                      :value="item.value" 
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="每分钟限制">
                  <el-input-number v-model="formData.rateLimitPerMinute" :min="1" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="每小时限制">
                  <el-input-number v-model="formData.rateLimitPerHour" :min="1" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="每日限制">
                  <el-input-number v-model="formData.rateLimitPerDay" :min="1" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="其他配置" name="others">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否启用">
                  <el-radio-group v-model="formData.isEnabled">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否默认配置">
                  <el-radio-group v-model="formData.isDefault">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="自定义请求头">
              <el-input 
                v-model="formData.customHeaders" 
                type="textarea" 
                :rows="3" 
                placeholder="JSON格式的自定义请求头" 
              />
            </el-form-item>
            
            <el-form-item label="自定义参数">
              <el-input 
                v-model="formData.customParams" 
                type="textarea" 
                :rows="3" 
                placeholder="JSON格式的自定义参数" 
              />
            </el-form-item>
            
            <el-form-item label="Webhook地址">
              <el-input v-model="formData.webhookUrl" placeholder="请输入Webhook回调地址" />
            </el-form-item>
            
            <el-row :gutter="20">
              <el-col :span="16">
                <el-form-item label="健康检查URL">
                  <el-input v-model="formData.healthCheckUrl" placeholder="请输入健康检查URL" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="检查间隔(分钟)">
                  <el-input-number v-model="formData.healthCheckIntervalMinutes" :min="1" :max="1440" style="width: 100%" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="配置描述">
              <el-input 
                v-model="formData.description" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入配置描述" 
              />
            </el-form-item>
            
            <el-form-item label="使用说明">
              <el-input 
                v-model="formData.usageNotes" 
                type="textarea" 
                :rows="3" 
                placeholder="请输入使用说明" 
              />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
          确定
        </el-button>
      </template>
    </el-dialog>
    
    <!-- 查看详情对话框 -->
    <el-dialog
      v-model="viewDialogVisible"
      title="配置详情"
      width="800px"
    >
      <el-descriptions :column="2" border v-if="viewData">
        <el-descriptions-item label="配置名称">{{ viewData.configName }}</el-descriptions-item>
        <el-descriptions-item label="配置键值">{{ viewData.configKey }}</el-descriptions-item>
        <el-descriptions-item label="配置类型">{{ getConfigTypeLabel(viewData.configType) }}</el-descriptions-item>
        <el-descriptions-item label="服务提供商">{{ getProviderLabel(viewData.provider) }}</el-descriptions-item>
        <el-descriptions-item label="使用场景">{{ getUsageScenarioLabel(viewData.usageScenario) }}</el-descriptions-item>
        <el-descriptions-item label="环境">{{ getEnvironmentLabel(viewData.environment || '') }}</el-descriptions-item>
        <el-descriptions-item label="API完整URL">{{ viewData.apiBaseUrl }}</el-descriptions-item>
        <el-descriptions-item label="API令牌">{{ viewData.apiToken }}</el-descriptions-item>
        <el-descriptions-item label="Client ID">{{ viewData.clientId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="Client Secret">{{ viewData.clientSecret ? '******' : '-' }}</el-descriptions-item>
        <el-descriptions-item label="Grant Type">{{ viewData.grantType || '-' }}</el-descriptions-item>
        <el-descriptions-item label="模型名称">{{ viewData.modelName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="优先级">{{ viewData.priority || 0 }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="viewData.isEnabled === 1 ? 'success' : 'danger'">
            {{ viewData.isEnabled === 1 ? '启用' : '禁用' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="默认配置">
          <el-tag v-if="viewData.isDefault === 1" type="warning">是</el-tag>
          <span v-else>否</span>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ viewData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ viewData.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="配置描述" :span="2">{{ viewData.description || '-' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    
    <!-- 接口测试对话框 -->
    <el-dialog
      v-model="testDialogVisible"
      title="接口测试"
      width="1200px"
      @close="handleTestDialogClose"
    >
      <div class="test-container" v-if="testConfig">
        <div class="test-header-info" style="margin-bottom: 20px;">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="配置名称">{{ testConfig.configName }}</el-descriptions-item>
            <el-descriptions-item label="配置键值">
              <el-tag type="info">{{ testConfig.configKey }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="test-section">
              <h4>请求配置</h4>
              
              <el-form label-width="100px">
                <el-form-item label="请求URL">
                  <el-input v-model="testRequest.url" placeholder="请输入请求URL" />
                </el-form-item>
                
                <el-form-item label="测试选项">
                  <div class="test-options">
                    <el-checkbox 
                      v-model="testOptions.useStream" 
                      @change="updateTestRequestBody"
                    >
                      启用流式响应
                    </el-checkbox>
                    <el-tooltip content="启用后将测试流式返回，可以看到AI逐步生成的响应内容" placement="top">
                      <el-icon class="info-icon"><InfoFilled /></el-icon>
                    </el-tooltip>
                  </div>
                </el-form-item>
                
                <el-form-item label="测试消息">
                  <el-input
                    v-model="testOptions.testMessage"
                    placeholder="输入测试消息内容"
                    @input="updateTestRequestBody"
                  />
                </el-form-item>
                
                <el-form-item label="请求头">
                  <el-input
                    v-model="testRequest.headers"
                    type="textarea"
                    :rows="6"
                    placeholder="JSON格式的请求头"
                  />
                </el-form-item>
                
                <el-form-item label="请求体">
                  <el-input
                    v-model="testRequest.body"
                    type="textarea"
                    :rows="10"
                    placeholder="JSON格式的请求体"
                  />
                </el-form-item>
                
                <el-form-item>
                  <el-button type="primary" @click="handleTestRequest" :loading="testLoading">
                    {{ testOptions.useStream ? '发送流式测试' : '发送测试请求' }}
                  </el-button>
                  <el-button @click="handleFormatRequest">格式化请求</el-button>
                  <el-button @click="handleResetTest">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          
          <el-col :span="12">
            <div class="test-section">
              <h4>响应结果</h4>
              
              <el-form label-width="100px">
                <el-form-item label="状态码">
                  <el-tag :type="getStatusTagType(testResponse.status)">
                    {{ testResponse.status || '-' }}
                  </el-tag>
                </el-form-item>
                
                <el-form-item label="响应头">
                  <el-input
                    v-model="testResponse.headers"
                    type="textarea"
                    :rows="4"
                    readonly
                    placeholder="响应头信息"
                  />
                </el-form-item>
                
                <el-form-item label="响应体">
                  <el-input
                    v-model="testResponse.body"
                    type="textarea"
                    :rows="16"
                    readonly
                    placeholder="响应体内容"
                  />
                </el-form-item>
                
                <el-form-item>
                  <el-button @click="handleFormatResponse">格式化响应</el-button>
                  <el-button @click="handleCopyResponse">复制响应</el-button>
                  <el-button 
                    v-if="testResponse.status === 200" 
                    type="success" 
                    @click="handleSaveTestConfig"
                  >
                    保存测试配置
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
import { 
  getAiConfigPage, 
  createAiConfig, 
  updateAiConfig, 
  deleteAiConfig,
  enableAiConfig,
  disableAiConfig,
  setAsDefaultConfig,
  unsetDefaultConfig,
  countEnabledConfigs,
  countDisabledConfigs,
  countDefaultConfigs,
  updateAiConfigFromTest
} from '@/api/aiconfig'
import type { AiConfig, AiConfigPageRequest } from '@/types/aiconfig'
import { 
  CONFIG_TYPE_OPTIONS, 
  PROVIDER_OPTIONS, 
  USAGE_SCENARIO_OPTIONS, 
  ENVIRONMENT_OPTIONS,
  CURRENCY_OPTIONS
} from '@/types/aiconfig'

const loading = ref(false)
const submitLoading = ref(false)
const dialogVisible = ref(false)
const viewDialogVisible = ref(false)
const testDialogVisible = ref(false)
const testLoading = ref(false)
const isEdit = ref(false)
const formRef = ref<FormInstance>()
const activeTab = ref('basic')

const searchForm = reactive<AiConfigPageRequest>({
  current: 1,
  size: 10
})

const pagination = reactive({
  current: 1,
  size: 10,
  total: 0
})

const stats = reactive({
  total: 0,
  enabled: 0,
  disabled: 0,
  default: 0
})

const tableData = ref<AiConfig[]>([])
const viewData = ref<AiConfig | null>(null)
const testConfig = ref<AiConfig | null>(null)

const formData = reactive({
  id: '',
  configName: '',
  configKey: '',
  configType: 'coze',
  provider: 'coze',
  apiBaseUrl: '',
  apiToken: '',
  apiVersion: '',
  clientId: '',
  clientSecret: '',
  grantType: '',
  modelName: '',
  botId: '',
  workflowId: '',
  timeoutMs: 30000,
  retryCount: 3,
  retryDelayMs: 1000,
  maxTokens: 4000,
  temperature: 0.7,
  topP: 1.0,
  supportStream: 1,
  supportFunctionCall: 0,
  supportVision: 0,
  supportFileUpload: 0,
  usageScenario: 'chat',
  priority: 0,
  inputPricePer1k: 0,
  outputPricePer1k: 0,
  currency: 'USD',
  rateLimitPerMinute: 60,
  rateLimitPerHour: 3600,
  rateLimitPerDay: 86400,
  isEnabled: 1,
  isDefault: 0,
  environment: 'production',
  customHeaders: '',
  customParams: '',
  webhookUrl: '',
  healthCheckUrl: '',
  healthCheckIntervalMinutes: 5,
  description: '',
  usageNotes: ''
})

const formRules: FormRules = {
  configName: [{ required: true, message: '请输入配置名称', trigger: 'blur' }],
  configKey: [{ required: true, message: '请输入配置键值', trigger: 'blur' }],
  configType: [{ required: true, message: '请选择配置类型', trigger: 'change' }],
  provider: [{ required: true, message: '请选择服务提供商', trigger: 'change' }],
  apiBaseUrl: [{ required: true, message: '请输入完整的API URL', trigger: 'blur' }],
  apiToken: [{ required: true, message: '请输入API访问令牌', trigger: 'blur' }],
  usageScenario: [{ required: true, message: '请选择使用场景', trigger: 'change' }]
}

const dialogTitle = ref('新增AI配置')

// 测试相关数据
const testRequest = reactive({
  url: '',
  headers: '',
  body: ''
})

const testResponse = reactive({
  status: null as number | null,
  headers: '',
  body: ''
})

const testOptions = reactive({
  useStream: false,
  testMessage: '你好，这是一个测试消息，请回复确认接口正常工作。'
})

// 获取配置类型标签类型
const getConfigTypeTagType = (type: string) => {
  const typeMap: Record<string, string> = {
    coze: 'primary',
    openai: 'success',
    claude: 'warning',
    gemini: 'info'
  }
  return typeMap[type] || 'info'
}

// 获取配置类型标签文本
const getConfigTypeLabel = (type: string) => {
  const option = CONFIG_TYPE_OPTIONS.find(item => item.value === type)
  return option?.label || type
}

// 获取服务提供商标签类型
const getProviderTagType = (provider: string) => {
  const providerMap: Record<string, string> = {
    coze: 'primary',
    openai: 'success',
    anthropic: 'warning',
    google: 'info'
  }
  return providerMap[provider] || 'info'
}

// 获取服务提供商标签文本
const getProviderLabel = (provider: string) => {
  const option = PROVIDER_OPTIONS.find(item => item.value === provider)
  return option?.label || provider
}

// 获取使用场景标签文本
const getUsageScenarioLabel = (scenario: string) => {
  const option = USAGE_SCENARIO_OPTIONS.find(item => item.value === scenario)
  return option?.label || scenario
}

// 获取环境标签类型
const getEnvironmentTagType = (env: string) => {
  const envMap: Record<string, string> = {
    development: 'info',
    testing: 'warning',
    production: 'success'
  }
  return envMap[env] || 'info'
}

// 获取环境标签文本
const getEnvironmentLabel = (env: string) => {
  const option = ENVIRONMENT_OPTIONS.find(item => item.value === env)
  return option?.label || env
}

// 获取数据
const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      ...searchForm,
      current: pagination.current,
      size: pagination.size
    }
    const res = await getAiConfigPage(params)
    tableData.value = res.data.records
    pagination.total = res.data.total
    stats.total = res.data.total
  } catch (error) {
    console.error('获取AI配置列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 刷新统计信息
const fetchStats = async () => {
  try {
    const [enabledRes, disabledRes, defaultRes] = await Promise.all([
      countEnabledConfigs(),
      countDisabledConfigs(),
      countDefaultConfigs()
    ])
    stats.enabled = enabledRes.data
    stats.disabled = disabledRes.data
    stats.default = defaultRes.data
  } catch (error) {
    console.error('获取统计信息失败:', error)
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchData()
}

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    current: 1,
    size: 10,
    keyword: '',
    configType: '',
    provider: '',
    usageScenario: '',
    isEnabled: undefined,
    environment: ''
  })
  fetchData()
}

// 刷新统计
const handleRefreshStats = () => {
  fetchStats()
}

// 新增
const handleAdd = () => {
  isEdit.value = false
  dialogTitle.value = '新增AI配置'
  activeTab.value = 'basic'
  dialogVisible.value = true
}

// 编辑
const handleEdit = (row: AiConfig) => {
  isEdit.value = true
  dialogTitle.value = '编辑AI配置'
  activeTab.value = 'basic'
  Object.assign(formData, row)
  dialogVisible.value = true
}

// 查看详情
const handleView = (row: AiConfig) => {
  viewData.value = row
  viewDialogVisible.value = true
}

// 测试接口
const handleTest = (row: AiConfig) => {
  testConfig.value = row
  initTestData(row)
  testDialogVisible.value = true
}

// 切换状态
const handleToggleStatus = async (row: AiConfig) => {
  const action = row.isEnabled === 1 ? '禁用' : '启用'
  try {
    await ElMessageBox.confirm(`确定要${action}该配置吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    if (row.isEnabled === 1) {
      await disableAiConfig(row.id)
    } else {
      await enableAiConfig(row.id)
    }
    
    ElMessage.success(`${action}成功`)
    fetchData()
    fetchStats()
  } catch (error) {
    if (error !== 'cancel') {
      console.error(`${action}失败:`, error)
    }
  }
}

// 设置默认配置
const handleSetDefault = async (row: AiConfig) => {
  try {
    await ElMessageBox.confirm('确定要设置为默认配置吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await setAsDefaultConfig(row.id)
    ElMessage.success('设置成功')
    fetchData()
    fetchStats()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('设置默认配置失败:', error)
    }
  }
}

// 取消默认配置
const handleUnsetDefault = async (row: AiConfig) => {
  try {
    await ElMessageBox.confirm('确定要取消默认配置吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    await unsetDefaultConfig(row.id)
    ElMessage.success('取消成功')
    fetchData()
    fetchStats()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消默认配置失败:', error)
    }
  }
}

// 删除
const handleDelete = (row: AiConfig) => {
  ElMessageBox.confirm('确定要删除该AI配置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await deleteAiConfig(row.id)
      ElMessage.success('删除成功')
      fetchData()
      fetchStats()
    } catch (error) {
      console.error('删除失败:', error)
    }
  })
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      try {
        if (isEdit.value) {
          await updateAiConfig(formData)
          ElMessage.success('更新成功')
        } else {
          await createAiConfig(formData)
          ElMessage.success('创建成功')
        }
        dialogVisible.value = false
        fetchData()
        fetchStats()
      } catch (error) {
        console.error('提交失败:', error)
      } finally {
        submitLoading.value = false
      }
    }
  })
}

// 关闭对话框
const handleDialogClose = () => {
  formRef.value?.resetFields()
  Object.assign(formData, {
    id: '',
    configName: '',
    configKey: '',
    configType: 'coze',
    provider: 'coze',
    apiBaseUrl: '',
    apiToken: '',
    apiVersion: '',
    clientId: '',
    clientSecret: '',
    grantType: '',
    modelName: '',
    botId: '',
    workflowId: '',
    timeoutMs: 30000,
    retryCount: 3,
    retryDelayMs: 1000,
    maxTokens: 4000,
    temperature: 0.7,
    topP: 1.0,
    supportStream: 1,
    supportFunctionCall: 0,
    supportVision: 0,
    supportFileUpload: 0,
    usageScenario: 'chat',
    priority: 0,
    inputPricePer1k: 0,
    outputPricePer1k: 0,
    currency: 'USD',
    rateLimitPerMinute: 60,
    rateLimitPerHour: 3600,
    rateLimitPerDay: 86400,
    isEnabled: 1,
    isDefault: 0,
    environment: 'production',
    customHeaders: '',
    customParams: '',
    webhookUrl: '',
    healthCheckUrl: '',
    healthCheckIntervalMinutes: 5,
    description: '',
    usageNotes: ''
  })
}

// 初始化测试数据
const initTestData = (config: AiConfig) => {
  // apiBaseUrl已经是完整的API URL，直接使用
  testRequest.url = config.apiBaseUrl
  
  // 构建请求头
  const headers = {
    'Authorization': `Bearer ${config.apiToken}`,
    'Content-Type': 'application/json'
  }
  
  // 如果有自定义请求头，合并
  if (config.customHeaders) {
    try {
      const customHeaders = JSON.parse(config.customHeaders)
      Object.assign(headers, customHeaders)
    } catch (e) {
      console.warn('解析自定义请求头失败:', e)
    }
  }
  
  testRequest.headers = JSON.stringify(headers, null, 2)
  
  // 构建请求体 - 完全按照AiChatServiceImpl.buildCozeRequest的格式
  const requestBody: any = {
    bot_id: config.botId || '',
    user_id: 'test_user_' + Date.now(),
    stream: testOptions.useStream,
    additional_messages: [
      {
        role: 'user',
        content: testOptions.testMessage,
        content_type: 'text',
        type: 'question'
      }
    ],
    parameters: {}
  }
  
  // 如果有workflow_id，添加到请求体
  if (config.workflowId && config.workflowId.trim()) {
    requestBody.workflow_id = config.workflowId
  }
  
  // 如果有自定义参数，合并
  if (config.customParams) {
    try {
      const customParams = JSON.parse(config.customParams)
      Object.assign(requestBody, customParams)
    } catch (e) {
      console.warn('解析自定义参数失败:', e)
    }
  }
  
  testRequest.body = JSON.stringify(requestBody, null, 2)
  
  // 清空响应数据
  testResponse.status = null
  testResponse.headers = ''
  testResponse.body = ''
}

// 更新测试请求体
const updateTestRequestBody = () => {
  if (!testConfig.value) return
  
  try {
    const body = JSON.parse(testRequest.body)
    body.stream = testOptions.useStream
    body.additional_messages[0].content = testOptions.testMessage
    testRequest.body = JSON.stringify(body, null, 2)
  } catch (e) {
    console.warn('更新请求体失败:', e)
  }
}

// 发送测试请求
const handleTestRequest = async () => {
  if (!testConfig.value) return
  
  testLoading.value = true
  
  try {
    // 解析请求头
    let headers = {}
    try {
      headers = JSON.parse(testRequest.headers)
    } catch (e) {
      ElMessage.error('请求头格式错误，请检查JSON格式')
      return
    }
    
    // 解析请求体
    let body = {}
    try {
      body = JSON.parse(testRequest.body)
    } catch (e) {
      ElMessage.error('请求体格式错误，请检查JSON格式')
      return
    }
    
    // 检查是否为流式请求
    const isStreamRequest = (body as any).stream === true
    
    if (isStreamRequest) {
      // 处理流式请求
      await handleStreamRequest(headers, body)
    } else {
      // 处理普通请求
      await handleNormalRequest(headers, body)
    }
    
  } catch (error: any) {
    console.error('测试请求失败:', error)
    ElMessage.error('测试请求失败: ' + (error.message || error))
    
    // 设置错误响应
    testResponse.status = 0
    testResponse.headers = ''
    testResponse.body = JSON.stringify({
      error: 'Network Error',
      message: error.message || error.toString(),
      timestamp: new Date().toISOString()
    }, null, 2)
  } finally {
    testLoading.value = false
  }
}

// 处理普通请求
const handleNormalRequest = async (headers: any, body: any) => {
  const response = await fetch(testRequest.url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(body)
  })
  
  // 获取响应头
  const responseHeaders: any = {}
  response.headers.forEach((value, key) => {
    responseHeaders[key] = value
  })
  
  // 获取响应体
  const responseBody = await response.text()
  
  // 更新响应数据
  testResponse.status = response.status
  testResponse.headers = JSON.stringify(responseHeaders, null, 2)
  testResponse.body = responseBody
  
  // 尝试格式化响应体
  try {
    const jsonBody = JSON.parse(responseBody)
    testResponse.body = JSON.stringify(jsonBody, null, 2)
  } catch (e) {
    // 如果不是JSON格式，保持原样
  }
  
  if (response.ok) {
    ElMessage.success('测试请求发送成功')
  } else {
    ElMessage.warning(`请求返回状态码: ${response.status}`)
  }
}

// 处理流式请求
const handleStreamRequest = async (headers: any, body: any) => {
  const response = await fetch(testRequest.url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify(body)
  })
  
  // 获取响应头
  const responseHeaders: any = {}
  response.headers.forEach((value, key) => {
    responseHeaders[key] = value
  })
  
  testResponse.status = response.status
  testResponse.headers = JSON.stringify(responseHeaders, null, 2)
  
  if (!response.ok) {
    const errorBody = await response.text()
    testResponse.body = errorBody
    ElMessage.warning(`请求返回状态码: ${response.status}`)
    return
  }
  
  if (!response.body) {
    testResponse.body = 'Error: 响应体为空'
    ElMessage.error('响应体为空')
    return
  }
  
  // 处理流式响应
  const reader = response.body.getReader()
  const decoder = new TextDecoder()
  let streamContent = ''
  let chunks: string[] = []
  
  // 清空响应体，准备接收流式数据
  testResponse.body = '正在接收流式数据...\n\n'
  
  try {
    while (true) {
      const { done, value } = await reader.read()
      
      if (done) {
        break
      }
      
      // 解码数据块
      const chunk = decoder.decode(value, { stream: true })
      streamContent += chunk
      chunks.push(chunk)
      
      // 实时更新响应体显示
      testResponse.body = `=== 流式响应数据 ===\n\n` +
        `接收到 ${chunks.length} 个数据块，总长度: ${streamContent.length} 字符\n\n` +
        `=== 原始数据流 ===\n${streamContent}\n\n` +
        `=== 解析后的数据 ===\n${parseStreamData(streamContent)}`
    }
    
    ElMessage.success(`流式请求完成，共接收 ${chunks.length} 个数据块`)
    
  } catch (streamError: any) {
    console.error('流式数据读取失败:', streamError)
    testResponse.body += `\n\n=== 流式读取错误 ===\n${streamError.message || streamError}`
    ElMessage.error('流式数据读取失败: ' + (streamError.message || streamError))
  } finally {
    reader.releaseLock()
  }
}

// 解析流式数据
const parseStreamData = (streamContent: string): string => {
  try {
    const lines = streamContent.split('\n')
    const parsedData: any[] = []
    let currentEvent = ''
    let currentData = ''
    
    for (const line of lines) {
      if (line.startsWith('event:')) {
        currentEvent = line.substring(6).trim()
      } else if (line.startsWith('data:')) {
        currentData = line.substring(5).trim()
        
        if (currentData === '[DONE]') {
          parsedData.push({
            event: currentEvent || 'done',
            data: '[DONE]',
            timestamp: new Date().toISOString()
          })
        } else if (currentData) {
          try {
            const jsonData = JSON.parse(currentData)
            parsedData.push({
              event: currentEvent || 'data',
              data: jsonData,
              timestamp: new Date().toISOString()
            })
          } catch (e) {
            parsedData.push({
              event: currentEvent || 'raw',
              data: currentData,
              timestamp: new Date().toISOString()
            })
          }
        }
        
        currentEvent = ''
        currentData = ''
      } else if (line.trim() === '') {
        // 空行，重置状态
        currentEvent = ''
        currentData = ''
      }
    }
    
    return JSON.stringify(parsedData, null, 2)
  } catch (e) {
    return `解析失败: ${e}\n\n原始内容:\n${streamContent}`
  }
}

// 格式化请求
const handleFormatRequest = () => {
  try {
    // 格式化请求头
    if (testRequest.headers) {
      const headers = JSON.parse(testRequest.headers)
      testRequest.headers = JSON.stringify(headers, null, 2)
    }
    
    // 格式化请求体
    if (testRequest.body) {
      const body = JSON.parse(testRequest.body)
      testRequest.body = JSON.stringify(body, null, 2)
    }
    
    ElMessage.success('格式化完成')
  } catch (e) {
    ElMessage.error('格式化失败，请检查JSON格式')
  }
}

// 格式化响应
const handleFormatResponse = () => {
  try {
    if (testResponse.body) {
      const body = JSON.parse(testResponse.body)
      testResponse.body = JSON.stringify(body, null, 2)
      ElMessage.success('响应格式化完成')
    }
  } catch (e) {
    ElMessage.error('响应格式化失败，内容可能不是有效的JSON')
  }
}

// 复制响应
const handleCopyResponse = async () => {
  try {
    await navigator.clipboard.writeText(testResponse.body)
    ElMessage.success('响应内容已复制到剪贴板')
  } catch (e) {
    ElMessage.error('复制失败')
  }
}

// 保存测试配置
const handleSaveTestConfig = async () => {
  if (!testConfig.value) {
    ElMessage.error('测试配置不存在')
    return
  }

  try {
    // 解析请求头
    let headers: any = {}
    try {
      headers = JSON.parse(testRequest.headers)
    } catch (e) {
      ElMessage.error('请求头格式错误，无法解析')
      return
    }

    // 解析请求体
    let body: any = {}
    try {
      body = JSON.parse(testRequest.body)
    } catch (e) {
      ElMessage.error('请求体格式错误，无法解析')
      return
    }

    // 提取API Token（从Authorization头中）
    let apiToken = testConfig.value.apiToken
    if (headers.Authorization) {
      // 移除 "Bearer " 前缀
      apiToken = headers.Authorization.replace(/^Bearer\s+/i, '')
      delete headers.Authorization // 从自定义头中移除，因为已经保存到apiToken字段
    }

    // 提取Bot ID和Workflow ID（从请求体中）
    const botId = body.bot_id || testConfig.value.botId
    const workflowId = body.workflow_id || testConfig.value.workflowId
    const supportStream = body.stream !== undefined ? (body.stream ? 1 : 0) : testConfig.value.supportStream

    // 移除已经提取的字段，剩余的作为自定义参数
    const customParamsBody = { ...body }
    delete customParamsBody.bot_id
    delete customParamsBody.workflow_id
    delete customParamsBody.stream
    delete customParamsBody.user_id
    delete customParamsBody.additional_messages

    // 构建更新请求
    const updateData = {
      id: testConfig.value.id,
      apiBaseUrl: testRequest.url,
      apiToken: apiToken,
      botId: botId,
      workflowId: workflowId,
      customHeaders: Object.keys(headers).length > 0 ? JSON.stringify(headers) : '',
      customParams: Object.keys(customParamsBody).length > 0 ? JSON.stringify(customParamsBody) : '',
      supportStream: supportStream
    }

    // 调用更新接口
    const res = await updateAiConfigFromTest(updateData) as any
    
    if (res.code === 200) {
      ElMessage.success('测试配置已保存')
      // 更新testConfig
      testConfig.value = res.data
      // 刷新列表
      await fetchData()
    } else {
      ElMessage.error(res.message || '保存失败')
    }
  } catch (error: any) {
    console.error('保存测试配置失败:', error)
    ElMessage.error('保存失败: ' + (error.message || error))
  }
}

// 重置测试
const handleResetTest = () => {
  if (testConfig.value) {
    initTestData(testConfig.value)
    ElMessage.success('测试数据已重置')
  }
}

// 获取状态码标签类型
const getStatusTagType = (status: number | null) => {
  if (!status) return 'info'
  if (status >= 200 && status < 300) return 'success'
  if (status >= 300 && status < 400) return 'warning'
  if (status >= 400) return 'danger'
  return 'info'
}

// 关闭测试对话框
const handleTestDialogClose = () => {
  testConfig.value = null
  testRequest.url = ''
  testRequest.headers = ''
  testRequest.body = ''
  testResponse.status = null
  testResponse.headers = ''
  testResponse.body = ''
  testOptions.useStream = false
  testOptions.testMessage = '你好，这是一个测试消息，请回复确认接口正常工作。'
}

onMounted(() => {
  fetchData()
  fetchStats()
})
</script>

<style scoped lang="scss">
.ai-config-list {
  .page-title {
    margin-bottom: 20px;
    font-size: 24px;
    color: var(--ls-text);
  }
  
  .search-card {
    margin-bottom: 20px;
  }
  
  .search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    
    .el-form-item {
      margin-bottom: 10px;
      margin-right: 15px;
    }
  }
  
  .table-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .header-actions {
        display: flex;
        gap: 10px;
      }
    }
    
    .stats-row {
      margin-bottom: 20px;
      padding: 20px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: var(--ls-radius-lg);
    }
    
    .pagination {
      margin-top: 20px;
      justify-content: flex-end;
    }
  }
  
  .form-tip {
    margin-left: 10px;
    font-size: 12px;
    color: rgba(226, 232, 240, 0.6);
  }
}

.test-container {
  .test-section {
    h4 {
      margin-bottom: 20px;
      color: var(--ls-text);
      border-bottom: 2px solid rgba(255, 171, 145, 0.6);
      padding-bottom: 8px;
    }
    
    .test-options {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .info-icon {
        color: rgba(226, 232, 240, 0.6);
        cursor: help;
      }
    }
    
    .el-textarea {
      :deep(.el-textarea__inner) {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 12px;
        line-height: 1.4;
      }
    }
    
    .el-input {
      :deep(.el-input__inner) {
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        font-size: 12px;
      }
    }
  }
}
</style>