<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/api/client'
import PageHeader from '@/components/PageHeader.vue'
import AppCard from '@/components/AppCard.vue'

const { t } = useI18n()

const items = ref<any[]>([])
const auditItems = ref<any[]>([])
const total = ref(0)
const loading = ref(false)
const level = ref('')
const keyword = ref('')
const page = ref(1)
const pageSize = ref(50)
const auditPage = ref(1)
const auditPageSize = ref(50)
const auditTotal = ref(0)
const activeTab = ref('runtime')

function resetAndLoad() {
  page.value = 1
  load()
}

async function load() {
  loading.value = true
  try {
    if (activeTab.value === 'audit') {
      const { data } = await api.get('/audit-logs', {
        params: {
          limit: auditPageSize.value,
          offset: (auditPage.value - 1) * auditPageSize.value,
        },
      })
      auditItems.value = data.items || []
      auditTotal.value = data.total || 0
      return
    }
    const { data } = await api.get('/logs', {
      params: {
        level: level.value,
        keyword: keyword.value,
        limit: pageSize.value,
        offset: (page.value - 1) * pageSize.value,
      },
    })
    items.value = data.items || []
    total.value = data.total || 0
  } finally {
    loading.value = false
  }
}

function onTabChange() {
  page.value = 1
  auditPage.value = 1
  load()
}

onMounted(load)
</script>

<template>
  <div class="page">
    <PageHeader :title="t('logs.title')" :description="t('logs.desc')">
      <template #actions>
        <el-button @click="load">{{ t('common.refresh') }}</el-button>
      </template>
    </PageHeader>

    <AppCard>
      <div class="tabs-bar">
        <el-tabs v-model="activeTab" @tab-change="onTabChange">
          <el-tab-pane :label="t('logs.runtime')" name="runtime" />
          <el-tab-pane :label="t('logs.audit')" name="audit" />
        </el-tabs>
      </div>
      <div v-if="activeTab === 'runtime'" class="card-toolbar">
        <el-select v-model="level" :placeholder="t('common.level')" clearable class="toolbar-select" @change="resetAndLoad">
          <el-option label="info" value="info" />
          <el-option label="warn" value="warn" />
          <el-option label="error" value="error" />
        </el-select>
        <el-input v-model="keyword" :placeholder="t('logs.searchPlaceholder')" clearable class="toolbar-input" @keyup.enter="resetAndLoad" />
        <el-button type="primary" @click="resetAndLoad">{{ t('common.search') }}</el-button>
      </div>
      <el-table v-if="activeTab === 'runtime'" :data="items" v-loading="loading" size="small" class="table-scroll--lg">
        <el-table-column prop="created_at" :label="t('common.time')" width="168" />
        <el-table-column prop="level" :label="t('common.level')" width="80" />
        <el-table-column prop="source" :label="t('common.source')" width="100" />
        <el-table-column prop="message" :label="t('common.message')" min-width="300" show-overflow-tooltip />
      </el-table>
      <div v-if="activeTab === 'runtime'" class="card-pager">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          :page-sizes="[50, 100, 200, 500]"
          :total="total"
          layout="total, sizes, prev, pager, next"
          @current-change="load"
          @size-change="resetAndLoad"
        />
      </div>
      <el-table v-else :data="auditItems" v-loading="loading" size="small" class="table-scroll--lg">
        <el-table-column prop="created_at" :label="t('common.time')" width="168" />
        <el-table-column prop="action" :label="t('logs.action')" width="100" />
        <el-table-column prop="resource" :label="t('logs.resource')" width="120" />
        <el-table-column prop="detail" :label="t('logs.detail')" min-width="200" show-overflow-tooltip />
      </el-table>
      <div v-if="activeTab === 'audit'" class="card-pager">
        <el-pagination
          v-model:current-page="auditPage"
          v-model:page-size="auditPageSize"
          :page-sizes="[50, 100, 200, 500]"
          :total="auditTotal"
          layout="total, sizes, prev, pager, next"
          @current-change="load"
          @size-change="() => { auditPage = 1; load() }"
        />
      </div>
    </AppCard>
  </div>
</template>
