import React, { useEffect, useState, useRef } from 'react';
import { 
  Box, 
  Button, 
  Flex, 
  Spinner, 
  Alert, 
  AlertIcon, 
  Text, 
  Stat, 
  StatLabel, 
  StatNumber, 
  HStack, 
  VStack, 
  Tag, 
  Badge,
  List,
  ListItem,
  Divider,
  CloseButton,
  Grid,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Icon,
  useColorModeValue,
  Tooltip
} from '@chakra-ui/react';
import { InfoIcon, ViewIcon } from '@chakra-ui/icons';
import ReactECharts from 'echarts-for-react';
import { eventService } from '../../../services/eventService';
import CitedContent from '../../../components/Citation/CitedContent';

// 节点样式配置 - 完全复刻Flask版本
const NODE_STYLES = {
  'event': { color: '#ff4757', symbol: 'diamond', size: 'large' },
  'industry': { color: '#00d2d3', symbol: 'rect', size: 'medium' },
  'company': { color: '#54a0ff', symbol: 'circle', size: 'medium' },
  'policy': { color: '#10ac84', symbol: 'triangle', size: 'medium' },
  'technology': { color: '#ee5a6f', symbol: 'roundRect', size: 'medium' },
  'market': { color: '#ffd93d', symbol: 'diamond', size: 'medium' },
  'other': { color: '#a4b0be', symbol: 'circle', size: 'small' }
};

// 影响方向颜色映射 - 完全复刻Flask版本
const IMPACT_COLORS = {
  'positive': '#52c41a',
  'negative': '#ff4d4f',
  'neutral': '#999',
  'mixed': '#faad14'
};

// 节点类型标签映射
const NODE_TYPE_LABELS = {
  'event': '事件',
  'industry': '行业',
  'company': '公司',
  'policy': '政策',
  'technology': '技术',
  'market': '市场',
  'other': '其他'
};

// 过滤孤立节点 - 完全复刻Flask版本
function filterIsolatedNodes(nodes, edges) {
  console.log('开始过滤孤立节点');
  console.log('输入节点:', nodes);
  console.log('输入边:', edges);
  
  if (!nodes || !edges) {
    console.log('节点或边数据为空');
    return [];
  }
  
  const connectedNodeIds = new Set();
  edges.forEach(edge => {
    console.log('处理边:', edge, '从', edge.source, '到', edge.target);
    connectedNodeIds.add(String(edge.source));
    connectedNodeIds.add(String(edge.target));
  });
  
  console.log('连接的节点ID集合:', connectedNodeIds);
  
  // 如果图中只有一个节点且是主事件，也显示它
  const mainEventNode = nodes.find(n => n.extra?.is_main_event);
  console.log('主事件节点:', mainEventNode);
  
  if (mainEventNode) {
    connectedNodeIds.add(String(mainEventNode.id));
    console.log('添加主事件节点ID:', String(mainEventNode.id));
  }
  
  const filteredNodes = nodes.filter(node => {
    const shouldKeep = connectedNodeIds.has(String(node.id));
    console.log(`节点 ${node.name}(${node.id}[${String(node.id)}]): ${shouldKeep ? '保留' : '过滤'}`);
    return shouldKeep;
  });
  
  console.log('过滤后的节点:', filteredNodes);
  return filteredNodes;
}

// 计算节点连接数
function calculateNodeConnections(nodeId, edges) {
  return edges.filter(edge => 
    String(edge.source) === String(nodeId) || String(edge.target) === String(nodeId)
  ).length;
}

// 计算节点大小 - 基于连接数，增大整体尺寸方便点击
function calculateNodeSize(connectionCount, isMainEvent = false) {
  const baseSize = 35;  // 增加基础大小
  const maxSize = 70;   // 增加最大大小
  const minSize = 25;   // 增加最小大小

  // 主事件节点稍大一些
  if (isMainEvent) {
    return Math.min(maxSize, baseSize + 20);
  }

  // 基于连接数计算大小，使用对数函数避免差距过大
  const sizeMultiplier = Math.log(connectionCount + 1) * 6;
  return Math.min(maxSize, Math.max(minSize, baseSize + sizeMultiplier));
}

