<script setup lang="ts">
import { useApiKeyStore, MAX_KEYS_PER_USER } from '@/stores/api-key'
import { useUserStore } from '@/stores/user'
import {
  PlusOutlined,
  CopyOutlined,
  DeleteOutlined,
} from '@ant-design/icons-vue'
import type { ApiKeyRecord } from '@/types/api'
import dayjs from 'dayjs'

const apiKeyStore = useApiKeyStore()
const userStore = useUserStore()

const apiKeyEnabled = computed(() => userStore.user?.api_key_enabled ?? false)
const hasKeys = computed(() => apiKeyStore.keys.length > 0)

// Create modal
const createModalOpen = ref(false)
const createLoading = ref(false)
const createForm = reactive({
  name: '',
  expires_at: undefined as string | undefined,
})

// Plain key modal
const plainKeyModalOpen = ref(false)
const plainKey = ref('')

function isExpired(record: ApiKeyRecord): boolean {
  return !!record.expires_at && dayjs(record.expires_at).isBefore(dayjs())
}

function formatTime(time: string | null): string {
  if (!time) return '-'
  return time.replace('T', ' ').substring(0, 19)
}

const columns = [
  { title: '名称', dataIndex: 'name', width: 150 },
  { title: '前缀', dataIndex: 'key_prefix', width: 120 },
  { title: '创建时间', dataIndex: 'created_at', width: 170 },
  { title: '过期时间', key: 'expires_at', width: 170 },
  { title: '最后使用', dataIndex: 'last_used_at', width: 170 },
  { title: '状态', key: 'enabled', width: 100 },
  { title: '操作', key: 'action', width: 80 },
]

const readonlyColumns = columns.filter((c) => c.key !== 'enabled' && c.key !== 'action')

function showCreateModal() {
  createForm.name = ''
  createForm.expires_at = undefined
  createModalOpen.value = true
}

async function handleCreate() {
  if (!createForm.name.trim()) {
    message.warning('请输入 API Key 名称')
    return
  }
  createLoading.value = true
  try {
    const result = await apiKeyStore.createKey({
      name: createForm.name.trim(),
      expires_at: createForm.expires_at || undefined,
    })
    if (result) {
      createModalOpen.value = false
      plainKey.value = result.plain_key
      plainKeyModalOpen.value = true
    }
  } finally {
    createLoading.value = false
  }
}

async function handleToggle(record: ApiKeyRecord, checked: boolean) {
  await apiKeyStore.toggleKey(record.id, checked)
}

async function handleDelete(record: ApiKeyRecord) {
  await apiKeyStore.deleteKey(record.id)
}

function handleCopyKey() {
  navigator.clipboard.writeText(plainKey.value).then(
    () => message.success('已复制'),
    () => message.error('复制失败，请手动复制'),
  )
}

function handlePlainKeyModalClose() {
  plainKey.value = ''
  plainKeyModalOpen.value = false
}

onMounted(() => {
  apiKeyStore.fetchMyKeys()
})

onBeforeUnmount(() => {
  plainKey.value = ''
})
</script>

