import React, {useEffect, useState, useRef} from 'react';
import {createRoot} from 'react-dom/client';
import {useParams, useNavigate} from 'react-router-dom';
import {Button, Space, Card, Row, Col, message, Modal, Collapse, Tooltip, Dropdown} from 'antd';
import {
    ArrowLeftOutlined,
    SaveOutlined,
    PlayCircleOutlined,
    CopyOutlined,
    DeleteOutlined,
    UndoOutlined,
    RedoOutlined,
    ScissorOutlined,
    SnippetsOutlined,
    SelectOutlined,
    ZoomInOutlined,
    ZoomOutOutlined,
} from '@ant-design/icons';
import {Graph, Cell} from '@antv/x6';
import '@antv/x6-plugin-snapline';
import '@antv/x6-plugin-selection';
import '@antv/x6-plugin-keyboard';
import '@antv/x6-plugin-history';
import '@antv/x6-plugin-clipboard';
import '@antv/x6-plugin-transform';
import {Selection} from '@antv/x6-plugin-selection';
import {MiniMap} from '@antv/x6-plugin-minimap';
import {Clipboard} from '@antv/x6-plugin-clipboard';
import {History} from '@antv/x6-plugin-history';
import {Transform} from '@antv/x6-plugin-transform';
import {getDefinitionDetail, saveDefinition} from '../service';
import {getNodeDefinitionList} from './service';
import NodePanel from './components/NodePanel';
import NodeConfigDrawer from './components/NodeConfigModal';
import {NodeDefinition} from './types';
import {validateWorkflow} from './utils/validator';
import {addNodeToGraph} from './utils/nodeUtils';
import {applyAutoLayout} from './utils/layoutUtils';
import {
    GRID_CONFIG,
    CONNECTING_CONFIG,
    HIGHLIGHTING_CONFIG,
    DEFAULT_STYLES,
} from './constants';
import './index.less';
import {NodeDefinitionResponse, NodeDesignDataResponse} from "@/pages/Workflow/NodeDesign/types";