// 计算边的宽度 - 基于强度，但差距不要过大
function calculateEdgeWidth(strength) {
  const minWidth = 1;
  const maxWidth = 4;
  if (typeof strength === 'number') {
    const normalizedStrength = strength / 100; // 假设强度是0-100
    return minWidth + (maxWidth - minWidth) * normalizedStrength;
  }
  // 如果是字符串类型的强度
  switch(strength) {
    case 'strong': return 3;
    case 'medium': return 2;
    case 'weak': return 1;
    default: return 2;
  }
}

// 力导向图配置 - 完全复刻Flask版本
function getGraphOption(data) {
  console.log('getGraphOption 被调用，输入数据:', data);
  
  if (!data || !data.nodes || !data.edges || data.nodes.length === 0) {
    console.log('数据为空或无效');
    return { 
      title: { text: '暂无传导链数据', left: 'center', top: 'center' },
      graphic: { type: 'text', left: 'center', top: '60%', style: { text: '当前事件暂无传导链分析数据', fontSize: 14 } }
    };
  }
  
  console.log('原始节点数:', data.nodes.length);
  console.log('原始边数:', data.edges.length);
  
  const filteredNodes = filterIsolatedNodes(data.nodes, data.edges);
  console.log('过滤后节点数:', filteredNodes.length);
  console.log('过滤后的节点:', filteredNodes);
  
  // 进一步过滤：不显示事件类型的节点
  const nonEventNodes = filteredNodes.filter(node => node.extra?.node_type !== 'event');
  console.log('排除事件节点后:', nonEventNodes.length);
  
  if (nonEventNodes.length === 0) {
    console.log('过滤后没有有效节点');
    return { 
      title: { text: '暂无有效节点数据', left: 'center', top: 'center' },
      graphic: { type: 'text', left: 'center', top: '60%', style: { text: '当前事件的传导链节点均为孤立节点', fontSize: 14 } }
    };
  }

  // 生成节点类别（排除事件类型）
  const categories = [...new Set(nonEventNodes.map(n => n.extra?.node_type || 'other'))].map(type => ({
    name: NODE_TYPE_LABELS[type] || type,
    itemStyle: { color: NODE_STYLES[type]?.color || NODE_STYLES.other.color }
  }));
  
  console.log('节点类别:', categories);

  // 构建图表节点数据 - 完全复刻Flask版本样式（排除事件节点）
  const chartNodes = nonEventNodes.map(node => {
    const nodeType = node.extra?.node_type || 'other';
    const nodeStyle = NODE_STYLES[nodeType] || NODE_STYLES['other'];
    const connectionCount = calculateNodeConnections(node.id, data.edges);
    
    console.log(`节点 ${node.name} (${node.id}): 类型=${nodeType}, 连接数=${connectionCount}`);
    
    return {
      id: String(node.id),
      name: node.name,
      value: node.value,
      symbol: nodeStyle.symbol,
      symbolSize: calculateNodeSize(connectionCount, node.extra?.is_main_event),
      category: NODE_TYPE_LABELS[nodeType] || nodeType,
      itemStyle: {
        color: nodeStyle.color,
        borderColor: node.extra?.is_main_event ? '#ffd700' : '#fff',
        borderWidth: node.extra?.is_main_event ? 3 : 1,
        shadowBlur: 5,
        shadowColor: 'rgba(0,0,0,0.2)'
      },
      label: {
        show: true,
        position: 'right',
        formatter: '{b}',
        fontSize: 12,
        fontWeight: 'bold',
        padding: [5, 8], // 增加标签内边距，扩大点击区域
        backgroundColor: 'rgba(255,255,255,0.8)',
        borderRadius: 4,
        borderColor: '#ddd',
        borderWidth: 1
      },
      emphasis: {
        focus: 'none', // 减少高亮敏感性，但保持点击功能
        label: { 
          show: true,
          fontSize: 13,
          fontWeight: 'bold'
        },
        itemStyle: {
          borderWidth: 3,
          shadowBlur: 10
        }
      },
      // 扩大节点的实际点击区域
      select: {
        itemStyle: {
          borderColor: '#007bff',
          borderWidth: 3
        }
      },
      extra: node.extra // 包含所有额外信息
    };
  });

  // 构建图表边数据 - 完全复刻Flask版本样式
  const chartEdges = data.edges.map(edge => ({
    source: String(edge.source),
    target: String(edge.target),
    value: edge.value,
    lineStyle: {
      color: IMPACT_COLORS[edge.extra?.direction] || IMPACT_COLORS.neutral,
      width: calculateEdgeWidth(edge.extra?.strength || 50),
      curveness: edge.extra?.is_circular ? 0.3 : 0,
      type: edge.extra?.is_circular ? 'dashed' : 'solid', // 关键：循环边用虚线
    },
    label: {
      show: false // 通常边的标签会很乱，默认关闭
    },
    symbol: ['none', 'arrow'],
    symbolSize: [0, 10],
    extra: edge.extra // 包含所有额外信息
  }));

  // 完全复刻Flask版本的图表选项
  return {
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.dataType === 'node') {
          const { name, extra } = params.data;
          const connectionCount = calculateNodeConnections(params.data.id, data.edges);
          return `<div style="text-align: left;">` +
                 `<b style="font-size: 14px;">${name}</b><br/>` +
                 `类型: ${NODE_TYPE_LABELS[extra?.node_type] || extra?.node_type}<br/>` +
                 `重要性: ${extra?.importance_score}<br/>` +
                 `连接数: ${connectionCount}` +
                 `${extra?.is_main_event ? '<br/><span style="color: #ffd700;">★ 主事件</span>' : ''}` +
                 `<br/><span style="color: #007bff; font-weight: bold;">🖱️ 点击查看详细信息</span>` +
                 `</div>`;
        }
        if (params.dataType === 'edge') {
          const { source, target, extra } = params.data;
          const sourceNode = data.nodes.find(n => String(n.id) === String(source));
          const targetNode = data.nodes.find(n => String(n.id) === String(target));
          if (!sourceNode || !targetNode) return '加载中...';
          return `<div style="text-align: left;">` +
                 `<b>${sourceNode.name} → ${targetNode.name}</b><br/>` +
                 `类型: ${extra?.transmission_type}<br/>` +
                 `方向: ${extra?.direction}<br/>` +
                 `强度: ${extra?.strength}` +
                 `${extra?.is_circular ? '<br/>🔄 循环效应' : ''}` +
                 `</div>`;
        }
        return params.name;
      }
    },
          // 隐藏ECharts默认图例，使用自定义图例
      legend: {
        show: false
      },
    series: [{
      type: 'graph',
      layout: 'force',
        data: chartNodes,
        links: chartEdges,
        categories: categories,
      roam: true,
        draggable: true,  // 启用节点拖拽
        focusNodeAdjacency: false,  // 降低敏感性
        force: {
          repulsion: 250,  // 增加节点间距，给点击留更多空间
          edgeLength: [100, 180],  // 增加边长，扩大节点周围空间
          gravity: 0.05,  // 降低重力
          layoutAnimation: false,  // 关闭布局动画降低敏感性
          friction: 0.6  // 增加摩擦力，减少移动
        },
        emphasis: { 
          focus: 'none',  // 降低高亮敏感性
          scale: 1.1  // 轻微放大而不是强烈高亮
        },
        lineStyle: { 
          opacity: 0.6,
          curveness: 0.1
        },
        label: { 
          position: 'right', 
          formatter: '{b}',
          show: true,
          distance: 10,  // 标签距离节点更远一些
          fontSize: 12
        },
        // 增加整体的点击敏感性
        silent: false,
        triggerLineEvent: true,
        triggerEvent: true
    }]
  };
}

