<template>
  <v-dialog :model-value="modelValue" max-width="640" scrollable @update:model-value="$emit('update:modelValue', $event)">
    <v-card border>
      <v-card-title>Agent 诊断 — {{ targetName }}</v-card-title>
      <v-card-text>
        <v-progress-linear v-if="loading" indeterminate class="mb-3" />
        <template v-else-if="result">
          <v-list density="compact">
            <v-list-item title="中心侧状态">
              <template #append>
                <v-chip
                  size="x-small"
                  variant="tonal"
                  :color="centralStatusColor(result.central_status)"
                  label
                >
                  {{ centralStatusLabel(result.central_status) }}
                </v-chip>
              </template>
            </v-list-item>
            <v-list-item
              v-if="result.last_heartbeat_redis"
              :title="`Redis 心跳: ${result.last_heartbeat_redis}`"
            />
            <v-list-item
              v-if="result.last_heartbeat_db"
              :title="`MySQL 心跳: ${result.last_heartbeat_db}`"
            />
            <v-list-item
              :title="`Agent 版本（库）: ${result.agent_version_db || '—'}`"
            />
            <template v-if="result.remote">
              <v-divider class="my-2" />
              <v-list-item title="SSH 连接">
                <template #append>
                  <v-icon :color="result.remote.ssh_ok ? 'success' : 'error'">
                    {{ result.remote.ssh_ok ? 'mdi-check' : 'mdi-close' }}
                  </v-icon>
                </template>
              </v-list-item>
              <v-list-item
                v-if="result.remote.systemctl_active"
                :title="`systemctl: ${result.remote.systemctl_active}`"
                :subtitle="result.remote.systemctl_detail || undefined"
              />
              <v-list-item
                v-if="result.remote.central_health_http_code != null"
                :title="`/health HTTP: ${result.remote.central_health_http_code}`"
              />
            </template>
          </v-list>
          <v-alert
            v-for="(err, i) in result.errors"
            :key="i"
            type="warning"
            density="compact"
            variant="tonal"
            class="mt-2"
          >
            {{ err }}
          </v-alert>
          <v-alert
            v-if="result.errors.length === 0"
            type="success"
            density="compact"
            variant="tonal"
            class="mt-2"
          >
            未发现明显异常
          </v-alert>
          <v-expansion-panels v-if="result.remote?.log_errors" class="mt-3" variant="accordion">
            <v-expansion-panel>
              <v-expansion-panel-title>错误日志摘录</v-expansion-panel-title>
              <v-expansion-panel-text>
                <pre class="text-caption agent-diag-log">{{ result.remote.log_errors }}</pre>
              </v-expansion-panel-text>
            </v-expansion-panel>
          </v-expansion-panels>
        </template>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn variant="text" @click="$emit('update:modelValue', false)">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import type { AgentDiagnoseResult } from '@/types/agentDiagnose'

defineProps<{
  modelValue: boolean
  loading: boolean
  result: AgentDiagnoseResult | null
  targetName?: string
}>()

defineEmits<{
  'update:modelValue': [value: boolean]
}>()

function centralStatusColor(status: string): string {
  if (status === 'online') return 'success'
  if (status === 'offline') return 'error'
  return 'default'
}

function centralStatusLabel(status: string): string {
  if (status === 'online') return '在线'
  if (status === 'offline') return '离线'
  return '未知'
}
</script>

<style scoped>
.agent-diag-log {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
}
</style>
