<template>
  <div style="max-width: 1400px; margin: 0 auto;">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
      <h2 style="margin: 0;">API Key 管理</h2>
      <el-button type="primary" @click="openCreate">录入 API Key</el-button>
    </div>

    <!-- Filters -->
    <div style="margin-bottom: 16px; display: flex; gap: 12px; align-items: center;">
      <el-select v-model="filterUser" placeholder="按子账号筛选" clearable filterable
                 style="width: 200px;" @change="loadKeys">
        <el-option v-for="u in users" :key="u.id" :label="u.display_name || u.username"
                   :value="u.id" />
      </el-select>
      <el-select v-model="filterProject" placeholder="按项目筛选" clearable filterable
                 style="width: 200px;" @change="loadKeys">
        <el-option v-for="p in allProjects" :key="p" :label="p" :value="p" />
      </el-select>
      <el-button @click="loadKeys" text><el-icon><Refresh /></el-icon></el-button>
    </div>

    <!-- Keys table -->
    <el-table :data="keys" stripe v-loading="loading" style="width: 100%;"
              empty-text="暂无 API Key">
      <el-table-column label="子账号" min-width="120">
        <template #default="{ row }">
          {{ row.iam_display_name || row.iam_username }}
        </template>
      </el-table-column>
      <el-table-column prop="project_name" label="所属项目" min-width="150" />
      <el-table-column prop="key_name" label="名称/用途" min-width="160" />
      <el-table-column label="API Key" min-width="200">
        <template #default="{ row }">
          <code style="color: #999;">{{ row.api_key_hint }}</code>
          <el-button size="small" text type="primary" @click="handleReveal(row)"
                     style="margin-left: 4px;">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="90">
        <template #default="{ row }">
          <el-tag :type="row.status === 'active' ? 'success' : 'danger'" size="small">
            {{ row.status === 'active' ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip />
      <el-table-column label="录入时间" min-width="160">
        <template #default="{ row }">
          {{ new Date(row.created_at).toLocaleString('zh-CN') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="180">
        <template #default="{ row }">
          <el-button v-if="row.status === 'active'" size="small" text type="warning"
                     @click="handleToggle(row, 'disabled')">停用</el-button>
          <el-button v-else size="small" text type="success"
                     @click="handleToggle(row, 'active')">启用</el-button>
          <el-button size="small" text type="danger"
                     @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Create (manual entry) dialog -->
    <el-dialog v-model="showCreate" title="录入 API Key" width="90%" style="max-width: 600px;">
      <el-alert type="info" :closable="false" show-icon style="margin-bottom: 16px;">
        请先在火山控制台创建 API Key，然后将完整 Key 粘贴到下方录入。
      </el-alert>
      <el-form label-width="100px">
        <el-form-item label="子账号" required>
          <el-select v-model="createForm.iam_user_id" placeholder="选择子账号" filterable style="width: 100%;">
            <el-option v-for="u in users" :key="u.id"
                       :label="`${u.username} (${u.display_name || '-'})`" :value="u.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目" required>
          <el-select v-model="createForm.project_name" placeholder="选择项目" filterable style="width: 100%;">
            <el-option v-for="p in volcProjects" :key="p.name"
                       :label="p.display_name || p.name" :value="p.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="名称/用途" required>
          <el-input v-model="createForm.key_name" placeholder="如：zyc-seedance-production" />
        </el-form-item>
        <el-form-item label="API Key" required>
          <el-input v-model="createForm.api_key" type="textarea" :rows="2"
                    placeholder="粘贴完整的 API Key" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="createForm.remark" placeholder="选填" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreate = false">取消</el-button>
        <el-button type="primary" @click="handleCreate" :loading="creating">录入</el-button>
      </template>
    </el-dialog>

    <!-- Reveal key dialog -->
    <el-dialog v-model="showReveal" title="查看 API Key" width="90%" style="max-width: 600px;">
      <div style="margin-bottom: 8px; color: #606266;">
        <strong>{{ revealData.key_name }}</strong> · {{ revealData.project_name }}
      </div>
      <div style="background: #f5f7fa; padding: 16px; border-radius: 8px; word-break: break-all;">
        <code style="font-size: 14px; color: #409eff;">{{ revealData.api_key }}</code>
      </div>
      <template #footer>
        <el-button type="primary" @click="copyRevealKey">复制</el-button>
        <el-button @click="showReveal = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '../../api'

const keys = ref([])
const loading = ref(false)
const users = ref([])
const volcProjects = ref([])

const filterUser = ref('')
const filterProject = ref('')

const allProjects = computed(() => {
  const set = new Set(keys.value.map(k => k.project_name))
  return [...set].sort()
})

const showCreate = ref(false)
const createForm = ref({ iam_user_id: '', project_name: '', key_name: '', api_key: '', remark: '' })
const creating = ref(false)

const showReveal = ref(false)
const revealData = ref({ api_key: '', key_name: '', project_name: '' })

async function loadKeys() {
  loading.value = true
  try {
    const params = {}
    if (filterUser.value) params.iam_user_id = filterUser.value
    if (filterProject.value) params.project_name = filterProject.value
    const { data } = await api.get('/api/v1/ark-keys/', { params })
    keys.value = data
  } catch (e) {
    keys.value = []
  } finally {
    loading.value = false
  }
}

async function loadUsers() {
  try {
    const { data } = await api.get('/api/v1/iam-users/')
    users.value = data
  } catch { users.value = [] }
}

async function loadVolcProjects() {
  try {
    const { data } = await api.get('/api/v1/projects/')
    volcProjects.value = data
  } catch { volcProjects.value = [] }
}

function openCreate() {
  createForm.value = { iam_user_id: '', project_name: '', key_name: '', api_key: '', remark: '' }
  showCreate.value = true
  loadVolcProjects()
}

async function handleCreate() {
  const f = createForm.value
  if (!f.iam_user_id || !f.project_name || !f.key_name || !f.api_key) {
    ElMessage.warning('请填写完整')
    return
  }
  creating.value = true
  try {
    const { data } = await api.post('/api/v1/ark-keys/create/', f)
    ElMessage.success(data.message)
    showCreate.value = false
    await loadKeys()
  } catch (e) {
    ElMessage.error(e.response?.data?.message || '录入失败')
  } finally {
    creating.value = false
  }
}

async function handleReveal(row) {
  try {
    const { data } = await api.get(`/api/v1/ark-keys/${row.id}/reveal/`)
    revealData.value = data
    showReveal.value = true
  } catch (e) {
    ElMessage.error('获取 Key 失败')
  }
}

async function copyRevealKey() {
  try {
    await navigator.clipboard.writeText(revealData.value.api_key)
    ElMessage.success('已复制')
  } catch {
    ElMessage.error('复制失败，请手动复制')
  }
}

async function handleToggle(row, newStatus) {
  const action = newStatus === 'active' ? '启用' : '停用'
  try {
    await api.put(`/api/v1/ark-keys/${row.id}/`, { status: newStatus })
    ElMessage.success(`已${action}`)
    await loadKeys()
  } catch (e) {
    ElMessage.error(`${action}失败`)
  }
}

async function handleDelete(row) {
  await ElMessageBox.confirm(`确定删除 "${row.key_name}" 吗？`, '确认删除', { type: 'error' })
  try {
    await api.delete(`/api/v1/ark-keys/${row.id}/delete/`)
    ElMessage.success('已删除')
    await loadKeys()
  } catch (e) {
    ElMessage.error('删除失败')
  }
}

onMounted(() => {
  loadKeys()
  loadUsers()
})
</script>
