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

    <template v-else>
      <article class="system-logs-list panel">
        <div class="document-toolbar">
          <div class="filter-set">
            <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>
          </div>

          <div class="document-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>
            <button
              type="button"
              class="create-request-btn"
              :disabled="systemLogLoading"
              @click="loadSystemLogs(true)"
            >
              <i class="mdi mdi-refresh"></i>
              <span>{{ systemLogLoading ? '刷新中...' : '刷新日志' }}</span>
            </button>
          </div>
        </div>

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

        <div class="table-wrap" :class="{ 'is-empty': !systemLogLoading && !filteredSystemLogEntries.length }">
          <div v-if="systemLogLoading && !visibleSystemLogEntries.length" class="table-state">
            <TableLoadingState
              title="系统日志同步中"
              message="正在加载系统运行日志记录"
              icon="mdi mdi-text-box-search-outline"
            />
          </div>

          <table v-else-if="visibleSystemLogEntries.length" 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>

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

        <footer v-if="!systemLogLoading && filteredSystemLogEntries.length" class="list-foot">
          <span class="page-summary">共 {{ totalCount }} 条系统日志，目前第 {{ currentPage }} 页</span>
          <div class="pager" aria-label="分页">
            <button class="page-nav" type="button" :disabled="currentPage === 1" aria-label="上一页" @click="currentPage--">
              <i class="mdi mdi-chevron-left"></i>
            </button>
            <template v-for="page in visiblePageItems" :key="page === 'ellipsis' ? 'ellipsis' : page">
              <span v-if="page === 'ellipsis'" class="page-ellipsis" aria-hidden="true">...</span>
              <button
                v-else
                class="page-number"
                :class="{ active: currentPage === page }"
                type="button"
                :aria-current="currentPage === page ? 'page' : undefined"
                @click="currentPage = page"
              >
                {{ page }}
              </button>
            </template>
            <button class="page-nav" type="button" :disabled="currentPage === totalPages" aria-label="下一页" @click="currentPage++">
              <i class="mdi mdi-chevron-right"></i>
            </button>
          </div>
          <EnterpriseSelect
            v-model="pageSize"
            class="page-size-select"
            :options="pageSizeOptions"
            size="small"
            @change="changePageSize"
          />
        </footer>
      </article>
    </template>
  </section>
</template>

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

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