<template>
  <div class="config-management-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-icon">
        <el-icon><Setting /></el-icon>
      </div>
      <h1>配置管理</h1>
    </div>
    
    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="showAddDialog = true">
        <el-icon><plus /></el-icon>
        添加配置
      </el-button>
      <el-button @click="loadConfigs">刷新</el-button>
      <el-button type="info" @click="showHelpDialog = true">
        <el-icon><InfoFilled /></el-icon>
        帮助说明
      </el-button>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-select v-model="filterType" placeholder="配置类型" clearable @change="loadConfigs">
        <el-option label="全部" value="" />
        <el-option label="系统配置" value="system" />
        <el-option label="服务配置" value="service" />
        <el-option label="用户配置" value="user" />
      </el-select>
    </div>
    
    <!-- 配置列表 -->
    <el-table :data="configs" style="width: 100%">
      <el-table-column prop="config_key" label="配置键" width="250" />
      <el-table-column prop="config_value" label="配置值" width="300" />
      <el-table-column prop="config_type" label="类型" width="120">
        <template #default="scope">
          <el-tag :type="getConfigTypeTag(scope.row.config_type)">
            {{ getConfigTypeName(scope.row.config_type) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="service_id" label="服务ID" width="150" />
      <el-table-column prop="description" label="描述" width="200" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.updated_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button size="small" @click="editConfig(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="deleteConfig(scope.row.config_key)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 添加/编辑配置对话框 -->
    <el-dialog
      v-model="showAddDialog"
      :title="isEditMode ? '编辑配置' : '添加配置'"
      width="60%"
    >
      <el-form :model="configForm" :rules="configRules" ref="configFormRef">
        <el-form-item label="配置键" prop="config_key">
          <el-input 
            v-model="configForm.config_key" 
            placeholder="请输入配置键" 
            :disabled="isEditMode"
          />
        </el-form-item>
        <el-form-item label="配置值" prop="config_value">
          <el-input 
            v-model="configForm.config_value" 
            placeholder="请输入配置值"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="配置类型" prop="config_type">
          <el-select v-model="configForm.config_type" placeholder="选择配置类型">
            <el-option label="系统配置" value="system" />
            <el-option label="服务配置" value="service" />
            <el-option label="用户配置" value="user" />
          </el-select>
        </el-form-item>
        <el-form-item label="服务ID" prop="service_id">
          <el-input 
            v-model="configForm.service_id" 
            placeholder="请输入服务ID（可选）"
          />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="configForm.description"
            type="textarea"
            :rows="2"
            placeholder="请输入配置描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="saveConfig">保存</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 帮助说明对话框 -->
    <el-dialog
      v-model="showHelpDialog"
      title="配置管理说明"
      width="70%"
      :close-on-click-modal="false"
    >
      <div class="help-dialog-content">
        <el-collapse v-model="activeHelpSections">
          <el-collapse-item title="什么是配置管理？" name="what">
            <div class="help-section">
              <p><strong>配置管理</strong>是智能算法展示平台的核心功能，用于管理系统、服务和用户的各种配置项。</p>
              <p>它提供了统一的配置管理界面，支持不同层级的配置，采用三层配置架构，确保配置的灵活性和安全性。</p>
              <el-divider />
              <h4>主要功能：</h4>
              <ul>
                <li><strong>配置存储</strong>：将配置存储在数据库中，便于管理和查询</li>
                <li><strong>配置分层</strong>：支持系统、服务、用户三层配置管理</li>
                <li><strong>动态更新</strong>：配置修改后立即生效，无需重启服务</li>
                <li><strong>配置优先级</strong>：环境变量 > 数据库 > 文件默认值</li>
                <li><strong>配置历史</strong>：记录配置的创建和更新时间</li>
              </ul>
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="为什么需要配置管理？" name="why">
            <div class="help-section">
              <h4>解决的问题：</h4>
              <ul>
                <li><strong>配置集中管理</strong>：避免配置分散在多个文件中</li>
                <li><strong>动态配置</strong>：无需重启服务即可修改配置</li>
                <li><strong>配置安全</strong>：敏感配置可以单独管理，不暴露在代码中</li>
                <li><strong>环境适配</strong>：不同环境使用不同配置，便于部署</li>
                <li><strong>配置版本</strong>：记录配置变更历史，便于追溯</li>
              </ul>
              <el-divider />
              <h4>应用场景：</h4>
              <ul>
                <li><strong>系统配置</strong>：数据库连接、Redis配置、API密钥等</li>
                <li><strong>服务配置</strong>：算法服务的超时时间、并发数等</li>
                <li><strong>用户配置</strong>：用户偏好、权限限制等</li>
                <li><strong>环境切换</strong>：开发、测试、生产环境配置切换</li>
              </ul>
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="如何使用配置管理？" name="how">
            <div class="help-section">
              <h4>使用流程：</h4>
              <el-steps :active="currentStep" finish-status="success" align-center>
                <el-step title="确定配置类型" description="选择系统/服务/用户配置" />
                <el-step title="添加配置" description="填写配置键、值和描述" />
                <el-step title="应用配置" description="配置立即生效" />
                <el-step title="管理配置" description="编辑、删除或查看配置" />
              </el-steps>
              
              <el-divider />
              
              <h4>详细步骤：</h4>
              <ol>
                <li><strong>确定配置类型</strong>：根据配置的用途选择合适的类型（system/service/user）</li>
                <li><strong>添加配置</strong>：点击"添加配置"按钮，填写配置信息</li>
                <li><strong>配置键命名</strong>：使用命名空间规范，如"openai.api_config"</li>
                <li><strong>配置值格式</strong>：使用JSON格式，便于存储复杂配置</li>
                <li><strong>应用配置</strong>：配置保存后立即生效，无需重启</li>
                <li><strong>管理配置</strong>：可以随时编辑、删除或查看配置历史</li>
              </ol>
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="配置类型说明" name="types">
            <div class="help-section">
              <h4>配置类型：</h4>
              <el-table :data="configTypeDescriptions" style="width: 100%">
                <el-table-column prop="type" label="类型" width="120">
                  <template #default="scope">
                    <el-tag :type="getConfigTypeTag(scope.row.type)">
                      {{ getConfigTypeName(scope.row.type) }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="description" label="说明" />
                <el-table-column prop="examples" label="示例" />
                <el-table-column prop="scope" label="作用范围" width="120" />
              </el-table>
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="配置命名规范" name="naming">
            <div class="help-section">
              <h4>命名规范：</h4>
              <ul>
                <li><strong>使用小写字母</strong>：配置键使用小写字母和点号分隔</li>
                <li><strong>使用命名空间</strong>：按功能模块组织配置</li>
                <li><strong>使用下划线</strong>：单词之间使用下划线连接</li>
                <li><strong>避免特殊字符</strong>：不要使用空格和特殊符号</li>
              </ul>
              
              <el-divider />
              
              <h4>命名示例：</h4>
              <el-table :data="namingExamples" style="width: 100%">
                <el-table-column prop="category" label="类别" width="150" />
                <el-table-column prop="example" label="示例" />
                <el-table-column prop="description" label="说明" />
              </el-table>
            </div>
          </el-collapse-item>
          
          <el-collapse-item title="常见问题" name="faq">
            <div class="help-section">
              <el-collapse accordion>
                <el-collapse-item title="配置修改后多久生效？">
                  <p>配置修改后<strong>立即生效</strong>，无需重启服务。系统会自动从数据库读取最新配置。</p>
                  <p>注意：某些配置可能需要服务重新加载才能生效，具体取决于配置的使用方式。</p>
                </el-collapse-item>
                
                <el-collapse-item title="如何备份配置？">
                  <p>配置存储在数据库中，建议：</p>
                  <ul>
                    <li>定期备份数据库</li>
                    <li>记录重要配置的变更历史</li>
                    <li>使用版本控制管理配置文件</li>
                    <li>在修改配置前先导出现有配置</li>
                  </ul>
                </el-collapse-item>
                
                <el-collapse-item title="配置值支持哪些格式？">
                  <p>配置值支持<strong>JSON格式</strong>，可以存储：</p>
                  <ul>
                    <li>字符串：`"value"`</li>
                    <li>数字：`123` 或 `123.45`</li>
                    <li>布尔值：`true` 或 `false`</li>
                    <li>数组：`["item1", "item2"]`</li>
                    <li>对象：`{"key": "value", "num": 123}`</li>
                    <li>嵌套结构：`{"config": {"nested": {"value": "test"}}}`</li>
                  </ul>
                </el-collapse-item>
                
                <el-collapse-item title="如何处理敏感配置？">
                  <p>对于敏感配置（如API密钥、密码等），建议：</p>
                  <ul>
                    <li>使用环境变量存储，不要存储在数据库中</li>
                    <li>在代码中使用占位符，运行时从环境变量读取</li>
                    <li>定期轮换敏感配置</li>
                    <li>限制敏感配置的访问权限</li>
                  </ul>
                </el-collapse-item>
                
                <el-collapse-item title="配置优先级是如何工作的？">
                  <p>系统采用三层配置架构，优先级从高到低：</p>
                  <ol>
                    <li><strong>环境变量</strong>（最高优先级）：适合敏感信息和部署环境配置</li>
                    <li><strong>数据库配置</strong>（中等优先级）：适合运行时动态配置</li>
                    <li><strong>文件默认值</strong>（最低优先级）：代码中的默认配置</li>
                  </ol>
                  <p>当多个配置源存在相同配置键时，优先级高的会覆盖优先级低的。</p>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showHelpDialog = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { Plus, InfoFilled, Setting } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { configService, type ConfigItem } from '../../services/admin'

// 状态管理
const configs = ref<ConfigItem[]>([])
const filterType = ref('')
const showAddDialog = ref(false)
const showHelpDialog = ref(false)
const isEditMode = ref(false)
const configFormRef = ref()
const configForm = ref({
  config_key: '',
  config_value: '',
  config_type: 'system',
  service_id: '',
  description: ''
})

// 帮助说明相关状态
const activeHelpSections = ref<string[]>(['what'])
const currentStep = ref(0)

// 配置类型说明数据
const configTypeDescriptions = ref([
  {
    type: 'system',
    description: '系统级别的全局配置，影响整个平台',
    examples: '数据库连接、Redis配置、API密钥等',
    scope: '全局'
  },
  {
    type: 'service',
    description: '特定算法服务的配置，只影响单个服务',
    examples: '超时时间、并发数、模型参数等',
    scope: '服务'
  },
  {
    type: 'user',
    description: '用户级别的配置，个性化设置',
    examples: '用户偏好、权限限制、存储配额等',
    scope: '用户'
  }
])

// 命名示例数据
const namingExamples = ref([
  {
    category: '系统配置',
    example: 'database.connection_pool',
    description: '数据库连接池配置'
  },
  {
    category: '系统配置',
    example: 'redis.cache_timeout',
    description: 'Redis缓存超时时间'
  },
  {
    category: '服务配置',
    example: 'service.{service_id}.timeout',
    description: '特定服务的超时配置'
  },
  {
    category: '服务配置',
    example: 'service.{service_id}.max_concurrent',
    description: '特定服务的最大并发数'
  },
  {
    category: '用户配置',
    example: 'user.{user_id}.preferences',
    description: '用户偏好设置'
  },
  {
    category: '用户配置',
    example: 'user.{user_id}.permissions',
    description: '用户权限配置'
  }
])

// 表单验证规则
const configRules = ref({
  config_key: [
    { required: true, message: '请输入配置键', trigger: 'blur' }
  ],
  config_value: [
    { required: true, message: '请输入配置值', trigger: 'blur' }
  ],
  config_type: [
    { required: true, message: '请选择配置类型', trigger: 'blur' }
  ]
})

// 获取配置类型标签样式
const getConfigTypeTag = (type: string) => {
  const typeMap: Record<string, string> = {
    'system': 'danger',
    'service': 'warning',
    'user': 'success'
  }
  return typeMap[type] || 'info'
}

// 获取配置类型名称
const getConfigTypeName = (type: string) => {
  const typeMap: Record<string, string> = {
    'system': '系统配置',
    'service': '服务配置',
    'user': '用户配置'
  }
  return typeMap[type] || type
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString()
}

// 加载配置列表
const loadConfigs = async () => {
  try {
    configs.value = await configService.getAllConfigs(filterType.value)
  } catch (error) {
    console.error('加载配置列表失败:', error)
    ElMessage.error('加载配置列表失败')
  }
}

// 添加配置
const addConfig = async () => {
  try {
    const success = await configService.setConfig(configForm.value.config_key, {
      value: configForm.value.config_value,
      type: configForm.value.config_type,
      service_id: configForm.value.service_id || null,
      description: configForm.value.description
    })
    
    if (success) {
      ElMessage.success('配置添加成功')
      closeDialog()
      loadConfigs()
    }
  } catch (error) {
    console.error('添加配置失败:', error)
    ElMessage.error('添加配置失败')
  }
}

// 编辑配置
const editConfig = (config: any) => {
  isEditMode.value = true
  configForm.value = {
    config_key: config.config_key,
    config_value: config.config_value,
    config_type: config.config_type,
    service_id: config.service_id || '',
    description: config.description || ''
  }
  showAddDialog.value = true
}

// 更新配置
const updateConfig = async () => {
  try {
    const success = await configService.setConfig(configForm.value.config_key, {
      value: configForm.value.config_value,
      type: configForm.value.config_type,
      service_id: configForm.value.service_id || null,
      description: configForm.value.description
    })
    
    if (success) {
      ElMessage.success('配置更新成功')
      closeDialog()
      loadConfigs()
    }
  } catch (error) {
    console.error('更新配置失败:', error)
    ElMessage.error('更新配置失败')
  }
}

// 保存配置
const saveConfig = async () => {
  if (!configFormRef.value) return
  
  await configFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      if (isEditMode.value) {
        await updateConfig()
      } else {
        await addConfig()
      }
    }
  })
}

