<script setup>
import { computed } from 'vue'
import { DocumentTextOutline, GitNetworkOutline, GridOutline, LayersOutline } from '@vicons/ionicons5'
import { NIcon } from 'naive-ui'

const props = defineProps({ documentEvidence: Array, structuredEvidence: Object, graphEvidence: Object, enabledSources: Array, diagnostics: Object, debug: Boolean })
const structured = computed(() => props.structuredEvidence?.[0])
const graph = computed(() => props.graphEvidence?.[0])
const pathText = computed(() => {
  const nodes = graph.value?.payload?.nodes || []
  return nodes.map(node => node.label || node.properties?.name || node.id).slice(0, 8).join(' → ')
})
const short = value => typeof value === 'string' && value.length > 150 ? `${value.slice(0, 150)}…` : value
const sourceLabel = item => item.title || item.sourceName || item.sourceRef?.sourceName || item.sourceRef?.sourceId || '未知文档'
const diagnosticError = key => props.diagnostics?.[key]?.error || props.diagnostics?.[key]?.message
const compactJson = value => value == null ? '-' : JSON.stringify(value, null, 2)
</script>

<template>
  <section class="panel evidence-panel">
    <h2><n-icon><LayersOutline /></n-icon> 证据溯源</h2>
    <div class="evidence-section">
      <h3><n-icon><DocumentTextOutline /></n-icon> 文档召回（Top 3）</h3>
      <div v-if="documentEvidence?.length" class="doc-list">
        <article v-for="item in documentEvidence.slice(0,3)" :key="item.id">
          <div><strong>{{ sourceLabel(item) }}</strong><b>{{ Number(item.score || 0).toFixed(4) }}</b></div>
          <small>chunk {{ item.payload?.chunkId || '-' }} · hybrid {{ item.payload?.hybridScore ?? '-' }}</small>
          <p>{{ short(item.content) }}</p>
        </article>
      </div>
      <div v-else class="empty">{{ diagnosticError('document') || '暂无文档证据' }}</div>
    </div>
    <div class="evidence-section">
      <h3><n-icon><GridOutline /></n-icon> 结构化查询结果</h3>
      <div v-if="structured" class="table-wrap">
        <table><thead><tr><th v-for="column in structured.payload?.columns" :key="column">{{ column }}</th></tr></thead><tbody><tr v-for="(row,index) in structured.payload?.rows?.slice(0,5)" :key="index"><td v-for="(cell,i) in row" :key="i">{{ cell }}</td></tr></tbody></table>
        <small>共 {{ structured.payload?.rowCount || 0 }} 行 · {{ structured.metadata?.executionTimeMs || 0 }} ms</small>
        <div v-if="debug" class="plan-box"><b>Text2SQL Plan</b><small>tables: {{ structured.metadata?.selectedTables?.join(', ') || '-' }}</small><small>relationships: {{ structured.metadata?.usedRelationships?.join(', ') || '-' }}</small><small>repaired: {{ structured.metadata?.repaired ? 'yes' : 'no' }} · rerank: {{ structured.metadata?.rerankScore ?? '-' }}</small></div>
        <pre v-if="debug">{{ structured.metadata?.generatedSql || structured.metadata?.sql }}</pre>
      </div>
      <div v-else class="empty">{{ diagnosticError('structured') || diagnosticError('kb') || '暂无结构化证据' }}</div>
    </div>
    <div class="evidence-section">
      <h3><n-icon><GitNetworkOutline /></n-icon> 图谱路径</h3>
      <div v-if="graph" class="graph-box">
        <p>{{ pathText || '已返回图谱结果，暂无可展示路径' }}</p>
        <small>节点 {{ graph.metadata?.nodeCount || 0 }} · 关系 {{ graph.metadata?.edgeCount || 0 }}</small>
        <div v-if="debug" class="plan-box"><b>Text2Cypher Plan</b><small>mode: {{ graph.metadata?.generationMode || (graph.metadata?.explicitCypher ? 'EXPLICIT_CYPHER' : '-') }}</small><small>labels: {{ graph.metadata?.selectedLabels?.join(', ') || '-' }}</small><small>relationships: {{ graph.metadata?.selectedRelationships?.join(', ') || '-' }}</small><small>rerank: {{ graph.metadata?.rerankScore ?? '-' }}</small><pre>{{ compactJson(graph.metadata?.intentPlan) }}</pre></div>
        <pre v-if="debug">{{ graph.metadata?.generatedCypher || graph.metadata?.cypher }}</pre>
      </div>
      <div v-else class="empty">{{ diagnosticError('graph') || diagnosticError('kb') || '暂无图谱证据' }}</div>
    </div>
    <div class="fusion-card">
      <strong>融合结果</strong>
      <p>{{ enabledSources?.length ? enabledSources.join(' + ') : '等待检索' }} 联合生成</p>
      <small>证据数：{{ (documentEvidence?.length || 0) + (structuredEvidence?.length || 0) + (graphEvidence?.length || 0) }}</small>
      <pre v-if="debug && diagnostics && Object.keys(diagnostics).length">{{ JSON.stringify(diagnostics, null, 2) }}</pre>
    </div>
  </section>
