<template>
  <v-container fluid class="pa-6">
    <v-card elevation="0" border rounded="lg">
      <v-card-title class="d-flex align-center">
        审计日志
        <v-spacer />
        <v-select
          v-model="actionFilter"
          :items="actionOptions"
          item-title="label"
          item-value="value"
          label="操作类型"
          variant="outlined"
          density="compact"
          hide-details
          style="max-width: 200px"
          clearable
          @update:model-value="page = 1; loadAudit()"
        />
        <v-text-field
          v-model="userFilter"
          prepend-inner-icon="mdi-account"
          label="用户"
          variant="outlined"
          density="compact"
          hide-details
          style="max-width: 140px"
          class="ml-3"
          clearable
          @update:model-value="page = 1; loadAudit()"
        />
        <v-text-field
          v-model="dateFilter"
          prepend-inner-icon="mdi-calendar"
          label="日期"
          variant="outlined"
          density="compact"
          hide-details
          style="max-width: 160px"
          class="ml-3"
          type="date"
          clearable
          @update:model-value="page = 1; loadAudit()"
        />
      </v-card-title>

      <v-data-table-server
        :items="logs"
        :headers="headers"
        :items-length="total"
        :loading="loading"
        :page="page"
        :items-per-page="50"
        hover
        density="compact"
        @update:page="page = $event; loadAudit()"
      >
        <template #item.action="{ item }">
          <v-chip :color="actionColor(item.action)" size="small" variant="tonal" label>
            {{ auditActionLabel(item.action) }}
          </v-chip>
        </template>

        <template #item.admin_username="{ item }">
          <span class="font-weight-medium">{{ item.admin_username }}</span>
        </template>

        <template #item.target="{ item }">
          <span class="text-body-2">
            {{ auditTargetLabel(item.resource_type) }}{{ item.resource_id ? ` #${item.resource_id}` : '' }}
          </span>
        </template>

        <template #item.detail="{ item }">
          <span class="text-body-2 text-medium-emphasis text-truncate" style="max-width: 300px; display: inline-block;">
            {{ item.detail || '—' }}
          </span>
        </template>

        <template #item.ip_address="{ item }">
          <span class="text-caption text-medium-emphasis">{{ item.ip_address || '—' }}</span>
        </template>

        <template #item.created_at="{ item }">
          <span class="text-caption text-medium-emphasis">{{ item.created_at }}</span>
        </template>
        <template #no-data>
          <div class="text-center text-medium-emphasis py-6">暂无数据</div>
        </template>
      </v-data-table-server>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { http } from '@/api'
import { useSnackbar } from '@/composables/useSnackbar'
import type { PaginatedResponse, AuditItem } from '@/types/api'
import { auditActionLabel, auditTargetLabel, auditActionFilterOptions } from '@/utils/auditLabels'
import { normalizeAuditList } from '@/utils/auditNormalize'

const snackbar = useSnackbar()

// ── State ──
const loading = ref(false)
const logs = ref<AuditItem[]>([])
const total = ref(0)
const page = ref(1)
const actionFilter = ref<string | null>(null)
const userFilter = ref('')
const dateFilter = ref('')

const actionOptions = auditActionFilterOptions

const headers = [
  { title: '操作', key: 'action', width: 100 },
  { title: '用户', key: 'admin_username', width: 100 },
  { title: '目标', key: 'target', width: 140 },
  { title: '详情', key: 'detail' },
  { title: 'IP', key: 'ip_address', width: 120 },
  { title: '时间', key: 'created_at', width: 160 },
]

// ── Data loading ──
async function loadAudit() {
  loading.value = true
  try {
    const limit = 50
    const offset = (page.value - 1) * limit
    const res = await http.get<PaginatedResponse<unknown>>('/audit/', {
      limit,
      offset,
      action: actionFilter.value || undefined,
      admin_username: userFilter.value || undefined,
      date_from: dateFilter.value || undefined,
    })
    logs.value = normalizeAuditList(res.items || [])
    total.value = res.total || 0
  } catch { logs.value = []; snackbar('加载审计日志失败', 'error') }
  finally { loading.value = false }
}

// ── Helpers ──
function actionColor(a: string) {
  if (a.startsWith('create') || a === 'login') return 'success'
  if (a.startsWith('update')) return 'info'
  if (a.startsWith('delete') || a === 'logout') return 'error'
  if (a.includes('execute') || a.includes('push') || a.includes('retry')) return 'warning'
  return 'primary'
}

onMounted(() => loadAudit())
</script>
