<template>
  <section class="logs-view">
    <div v-if="!isAdmin" class="logs-empty panel">
      <h2>系统日志仅管理员可用</h2>
      <p>当前账号没有查看系统运行日志的权限。</p>
    </div>

    <template v-else>
      <EnterpriseListPage
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        class="system-logs-list"
        :loading="systemLogLoading && !visibleSystemLogEntries.length"
        :empty="!systemLogLoading && !visibleSystemLogEntries.length"
        :total="totalCount"
        :total-pages="totalPages"
        :page-size-options="pageSizeOptions"
        :summary="`共 ${totalCount} 条系统日志，当前第 ${currentPage} / ${totalPages} 页`"
        :show-pagination="!systemLogLoading && filteredSystemLogEntries.length > 0"
        loading-title="系统日志同步中"
        loading-message="正在加载系统运行日志记录"
        loading-icon="mdi mdi-text-box-search-outline"
        @page-size-change="changePageSize"
      >
        <template #filters>
          <div class="list-search">
            <i class="mdi mdi-magnify"></i>
            <input
              v-model.trim="systemSearchKeyword"
              type="search"
              placeholder="搜索摘要、模块、请求路径或 Request ID"
            />
          </div>

          <div class="document-filter status-dropdown-filter" :class="{ open: openFilterKey === 'level' }">
            <button
              class="filter-btn status-filter-trigger"
              type="button"
              :aria-expanded="openFilterKey === 'level'"
              @click="toggleFilter('level')"
            >
              <i class="mdi mdi-filter-variant"></i>
              <span>{{ systemLevelFilterLabel }}</span>
              <i class="mdi mdi-chevron-down"></i>
            </button>
            <div
              v-if="openFilterKey === 'level'"
              class="document-filter-menu status-filter-menu"
              role="listbox"
              aria-label="日志级别"
            >
              <button
                v-for="option in systemLevelFilterOptions"
                :key="option.value"
                type="button"
                role="option"
                :aria-selected="systemLevelFilter === option.value"
                :class="{ active: systemLevelFilter === option.value }"
                @click="selectLevelFilter(option.value)"
              >
                {{ option.label }}
              </button>
            </div>
          </div>

          <div class="document-filter" :class="{ open: openFilterKey === 'eventType' }">
            <button
              class="filter-btn"
              type="button"
              :aria-expanded="openFilterKey === 'eventType'"
              @click="toggleFilter('eventType')"
            >
              <span>{{ systemEventTypeFilterLabel }}</span>
              <i class="mdi mdi-chevron-down"></i>
            </button>
            <div
              v-if="openFilterKey === 'eventType'"
              class="document-filter-menu"
              role="listbox"
              aria-label="事件类型"
            >
              <button
                v-for="option in systemEventTypeFilterOptions"
                :key="option.value"
                type="button"
                role="option"
                :aria-selected="systemEventTypeFilter === option.value"
                :class="{ active: systemEventTypeFilter === option.value }"
                @click="selectEventTypeFilter(option.value)"
              >
                {{ option.label }}
              </button>
            </div>
          </div>
        </template>

        <template #actions>
          <button v-if="hasActiveFilters" class="create-request-btn secondary" type="button" @click="resetFilters">
            <i class="mdi mdi-filter-remove-outline"></i>
            <span>清空筛选</span>
          </button>
          <div class="document-filter refresh-interval-filter" :class="{ open: openFilterKey === 'refreshInterval' }">
            <button
              class="filter-btn refresh-interval-trigger"
              type="button"
              :aria-expanded="openFilterKey === 'refreshInterval'"
              @click="toggleFilter('refreshInterval')"
            >
              <i class="mdi mdi-clock-outline"></i>
              <span>刷新时间 {{ refreshIntervalLabel }}</span>
              <i class="mdi mdi-chevron-down"></i>
            </button>
            <div
              v-if="openFilterKey === 'refreshInterval'"
              class="document-filter-menu refresh-interval-menu"
              role="listbox"
              aria-label="刷新时间"
            >
              <button
                v-for="option in refreshIntervalOptions"
                :key="option.value"
                type="button"
                role="option"
                :aria-selected="refreshInterval === option.value"
                :class="{ active: refreshInterval === option.value }"
                @click="changeRefreshInterval(option.value)"
              >
                每 {{ option.label }}
              </button>
            </div>
          </div>
          <button
            type="button"
            class="create-request-btn icon-refresh-action"
            :disabled="systemLogLoading"
            aria-label="立即刷新系统日志"
            @click="loadSystemLogs(true)"
          >
            <i :class="systemLogLoading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'"></i>
          </button>
        </template>

        <template #hint>
          <i class="mdi mdi-information-outline"></i>
          点击任意行可查看系统日志详情
        </template>

        <template #empty>
          <div class="inline-empty">
            当前筛选条件下没有系统日志记录。
          </div>
        </template>

        <template #table>
          <table class="system-log-table">
            <colgroup>
              <col class="col-time">
              <col class="col-level">
              <col class="col-event">
              <col class="col-module">
              <col class="col-outcome">
              <col class="col-summary">
              <col class="col-request">
            </colgroup>
            <thead>
              <tr>
                <th>时间</th>
                <th>级别</th>
                <th>事件类型</th>
                <th>模块</th>
                <th>结果</th>
                <th>摘要</th>
                <th>Request ID</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="entry in visibleSystemLogEntries"
                :key="entry.id"
                @click="selectSystemLog(entry.id)"
              >
                <td>{{ formatDateTime(entry.timestamp) }}</td>
                <td>
                  <span class="level-pill" :class="resolveSystemLevelTone(entry.level)">
                    {{ entry.level }}
                  </span>
                </td>
                <td>{{ entry.event_type }}</td>
                <td>{{ entry.logger || '未标记' }}</td>
                <td>
                  <span class="status-pill" :class="resolveSystemOutcomeTone(entry.outcome)">
                    {{ entry.outcome }}
                  </span>
                </td>
                <td class="summary-cell">
                  <strong>{{ entry.summary || entry.message }}</strong>
                  <span>{{ formatSummary(entry.message) }}</span>
                </td>
                <td class="trace-cell">{{ entry.request_id || '-' }}</td>
              </tr>
            </tbody>
          </table>
        </template>
      </EnterpriseListPage>
    </template>
  </section>
</template>

<script>
import viewModel from './scripts/LogsView.js'

export default viewModel
</script>
<style scoped src="../assets/styles/components/document-list-shared.css"></style>
<style scoped src="../assets/styles/views/logs-view.css"></style>