// 桑基图配置  
function getSankeyOption(data) {
  if (!data || !data.nodes || !data.links) {
    return { title: { text: '暂无桑基图数据', left: 'center', top: 'center' } };
  }

    return { 
    title: { text: '事件影响力传导流向', left: 'center', top: 10 },
    tooltip: { 
      trigger: 'item', 
      triggerOn: 'mousemove',
      formatter: (params) => {
        if (params.dataType === 'node') {
          return `<b>${params.name}</b><br/>类型: ${params.data.type || 'N/A'}<br/>层级: ${params.data.level || 'N/A'}<br/>点击查看详情`;
        }
        return params.name;
      }
    },
    series: [{
      type: 'sankey',
      layout: 'none',
      emphasis: { focus: 'adjacency' },
      nodeAlign: 'justify',
      layoutIterations: 0,
      data: data.nodes.map(node => ({
        name: node.name,
        type: node.type,
        level: node.level,
        itemStyle: {
          color: node.color,
          borderColor: node.level === 0 ? '#ffd700' : 'transparent',
          borderWidth: node.level === 0 ? 3 : 0
        }
      })),
      links: data.links.map(link => ({
        source: data.nodes[link.source]?.name,
        target: data.nodes[link.target]?.name,
        value: link.value,
        lineStyle: { color: 'source', opacity: 0.6, curveness: 0.5 }
      })),
      label: { color: 'rgba(0,0,0,0.7)', fontSize: 12 }
    }]
  };
}

