/*
 * This file is part of the kernelstudio package.
 *
 * (c) 2014-2025 zlin <admin@kernelstudio.com>
 *
 * For the full copyright and license information, please view the LICENSE file
 * that was distributed with this source code.
 */

import { computed, type ComputedRef, ref, type Ref, nextTick } from 'vue';
import { type Dom, Graph, Node } from '@antv/x6';
import type { NodeViewPositionEventArgs } from '@antv/x6/es/view/node/type';
import { createGraphCanvas } from './canvas';
import { EventListener } from '@/utils/event';
import type { ModelElement } from './element';

// import {createLineOptions} from './line'

export interface UseGraphCanvas {
  container: Ref<HTMLDivElement | null>;
  readonly: boolean;
  eventListener: EventListener;
  currentZoom: Ref<number>;
  graph: ComputedRef<Graph>;
  zoomIn: () => void;
  zoomOut: () => void;
  destroyGraph: () => void;
  clearGraph: () => void;
  fitToScreen: () => void;
  centerContent: () => void;
  resizeCanvas: () => void;
  handleGraphEvent: (name: string, fn: Function) => void;
  emitGraphEvent: (name: string, options?: any) => void;
  createCanvas: (c: HTMLDivElement) => Graph;
}

export const useGraphCanvas = (readonly: boolean = false): UseGraphCanvas => {

  const graph = ref<Graph | null>(null);
  const container = ref<HTMLDivElement | null>(null);
  const eventListener = new EventListener();
  const currentZoom = ref<number>(0);


  const clearGraph = ()=> {
    if (graph.value) {
      try {
        // graph.value.off();
        graph.value.clearCells();
      } catch (e) {
        console.error('清空画布失败:', e);
      }
    }
  }

  const destroyGraph = ()=> {
    eventListener.clear();
    if (graph.value) {
      clearGraph();

      // 同步销毁 Graph 实例，避免异步导致的竞态条件
      graph.value.dispose();
      graph.value = null;
      if (container.value) {
        container.value.innerHTML = ''; // 清空容器内容
      }
    } else if (container.value) {
      container.value.innerHTML = '';
    }
  }

  const handleGraphEvent = (name: string, fn: Function) => {
    eventListener.on(name, fn);
  };

  const emitGraphEvent = (name: string, options?: any): void => {
    eventListener.emit(name, options);
  };

  const zoomIn = (): void => {
    if (graph.value) {
      const zoom = graph.value.zoom();
      graph.value.zoom(zoom + 0.1);
    }
  };

  const zoomOut = (): void => {
    if (graph.value) {
      const zoom = graph.value.zoom();
      graph.value.zoom(Math.max(0.1, zoom - 0.1));
    }
  };

  const fitToScreen = () => {
    if (graph.value) {
      graph.value.zoomToFit({ padding: 20 });
    }
  };

  const centerContent = () => {
    if (graph.value) {
      graph.value.centerContent();
    }
  };

  const resizeCanvas = () => {
    if (graph.value) {
      graph.value?.resize();
    }
  };

  const initEvents = () => {
    if (!graph.value) {
      return;
    }
    graph.value.on('keydown', ({ e }: any) => {
      if (e.key === 'Delete' || e.key === 'Backspace') {
        const cells = graph.value?.getSelectedCells();
        if (cells && cells.length) {
          graph.value?.removeCells(cells);
          // 通知父组件更新状态
          emitGraphEvent('cells:removed', cells);
        }
      }
    });

    graph.value.on('scale', (ctx) => {
      currentZoom.value = ctx.sx;
      emitGraphEvent('scale', ctx);
    });

    // 监听画布空白点击
    graph.value.on('blank:click', () => {
      graph.value?.cleanSelection();
      emitGraphEvent('blank:click');
    });

    // 监听连线删除
    graph.value.on('edge:removed', ({ edge }) => {
      emitGraphEvent('edge:removed', edge); // 添加此行
    });

    graph.value.on('edge:added', ({ edge }) => {
      // const lineOptions = createLineOptions();
      // edge.setAttrs(lineOptions.attrs);
      // edge.set(lineOptions.animation);
      // edge.setMarkup(lineOptions.markup);
      emitGraphEvent('edge:added', edge); // 添加此行
    });

    graph.value.on('edge:contextmenu', (ctx) => {
      emitGraphEvent('edge:contextmenu', ctx);
    });

    graph.value.on('edge:connect:abort', () => {
      // 当连线被拖拽到空白区域后释放，自动移除这条无效连线
      const edges = graph.value?.getEdges();
      const invalidEdges = (edges ?? []).filter(edge =>
        !edge.getSourceCell() || !edge.getTargetCell(),
      );
      if (invalidEdges.length) {
        graph.value?.removeCells(invalidEdges);
      }
    });

    // 监听连接失败
    graph.value.on('edge:connect:invalid', () => {
      emitGraphEvent('edge:connect:invalid');
    });

    graph.value.on('edge:click', (edge) => {
      emitGraphEvent('edge:connect:invalid', edge);
    });

    graph.value.on('edge:connected', ({ edge }) => {
      const sourceNode = edge.getSourceCell() as Node;
      const targetNode = edge.getTargetCell() as Node;

      if (sourceNode && targetNode) {
        const sourceData = sourceNode.getData() as ModelElement;
        const targetData = targetNode.getData() as ModelElement;

        // 将连线存储到节点数据中
        const sourceEdges = sourceData.edges || [];
        const existingEdge = sourceEdges.find(e => e.target === targetNode.id);

        if (!existingEdge) {
          sourceEdges.push({
            id: sourceData.id,
            key: edge.id,
            source: sourceNode.id,
            sourceName: sourceData.name,
            connector: {},
            router: {},
            attrs: {},
            target: targetNode.id,
            targetName: targetData.name,
          });
          sourceNode.replaceData({ ...sourceData, edges: sourceEdges });
        }
      }

      edge.attr('line/stroke', '#3b82f6');  // 显式设置颜色
      edge.attr('line/strokeWidth', 2);     // 显式设置宽度
      // edge.refresh()                       // 刷新连线
      // graph.paint()                      // 重绘画布

      emitGraphEvent('edge:connected', edge);
    });

    graph.value.on('node:click', (ctx: NodeViewPositionEventArgs<Dom.ClickEvent>) => {
      console.info('node click', ctx);
      emitGraphEvent('node:click', ctx);
    });

    graph.value.on('node:dblclick', (ctx: NodeViewPositionEventArgs<Dom.ClickEvent>) => {
      console.info('node:dblclick', ctx);
      emitGraphEvent('node:dblclick', ctx);
    });

    // 监听节点选中事件
    graph.value.on('node:selected', ({ node }) => {
      console.info('node select', node,node.getData());
      
      emitGraphEvent('node:selected', node);
    });

    // 监听节点取消选中
    graph.value.on('node:unselected', () => {
      emitGraphEvent('node:unselected');
    });

    // 监听节点鼠标移入，显示连接点
    graph.value.on('node:mouseenter', (ctx) => {
      emitGraphEvent('node:mouseenter', ctx);
    });

    // 监听节点鼠标移出，隐藏连接点
    graph.value.on('node:mouseleave', (ctx) => {
      emitGraphEvent('node:mouseleave', ctx);
    });

    // 监听节点状态变化
    graph.value.on('node:change:data', (ctx) => {
      const edges = graph.value?.getIncomingEdges(ctx.node);
      const { status } = ctx.node.getData();
      edges?.forEach((edge) => {
        if (status === 'running') {
          edge.attr('line/strokeDasharray', 5);
          edge.attr('line/style/animation', 'running-line 30s infinite linear');
        } else {
          edge.attr('line/strokeDasharray', '');
          edge.attr('line/style/animation', '');
        }
      });
      emitGraphEvent('node:change:data', ctx);
    });

  };

  const createCanvas = (c: HTMLDivElement): Graph => {
    container.value = c;

    graph.value = createGraphCanvas(c, readonly);
    initEvents();

    emitGraphEvent('created', graph.value);

    return graph.value as Graph;
  };

  const graphInstance = computed(() => graph.value);

  return {
    container,
    readonly,
    destroyGraph,
    clearGraph,
    graph: graphInstance,
    eventListener,
    currentZoom,

    emitGraphEvent,
    handleGraphEvent,

    zoomIn,
    zoomOut,
    fitToScreen,
    centerContent,
    resizeCanvas,
    createCanvas,
  } as UseGraphCanvas;
};