<template>
  <div :class="['flow-node', 'node-type-' + (data?.type || ''), { selected }]">
    <div class="node-header" :style="{ backgroundColor: data?.color || '#409EFF' }">
      {{ data?.label || id }}
    </div>
    <div class="node-body">
      <p class="node-type-label">{{ data?.typeDesc || '' }}</p>
      <p v-if="configSummary" class="node-config-summary">{{ configSummary }}</p>
    </div>
    <button class="node-delete-btn" @click="$emit('delete')" title="删除">×</button>

    <template v-if="data?.type !== 'trigger'">
      <Handle type="target" :position="Position.Left" id="target" class="node-handle" />
    </template>

    <template v-if="data?.type === 'trigger' || data?.type === 'llm' || data?.type === 'tool' || data?.type === 'mcp' || data?.type === 'rag'">
      <Handle type="source" :position="Position.Right" id="source" class="node-handle" />
    </template>

    <template v-if="data?.type === 'condition'">
      <Handle type="source" :position="Position.Right" id="true" class="node-handle node-handle-true">
        <span class="handle-label-true">是</span>
      </Handle>
      <Handle type="source" :position="Position.Bottom" id="false" class="node-handle node-handle-false">
        <span class="handle-label-false">否</span>
      </Handle>
    </template>

    <template v-if="data?.type === 'wecom_notify' || data?.type === 'output'">
      <Handle type="source" :position="Position.Right" id="source" class="node-handle" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Handle, Position } from '@vue-flow/core'

const props = defineProps<{
  id: string
  data?: any
  selected?: boolean
}>()

defineEmits<{
  delete: []
}>()

const config = computed(() => props.data?.config || {})

const configSummary = computed(() => {
  const cfg = config.value
  switch (props.data?.type) {
    case 'trigger':
      return cfg.event_type ? `事件: ${eventLabel(cfg.event_type)}` : ''
    case 'llm':
      return cfg.model ? `${cfg.model} · T=${cfg.temperature ?? 0.7}` : ''
    case 'tool':
      return cfg.tool_name ? `工具: ${cfg.tool_name}` : (cfg.tool_type ? `类型: ${cfg.tool_type}` : '')
    case 'mcp':
      return cfg.mcp_server ? `MCP: ${cfg.mcp_server}` : ''
    case 'wecom_notify':
      return cfg.message_type ? `消息: ${cfg.message_type}` : ''
    case 'condition':
      return cfg.condition ? `条件: ${truncate(cfg.condition, 20)}` : ''
    case 'rag':
      return cfg.knowledge_base ? `知识库: ${truncate(cfg.knowledge_base, 12)}` : (cfg.search_mode ? `模式: ${cfg.search_mode}` : '')
    case 'output':
      return cfg.format ? `格式: ${cfg.format.toUpperCase()}` : ''
    default:
      return ''
  }
})

function eventLabel(type: string): string {
  const map: Record<string, string> = {
    text_message: '文本消息',
    button_click: '按钮点击',
    enter_chat: '进入聊天',
    image_message: '图片消息',
    voice_message: '语音消息',
    file_message: '文件消息',
  }
  return map[type] || type
}

function truncate(s: string, max: number): string {
  if (!s) return ''
  return s.length > max ? s.slice(0, max) + '...' : s
}
</script>

<style scoped>
.flow-node {
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  background: #fff;
  min-width: 160px;
  position: relative;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.flow-node.selected {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
}
.flow-node:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.node-header {
  padding: 8px 14px;
  border-radius: 6px 6px 0 0;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-body {
  padding: 6px 14px 10px;
}
.node-type-label {
  margin: 0;
  font-size: 11px;
  color: #909399;
}
.node-config-summary {
  margin: 2px 0 0;
  font-size: 11px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 3px 6px;
}
.node-delete-btn {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F56C6C;
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.flow-node:hover .node-delete-btn {
  display: flex;
}
.node-handle {
  width: 12px;
  height: 12px;
  background: #409EFF;
  border: 2px solid #fff;
  border-radius: 50%;
}
.node-handle-true {
  background: #67C23A;
  width: 14px;
  height: 14px;
  border-color: #fff;
}
.node-handle-false {
  background: #F56C6C;
  width: 14px;
  height: 14px;
  border-color: #fff;
}
.handle-label-true {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #67C23A;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
}
.handle-label-false {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #F56C6C;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
}
</style>