const WorkflowDesign: React.FC = () => {
    const {id} = useParams<{ id: string }>();
    const navigate = useNavigate();
    const [title, setTitle] = useState<string>('工作流设计');
    const graphContainerRef = useRef<HTMLDivElement>(null);
    const minimapContainerRef = useRef<HTMLDivElement>(null);
    const [graph, setGraph] = useState<Graph | null>(null);
    const [selectedNode, setSelectedNode] = useState<Cell | null>(null);
    const [selectedNodeDefinition, setSelectedNodeDefinition] = useState<NodeDefinitionResponse | null>(null);
    const [configModalVisible, setConfigModalVisible] = useState(false);
    const [definitionData, setDefinitionData] = useState<any>(null);
    const [nodeDefinitions, setNodeDefinitions] = useState<NodeDefinitionResponse[]>([]);
    const [isNodeDefinitionsLoaded, setIsNodeDefinitionsLoaded] = useState(false);
    const [forceUpdate, setForceUpdate] = useState(false);
    const [scale, setScale] = useState(1);

    // 初始化图形
    const initGraph = () => {
        if (!graphContainerRef.current) return;

        // 获取主画布容器尺寸
        const container = graphContainerRef.current;
        const containerWidth = container.clientWidth;
        const containerHeight = container.clientHeight;

        // 计算主画布和小地图的尺寸比例
        const MINIMAP_BASE_WIDTH = 200;
        const minimapWidth = MINIMAP_BASE_WIDTH;
        const minimapHeight = Math.round((MINIMAP_BASE_WIDTH * containerHeight) / containerWidth);

        // 计算缩放比例
        const scale = minimapWidth / containerWidth;

        // 将尺寸信息保存到样式变量中
        document.documentElement.style.setProperty('--minimap-width', `${minimapWidth}px`);
        document.documentElement.style.setProperty('--minimap-height', `${minimapHeight}px`);

        const graph = new Graph({
            container: graphContainerRef.current,
            grid: {
                size: 10,
                visible: true,
                type: 'dot',
                args: {
                    color: '#a0a0a0',
                    thickness: 1,
                },
            },
            connecting: {
                snap: true,  // 连线时自动吸附
                allowBlank: false,  // 禁止连线到空白位置
                allowLoop: false,   // 禁止自环
                allowNode: false,   // 禁止连接到节点（只允许连接到连接桩）
                allowEdge: false,   // 禁止边连接到边
                connector: {
                    name: 'rounded',
                    args: {
                        radius: 8
                    }
                },
                router: {
                    name: 'manhattan',
                    args: {
                        padding: 1
                    }
                },
                validateConnection({sourceCell, targetCell, sourceMagnet, targetMagnet}) {
                    if (sourceCell === targetCell) {
                        return false;
                    }
                    if (!sourceMagnet || !targetMagnet) {
                        return false;
                    }
                    // 检查是否已存在相同的连接
                    const edges = graph.getEdges();
                    const exists = edges.some(edge => {
                        const source = edge.getSource();
                        const target = edge.getTarget();
                        return (
                            source.cell === sourceCell.id &&
                            target.cell === targetCell.id &&
                            source.port === sourceMagnet.getAttribute('port') &&
                            target.port === targetMagnet.getAttribute('port')
                        );
                    });
                    return !exists;
                },
                validateMagnet({magnet}) {
                    return magnet.getAttribute('port-group') !== 'top';
                },
                validateEdge({edge}) {
                    return true;
                }
            },
            highlighting: {
                magnetAvailable: {
                    name: 'stroke',
                    args: {
                        padding: 4,
                        attrs: {
                            strokeWidth: 4,
                            stroke: '#52c41a',
                        },
                    },
                },
            },
            clipboard: {
                enabled: true,
            },
            selecting: {
                enabled: true,
                multiple: true,
                rubberband: true,
                movable: true,
                showNodeSelectionBox: false,  // 禁用节点选择框
                showEdgeSelectionBox: false,  // 禁用边选择框
                selectNodeOnMoved: false,
                selectEdgeOnMoved: false,
            },
            snapline: true,
            keyboard: {
                enabled: true,
            },
            panning: {
                enabled: true,
                eventTypes: ['rightMouseDown'], // 右键按下时启用画布拖拽
            },
            mousewheel: {
                enabled: true,
                modifiers: ['ctrl', 'meta'],
                minScale: 0.2,
                maxScale: 2,
            },
        });

        // 注册插件
        const history = new History({
            enabled: true,
            beforeAddCommand(event: any, args: any) {
                return true;
            },
            afterExecuteCommand: () => {
                // 强制更新组件状态
                setForceUpdate(prev => !prev);
            },
            afterUndo: () => {
                // 强制更新组件状态
                setForceUpdate(prev => !prev);
            },
            afterRedo: () => {
                // 强制更新组件状态
                setForceUpdate(prev => !prev);
            },
        });

        // 初始化Selection插件
        const selection = new Selection({
            enabled: true,
            multiple: true,
            rubberband: true,
            movable: true,
            showNodeSelectionBox: false,  // 禁用节点选择框
            showEdgeSelectionBox: false,  // 禁用边选择框
            selectNodeOnMoved: false,
            selectEdgeOnMoved: false,
            multipleSelectionModifiers: ['ctrl', 'meta'],
            showEdgeSelectionBox: false,
            showAnchorSelectionBox: false,
            pointerEvents: 'auto'
        });
        graph.use(selection);
        graph.use(new MiniMap({
            container: minimapContainerRef.current!,
            width: minimapWidth,
            height: minimapHeight,
            padding: 5,
            scalable: false,
            minScale: scale * 0.8, // 稍微缩小一点以显示更多内容
            maxScale: scale * 1.2,
            graphOptions: {
                connecting: {
                    connector: 'rounded',
                    connectionPoint: 'anchor',
                    router: {
                        name: 'manhattan',
                    },
                },
                async: true,
                frozen: true,
                interacting: false,
                grid: false
            },
            viewport: {
                padding: 0,
                fitToContent: false, // 禁用自动适配内容
                initialPosition: { // 初始位置与主画布保持一致
                    x: 0,
                    y: 0
                },
                initialScale: scale
            }
        }));
        graph.use(new Clipboard());
        graph.use(history);
        graph.use(
            new Transform({
                resizing: false,
                rotating: false,
            })
        );

        // 扩展 graph 对象，添加 history 属性
        (graph as any).history = history;

        // 监听图形变化
        graph.on('cell:added', ({cell}) => {
            const canUndo = history.canUndo();
            const canRedo = history.canRedo();
            // 强制更新组件状态
            setForceUpdate(prev => !prev);
        });

        graph.on('cell:removed', ({cell}) => {
            const canUndo = history.canUndo();
            const canRedo = history.canRedo();
            console.log('Cell removed:', {
                cell,
                canUndo,
                canRedo,
                stackSize: history.stackSize,
            });
            // 强制更新组件状态
            setForceUpdate(prev => !prev);
        });

        graph.on('cell:changed', ({cell, options}) => {
            const canUndo = history.canUndo();
            const canRedo = history.canRedo();
            // 强制更新组件状态
            setForceUpdate(prev => !prev);
        });

        // 监听主画布变化，同步更新小地图
        graph.on('transform', () => {
            const minimap = graph.getPlugin('minimap') as MiniMap;
            if (minimap) {
                const mainViewport = graph.getView().getVisibleArea();
                minimap.viewport.scale = scale;
                minimap.viewport.center(mainViewport.center);
            }
        });

        // 处理连线重新连接
        graph.on('edge:moved', ({edge, terminal, previous}) => {
            if (!edge || !terminal) return;

            const isSource = terminal.type === 'source';
            const source = isSource ? terminal : edge.getSource();
            const target = isSource ? edge.getTarget() : terminal;

            if (source && target) {
                // 移除旧的连线
                edge.remove();

                // 创建新的连线
                graph.addEdge({
                    source: {
                        cell: source.cell,
                        port: source.port,
                    },
                    target: {
                        cell: target.cell,
                        port: target.port,
                    },
                    attrs: {
                        line: {
                            stroke: '#5F95FF',
                            strokeWidth: 2,
                            targetMarker: {
                                name: 'classic',
                                size: 7,
                            },
                        },
                    },
                });
            }
        });

        // 处理连线更改
        graph.on('edge:change:source edge:change:target', ({edge, current, previous}) => {
            if (edge && current) {
                edge.setAttrs({
                    line: {
                        stroke: '#5F95FF',
                        strokeWidth: 2,
                        targetMarker: {
                            name: 'classic',
                            size: 7,
                        },
                    },
                });
            }
        });

        registerEventHandlers(graph);

        return graph;
    };

    // 处理撤销操作
    const handleUndo = () => {
        if (!graph) return;
        const history = (graph as any).history;
        if (!history) {
            console.error('History plugin not initialized');
            return;
        }

        const beforeState = {
            canUndo: history.canUndo(),
            canRedo: history.canRedo(),
            stackSize: history.stackSize,
        };

        if (history.canUndo()) {
            history.undo();
            const afterState = {
                canUndo: history.canUndo(),
                canRedo: history.canRedo(),
                stackSize: history.stackSize,
            };
            console.log('Undo operation:', {
                before: beforeState,
                after: afterState,
            });
            message.success('已撤销');
        } else {
            message.info('没有可撤销的操作');
        }
    };

    // 处理重做操作
    const handleRedo = () => {
        if (!graph) return;
        const history = (graph as any).history;
        if (!history) {
            console.error('History plugin not initialized');
            return;
        }

        const beforeState = {
            canUndo: history.canUndo(),
            canRedo: history.canRedo(),
            stackSize: history.stackSize,
        };

        if (history.canRedo()) {
            history.redo();
            const afterState = {
                canUndo: history.canUndo(),
                canRedo: history.canRedo(),
                stackSize: history.stackSize,
            };
            console.log('Redo operation:', {
                before: beforeState,
                after: afterState,
            });
            message.success('已重做');
        } else {
            message.info('没有可重做的操作');
        }
    };

    // 处理缩放
    const handleZoom = (delta: number) => {
        if (!graph) return;
        const currentScale = graph.scale();
        const newScale = Math.max(0.2, Math.min(2, currentScale.sx + delta));
        graph.scale(newScale, newScale);
        setScale(newScale);
    };

    // 放大
    const handleZoomIn = () => {
        handleZoom(0.1);
    };

    // 缩小
    const handleZoomOut = () => {
        handleZoom(-0.1);
    };

    // 注册事件处理器
    const registerEventHandlers = (graph: Graph) => {
        // 定义悬停样式
        const hoverStyle = {
            strokeWidth: 2,
            stroke: '#52c41a'  // 绿色
        };

        // 保存节点的原始样式
        const saveNodeOriginalStyle = (node: any) => {
            const data = node.getData();
            if (!data?.originalStyle) {
                const originalStyle = {
                    stroke: node.getAttrByPath('body/stroke') || '#5F95FF',
                    strokeWidth: node.getAttrByPath('body/strokeWidth') || 1
                };
                node.setData({
                    ...data,
                    originalStyle
                });
            }
        };

        // 获取节点的原始样式
        const getNodeOriginalStyle = (node: any) => {
            const data = node.getData();
            return data?.originalStyle || {
                stroke: '#5F95FF',
                strokeWidth: 1
            };
        };

        // 恢复节点的原始样式
        const resetNodeStyle = (node: any) => {
            const originalStyle = getNodeOriginalStyle(node);
            node.setAttrByPath('body/stroke', originalStyle.stroke);
            node.setAttrByPath('body/strokeWidth', originalStyle.strokeWidth);
        };

        // 节点悬停事件
        graph.on('node:mouseenter', ({node}) => {
            // 保存原始样式
            saveNodeOriginalStyle(node);

            // 显示连接桩
            const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
            ports.forEach((port) => {
                port.setAttribute('style', 'visibility: visible; fill: #fff; stroke: #85ca6d;');
            });

            // 显示悬停样式
            node.setAttrByPath('body/stroke', hoverStyle.stroke);
            node.setAttrByPath('body/strokeWidth', hoverStyle.strokeWidth);
        });

        graph.on('node:mouseleave', ({node}) => {
            // 隐藏连接桩
            const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
            ports.forEach((port) => {
                port.setAttribute('style', 'visibility: hidden');
            });

            // 恢复原始样式
            resetNodeStyle(node);
        });

        // 节点拖动开始时记录状态
        graph.on('node:drag:start', ({node}) => {
            // 保存原始样式，以防还没保存过
            saveNodeOriginalStyle(node);
        });

        // 节点拖动结束后恢复样式
        graph.on('node:moved', ({node}) => {
            resetNodeStyle(node);
            // 隐藏连接桩
            const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
            ports.forEach((port) => {
                port.setAttribute('style', 'visibility: hidden');
            });
        });

        // 节点点击事件
        graph.on('node:click', ({node}) => {
            // 获取当前选中的节点
            const selectedNode = graph.getSelectedCells()[0];

            // 如果有其他节点被选中，恢复其样式
            if (selectedNode && selectedNode.isNode() && selectedNode.id !== node.id) {
                resetNodeStyle(selectedNode);
            }

            // 更新选中状态
            graph.resetSelection();
            graph.select(node);
        });

        // 点击空白处事件
        graph.on('blank:click', () => {
            // 获取当前选中的节点
            const selectedNode = graph.getSelectedCells()[0];

            // 如果有节点被选中，恢复其样式
            if (selectedNode && selectedNode.isNode()) {
                resetNodeStyle(selectedNode);
            }

            // 清除选中状态
            graph.resetSelection();
        });

        // 节点双击事件
        graph.on('node:dblclick', ({node}) => {
            const nodeType = node.getProp('type');
            // 从节点定义列表中找到对应的定义
            const nodeDefinition = nodeDefinitions.find(def => def.nodeType === nodeType);
            if (nodeDefinition) {
                setSelectedNode(node);
                setSelectedNodeDefinition(nodeDefinition);
                setConfigModalVisible(true);
            }
        });

        // 添加右键菜单
        graph.on('node:contextmenu', ({cell, view, e}) => {
            e.preventDefault();
            graph.cleanSelection();
            graph.select(cell);

            const dropdownContainer = document.createElement('div');
            dropdownContainer.style.position = 'absolute';
            dropdownContainer.style.left = `${e.clientX}px`;
            dropdownContainer.style.top = `${e.clientY}px`;
            document.body.appendChild(dropdownContainer);

            const root = createRoot(dropdownContainer);
            let isOpen = true;

            const closeMenu = () => {
                isOpen = false;
                root.render(
                    <Dropdown menu={{items}} open={false} onOpenChange={(open) => {
                        if (!open) {
                            setTimeout(() => {
                                root.unmount();
                                document.body.removeChild(dropdownContainer);
                            }, 100);
                        }
                    }}>
                        <div/>
                    </Dropdown>
                );
            };

            const items = [
                {
                    key: '1',
                    label: '编辑',
                    onClick: () => {
                        closeMenu();
                        setSelectedNode(cell);
                        setSelectedNodeDefinition(nodeDefinitions.find(def => def.type === cell.getProp('type')));
                        setConfigModalVisible(true);
                    }
                },
                {
                    key: '2',
                    label: '删除',
                    onClick: () => {
                        closeMenu();
                        Modal.confirm({
                            title: '确认删除',
                            content: '确定要删除该节点吗？',
                            onOk: () => {
                                cell.remove();
                            }
                        });
                    }
                }
            ];

            root.render(
                <Dropdown menu={{items}} open={isOpen}>
                    <div/>
                </Dropdown>
            );

            const handleClickOutside = (e: MouseEvent) => {
                if (!dropdownContainer.contains(e.target as Node)) {
                    closeMenu();
                    document.removeEventListener('click', handleClickOutside);
                }
            };
            document.addEventListener('click', handleClickOutside);
        });

        // 添加边的右键菜单
        graph.on('edge:contextmenu', ({cell, view, e}) => {
            e.preventDefault();
            graph.cleanSelection();
            graph.select(cell);

            const dropdownContainer = document.createElement('div');
            dropdownContainer.style.position = 'absolute';
            dropdownContainer.style.left = `${e.clientX}px`;
            dropdownContainer.style.top = `${e.clientY}px`;
            document.body.appendChild(dropdownContainer);

            const root = createRoot(dropdownContainer);
            let isOpen = true;

            const closeMenu = () => {
                isOpen = false;
                root.render(
                    <Dropdown menu={{items}} open={false} onOpenChange={(open) => {
                        if (!open) {
                            setTimeout(() => {
                                root.unmount();
                                document.body.removeChild(dropdownContainer);
                            }, 100);
                        }
                    }}>
                        <div/>
                    </Dropdown>
                );
            };

            const items = [
                {
                    key: '1',
                    label: '删除',
                    onClick: () => {
                        closeMenu();
                        Modal.confirm({
                            title: '确认删除',
                            content: '确定要删除该连接线吗？',
                            onOk: () => {
                                cell.remove();
                            }
                        });
                    }
                }
            ];

            root.render(
                <Dropdown menu={{items}} open={isOpen}>
                    <div/>
                </Dropdown>
            );

            const handleClickOutside = (e: MouseEvent) => {
                if (!dropdownContainer.contains(e.target as Node)) {
                    closeMenu();
                    document.removeEventListener('click', handleClickOutside);
                }
            };
            document.addEventListener('click', handleClickOutside);
        });

        // 禁用默认的右键菜单
        graph.on('blank:contextmenu', ({e}) => {
            e.preventDefault();
        });

        // 禁用节点的右键菜单
        graph.on('node:contextmenu', ({e}) => {
            e.preventDefault();
        });

        // 禁用边的右键菜单
        graph.on('edge:contextmenu', ({e}) => {
            e.preventDefault();
        });

        // 连接桩显示/隐藏
        graph.on('node:mouseenter', ({node}) => {
            // 保存原始样式
            saveNodeOriginalStyle(node);

            // 显示连接桩
            const ports = document.querySelectorAll(`[data-cell-id="${node.id}"] .x6-port-body`);
            ports.forEach((port) => {
                port.setAttribute('style', 'visibility: visible; fill: #fff; stroke: #85ca6d;');
            });

            // 显示悬停样式
            node.setAttrByPath('body/stroke', hoverStyle.stroke);
            node.setAttrByPath('body/strokeWidth', hoverStyle.strokeWidth);
        });

        // 连线开始时的处理
        graph.on('edge:connected', ({edge}) => {
            // 设置连线样式
            edge.setAttrs({
                line: {
                    stroke: '#5F95FF',
                    strokeWidth: 2,
                    targetMarker: {
                        name: 'classic',
                        size: 7,
                    },
                },
            });
        });

        // 连线悬停效果
        graph.on('edge:mouseenter', ({edge}) => {
            edge.setAttrs({
                line: {
                    stroke: '#52c41a',
                    strokeWidth: 3,
                },
            });
        });

        graph.on('edge:mouseleave', ({edge}) => {
            edge.setAttrs({
                line: {
                    stroke: '#5F95FF',
                    strokeWidth: 2,
                },
            });
        });

        // 允许拖动连线中间的点和端点
        graph.on('edge:selected', ({edge}) => {
            edge.addTools([
                {
                    name: 'source-arrowhead',
                    args: {
                        attrs: {
                            fill: '#fff',
                            stroke: '#5F95FF',
                            strokeWidth: 1,
                            d: 'M 0 -6 L -8 0 L 0 6 Z',
                        },
                    },
                },
                {
                    name: 'target-arrowhead',
                    args: {
                        attrs: {
                            fill: '#fff',
                            stroke: '#5F95FF',
                            strokeWidth: 1,
                            d: 'M 0 -6 L 8 0 L 0 6 Z',
                        },
                    },
                },
                {
                    name: 'vertices',
                    args: {
                        padding: 2,
                        attrs: {
                            fill: '#fff',
                            stroke: '#5F95FF',
                            strokeWidth: 1,
                            r: 4
                        },
                    },
                },
                {
                    name: 'segments',
                    args: {
                        padding: 2,
                        attrs: {
                            fill: '#fff',
                            stroke: '#5F95FF',
                            strokeWidth: 1,
                            r: 4
                        },
                    },
                },
            ]);
        });

        // 连线工具移除
        graph.on('edge:unselected', ({edge}) => {
            edge.removeTools();
        });

        // 连线移动到其他连接桩时的样式
        graph.on('edge:connected', ({edge}) => {
            edge.setAttrs({
                line: {
                    stroke: '#5F95FF',
                    strokeWidth: 2,
                    targetMarker: {
                        name: 'classic',
                        size: 7,
                    },
                },
            });
        });

        // 连线悬停在连接桩上时的样式
        graph.on('edge:mouseenter', ({edge}) => {
            const ports = document.querySelectorAll('.x6-port-body');
            ports.forEach((port) => {
                const portGroup = port.getAttribute('port-group');
                if (portGroup !== 'top') {
                    port.setAttribute('style', 'visibility: visible; fill: #fff; stroke: #85ca6d;');
                }
            });
        });

        graph.on('edge:mouseleave', ({edge}) => {
            const ports = document.querySelectorAll('.x6-port-body');
            ports.forEach((port) => {
                port.setAttribute('style', 'visibility: hidden');
            });
        });
    };

    // 处理复制操作
    const handleCopy = () => {
        if (!graph) return;
        const cells = graph.getSelectedCells();
        if (cells.length === 0) {
            message.info('请先选择要复制的节点');
            return;
        }
        graph.copy(cells);
        message.success('已复制');
    };

    // 处理剪切操作
    const handleCut = () => {
        if (!graph) return;
        const cells = graph.getSelectedCells();
        if (cells.length === 0) {
            message.info('请先选择要剪切的节点');
            return;
        }
        graph.cut(cells);
        message.success('已剪切');
    };

    // 处理粘贴操作
    const handlePaste = () => {
        if (!graph) return;
        if (graph.isClipboardEmpty()) {
            message.info('剪贴板为空');
            return;
        }
        const cells = graph.paste({offset: 32});
        graph.cleanSelection();
        graph.select(cells);
        message.success('已粘贴');
    };

    // 首先加载节点定义列表
    useEffect(() => {
        const loadNodeDefinitions = async () => {
            try {
                const data = await getNodeDefinitionList();
                setNodeDefinitions(data);
                setIsNodeDefinitionsLoaded(true);
            } catch (error) {
                console.error('加载节点定义失败:', error);
                message.error('加载节点定义失败');
            }
        };
        loadNodeDefinitions();
    }, []);

    // 加载工作流定义详情
    const loadDefinitionDetail = async (graphInstance: Graph, definitionId: string) => {
        try {
            const response = await getDefinitionDetail(Number(definitionId));
            setTitle(`工作流设计 - ${response.name}`);
            setDefinitionData(response);

            if (!graphInstance) {
                console.error('Graph instance is not initialized');
                return;
            }

            // 清空画布
            graphInstance.clearCells();
            const nodeMap = new Map();

            // 创建节点
            response.graph?.nodes?.forEach((workflowDefinitionNode: any) => {
                const node = addNodeToGraph(false, graphInstance, workflowDefinitionNode, nodeDefinitions);
                // 保存节点配置
                node.setProp('workflowDefinitionNode', workflowDefinitionNode);
                nodeMap.set(workflowDefinitionNode.id, node);
            });

            // 创建边
            response.graph?.edges?.forEach((edge: any) => {
                const sourceNode = nodeMap.get(edge.from);
                const targetNode = nodeMap.get(edge.to);
                if (sourceNode && targetNode) {
                    // 根据节点类型获取正确的端口组
                    const getPortByGroup = (node: any, group: string) => {
                        const ports = node.getPorts();
                        const port = ports.find((p: any) => p.group === group);
                        return port?.id;
                    };

                    // 获取源节点的输出端口（一定是out组）
                    const sourcePort = getPortByGroup(sourceNode, 'out');

                    // 获取目标节点的输入端口（一定是in组）
                    const targetPort = getPortByGroup(targetNode, 'in');

                    if (!sourcePort || !targetPort) {
                        console.error('无法找到正确的端口:', edge);
                        return;
                    }

                    graphInstance.addEdge({
                        source: {
                            cell: sourceNode.id,
                            port: sourcePort,
                        },
                        target: {
                            cell: targetNode.id,
                            port: targetPort,
                        },
                        attrs: {
                            line: {
                                stroke: '#5F95FF',
                                strokeWidth: 2,
                                targetMarker: {
                                    name: 'classic',
                                    size: 7,
                                },
                            },
                        },
                        labels: [{
                            attrs: {label: {text: edge.name || ''}}
                        }]
                    });
                }
            });

            // 传入节点数据，只在没有位置信息时应用自动布局
            applyAutoLayout(graphInstance, response.graph?.nodes || []);
        } catch (error) {
            console.error('加载工作流定义失败:', error);
            message.error('加载工作流定义失败');
        }
    };

    // 初始化图形和加载数据
    useEffect(() => {
        if (!graphContainerRef.current || !isNodeDefinitionsLoaded) {
            return;
        }

        const newGraph = initGraph();
        if (newGraph) {
            setGraph(newGraph);

            // 在图形初始化完成后加载数据
            if (id) {
                loadDefinitionDetail(newGraph, id);
            }
        }

        return () => {
            graph?.dispose();
        };
    }, [graphContainerRef, id, nodeDefinitions, isNodeDefinitionsLoaded]);

    // 处理节点拖拽开始
    const handleNodeDragStart = (node: NodeDefinitionResponse, e: React.DragEvent) => {
        e.dataTransfer.setData('node', JSON.stringify(node));
    };

    // 处理节点拖拽结束
    const handleDrop = (e: React.DragEvent) => {
        e.preventDefault();
        if (!graph) return;

        try {
            const nodeData = e.dataTransfer.getData('node');
            if (!nodeData) return;

            const node = JSON.parse(nodeData);
            const {clientX, clientY} = e;
            const point = graph.clientToLocal({x: clientX, y: clientY});
            console.log("dasdasd", graph, node, nodeDefinitions, point);
            addNodeToGraph(true, graph, node, nodeDefinitions, point);
        } catch (error) {
            console.error('创建节点失败:', error);
            message.error('创建节点失败');
        }
    };

    // 处理拖拽过程中
    const handleDragOver = (e: React.DragEvent) => {
        e.preventDefault();
    };

    // 处理节点配置更新
    const handleNodeConfigUpdate = (values: any) => {
        if (!selectedNode) return;
        // 更新节点配置
        console.log("// 更新节点配置", values);
        selectedNode.setProp('config', values);
        // 更新节点显示名称
        if (values.name) {
            selectedNode.attr('label/text', values.name);
        }

        setConfigModalVisible(false);
        message.success('节点配置已更新');
    };

    // 处理保存工作流
    const handleSaveWorkflow = async () => {
        if (!graph || !definitionData) return;

        try {
            // 校验流程图
            const validationResult = validateWorkflow(graph);
            if (!validationResult.valid) {
                message.error(validationResult.message);
                return;
            }

            // 获取所有节点和边的数据
            const nodes = graph.getNodes().map(node => {
                const nodeDefinition = node.getProp('nodeDefinition');
                const nodeType = node.getProp('type');
                const position = node.getPosition();

                return {
                    id: node.id,
                    code: nodeType,
                    type: nodeType,
                    name: node.attr('label/text'),
                    graph: {
                        // shape: nodeDefinition?.graphConfig.uiSchema.shape,
                        // size: {
                        //     width: node.size().width,
                        //     height: node.size().height
                        // },
                        // style: nodeDefinition?.graphConfig.uiSchema.style,
                        // ports: nodeDefinition?.graphConfig.uiSchema.ports,
                        // position: {
                        //     x: position.x,
                        //     y: position.y
                        // }
                        uiVariables: nodeDefinition.uiVariables
                    },
                    config: node.getProp('config') || {}
                };
            });

            const edges = graph.getEdges().map(edge => ({
                id: edge.id,
                from: edge.getSourceCellId(),
                to: edge.getTargetCellId(),
                name: edge.getLabels()?.[0]?.attrs?.label?.text || '',
                config: {
                    type: 'sequence'
                }
            }));

            // 构建保存数据
            const saveData = {
                ...definitionData,
                graph: {
                    nodes,
                    edges
                }
            };

            // 调用保存接口
            await saveDefinition(saveData);

            // 使用 Modal.confirm 显示操作选择
            Modal.confirm({
                title: '保存成功',
                content: '流程设计已保存成功，请选择下一步操作',
                okText: '继续设计',
                cancelText: '返回列表',
                onOk: () => {
                    // 重新加载设计数据
                    if (id) {
                        loadDefinitionDetail(graph, id);
                    }
                },
                onCancel: () => {
                    // 返回列表页
                    navigate('/workflow/definition');
                }
            });
        } catch (error) {
            console.error('保存流程失败:', error);
            message.error('保存流程失败');
        }
    };

    return (
        <div className="workflow-design">
            <div className="header">
                <Space>
                    <Tooltip title="返回">
                        <Button
                            className="back-button"
                            icon={<ArrowLeftOutlined/>}
                            onClick={() => navigate('/workflow/definition')}
                        />
                    </Tooltip>
                    <span>{title}</span>
                </Space>
                <div className="actions">
                    <Space>
                        <Space.Compact>
                            <Tooltip title="撤销">
                                <Button
                                    icon={<UndoOutlined/>}
                                    onClick={handleUndo}
                                    disabled={!(graph as any)?.history?.canUndo()}
                                >
                                    撤销
                                </Button>
                            </Tooltip>
                            <Tooltip title="重做">
                                <Button
                                    icon={<RedoOutlined/>}
                                    onClick={handleRedo}
                                    disabled={!(graph as any)?.history?.canRedo()}
                                >
                                    重做
                                </Button>
                            </Tooltip>
                        </Space.Compact>
                        <Space.Compact>
                            <Tooltip title="剪切">
                                <Button
                                    icon={<ScissorOutlined/>}
                                    onClick={handleCut}
                                />
                            </Tooltip>
                            <Tooltip title="复制">
                                <Button
                                    icon={<CopyOutlined/>}
                                    onClick={handleCopy}
                                />
                            </Tooltip>
                            <Tooltip title="粘贴">
                                <Button
                                    icon={<SnippetsOutlined/>}
                                    onClick={handlePaste}
                                />
                            </Tooltip>
                        </Space.Compact>
                        <Space.Compact>
                            <Tooltip title="放大">
                                <Button
                                    icon={<ZoomInOutlined/>}
                                    onClick={handleZoomIn}
                                    disabled={scale >= 2}
                                >
                                    放大
                                </Button>
                            </Tooltip>
                            <Tooltip title="缩小">
                                <Button
                                    icon={<ZoomOutOutlined/>}
                                    onClick={handleZoomOut}
                                    disabled={scale <= 0.2}
                                >
                                    缩小
                                </Button>
                            </Tooltip>
                        </Space.Compact>
                        <Space.Compact>
                            <Tooltip title="全选">
                                <Button
                                    icon={<SelectOutlined/>}
                                    onClick={() => {
                                        if (!graph) return;

                                        // 添加小延时确保图形已完全初始化
                                        setTimeout(() => {
                                            const cells = graph.getCells();
                                            console.log('All cells:', cells);

                                            if (cells.length === 0) {
                                                message.info('当前没有可选择的元素');
                                                return;
                                            }

                                            // 打印当前选择状态
                                            console.log('Current selection before reset:', graph.getSelectedCells());
                                            graph.resetSelection();
                                            console.log('Selection after reset:', graph.getSelectedCells());

                                            // 尝试选择所有单元格
                                            try {
                                                graph.select(cells);
                                                console.log('Selection after select all:', graph.getSelectedCells());
                                            } catch (error) {
                                                console.error('Error selecting cells:', error);
                                            }

                                            // 检查Selection插件是否正确初始化
                                            const selection = graph.getPlugin('selection');
                                            console.log('Selection plugin:', selection);
                                        }, 100);
                                    }}
                                />
                            </Tooltip>
                            <Tooltip title="删除">
                                <Button
                                    icon={<DeleteOutlined/>}
                                    onClick={() => {
                                        if (!graph) return;
                                        const cells = graph.getSelectedCells();
                                        if (cells.length === 0) {
                                            message.info('请先选择要删除的元素');
                                            return;
                                        }
                                        Modal.confirm({
                                            title: '确认删除',
                                            content: '确定要删除选中的元素吗？',
                                            onOk: () => {
                                                graph.removeCells(cells);
                                            }
                                        });
                                    }}
                                />
                            </Tooltip>
                        </Space.Compact>
                        <Tooltip title="保存">
                            <Button
                                type="primary"
                                icon={<SaveOutlined/>}
                                onClick={handleSaveWorkflow}
                            >
                                保存
                            </Button>
                        </Tooltip>
                    </Space>
                </div>
            </div>
            <div className="content">
                <div className="sidebar">
                    <NodePanel
                        nodeDefinitions={nodeDefinitions}
                        onNodeDragStart={handleNodeDragStart}
                    />
                </div>
                <div className="main-area">
                    <div className="workflow-container">
                        <div
                            ref={graphContainerRef}
                            className="workflow-canvas"
                            onDrop={handleDrop}
                            onDragOver={handleDragOver}
                        />
                        <div ref={minimapContainerRef} className="minimap-container"/>
                    </div>
                </div>
            </div>
            {configModalVisible && selectedNode && selectedNodeDefinition && (
                <NodeConfigDrawer
                    visible={configModalVisible}
                    node={selectedNode}
                    nodeDefinition={selectedNodeDefinition}
                    onCancel={() => setConfigModalVisible(false)}
                    onOk={handleNodeConfigUpdate}
                />
            )}
        </div>
    );
};

export default WorkflowDesign;