</template>

<style scoped>
.panel{height:100%;padding:18px;border:1px solid rgba(72,142,220,.28);border-radius:12px;background:rgba(4,18,40,.74);overflow:auto}.panel h2{display:flex;align-items:center;gap:9px;font-size:16px;margin-bottom:12px}.panel h2 .n-icon,.evidence-section h3 .n-icon{color:#2aa8ff}.evidence-section{padding:11px 0;border-bottom:1px solid rgba(81,137,197,.2)}.evidence-section h3{display:flex;align-items:center;gap:7px;font-size:12px;margin-bottom:8px}.doc-list{display:flex;flex-direction:column;gap:6px}.doc-list article{padding:8px 10px;border-radius:8px;background:rgba(16,43,78,.72);border:1px solid rgba(63,125,194,.18)}.doc-list article>div{display:flex;justify-content:space-between;gap:8px}.doc-list strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.doc-list b{font-size:10px;color:#66c2ff;background:rgba(24,119,221,.22);padding:1px 6px;border-radius:5px}.doc-list small,.table-wrap small,.graph-box small{font-size:9px;color:#7088a8}.doc-list p{font-size:10px;color:#a6b8cf;line-height:1.5;margin-top:4px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:9px}th,td{padding:5px 7px;border:1px solid rgba(69,123,181,.22);white-space:nowrap;text-align:left}th{color:#a9c8ed;background:rgba(19,53,92,.7)}td{color:#c2d1e4}.graph-box p{font-size:10px;line-height:1.7;color:#b9cbe0}.empty{padding:12px;text-align:center;color:#5f7693;font-size:10px;background:rgba(9,28,53,.45);border-radius:7px}.fusion-card{margin-top:12px;padding:13px;border:1px solid rgba(47,151,250,.45);border-radius:9px;background:linear-gradient(135deg,rgba(12,48,89,.8),rgba(7,29,55,.75))}.fusion-card strong{font-size:12px}.fusion-card p{color:#36dc94;font-size:11px;margin:5px 0}.fusion-card small{color:#8aa2c0;font-size:10px}.plan-box{margin-top:7px;padding:7px;border:1px solid rgba(80,142,220,.22);border-radius:6px;background:rgba(7,25,49,.72);display:flex;flex-direction:column;gap:3px}.plan-box b{font-size:9px;color:#b9d8ff}.plan-box small{font-size:8px;color:#8fa9c4}.plan-box pre{max-height:60px}pre{margin-top:7px;padding:7px;border-radius:6px;white-space:pre-wrap;word-break:break-all;font-size:8px;color:#6fb8f7;background:#06152a;max-height:90px;overflow:auto}
</style>
