// @ts-nocheck
import * as d3 from 'd3';
import './d3.css';

export const drawGraph = (graphData) => {
  // 初始配置：宽度和高度通过容器自适应
  const svg = d3.select('.ai-graph');
  
  const margin = { top: 20, right: 20, bottom: 20, left: 20 };
  
  const updateChartSize = () => {
    const width = svg.node().clientWidth - margin.left - margin.right;
    const height = svg.node().clientHeight - margin.top - margin.bottom;
    
    svg.attr('viewBox', `0 0 ${width} ${height}`);
    
    return { width, height };
  };

  let { width, height } = updateChartSize();

  // 使用力导向布局
  const simulation = d3
    .forceSimulation(graphData.nodes)
    .force(
      'link',
      d3
        .forceLink(graphData.links)
        .id((d) => d.id)
        .distance(100)
    )
    .force('charge', d3.forceManyBody().strength(-300))
    .force('center', d3.forceCenter(width / 2, height / 2))
    .force('collide', d3.forceCollide(20));  // 防止节点重叠，半径设置为20

  // 绘制连线
  const link = svg.append('g')
    .selectAll('line')
    .data(graphData.links)
    .enter()
    .append('line')
    .attr('class', 'link');

  // 绘制节点
  const node = svg.append('g')
    .selectAll('g')
    .data(graphData.nodes)
    .enter()
    .append('g')
    .attr('class', 'node');

  node.append('circle').attr('r', 10);

  // 添加节点标签
  node
    .append('text')
    .attr('dx', 12)
    .attr('dy', '.35em')
    .text((d) => d.label);

  // 限制节点在SVG范围内
  const clampPosition = (d, width, height) => {
    d.x = Math.max(10, Math.min(width - 10, d.x));  // 10为节点半径
    d.y = Math.max(10, Math.min(height - 10, d.y));
  };

  // 更新节点和连线位置
  simulation.on('tick', () => {
    link
      .attr('x1', (d) => d.source.x)
      .attr('y1', (d) => d.source.y)
      .attr('x2', (d) => d.target.x)
      .attr('y2', (d) => d.target.y);

    node.attr('transform', (d) => {
      // 限制节点在SVG内部
      clampPosition(d, width, height);
      return `translate(${d.x},${d.y})`;
    });
  });

  // 添加拖拽事件
  node.call(
    d3
      .drag()
      .on('start', (event, d) => {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
      })
      .on('drag', (event, d) => {
        d.fx = event.x;
        d.fy = event.y;
      })
      .on('end', (event, d) => {
        if (!event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
      })
  );

  // 添加双击事件
  node.on('dblclick', (event, d) => {
    d.fx = null;
    d.fy = null;
    console.log('dblclick', d);
  });

  // 监听窗口大小变化时更新图表
  const resize = () => {
    const { width, height } = updateChartSize();
    simulation.force('center', d3.forceCenter(width / 2, height / 2));
    simulation.alpha(1).restart(); // 重启仿真以更新布局
  };

  window.addEventListener('resize', resize);

  // 在需要的时候手动调用，销毁图表时可以移除监听
  return () => {
    window.removeEventListener('resize', resize);
  };
};
