<template>
  <div class="page-content">
    <div class="mb-5 flex items-center justify-between gap-4">
      <div>
        <h2 class="text-xl font-semibold">环境变量</h2>
        <p class="text-g-500 mt-1 text-sm">个人配置参数(加密存储),对话/应用运行时自动补充到请求变量</p>
      </div>
      <ElButton type="primary" @click="openAdd">添加变量</ElButton>
    </div>
    <ElTable v-loading="loading" :data="vars" row-key="key">
      <ElTableColumn prop="key" label="变量名" min-width="200" />
      <ElTableColumn label="状态" width="100">
        <template #default="{ row }">
          <ElTag :type="row.configured ? 'success' : 'info'">{{ row.configured ? '已配置' : '空' }}</ElTag>
        </template>
      </ElTableColumn>
      <ElTableColumn prop="updated_at" label="更新时间" width="190" />
      <ElTableColumn label="操作" width="140" fixed="right">
        <template #default="{ row }">
          <ElButton link type="primary" @click="openEdit(row)">修改</ElButton>
          <ElButton link type="danger" @click="remove(row)">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>

    <ElDialog v-model="dialogVisible" :title="editingKey ? '修改变量' : '添加变量'" width="520px">
      <ElForm label-width="90px">
        <ElFormItem label="变量名" required>
          <ElInput v-model="formKey" :disabled="!!editingKey" placeholder="如 COMPANY_NAME" />
        </ElFormItem>
        <ElFormItem label="变量值" required>
          <ElInput v-model="formValue" type="textarea" :rows="3" placeholder="值加密存储,仅你自己可见" />
        </ElFormItem>
      </ElForm>
      <template #footer>
        <ElButton @click="dialogVisible = false">取消</ElButton>
        <ElButton type="primary" :loading="saving" @click="submit">保存</ElButton>
      </template>
    </ElDialog>
  </div>
</template>

<script setup lang="ts">
  import { ElMessage, ElMessageBox } from 'element-plus'
  import request from '@/utils/http'

  interface EnvVar {
    key: string
    configured: boolean
    updated_at: string
  }

  const vars = ref<EnvVar[]>([])
  const loading = ref(false)
  const saving = ref(false)
  const dialogVisible = ref(false)
  const editingKey = ref('')
  const formKey = ref('')
  const formValue = ref('')

  async function load() {
    loading.value = true
    try {
      vars.value = await request.get<EnvVar[]>({ url: '/api/v1/portal/env-vars' })
    } finally {
      loading.value = false
    }
  }

  function openAdd() {
    editingKey.value = ''
    formKey.value = ''
    formValue.value = ''
    dialogVisible.value = true
  }

  function openEdit(row: EnvVar) {
    editingKey.value = row.key
    formKey.value = row.key
    formValue.value = ''
    dialogVisible.value = true
  }

  async function submit() {
    if (!formKey.value.trim()) {
      ElMessage.warning('请输入变量名')
      return
    }
    saving.value = true
    try {
      await request.put({ url: `/api/v1/portal/env-vars/${encodeURIComponent(formKey.value.trim())}`, params: { value: formValue.value } })
      ElMessage.success('已保存')
      dialogVisible.value = false
      await load()
    } finally {
      saving.value = false
    }
  }

  async function remove(row: EnvVar) {
    try {
      await ElMessageBox.confirm(`确认删除变量「${row.key}」？`, '删除变量', { type: 'warning' })
    } catch {
      return
    }
    try {
      await request.del({ url: `/api/v1/portal/env-vars/${encodeURIComponent(row.key)}` })
      ElMessage.success('已删除')
      await load()
    } catch { /* 全局错误提示 */ }
  }

  onMounted(load)
</script>
