<script setup>
import { computed } from 'vue'
import { NIcon, NTag, NEmpty } from 'naive-ui'
import { InformationCircleOutline } from '@vicons/ionicons5'

const props = defineProps({
  // { type: 'node'|'edge'|null, data: {...} }
  selected: { type: Object, default: null }
})

const isNode = computed(() => props.selected?.type === 'node')
const isEdge = computed(() => props.selected?.type === 'edge')

const propertyList = computed(() => {
  const obj = props.selected?.data?.properties
  if (!obj || typeof obj !== 'object') return []
  return Object.entries(obj)
    .filter(([_, v]) => v !== null && v !== undefined)
    .map(([k, v]) => ({ key: k, value: formatValue(v) }))
})

function formatValue(v) {
  if (v === null || v === undefined) return 'NULL'
  if (Array.isArray(v)) return `[${v.length} 项]`
  if (typeof v === 'object') return JSON.stringify(v)
  if (typeof v === 'string' && v.length > 200) return v.slice(0, 200) + '…'
  return String(v)
}

function shortId(id) {
  if (!id) return ''
  // Neo4j elementId 格式 "4:<dbId>:<internalId>"，取末段
  const parts = String(id).split(':')
  return '#' + parts[parts.length - 1]
}
</script>

<template>
  <div class="node-detail">
    <div class="panel-header">
      <n-icon size="14"><InformationCircleOutline /></n-icon>
      <span>详情</span>
    </div>

    <div class="panel-body" v-if="selected">
      <!-- 节点信息 -->
      <template v-if="isNode">
        <div class="section">
          <div class="section-title">类型</div>
          <div class="tag-row">
            <n-tag
              v-for="label in (selected.data.labels || [selected.data.label])"
              :key="label"
              size="small"
              type="info"
              round
            >{{ label }}</n-tag>
          </div>
        </div>
        <div class="section">
          <div class="section-title">显示名</div>
          <div class="display-value">{{ selected.data.label }}</div>
        </div>
      </template>

      <!-- 边信息 -->
      <template v-else-if="isEdge">
        <div class="section">
          <div class="section-title">关系类型</div>
          <div class="tag-row">
            <n-tag size="small" type="warning" round>{{ selected.data.type }}</n-tag>
          </div>
        </div>
        <div class="section">
          <div class="section-title">连接</div>
          <div class="connection">
            <span class="endpoint" :title="selected.data.source">{{ shortId(selected.data.source) }}</span>
            <span class="arrow">→</span>
            <span class="endpoint" :title="selected.data.target">{{ shortId(selected.data.target) }}</span>
          </div>
        </div>
      </template>

      <!-- 属性 -->
      <div class="section" v-if="propertyList.length">
        <div class="section-title">属性</div>
        <div class="prop-list">
          <div v-for="p in propertyList" :key="p.key" class="prop-row">
            <span class="prop-key">{{ p.key }}</span>
            <span class="prop-value" :title="p.value">{{ p.value }}</span>
          </div>
        </div>
      </div>

      <!-- 元信息 -->
      <div class="section">
        <div class="section-title">Element ID</div>
        <code class="element-id">{{ selected.data.id }}</code>
      </div>
    </div>

    <div class="panel-empty" v-else>
      <n-empty description="点击节点或边查看详情" size="small" />
    </div>
  </div>
</template>

<style scoped>
.node-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-card);
}
.panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}
.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.panel-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.section {
  margin-bottom: 14px;
}
.section-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.display-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
  word-break: break-all;
}
.connection {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.endpoint {
  padding: 2px 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  color: var(--color-accent);
}
.arrow { color: var(--text-muted); }

.prop-list { display: flex; flex-direction: column; gap: 4px; }
.prop-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
}
.prop-key {
  flex-shrink: 0;
  min-width: 80px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--color-accent);
}
.prop-value {
  flex: 1;
  font-size: 11px;
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
}

.element-id {
  font-size: 10px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  word-break: break-all;
  display: block;
}
</style>