const TransmissionChainAnalysis = ({ eventId }) => {
  // 状态管理
  const [graphData, setGraphData] = useState(null);
  const [sankeyData, setSankeyData] = useState(null);
  const [selectedNode, setSelectedNode] = useState(null);
  const [nodeDetail, setNodeDetail] = useState(null); // 新增：存储API获取的详细节点信息
  const [transmissionPath, setTransmissionPath] = useState([]);
  const [viewMode, setViewMode] = useState('graph');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [chartReady, setChartReady] = useState(false);
  const [isModalOpen, setIsModalOpen] = useState(false); // 新增：控制弹窗显示
  const [stats, setStats] = useState({
    totalNodes: 0,
    involvedIndustries: 0,
    relatedCompanies: 0,  
    positiveImpact: 0,
    negativeImpact: 0,
    circularEffect: 0
  });
  
  const containerRef = useRef(null);
  const modalBgColor = useColorModeValue('white', 'gray.800');
  const modalBorderColor = useColorModeValue('gray.200', 'gray.600');

  // 延迟初始化图表，确保DOM容器准备好
  useEffect(() => {
    const timer = setTimeout(() => {
      setChartReady(true);
    }, 100);
    return () => clearTimeout(timer);
  }, []);

  // 计算统计信息
  useEffect(() => {
    if (graphData && graphData.nodes) {
      setStats({
        totalNodes: graphData.nodes.length,
        involvedIndustries: graphData.nodes.filter(n => n.extra?.node_type === 'industry').length,
        relatedCompanies: graphData.nodes.filter(n => n.extra?.node_type === 'company').length,
        positiveImpact: graphData.edges?.filter(e => e.extra?.direction === 'positive').length || 0,
        negativeImpact: graphData.edges?.filter(e => e.extra?.direction === 'negative').length || 0,
        circularEffect: graphData.edges?.filter(e => e.extra?.is_circular).length || 0
      });
    }
  }, [graphData]);

  // 加载数据
  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      setError(null);
      try {
        console.log('开始加载传导链数据，eventId:', eventId);
        const [graphRes, sankeyRes] = await Promise.all([
          eventService.getTransmissionChainAnalysis(eventId),
          eventService.getSankeyData(eventId)
        ]);
        
        console.log('传导链数据API响应:', graphRes);
        console.log('桑基图数据API响应:', sankeyRes);
        
        if (graphRes.success && graphRes.data) {
          console.log('传导链节点数据:', graphRes.data.nodes);
          console.log('传导链边数据:', graphRes.data.edges);
          setGraphData(graphRes.data);
        } else {
          console.log('传导链数据加载失败:', graphRes);
          setGraphData(null);
        }
        
        if (sankeyRes.success && sankeyRes.data) {
          console.log('桑基图数据:', sankeyRes.data);
          setSankeyData(sankeyRes.data);
        } else {
          console.log('桑基图数据加载失败:', sankeyRes);
          setSankeyData(null);
        }
      } catch (e) {
        console.error('传导链数据加载异常:', e);
        setError('加载传导链数据失败');
      } finally {
        setLoading(false);
      }
    }
    
    if (eventId) {
      fetchData();
    }
  }, [eventId]);

  // BFS路径查找 - 完全复刻Flask版本
  function findPath(nodes, edges, fromId, toId) {
    const adj = {};
    edges.forEach(e => {
      if (!adj[e.source]) adj[e.source] = [];
      adj[e.source].push(e.target);
    });
    
    const queue = [[fromId, [nodes.find(n => String(n.id) === String(fromId))]]];
    const visited = new Set([fromId]);
    
    while (queue.length > 0) {
      const [current, path] = queue.shift();
      if (String(current) === String(toId)) {
        return path;
      }
      
      (adj[current] || []).forEach(next => {
        if (!visited.has(next)) {
          visited.add(next);
          const nextNode = nodes.find(n => String(n.id) === String(next));
          if (nextNode) {
            queue.push([next, [...path, nextNode]]);
          }
        }
      });
    }
    return [];
  }

  // 获取节点详情 - 完全复刻Flask版本API调用
  async function getChainNodeDetail(nodeId) {
    try {
      const response = await fetch(`/api/events/${eventId}/chain-node/${nodeId}`);
      const result = await response.json();
      if (result.success) {
        return result.data;
      } else {
        console.error('获取节点详情失败:', result.message);
        return null;
      }
    } catch (error) {
      console.error('API调用异常:', error);
      return null;
    }
  }

    // 力导向图节点点击事件
  const handleGraphNodeClick = async (params) => {
    console.log('点击事件详情:', params);
    
    // 处理节点点击（包括节点本体和标签）
    if ((params.dataType === 'node' || params.componentType === 'series') && params.data && params.data.id) {
      console.log('点击图表节点:', params.data.id, 'dataType:', params.dataType, 'componentType:', params.componentType);
      
      // 获取基本节点信息
      const clickedNode = graphData.nodes.find(n => String(n.id) === String(params.data.id));
      if (clickedNode) {
        setSelectedNode(clickedNode);
        
        // 计算传导路径
  const mainEventNode = graphData?.nodes?.find(n => n.extra?.is_main_event);
        if (mainEventNode && String(clickedNode.id) !== String(mainEventNode.id)) {
          const path = findPath(graphData.nodes, graphData.edges, mainEventNode.id, clickedNode.id);
          setTransmissionPath(path);
        } else {
          setTransmissionPath([]);
        }
        
        // 获取详细节点信息（包括parents和children）
        console.log('开始获取节点详情，节点ID:', params.data.id);
        const detail = await getChainNodeDetail(params.data.id);
        console.log('获取到的节点详情:', detail);
        setNodeDetail(detail);
        
        // 打开弹窗
        setIsModalOpen(true);
      }
    }
    // 如果点击的是空白区域，也尝试查找最近的节点
    else if (params.componentType === 'series' && !params.data) {
      console.log('点击了图表空白区域');
      // 这里可以添加点击空白区域的处理逻辑
    }
  };

  // 桑基图节点点击事件
  const handleSankeyNodeClick = async (params) => {
    if (params.dataType === 'node' && params.data && params.data.name) {
      console.log('点击桑基图节点:', params.data.name);
      
      // 通过名称在原始数据中查找对应的节点
      if (graphData && graphData.nodes) {
        const clickedNode = graphData.nodes.find(n => n.name === params.data.name);
        if (clickedNode) {
          console.log('找到对应节点:', clickedNode);
          setSelectedNode(clickedNode);
          
          // 计算传导路径
          const mainEventNode = graphData?.nodes?.find(n => n.extra?.is_main_event);
          if (mainEventNode && String(clickedNode.id) !== String(mainEventNode.id)) {
            const path = findPath(graphData.nodes, graphData.edges, mainEventNode.id, clickedNode.id);
            setTransmissionPath(path);
    } else {
            setTransmissionPath([]);
          }
          
          // 获取详细节点信息（包括parents和children）
          console.log('开始获取桑基图节点详情，节点ID:', clickedNode.id);
          const detail = await getChainNodeDetail(clickedNode.id);
          console.log('获取到的桑基图节点详情:', detail);
          setNodeDetail(detail);
          
          // 打开弹窗
          setIsModalOpen(true);
        } else {
          console.log('未找到对应的节点数据');
          // 创建一个临时节点信息用于显示
          const tempNode = {
            id: params.data.name,
            name: params.data.name,
            extra: {
              node_type: params.data.type,
              description: `桑基图节点 - ${params.data.name}`,
              importance_score: 'N/A'
            }
          };
          setSelectedNode(tempNode);
          setTransmissionPath([]);
          setNodeDetail(null);
          
          // 打开弹窗
          setIsModalOpen(true);
        }
      }
    }
  };

  return (
    <Box p={6}>
      {/* 统计信息条 */}
      <Box mb={4}>
        <HStack spacing={6} wrap="wrap">
          <Stat>
            <StatLabel>总节点数</StatLabel>
            <StatNumber>{stats.totalNodes}</StatNumber>
          </Stat>
          <Stat>
            <StatLabel>涉及行业</StatLabel>
            <StatNumber>{stats.involvedIndustries}</StatNumber>
          </Stat>
          <Stat>
            <StatLabel>相关公司</StatLabel>
            <StatNumber>{stats.relatedCompanies}</StatNumber>
          </Stat>
          <Stat>
            <StatLabel>正向影响</StatLabel>
            <StatNumber color="green.500">{stats.positiveImpact}</StatNumber>
          </Stat>
          <Stat>
            <StatLabel>负向影响</StatLabel>
            <StatNumber color="red.500">{stats.negativeImpact}</StatNumber>
          </Stat>
          <Stat>
            <StatLabel>循环效应</StatLabel>
            <StatNumber color="purple.500">{stats.circularEffect}</StatNumber>
          </Stat>
        </HStack>
      </Box>

      {/* 自定义图例 */}
      <Box mb={4}>
        <HStack spacing={4} wrap="wrap">
          {Object.entries(NODE_STYLES).map(([type, style]) => (
            <Tag key={type} size="md">
              <Box w={3} h={3} bg={style.color} borderRadius="sm" mr={2} />
              {NODE_TYPE_LABELS[type] || type}
            </Tag>
          ))}
        </HStack>
      </Box>

      {/* 视图切换按钮 */}
      <Flex mb={4} gap={2}>
        <Button
          colorScheme={viewMode === 'graph' ? 'blue' : 'gray'}
          onClick={() => setViewMode('graph')}
          size="sm"
        >
          力导向图
        </Button>
        <Button
          colorScheme={viewMode === 'sankey' ? 'blue' : 'gray'}
          onClick={() => setViewMode('sankey')}
          size="sm"
        >
          桑基图
        </Button>

      </Flex>

      {loading && (
        <Flex justify="center" align="center" h="400px">
          <Spinner size="xl" />
        </Flex>
      )}

      {error && (
        <Alert status="error" mb={4}>
          <AlertIcon />
          {error}
        </Alert>
      )}

      {!loading && !error && (
        <Box>
          {/* 提示信息 */}
          <Alert status="info" mb={4} borderRadius="md">
            <AlertIcon />
            <Text fontSize="sm">
              <Icon as={ViewIcon} mr={2} />
              点击图表中的节点可以查看详细信息
            </Text>
          </Alert>
          
          {/* 图表容器 */}
          <Box 
            h={viewMode === 'sankey' ? "600px" : "700px"}
            border="1px solid"
            borderColor="gray.300"
            borderRadius="lg"
            boxShadow="md"
            bg="white"
            p={4}
            ref={containerRef}
          >
            {chartReady && (
              <>
                {viewMode === 'graph' ? (
                  <ReactECharts 
                    option={graphData ? getGraphOption(graphData) : {}}
                    style={{ height: '100%', width: '100%' }} 
                    onEvents={{
                      click: handleGraphNodeClick,
                      // 添加更多事件以提高点击敏感性
                      mouseover: (params) => {
                        console.log('鼠标悬停:', params);
                        // 可以在这里添加悬停效果
                      },
                      mouseout: (params) => {
                        // 鼠标离开的处理
                      }
                    }}
                    opts={{ 
                      renderer: 'canvas',
                      devicePixelRatio: window.devicePixelRatio || 1
                    }}
                    lazyUpdate={true}
                    notMerge={false}
                    shouldSetOption={(prevProps, props) => {
                      // 减少不必要的重新渲染
                      return JSON.stringify(prevProps.option) !== JSON.stringify(props.option);
                    }}
                  />
                ) : (
                  <ReactECharts 
                    option={sankeyData ? getSankeyOption(sankeyData) : {}}
                    style={{ height: '100%', width: '100%' }}
                    onEvents={{
                      click: handleSankeyNodeClick,
                      // 添加更多事件以提高点击敏感性
                      mouseover: (params) => {
                        console.log('桑基图鼠标悬停:', params);
                        // 可以在这里添加悬停效果
                      },
                      mouseout: (params) => {
                        // 鼠标离开的处理
                      }
                    }}
                    opts={{ 
                      renderer: 'canvas',
                      devicePixelRatio: window.devicePixelRatio || 1
                    }}
                    lazyUpdate={true}
                    notMerge={false}
                    shouldSetOption={(prevProps, props) => {
                      // 减少不必要的重新渲染
                      return JSON.stringify(prevProps.option) !== JSON.stringify(props.option);
                    }}
                  />
                )}
              </>
            )}
          </Box>
        </Box>
      )}
      
      {/* 节点详情弹窗 */}
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} size="xl">
        <ModalOverlay />
        <ModalContent maxH="80vh" bg={modalBgColor}>
          <ModalHeader borderBottom="1px solid" borderColor={modalBorderColor}>
            <HStack justify="space-between">
              <Text>{selectedNode ? '节点详情' : '传导链分析'}</Text>
              {selectedNode && (
                <Badge colorScheme="blue">{NODE_TYPE_LABELS[selectedNode.extra?.node_type] || selectedNode.extra?.node_type}</Badge>
              )}
            </HStack>
          </ModalHeader>
          <ModalCloseButton />
          
          <ModalBody overflowY="auto">
            {selectedNode ? (
              <VStack align="stretch" spacing={4}>
                {/* 节点基本信息 */}
                <Box>
                  <Text fontWeight="bold" mb={2} color="blue.600">基本信息</Text>
                  <VStack align="stretch" spacing={2}>
                    <HStack align="center">
                      <Text fontSize="sm"><strong>名称:</strong> {selectedNode.name}</Text>
                      {selectedNode.extra?.is_main_event && (
                        <Badge colorScheme="red" variant="solid" size="sm">主事件</Badge>
                      )}
                    </HStack>
                    
                    <Text fontSize="sm"><strong>类型:</strong> {NODE_TYPE_LABELS[selectedNode.extra?.node_type] || selectedNode.extra?.node_type}</Text>
                    <Text fontSize="sm"><strong>重要性评分:</strong> {selectedNode.extra?.importance_score || 'N/A'}</Text>
                    
                    {selectedNode.extra?.stock_code && (
                      <Text fontSize="sm"><strong>股票代码:</strong> 
                        <Badge colorScheme="cyan" ml={2}>{selectedNode.extra.stock_code}</Badge>
                      </Text>
                    )}
                    
                    {nodeDetail ? (
                      <HStack spacing={4}>
                        <Badge colorScheme="gray">
                          总连接: {nodeDetail.node.total_connections || 0}
                        </Badge>
                        <Badge colorScheme="green">
                          来源: {nodeDetail.node.incoming_connections || 0}
                        </Badge>
                        <Badge colorScheme="orange">
                          目标: {nodeDetail.node.outgoing_connections || 0}
                        </Badge>
                      </HStack>
                    ) : (
                      <HStack spacing={4}>
                        <Badge colorScheme="gray">
                          总连接: {graphData ? graphData.edges.filter(e => 
                            String(e.source) === String(selectedNode.id) || String(e.target) === String(selectedNode.id)
                          ).length : 0}
                        </Badge>
                        <Badge colorScheme="green">
                          来源: {graphData ? graphData.edges.filter(e => 
                            String(e.target) === String(selectedNode.id)
                          ).length : 0}
                        </Badge>
                        <Badge colorScheme="orange">
                          目标: {graphData ? graphData.edges.filter(e => 
                            String(e.source) === String(selectedNode.id)
                          ).length : 0}
                        </Badge>
                      </HStack>
                    )}
                  </VStack>
                </Box>

                {/* 节点描述 */}
                {selectedNode.extra?.description && (
                  <Box>
                    <Text fontWeight="bold" mb={2} color="blue.600">描述</Text>
                    <Box 
                      fontSize="sm" 
                      color="gray.600" 
                      borderLeft="3px solid"
                      borderColor="blue.200"
                      pl={3}
                      bg="gray.50"
                      p={2}
                      borderRadius="md"
                      fontStyle="italic"
                    >
                      {selectedNode.extra.description}（AI合成）
                    </Box>
                  </Box>
                )}

                {/* 传导路径 */}
                {transmissionPath && transmissionPath.length > 0 && (
                  <Box>
                    <Text fontWeight="bold" mb={2} color="blue.600">传导路径</Text>
                    <Box bg="gray.50" p={3} borderRadius="md" borderLeft="4px solid" borderColor="blue.500">
                      <List spacing={1}>
                        {transmissionPath.map((node, index) => (
                          <ListItem key={index} fontSize="sm">
                            {index === 0 && '🚀 '}
                            {index === transmissionPath.length - 1 && '🎯 '}
                            {index > 0 && index < transmissionPath.length - 1 && '➡️ '}
                            {node.name}
                          </ListItem>
                        ))}
                      </List>
                    </Box>
                  </Box>
                )}
                
                {/* 影响来源 */}
                {(() => {
                  const sourcesFromAPI = nodeDetail && nodeDetail.parents && nodeDetail.parents.length > 0;
                  const sourcesFromGraph = graphData && graphData.edges.filter(e => 
                    String(e.target) === String(selectedNode.id)
                  ).length > 0;
                  
                  if (sourcesFromAPI) {
                    return (
                      <Box>
                        <Text fontWeight="bold" mb={2} color="blue.600">
                          影响来源 ({nodeDetail.parents.length})（AI合成）
                        </Text>
                        <List spacing={2}>
                          {nodeDetail.parents.map((parent, index) => (
                            <ListItem key={index} p={2} bg="gray.50" borderRadius="md" borderLeft="3px solid" borderColor="green.300">
                              <HStack justify="space-between" align="flex-start">
                                <VStack align="stretch" spacing={1} flex={1}>
                                  <Text fontWeight="bold" fontSize="sm">{parent.name}</Text>
                                  {parent.transmission_mechanism_citation?.data ? (
                                    <Box fontSize="xs">
                                      <Text as="span" fontWeight="bold">机制: </Text>
                                      <CitedContent
                                        data={parent.transmission_mechanism_citation.data}
                                        title=""
                                        showAIBadge={false}
                                        containerStyle={{ backgroundColor: 'transparent', padding: 0, display: 'inline' }}
                                      />
                                    </Box>
                                  ) : parent.transmission_mechanism ? (
                                    <Text fontSize="xs" color="gray.600">
                                      机制: {parent.transmission_mechanism}（AI合成）
                                    </Text>
                                  ) : null}
                                </VStack>
                                <HStack spacing={2}>
                                  <Badge colorScheme={parent.direction === 'positive' ? 'green' : parent.direction === 'negative' ? 'red' : 'gray'} size="sm">
                                    {parent.direction}
                                  </Badge>
                                  {parent.is_circular && (
                                    <Badge colorScheme="purple" size="sm">🔄 循环</Badge>
                                  )}
                                </HStack>
                              </HStack>
                            </ListItem>
                          ))}
                        </List>
                      </Box>
                    );
                  }
                  return null;
                })()}
                
                {/* 影响输出 */}
                {(() => {
                  const targetsFromAPI = nodeDetail && nodeDetail.children && nodeDetail.children.length > 0;
                  
                  if (targetsFromAPI) {
                    return (
                      <Box>
                        <Text fontWeight="bold" mb={2} color="blue.600">
                          影响输出 ({nodeDetail.children.length})
                        </Text>
                        <List spacing={2}>
                          {nodeDetail.children.map((child, index) => (
                            <ListItem key={index} p={2} bg="gray.50" borderRadius="md" borderLeft="3px solid" borderColor="orange.300">
                              <HStack justify="space-between" align="flex-start">
                                <VStack align="stretch" spacing={1} flex={1}>
                                  <Text fontWeight="bold" fontSize="sm">{child.name}</Text>
                                  {child.transmission_mechanism?.data ? (
                                    <Box fontSize="xs">
                                      <Text as="span" fontWeight="bold">机制: </Text>
                                      <CitedContent
                                        data={child.transmission_mechanism.data}
                                        title=""
                                        showAIBadge={false}
                                        containerStyle={{ backgroundColor: 'transparent', padding: 0, display: 'inline' }}
                                      />
                                    </Box>
                                  ) : child.transmission_mechanism ? (
                                    <Text fontSize="xs" color="gray.600">
                                      机制: {child.transmission_mechanism}（AI合成）
                                    </Text>
                                  ) : null}
                                </VStack>
                                <HStack spacing={2}>
                                  <Badge colorScheme={child.direction === 'positive' ? 'green' : child.direction === 'negative' ? 'red' : 'gray'} size="sm">
                                    {child.direction}
                                  </Badge>
                                </HStack>
                              </HStack>
                            </ListItem>
                          ))}
                        </List>
                      </Box>
                    );
                  }
                  return null;
                })()}
              </VStack>
            ) : (
              <VStack align="center" justify="center" h="300px" spacing={4}>
                <Text fontSize="lg" color="gray.500">传导链分析</Text>
                <Text fontSize="sm" color="gray.400" textAlign="center">
                  点击图表中的节点查看详细信息
                </Text>
              </VStack>
            )}
          </ModalBody>
          
          <ModalFooter borderTop="1px solid" borderColor={modalBorderColor}>
            <Button onClick={() => setIsModalOpen(false)}>关闭</Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </Box>
  );
};

export default TransmissionChainAnalysis;