<template>
  <div class="knowledge-graph-container">
    <div class="graph-controls">
      <button @click="resetLayout" class="control-btn">重置布局</button>
      <button @click="zoomIn" class="control-btn">放大</button>
      <button @click="zoomOut" class="control-btn">缩小</button>
      <input v-model="searchTerm" placeholder="搜索节点..." class="search-input" />
    </div>
    <svg ref="svgElement" class="knowledge-graph" @click="handleNodeClick"></svg>
    <div v-if="selectedNode" class="node-info-panel">
      <h3>{{ selectedNode.name }}</h3>
      <p class="node-type">分类: {{ getTypeLabel(selectedNode.type) }}</p>
      <p v-if="selectedNode.description" class="node-description">{{ selectedNode.description }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { KnowledgeGraph, GraphNode } from "./logic";

// 响应式数据
const svgElement = ref<SVGSVGElement>();
const searchTerm = ref("");
const selectedNode = ref<GraphNode | null>(null);

let knowledgeGraph: KnowledgeGraph;

/**
 * 放大功能实现
 */
const zoomIn = () => {
  if (knowledgeGraph) {
    knowledgeGraph.zoomIn();
  }
};

/**
 * 缩小功能实现
 */
const zoomOut = () => {
  if (knowledgeGraph) {
    knowledgeGraph.zoomOut();
  }
};

/**
 * 重置布局功能实现
 */
const resetLayout = () => {
  if (knowledgeGraph) {
    knowledgeGraph.resetLayout();
  }
};

/**
 * 处理节点点击事件
 * @param event 点击事件
 */
const handleNodeClick = (event: MouseEvent) => {
  const target = event.target as SVGElement;
  // 检查是否点击了节点元素
  const nodeElement = target.closest(".node");
  if (nodeElement) {
    const nodeId = nodeElement.getAttribute("data-node-id");
    if (nodeId && knowledgeGraph) {
      const node = knowledgeGraph.getNodeInfo(nodeId);
      if (node) {
        selectedNode.value = node;
      }
    }
  }
};

/**
 * 获取节点类型的中文标签
 * @param type 节点类型
 * @returns 中文类型标签
 */
const getTypeLabel = (type: string): string => {
  const typeMap: Record<string, string> = {
    aircraft: "飞机",
    country: "国家",
    weapon: "武器",
    military: "军事单位",
    technology: "技术/装备",
  };
  return typeMap[type] || type;
};

onMounted(() => {
  if (svgElement.value) {
    knowledgeGraph = new KnowledgeGraph(svgElement.value);

    // 为节点添加点击事件监听器，支持点击选择节点
    setTimeout(() => {
      const nodeElements = svgElement.value?.querySelectorAll(".node");
      if (nodeElements) {
        nodeElements.forEach((element, index) => {
          // 获取节点数据并添加data属性
          const nodeData = (knowledgeGraph as any).getNodeInfoByIndex?.(index) || {
            id: `node-${index}`,
          };
          element.setAttribute("data-node-id", nodeData.id);
        });
      }
    }, 100);
  }
});
</script>

<style scoped lang="scss">
.knowledge-graph-container {
  width: 100%;
  height: 100vh;
  background: radial-gradient(ellipse at center, #0c2461 0%, #000 100%);
  position: relative;
  overflow: hidden;
}

.knowledge-graph {
  width: 100%;
  height: 100%;
  cursor: pointer;

  :deep(.node) {
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      filter: drop-shadow(0 0 10px currentColor);
      // transform: scale(1.05);
    }

    &:active {
      transform: scale(0.95);
    }
  }

  :deep(.link) {
    transition: all 0.3s ease;
    /* 移除虚线动画，使用实线效果 */
  }

  :deep(.link:hover) {
    stroke-opacity: 1;
    // stroke-width: function(d) {(d.level || 0) + 3};
  }

  :deep(.link-label) {
    background: rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
  }

  :deep(text) {
    font-family: "Arial", "Microsoft YaHei", sans-serif;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  }

  :deep(image) {
    border-radius: 50%;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.1);
  }
}

.graph-controls {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.1);
  padding: 15px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  display: flex;
  gap: 10px;
  align-items: center;
}

.control-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2196f3;
  color: white;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;

  &:hover {
    background: #1976d2;
    // transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
}

.search-input {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;

  &:focus {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
  }
}

.node-info-panel {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
  max-width: 300px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: slideIn 0.3s ease-out;
}

.node-info-panel h3 {
  margin: 0 0 10px 0;
  color: #263238;
  font-size: 18px;
  font-weight: 600;
}

.node-type {
  margin: 0 0 10px 0;
  color: #546e7a;
  font-size: 14px;
  font-weight: 500;
}

.node-description {
  margin: 0;
  color: #455a64;
  font-size: 14px;
  line-height: 1.5;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .knowledge-graph-container {
    height: 70vh;
  }

  .graph-controls {
    top: 10px;
    right: 10px;
    left: 10px;
    flex-direction: column;
    gap: 8px;

    .control-btn,
    .search-input {
      width: 100%;
      margin: 0;
    }
  }

  .node-info-panel {
    left: 10px;
    right: 10px;
    max-width: none;
    margin: 0;
  }
}
</style>
