<!--
=============================================================================
企微IT智能服务台 — 功能开关/参数管理页
=============================================================================
说明：按阶段分组的功能卡片，每项配置根据 value_type 显示不同控件
  - 布尔值：el-switch 开关
  - 数值：el-input-number
  - JSON：代码显示 + 编辑按钮（弹出对话框编辑）
-->
<template>
  <div class="configs-page">
    <!-- 页面标题 -->
    <div class="page-title">功能开关 / 参数</div>
    <div class="page-desc">按阶段控制功能开放，运行时切换无需改代码。配置变更即时生效，支持回滚。</div>

    <!-- 加载状态 -->
    <div v-if="configStore.loading" class="loading-state">
      <el-skeleton :rows="8" animated />
    </div>

    <!-- 配置分组网格 -->
    <div v-else class="feature-grid">
      <ConfigGroup
        v-for="group in configStore.groups"
        :key="group.key_prefix"
        :group="group"
        :icon="getGroupIcon(group.key_prefix)"
        :icon-color="getGroupIconColor(group.key_prefix)"
        :group-description="getGroupDescription(group.key_prefix)"
        :status-tag="getGroupStatusTag(group.key_prefix)"
        :item-stage="getItemStage(group.key_prefix)"
        @update="handleUpdate"
        @edit="handleEdit"
      />
    </div>

    <!-- JSON 编辑对话框 -->
    <el-dialog
      v-model="jsonEditVisible"
      :title="'编辑配置 — ' + editingItem?.description"
      width="560px"
      destroy-on-close
    >
      <el-form v-if="editingItem" label-position="top">
        <el-form-item label="配置键">
          <el-input :model-value="editingItem.key" disabled />
        </el-form-item>
        <el-form-item label="配置值（JSON 格式）">
          <el-input
            v-model="jsonEditValue"
            type="textarea"
            :rows="8"
            placeholder="请输入合法的 JSON 值"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleJsonSave">保存变更</el-button>
          <el-button @click="jsonEditVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ConfigGroup from '@/components/ConfigGroup.vue'
import { useConfigStore } from '@/stores/config'
import type { ConfigItem } from '@/types'

// ==========================================================================
// Store
// ==========================================================================
const configStore = useConfigStore()

// ==========================================================================
// JSON 编辑对话框
// ==========================================================================
const jsonEditVisible = ref<boolean>(false)
const editingItem = ref<ConfigItem | null>(null)
const jsonEditValue = ref<string>('')

// ==========================================================================
// 初始化
// ==========================================================================
onMounted(() => {
  configStore.loadConfigs()
})

// ==========================================================================
// 配置更新
// ==========================================================================

/** 处理配置值更新（布尔值/数值） */
async function handleUpdate(key: string, value: string): Promise<void> {
  const success = await configStore.updateConfigValue(key, value)
  if (success) {
    ElMessage.success('配置已更新')
  } else {
    ElMessage.error('配置更新失败')
  }
}

/** 打开 JSON 编辑对话框 */
function handleEdit(item: ConfigItem): void {
  editingItem.value = item
  jsonEditValue.value = item.value
  jsonEditVisible.value = true
}

/** 保存 JSON 编辑 */
async function handleJsonSave(): Promise<void> {
  if (!editingItem.value) return
  const success = await configStore.updateConfigValue(editingItem.value.key, jsonEditValue.value)
  if (success) {
    ElMessage.success('配置已更新')
    jsonEditVisible.value = false
  } else {
    ElMessage.error('配置更新失败')
  }
}

// ==========================================================================
// 分组辅助方法
// ==========================================================================

/** 分组配置映射 */
const groupMeta: Record<string, { icon: string; iconColor: string; desc: string }> = {
  ai_: {
    icon: 'Cpu',
    iconColor: 'var(--accent)',
    desc: 'Dify Agent + RAGFlow 检索增强，员工自助咨询',
  },
  manual_: {
    icon: 'Headset',
    iconColor: 'var(--success)',
    desc: '员工可摇铃呼叫坐席，坐席手动接单',
  },
  queue_: {
    icon: 'Clock',
    iconColor: 'var(--warning)',
    desc: '坐席全忙时排队等待，支持优先级排序',
  },
  satisfaction_: {
    icon: 'Star',
    iconColor: '#fbbf24',
    desc: '会话结束后推送评价，统计满意度趋势',
  },
  emergency_: {
    icon: 'WarningFilled',
    iconColor: 'var(--danger)',
    desc: '系统维护时降级，引导员工走企微原生通道',
  },
  keyword_: {
    icon: 'Key',
    iconColor: 'var(--accent)',
    desc: '转人工/情绪关键词，JSON 格式存储',
  },
}

function getGroupIcon(keyPrefix: string): string {
  return groupMeta[keyPrefix]?.icon || 'Setting'
}

function getGroupIconColor(keyPrefix: string): string {
  return groupMeta[keyPrefix]?.iconColor || 'var(--accent)'
}

function getGroupDescription(keyPrefix: string): string {
  return groupMeta[keyPrefix]?.desc || ''
}

function getGroupStatusTag(keyPrefix: string): { type: 'success' | 'warning' | 'danger' | 'info'; text: string } | undefined {
  if (keyPrefix === 'ai_' || keyPrefix === 'manual_' || keyPrefix === 'keyword_') {
    return { type: 'success', text: '已启用' }
  }
  if (keyPrefix === 'queue_' || keyPrefix === 'satisfaction_') {
    return { type: 'warning', text: '阶段二' }
  }
  if (keyPrefix === 'emergency_') {
    return { type: 'danger', text: '当前关闭' }
  }
  return undefined
}

function getItemStage(keyPrefix: string): string | undefined {
  if (keyPrefix === 'queue_' || keyPrefix === 'satisfaction_') {
    return '阶段二'
  }
  return undefined
}
</script>

<style scoped>
/* 加载状态 */
.loading-state {
  padding: 24px 0;
}
</style>
