<!-- 图谱统计概览标签页：展示节点/关系数量、类型分布和数据质量指标 -->
<template>
  <a-spin :spinning="statsLoading">
    <a-row :gutter="16">
      <a-col :span="6">
        <a-card>
          <a-statistic title="总节点数" :value="stats.total_nodes" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="总关系数" :value="stats.total_relationships" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="孤立节点" :value="stats.orphan_nodes" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic title="占位符文档" :value="stats.placeholder_count" />
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="16" style="margin-top: 16px">
      <a-col :span="12">
        <a-card title="实体类型分布" size="small">
          <a-table
            :dataSource="stats.node_counts"
            :columns="nodeCountCols"
            :pagination="false"
            size="small"
            row-key="label"
          />
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="关系类型分布" size="small">
          <a-table
            :dataSource="stats.rel_counts"
            :columns="relCountCols"
            :pagination="false"
            size="small"
            row-key="type"
          />
        </a-card>
      </a-col>
    </a-row>

    <a-card title="数据质量" size="small" style="margin-top: 16px">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-statistic
            title="无关系实体比例"
            :value="(health.no_relation_ratio * 100).toFixed(1)"
            suffix="%"
          />
        </a-col>
        <a-col :span="8">
          <a-statistic title="图谱缺失文档" :value="health.missing_in_graph" />
        </a-col>
        <a-col :span="8">
          <a-statistic title="ES文档总数" :value="health.total_es_docs" />
        </a-col>
      </a-row>
    </a-card>
  </a-spin>

  <div style="margin-top: 12px; text-align: right">
    <a-button type="primary" :loading="statsLoading" @click="loadStats">刷新</a-button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { getGraphStats, getGraphHealth } from '@/api/admin-graph'
import type { GraphStatsResponse, GraphHealthResponse } from '@/types/admin-graph'

// ── 状态 ──
const statsLoading = ref(false)
const stats = ref<GraphStatsResponse>({
  total_nodes: 0,
  total_relationships: 0,
  orphan_nodes: 0,
  placeholder_count: 0,
  node_counts: [],
  rel_counts: [],
})
const health = ref<GraphHealthResponse>({
  no_relation_ratio: 0,
  duplicate_candidates: 0,
  missing_in_graph: 0,
  total_es_docs: 0,
})

// ── 表格列 ──
const nodeCountCols = [
  { title: '类型', dataIndex: 'label', key: 'label' },
  { title: '数量', dataIndex: 'count', key: 'count' },
]
const relCountCols = [
  { title: '类型', dataIndex: 'type', key: 'type' },
  { title: '数量', dataIndex: 'count', key: 'count' },
]

// ── 数据加载 ──
async function loadStats() {
  statsLoading.value = true
  try {
    const [s, h] = await Promise.all([getGraphStats(), getGraphHealth()])
    stats.value = s
    health.value = h
  } catch (e: unknown) {
    const msg = e instanceof Error ? e.message : String(e)
    message.error('加载统计失败: ' + msg)
  } finally {
    statsLoading.value = false
  }
}

/** 外部可调用的刷新方法 */
defineExpose({ loadStats })

onMounted(() => {
  loadStats()
})
</script>