// 删除配置
const deleteConfig = (configKey: string) => {
  ElMessageBox.confirm(
    '确定要删除此配置吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      const success = await configService.deleteConfig(configKey)
      
      if (success) {
        ElMessage.success('配置删除成功')
        loadConfigs()
      }
    } catch (error) {
      console.error('删除配置失败:', error)
      ElMessage.error('删除配置失败')
    }
  }).catch(() => {
    // 用户取消删除
  })
}

// 关闭对话框
const closeDialog = () => {
  showAddDialog.value = false
  isEditMode.value = false
  configForm.value = {
    config_key: '',
    config_value: '',
    config_type: 'system',
    service_id: '',
    description: ''
  }
  if (configFormRef.value) {
    configFormRef.value.resetFields()
  }
}

// 加载数据
onMounted(() => {
  loadConfigs()
})
</script>

<style scoped>
.config-management-container {
  width: 100%;
}

.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e4e7ed;
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f3514e 0%, #f78955 100%);
  color: white;
  font-size: 24px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.action-bar {
  margin-bottom: 20px;
}

.help-section {
  padding: 10px 20px;
}

.help-section h4 {
  margin: 15px 0 10px 0;
  color: #333;
  font-size: 15px;
}

.help-section p {
  margin: 8px 0;
  line-height: 1.6;
  color: #606266;
}

.help-section ul,
.help-section ol {
  margin: 10px 0;
  padding-left: 20px;
}

.help-section li {
  margin: 8px 0;
  line-height: 1.6;
  color: #606266;
}

.help-section strong {
  color: #303133;
  font-weight: 600;
}

.help-dialog-content {
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 0;
}

.filter-bar {
  margin-bottom: 20px;
}

.filter-bar .el-select {
  width: 200px;
}

@media (max-width: 768px) {
  .el-table {
    font-size: 14px;
  }
  
  .el-table-column {
    min-width: 120px;
  }
  
  .action-bar {
    text-align: center;
  }
  
  .filter-bar {
    text-align: center;
  }
  
  .filter-bar .el-select {
    width: 100%;
  }
}
</style>