<template>
  <!-- Mode 3: api_key_enabled=false 且无 Key -->
  <a-empty
    v-if="!apiKeyEnabled && !hasKeys"
    description="API Key 功能未启用，请联系管理员开启"
  />

  <!-- Mode 4: api_key_enabled=false 且有 Key — 警告 + 只读表格 -->
  <div v-else-if="!apiKeyEnabled && hasKeys">
    <a-alert
      type="warning"
      show-icon
      class="mb-4"
      message="API Key 功能已被管理员关闭。您的所有 API Key 当前无法用于认证。已有 Key 不会被删除，功能重新开启后将自动恢复。如需开启，请联系管理员。"
    />
    <a-table
      :columns="readonlyColumns"
      :data-source="apiKeyStore.keys"
      :loading="apiKeyStore.loading"
      :pagination="false"
      row-key="id"
      :row-class-name="(record: ApiKeyRecord) => isExpired(record as ApiKeyRecord) ? 'expired-row' : ''"
      size="small"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'expires_at'">
          <span v-if="!record.expires_at">永不过期</span>
          <span v-else>
            <span :class="{ 'text-red-500': isExpired(record as ApiKeyRecord) }">
              {{ formatTime(record.expires_at) }}
            </span>
            <a-tag v-if="isExpired(record as ApiKeyRecord)" color="red" class="ml-1">已过期</a-tag>
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'key_prefix'">
          {{ record.key_prefix }}****
        </template>
        <template v-else-if="column.dataIndex === 'created_at'">
          {{ formatTime(record.created_at) }}
        </template>
        <template v-else-if="column.dataIndex === 'last_used_at'">
          {{ record.last_used_at ? formatTime(record.last_used_at) : '从未使用' }}
        </template>
      </template>
    </a-table>
  </div>

  <!-- Mode 2: api_key_enabled=true 且无 Key — 引导空状态 -->
  <div v-else-if="apiKeyEnabled && !hasKeys && !apiKeyStore.loading">
    <a-empty description="还没有 API Key">
      <a-button type="primary" @click="showCreateModal">
        <template #icon><PlusOutlined /></template>
        生成第一个 API Key
      </a-button>
    </a-empty>
  </div>

  <!-- Mode 1: api_key_enabled=true 且有 Key — 完整面板 -->
  <div v-else-if="apiKeyEnabled">
    <div class="flex justify-between items-center mb-3">
      <a-tag>{{ apiKeyStore.keyCount }}/{{ MAX_KEYS_PER_USER }}</a-tag>
      <a-tooltip
        v-if="!apiKeyStore.canCreate"
        title="已达上限，请删除不需要的 Key 后再生成"
      >
        <a-button type="primary" disabled>
          <template #icon><PlusOutlined /></template>
          生成 API Key
        </a-button>
      </a-tooltip>
      <a-button
        v-else
        type="primary"
        @click="showCreateModal"
      >
        <template #icon><PlusOutlined /></template>
        生成 API Key
      </a-button>
    </div>

    <a-table
      :columns="columns"
      :data-source="apiKeyStore.keys"
      :loading="apiKeyStore.loading"
      :pagination="false"
      row-key="id"
      :row-class-name="(record: ApiKeyRecord) => isExpired(record as ApiKeyRecord) ? 'expired-row' : ''"
      size="small"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'key_prefix'">
          {{ record.key_prefix }}****
        </template>
        <template v-else-if="column.dataIndex === 'created_at'">
          {{ formatTime(record.created_at) }}
        </template>
        <template v-else-if="column.key === 'expires_at'">
          <span v-if="!record.expires_at">永不过期</span>
          <span v-else>
            <span :class="{ 'text-red-500': isExpired(record as ApiKeyRecord) }">
              {{ formatTime(record.expires_at) }}
            </span>
            <a-tag v-if="isExpired(record as ApiKeyRecord)" color="red" class="ml-1">已过期</a-tag>
          </span>
        </template>
        <template v-else-if="column.dataIndex === 'last_used_at'">
          {{ record.last_used_at ? formatTime(record.last_used_at) : '从未使用' }}
        </template>
        <template v-else-if="column.key === 'enabled'">
          <a-switch
            :checked="record.enabled"
            :disabled="isExpired(record as ApiKeyRecord)"
            size="small"
            @change="(checked: boolean | string | number) => handleToggle(record as ApiKeyRecord, !!checked)"
          />
        </template>
        <template v-else-if="column.key === 'action'">
          <a-popconfirm
            title="确定要删除此 API Key 吗？"
            @confirm="handleDelete(record as ApiKeyRecord)"
          >
            <a-button type="link" size="small" danger>
              <template #icon><DeleteOutlined /></template>
            </a-button>
          </a-popconfirm>
        </template>
      </template>
    </a-table>
  </div>

  <!-- Loading state -->
  <a-spin v-if="apiKeyStore.loading && !hasKeys && apiKeyEnabled" class="mt-4" />

  <!-- Create Modal -->
  <a-modal
    v-model:open="createModalOpen"
    title="生成 API Key"
    :confirm-loading="createLoading"
    @ok="handleCreate"
  >
    <a-form layout="vertical">
      <a-form-item label="名称" required>
        <a-input
          v-model:value="createForm.name"
          placeholder="例如：数据同步脚本、监控系统"
          :maxlength="100"
          @press-enter="handleCreate"
        />
      </a-form-item>
      <a-form-item label="过期时间">
        <a-date-picker
          v-model:value="createForm.expires_at"
          value-format="YYYY-MM-DD HH:mm:ss"
          show-time
          placeholder="留空表示永不过期"
          style="width: 100%"
        />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- Plain Key Modal -->
  <a-modal
    :open="plainKeyModalOpen"
    title="API Key 已生成"
    :footer="null"
    :mask-closable="false"
    @cancel="handlePlainKeyModalClose"
  >
    <a-alert
      type="warning"
      show-icon
      class="mb-4"
      message="此密钥仅显示一次，关闭后无法再次查看。请妥善保存。"
    />
    <div class="bg-gray-100 p-3 rounded font-mono text-sm break-all select-all mb-3">
      {{ plainKey }}
    </div>
    <a-button type="primary" block @click="handleCopyKey">
      <template #icon><CopyOutlined /></template>
      复制 API Key
    </a-button>
  </a-modal>
</template>

<style scoped>
:deep(.expired-row) {
  opacity: 0.5;
}
</style>
