<template>
  <section class="space-y-6">
    <header class="space-y-2">
      <h1 class="mos-title text-2xl font-semibold">系统配置</h1>
      <p class="mos-muted text-sm">管理系统参数和缓存配置。</p>
    </header>

    <!-- 配置tabs -->
    <div class="flex gap-2 border-b border-mosquito-line pb-2">
      <button
        v-for="tab in tabs"
        :key="tab.key"
        class="px-4 py-2 text-sm font-semibold rounded-t-lg transition"
        :class="activeTab === tab.key
          ? 'bg-mosquito-accent/10 text-mosquito-brand border-b-2 border-mosquito-brand'
          : 'text-mosquito-ink/70 hover:bg-mosquito-bg'"
        @click="activeTab = tab.key"
      >
        {{ tab.label }}
      </button>
    </div>

    <!-- 系统参数 -->
    <div v-if="activeTab === 'params'" class="mos-card p-5">
      <div class="space-y-4">
        <div v-for="config in systemParams" :key="config.key" class="flex items-center justify-between py-3 border-b border-mosquito-line">
          <div>
            <div class="font-semibold">{{ config.label }}</div>
            <div class="text-xs text-mosquito-ink/70">{{ config.description }}</div>
          </div>
          <div class="w-64">
            <input
              v-if="config.type === 'string'"
              v-model="config.value"
              class="mos-input w-full"
            />
            <input
              v-else-if="config.type === 'number'"
              v-model.number="config.value"
              type="number"
              class="mos-input w-full"
            />
            <select
              v-else-if="config.type === 'boolean'"
              v-model="config.value"
              class="mos-input w-full"
            >
              <option :value="true">启用</option>
              <option :value="false">禁用</option>
            </select>
          </div>
        </div>
      </div>
      <div class="mt-6 flex justify-end">
        <button class="mos-btn mos-btn-accent" @click="saveParams">保存配置</button>
      </div>
    </div>

    <!-- 缓存管理 -->
    <div v-if="activeTab === 'cache'" class="mos-card p-5">
      <div class="space-y-4">
        <div class="flex items-center justify-between py-3 border-b border-mosquito-line">
          <div>
            <div class="font-semibold">活动数据缓存</div>
            <div class="text-xs text-mosquito-ink/70">缓存活动列表和统计数据</div>
          </div>
          <div class="flex gap-2">
            <button class="mos-btn mos-btn-secondary" @click="clearCache('activity')">清除缓存</button>
          </div>
        </div>
        <div class="flex items-center justify-between py-3 border-b border-mosquito-line">
          <div>
            <div class="font-semibold">用户数据缓存</div>
            <div class="text-xs text-mosquito-ink/70">缓存用户信息和权限数据</div>
          </div>
          <div class="flex gap-2">
            <button class="mos-btn mos-btn-secondary" @click="clearCache('user')">清除缓存</button>
          </div>
        </div>
        <div class="flex items-center justify-between py-3 border-b border-mosquito-line">
          <div>
            <div class="font-semibold">奖励数据缓存</div>
            <div class="text-xs text-mosquito-ink/70">缓存奖励配置和发放记录</div>
          </div>
          <div class="flex gap-2">
            <button class="mos-btn mos-btn-secondary" @click="clearCache('reward')">清除缓存</button>
          </div>
        </div>
        <div class="flex items-center justify-between py-3">
          <div>
            <div class="font-semibold">全部缓存</div>
            <div class="text-xs text-mosquito-ink/70">清除所有系统缓存</div>
          </div>
          <div class="flex gap-2">
            <button class="mos-btn mos-btn-danger" @click="clearCache('all')">清除全部缓存</button>
          </div>
        </div>
      </div>
    </div>

    <!-- API密钥 -->
    <div v-if="activeTab === 'apiKey'" class="mos-card p-5">
      <div class="flex justify-between items-center mb-4">
        <div class="font-semibold">API密钥管理</div>
        <button class="mos-btn mos-btn-accent" @click="createApiKey">创建新密钥</button>
      </div>
      <table class="w-full">
        <thead>
          <tr class="text-left text-xs text-mosquito-ink/70 border-b border-mosquito-line">
            <th class="pb-2">名称</th>
            <th class="pb-2">密钥</th>
            <th class="pb-2">状态</th>
            <th class="pb-2">创建时间</th>
            <th class="pb-2">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="key in apiKeys" :key="key.id" class="border-b border-mosquito-line">
            <td class="py-3">{{ key.name }}</td>
            <td class="py-3 font-mono text-sm">{{ showKeyId === key.id ? key.key : '••••••••••••••••' }}</td>
            <td class="py-3">
              <span :class="key.status === 1 ? 'text-green-600' : 'text-red-600'">
                {{ key.status === 1 ? '启用' : '禁用' }}
              </span>
            </td>
            <td class="py-3 text-sm">{{ key.createdAt }}</td>
            <td class="py-3">
              <button class="mos-btn mos-btn-secondary !py-1 !px-2 !text-xs" @click="toggleShowKey(key.id)">
                {{ showKeyId === key.id ? '隐藏' : '显示' }}
              </button>
              <button class="mos-btn mos-btn-danger !py-1 !px-2 !text-xs ml-2" @click="deleteApiKey(key.id)">
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <div v-if="!apiKeys.length" class="py-8 text-center text-mosquito-ink/60">
        暂无API密钥
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('params')
const showKeyId = ref<number | null>(null)

const tabs = [
  { key: 'params', label: '系统参数' },
  { key: 'cache', label: '缓存管理' },
  { key: 'apiKey', label: 'API密钥' }
]

const systemParams = ref([
  { key: 'reward.max.points', label: '单次奖励上限', description: '单次奖励发放的最大积分值', value: 10000, type: 'number' },
  { key: 'activity.max.count', label: '最大活动数', description: '系统允许创建的最大活动数量', value: 100, type: 'number' },
  { key: 'risk.callback.threshold', label: '回调失败阈值', description: '触发告警的回调失败率(%)', value: 5, type: 'number' },
  { key: 'approval.auto.timeout', label: '审批超时时间', description: '审批自动通过的超时时间(小时)', value: 24, type: 'number' },
  { key: 'user.invite.expire', label: '邀请链接有效期', description: '邀请链接有效天数', value: 7, type: 'number' },
  { key: 'reward.batch.size', label: '批量发放大小', description: '奖励批量发放的每批数量', value: 200, type: 'number' }
])

const apiKeys = ref([
  { id: 1, name: '生产环境密钥', key: 'mk_prod_xxxxxxxxxxxxx', status: 1, createdAt: '2026-01-15' },
  { id: 2, name: '测试环境密钥', key: 'mk_test_xxxxxxxxxxxxx', status: 1, createdAt: '2026-02-01' }
])

const saveParams = () => {
  alert('配置保存成功（演示）')
}

const clearCache = (type: string) => {
  if (confirm(`确定要清除${type === 'all' ? '全部' : type}缓存吗？`)) {
    alert('缓存清除成功（演示）')
  }
}

const createApiKey = () => {
  const name = prompt('请输入密钥名称:')
  if (name) {
    alert('API密钥创建成功（演示）')
  }
}

const toggleShowKey = (id: number) => {
  showKeyId.value = showKeyId.value === id ? null : id
}

const deleteApiKey = (id: number) => {
  if (confirm('确定要删除这个API密钥吗？')) {
    alert('API密钥删除成功（演示）')
  }
}
</script>
