<script setup lang="ts">
import { ref, watch } from 'vue'
import { http } from '@/api'
import { formatBytesPerSec, probeStatusColor, probeStatusLabel, formatProbeError, probeSourceLabel, PROBE_STATUS_FILTER_ITEMS } from '@/utils/watchFormat'

export interface ProbeRecordRow {
  id: number
  recorded_at?: string
  server_id?: number
  server_name?: string
  source?: string
  probe_status?: string
  duration_ms?: number
  cpu_pct?: number | null
  mem_pct?: number | null
  disk_pct?: number | null
  net_up_bps?: number | null
  net_down_bps?: number | null
  error?: string | null
}

const props = defineProps<{
  serverId?: number | null
  sessionId?: number | null
  hours?: number
}>()

const items = ref<ProbeRecordRow[]>([])
const total = ref(0)
const page = ref(1)
const loading = ref(false)
const statusFilter = ref<string | null>(null)

const headers = [
  { title: '时间', key: 'recorded_at', width: 160 },
  { title: '服务器', key: 'server_name' },
  { title: '状态', key: 'probe_status', width: 100 },
  { title: '来源', key: 'source', width: 72 },
  { title: 'CPU', key: 'cpu_pct', width: 64 },
  { title: '内存', key: 'mem_pct', width: 64 },
  { title: '硬盘', key: 'disk_pct', width: 64 },
  { title: '↑', key: 'net_up_bps', width: 88 },
  { title: '↓', key: 'net_down_bps', width: 88 },
  { title: '耗时', key: 'duration_ms', width: 72 },
  { title: '错误', key: 'error' },
]

async function load() {
  loading.value = true
  try {
    const data = await http.get<{ items: ProbeRecordRow[]; total: number }>('/watch/probe-records', {
      server_id: props.serverId ?? undefined,
      session_id: props.sessionId ?? undefined,
      probe_status: statusFilter.value ?? undefined,
      hours: props.hours ?? 24,
      page: page.value,
      per_page: 50,
    })
    items.value = data.items || []
    total.value = data.total || 0
  } finally {
    loading.value = false
  }
}

watch(
  () => [props.serverId, props.sessionId, props.hours, page.value, statusFilter.value] as const,
  () => { load() },
  { immediate: true },
)
</script>

<template>
  <div>
    <div class="d-flex align-center ga-2 mb-3">
      <v-select
        v-model="statusFilter"
        :items="PROBE_STATUS_FILTER_ITEMS"
        item-title="title"
        item-value="value"
        label="探针状态"
        density="compact"
        hide-details
        variant="outlined"
        style="max-width: 180px"
        @update:model-value="page = 1"
      />
      <v-spacer />
      <v-btn size="small" variant="text" prepend-icon="mdi-refresh" :loading="loading" @click="load">
        刷新
      </v-btn>
    </div>
    <v-data-table
      :headers="headers"
      :items="items"
      :loading="loading"
      density="compact"
      item-value="id"
      hide-default-footer
    >
      <template #item.probe_status="{ item }">
        <v-chip size="x-small" :color="probeStatusColor(item.probe_status)" variant="tonal" label>
          {{ probeStatusLabel(item.probe_status) }}
        </v-chip>
      </template>
      <template #item.source="{ item }">{{ probeSourceLabel(item.source) }}</template>
      <template #item.net_up_bps="{ item }">{{ formatBytesPerSec(item.net_up_bps) }}</template>
      <template #item.net_down_bps="{ item }">{{ formatBytesPerSec(item.net_down_bps) }}</template>
      <template #item.duration_ms="{ item }">{{ item.duration_ms ?? '—' }} ms</template>
      <template #item.error="{ item }">
        <span
          class="text-caption text-truncate d-inline-block"
          style="max-width: 200px"
          :title="formatProbeError(item.error, item.probe_status)"
        >{{ formatProbeError(item.error, item.probe_status) }}</span>
      </template>
    </v-data-table>
    <div class="d-flex justify-center align-center ga-2 mt-3">
      <v-btn size="small" variant="text" :disabled="page <= 1" @click="page -= 1">上一页</v-btn>
      <span class="text-caption">第 {{ page }} 页 · 共 {{ total }} 条</span>
      <v-btn size="small" variant="text" :disabled="page * 50 >= total" @click="page += 1">下一页</v-btn>
    </div>
  </div>
</template>
