<template>
  <div class="records-page">

    <!-- 页头 -->
    <div class="page-header">
      <div class="page-title-group">
        <h1 class="page-title">记录查询</h1>
        <span class="page-subtitle">{{ activeTab === 'replacements' ? '设备 MAC 更换台账，支持筛选与导出' : '全量用户操作审计，支持追溯与问责' }}</span>
      </div>
      <el-button type="success" size="small" :loading="activeTab === 'replacements' ? repExporting : auditExporting" @click="handleExport">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="margin-right:5px">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
        </svg>
        导出 CSV
      </el-button>
    </div>

    <!-- Tab 切换 -->
    <div class="tab-bar">
      <button
        :class="['tab-btn', activeTab === 'replacements' && 'active']"
        @click="switchTab('replacements')"
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
          <line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="12" y2="17"/>
        </svg>
        更换台账
        <span v-if="repTotal > 0" class="tab-count">{{ repTotal }}</span>
      </button>
      <button
        :class="['tab-btn', activeTab === 'audit' && 'active']"
        @click="switchTab('audit')"
      >
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
          <polyline points="14 2 14 8 20 8"/>
          <line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
          <polyline points="10 9 9 9 8 9"/>
        </svg>
        审计日志
        <span v-if="auditTotal > 0" class="tab-count">{{ auditTotal }}</span>
      </button>
    </div>

    <!-- ── 更换台账 ── -->
    <template v-if="activeTab === 'replacements'">
      <div class="filter-bar">
        <el-select v-model="repFilters.region" placeholder="全部区域" clearable size="small" style="width:140px" @change="repLoad">
          <el-option v-for="r in regions" :key="r" :label="r" :value="r" />
        </el-select>
        <el-date-picker
          v-model="repDateRange"
          type="daterange"
          size="small"
          range-separator="—"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          style="width:240px"
          @change="repLoad"
        />
        <el-input
          v-model="repFilters.keyword"
          placeholder="学校 / MAC / 操作人"
          clearable size="small" style="width:200px"
          @input="repDebounce" @clear="repLoad"
        />
        <button class="reset-btn" @click="repReset">重置</button>
        <span class="total-hint">共 {{ repTotal }} 条</span>
      </div>

      <div class="table-wrap">
        <el-table :data="repItems" v-loading="repLoading" size="small" style="width:100%" border>
          <el-table-column type="index" label="#" width="52" align="center">
            <template #default="{ $index }">
              <span class="row-index">{{ (repPage - 1) * repPageSize + $index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更换时间" width="165">
            <template #default="{ row }">
              <span class="mono-val small">{{ fmtTime(row.replaced_at) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="region" label="区域" width="90">
            <template #default="{ row }">
              <span class="region-tag">{{ row.region || '—' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="school_name" label="学校" min-width="140" show-overflow-tooltip />
          <el-table-column label="楼宇/房间" width="130" show-overflow-tooltip>
            <template #default="{ row }">
              <span class="muted">{{ [row.building, row.room_number].filter(Boolean).join(' / ') || '—' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="旧 MAC" width="145">
            <template #default="{ row }">
              <span class="mono-val mac old-mac">{{ row.old_mac }}</span>
            </template>
          </el-table-column>
          <el-table-column label="新 MAC" width="145">
            <template #default="{ row }">
              <span class="mono-val mac new-mac">{{ row.new_mac }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更换原因" min-width="160" show-overflow-tooltip>
            <template #default="{ row }">
              <span v-if="row.reason" style="font-size:12px">{{ row.reason }}</span>
              <span v-else class="muted">—</span>
            </template>
          </el-table-column>
          <el-table-column prop="operator_name" label="操作人" width="110">
            <template #default="{ row }">
              <span style="font-size:12px">{{ row.operator_name || '—' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="repPage"
            v-model:page-size="repPageSize"
            :total="repTotal"
            :page-sizes="[50, 100, 200]"
            layout="total, sizes, prev, pager, next"
            small
            @size-change="repLoad"
            @current-change="repLoad"
          />
        </div>
      </div>
    </template>

    <!-- ── 审计日志 ── -->
    <template v-if="activeTab === 'audit'">
      <div class="filter-bar">
        <el-date-picker
          v-model="auditDateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          size="small"
          style="width:340px"
          @change="auditFilter"
        />
        <el-input v-model="auditFilters.username" placeholder="用户名" size="small" style="width:130px" clearable @change="auditFilter" />
        <el-select v-model="auditFilters.action_type" placeholder="操作类型" size="small" style="width:120px" clearable @change="auditFilter">
          <el-option v-for="t in actionTypes" :key="t.value" :label="t.label" :value="t.value" />
        </el-select>
        <el-select v-model="auditFilters.status" placeholder="状态" size="small" style="width:100px" clearable @change="auditFilter">
          <el-option label="成功" value="success" />
          <el-option label="失败" value="failed" />
          <el-option label="错误" value="error" />
        </el-select>
        <button class="reset-btn" @click="auditReset">重置</button>
        <span class="total-hint">共 {{ auditTotal }} 条</span>
      </div>

      <div class="table-wrap">
        <el-table :data="auditLogs" size="small" style="width:100%" v-loading="auditLoading" @row-click="openDetail">
          <el-table-column label="时间" width="160">
            <template #default="{ row }">
              <span class="mono-val">{{ fmtTime(row.action_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用户" width="110">
            <template #default="{ row }">
              <span>{{ row.username }}</span>
              <span class="role-tag">{{ row.user_role }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="90">
            <template #default="{ row }">
              <span :class="['type-tag', `type-${row.action_type}`]">{{ typeLabel(row.action_type) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="子类型" width="80">
            <template #default="{ row }"><span class="muted">{{ row.action_subtype || '—' }}</span></template>
          </el-table-column>
          <el-table-column label="描述" min-width="180" show-overflow-tooltip prop="description" />
          <el-table-column label="路径" min-width="200" show-overflow-tooltip>
            <template #default="{ row }">
              <span class="mono-val small">{{ row.request_method }} {{ row.request_path }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="72" align="center">
            <template #default="{ row }">
              <span :class="['status-dot', `status-${row.status}`]">{{ statusLabel(row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="IP" width="130">
            <template #default="{ row }">
              <span class="mono-val small">{{ row.ip_address || '—' }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            v-model:current-page="auditPage"
            v-model:page-size="auditPageSize"
            :total="auditTotal"
            :page-sizes="[20, 50, 100]"
            layout="total, sizes, prev, pager, next"
            small
            @change="fetchAudit"
          />
        </div>
      </div>
    </template>

    <!-- 审计详情抽屉 -->
    <el-drawer v-model="drawerVisible" title="日志详情" size="480px" direction="rtl">
      <div v-if="auditDetail" class="detail-body">
        <div class="detail-row" v-for="(v, k) in detailFields" :key="k">
          <span class="detail-label">{{ v.label }}</span>
          <span class="detail-value" :class="{ mono: v.mono }">{{ v.val }}</span>
        </div>
        <template v-if="auditDetail.request_params">
          <div class="detail-section">请求参数</div>
          <pre class="json-block">{{ JSON.stringify(auditDetail.request_params, null, 2) }}</pre>
        </template>
        <template v-if="auditDetail.error_message">
          <div class="detail-section">错误信息</div>
          <pre class="json-block error">{{ auditDetail.error_message }}</pre>
        </template>
      </div>
    </el-drawer>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from '../utils/message'
import { getAuditLogs, getAuditLogDetail, exportAuditLogs } from '../api/audit'
import request from '../utils/request'
import { fmtTime } from '../utils/datetime'

// ── 当前 Tab ──────────────────────────────────────
const activeTab = ref('replacements')

const switchTab = (tab) => {
  activeTab.value = tab
  if (tab === 'replacements' && repItems.value.length === 0) repLoad()
  if (tab === 'audit' && auditLogs.value.length === 0) fetchAudit()
}

// ── 公共 ──────────────────────────────────────────
const regions = ref([])

// ── 更换台账 ──────────────────────────────────────
const repItems = ref([])
const repTotal = ref(0)
const repPage = ref(1)
const repPageSize = ref(100)
const repLoading = ref(false)
const repExporting = ref(false)
const repDateRange = ref(null)
const repFilters = ref({ region: '', keyword: '' })

let repTimer = null
const repDebounce = () => { clearTimeout(repTimer); repTimer = setTimeout(repLoad, 400) }
const repReset = () => { repFilters.value = { region: '', keyword: '' }; repDateRange.value = null; repPage.value = 1; repLoad() }

const repParams = () => {
  const p = { skip: (repPage.value - 1) * repPageSize.value, limit: repPageSize.value }
  if (repFilters.value.region)  p.region  = repFilters.value.region
  if (repFilters.value.keyword) p.keyword = repFilters.value.keyword
  if (repDateRange.value?.[0])  p.start_date = repDateRange.value[0]
  if (repDateRange.value?.[1])  p.end_date   = repDateRange.value[1]
  return p
}

const repLoad = async () => {
  repLoading.value = true
  try {
    const { data } = await request.get('/devices/replacements', { params: repParams() })
    repItems.value = data.items
    repTotal.value = data.total
  } catch { ElMessage.error('更换台账加载失败') }
  finally { repLoading.value = false }
}

const repExport = async () => {
  repExporting.value = true
  try {
    const params = {}
    if (repFilters.value.region)  params.region     = repFilters.value.region
    if (repFilters.value.keyword) params.keyword    = repFilters.value.keyword
    if (repDateRange.value?.[0])  params.start_date = repDateRange.value[0]
    if (repDateRange.value?.[1])  params.end_date   = repDateRange.value[1]
    const { data } = await request.get('/devices/replacements/export', { params, responseType: 'blob' })
    const url = URL.createObjectURL(new Blob([data]))
    const a = document.createElement('a')
    a.href = url
    a.download = `replacement_records_${Date.now()}.csv`
    a.click()
    URL.revokeObjectURL(url)
  } catch { ElMessage.error('导出失败') }
  finally { repExporting.value = false }
}

// ── 审计日志 ──────────────────────────────────────
const auditLogs = ref([])
const auditTotal = ref(0)
const auditPage = ref(1)
const auditPageSize = ref(50)
const auditLoading = ref(false)
const auditExporting = ref(false)
const drawerVisible = ref(false)
const auditDetail = ref(null)
const auditDateRange = ref(null)
const auditFilters = ref({ username: '', action_type: '', status: '' })

const actionTypes = [
  { label: '认证', value: 'auth' },
  { label: '设备', value: 'device' },
  { label: 'OLT', value: 'olt' },
  { label: '用户', value: 'user' },
  { label: '系统', value: 'system' },
  { label: '库存', value: 'inventory' },
]
const typeLabel   = (t) => actionTypes.find(x => x.value === t)?.label || t
const statusLabel = (s) => ({ success: '成功', failed: '失败', error: '错误' }[s] || s)

const auditBuildParams = () => {
  const p = { page: auditPage.value, page_size: auditPageSize.value }
  if (auditDateRange.value?.[0]) p.start_time = auditDateRange.value[0].toISOString()
  if (auditDateRange.value?.[1]) p.end_time   = auditDateRange.value[1].toISOString()
  if (auditFilters.value.username)    p.username    = auditFilters.value.username
  if (auditFilters.value.action_type) p.action_type = auditFilters.value.action_type
  if (auditFilters.value.status)      p.status      = auditFilters.value.status
  return p
}

const fetchAudit = async () => {
  auditLoading.value = true
  try {
    const { data } = await getAuditLogs(auditBuildParams())
    auditLogs.value  = data.items
    auditTotal.value = data.total
  } catch { ElMessage.error('审计日志加载失败') }
  finally { auditLoading.value = false }
}

const auditFilter = () => { auditPage.value = 1; fetchAudit() }
const auditReset  = () => {
  auditFilters.value = { username: '', action_type: '', status: '' }
  auditDateRange.value = null
  auditPage.value = 1
  fetchAudit()
}

const openDetail = async (row) => {
  try {
    const { data } = await getAuditLogDetail(row.id)
    auditDetail.value = data
    drawerVisible.value = true
  } catch { ElMessage.error('加载详情失败') }
}

const detailFields = computed(() => {
  if (!auditDetail.value) return {}
  const d = auditDetail.value
  return {
    time:   { label: '时间',  val: fmtTime(d.action_time), mono: true },
    user:   { label: '用户',  val: `${d.username} (${d.user_role})` },
    type:   { label: '操作',  val: `${typeLabel(d.action_type)} / ${d.action_subtype || '—'}` },
    path:   { label: '路径',  val: `${d.request_method} ${d.request_path}`, mono: true },
    status: { label: '状态',  val: `${statusLabel(d.status)} (${d.status_code})` },
    ip:     { label: 'IP',    val: d.ip_address || '—', mono: true },
    desc:   { label: '描述',  val: d.description },
    ua:     { label: 'UA',    val: d.user_agent || '—' },
  }
})

const auditExport = async () => {
  auditExporting.value = true
  try {
    const { data } = await exportAuditLogs(auditBuildParams())
    const url = URL.createObjectURL(new Blob([data]))
    const a = document.createElement('a')
    a.href = url; a.download = `audit_${Date.now()}.csv`; a.click()
    URL.revokeObjectURL(url)
  } catch { ElMessage.error('导出失败') }
  finally { auditExporting.value = false }
}

// ── 导出分发 ──────────────────────────────────────
const handleExport = () => activeTab.value === 'replacements' ? repExport() : auditExport()

// ── 初始化 ────────────────────────────────────────
onMounted(async () => {
  try {
    const { data } = await request.get('/devices/regions')
    regions.value = data
  } catch {}
  repLoad()
})
</script>

<style scoped>
.records-page { padding: 24px; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.page-title-group { display: flex; flex-direction: column; gap: 4px; }
.page-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.page-subtitle { font-size: 12px; color: var(--text-muted); }

/* Tab 条 */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border-default);
  padding-bottom: 0;
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count {
  font-size: 10px;
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 600;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.total-hint { font-size: 12px; color: var(--text-muted); margin-left: 4px; }
.reset-btn {
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
}
.reset-btn:hover { color: var(--text-primary); }

/* 表格容器 */
.table-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.pagination {
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--border-subtle);
}

/* 通用样式 */
.row-index { color: var(--text-muted); font-size: 12px; }
.mono-val  { font-family: var(--font-mono); font-size: 12px; }
.small     { font-size: 11px; }
.muted     { color: var(--text-muted); font-size: 12px; }

.region-tag {
  display: inline-block;
  padding: 1px 8px;
  background: var(--accent-dim);
  border: 1px solid var(--border-accent);
  border-radius: 10px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
}
.mac.old-mac { color: var(--danger); }
.mac.new-mac { color: var(--success); }

.role-tag {
  margin-left: 4px;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  padding: 1px 5px;
  border-radius: 3px;
}
.type-tag { font-size: 11px; padding: 2px 7px; border-radius: 3px; font-weight: 500; }
.type-auth     { background: #dbeafe; color: #1d4ed8; }
.type-device   { background: #dcfce7; color: #15803d; }
.type-olt      { background: #fef9c3; color: #854d0e; }
.type-user     { background: #fce7f3; color: #9d174d; }
.type-system   { background: #f3e8ff; color: #6b21a8; }
.type-inventory{ background: #ffedd5; color: #9a3412; }
.status-dot { font-size: 11px; padding: 2px 7px; border-radius: 3px; }
.status-success { background: #dcfce7; color: #15803d; }
.status-failed  { background: #fef9c3; color: #854d0e; }
.status-error   { background: #fee2e2; color: #991b1b; }

/* 详情抽屉 */
.detail-body { padding: 4px 0; }
.detail-row { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px; }
.detail-label { width: 60px; flex-shrink: 0; color: var(--text-muted); }
.detail-value { flex: 1; color: var(--text-primary); word-break: break-all; }
.detail-value.mono { font-family: var(--font-mono); font-size: 12px; }
.detail-section { margin: 16px 0 8px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.json-block { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px; font-family: var(--font-mono); white-space: pre-wrap; word-break: break-all; color: var(--text-secondary); margin: 0; }
.json-block.error { color: #dc2626; }
</style>
