import React, { useEffect, useMemo } from 'react';
import {
  ReactFlow,
  Background,
  Panel,
  SelectionMode,
  ConnectionLineType,
  Node,
  Edge,
  OnNodesChange,
  OnEdgesChange,
  OnConnect,
  OnReconnect
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import CustomEdge from './components/customEdge';
import CustomConnectionLine from './components/customConnectionLine';
import NodeContextMenu from './components/nodeContextMenu';
import EdgeContextMenu from './components/edgeContextMenu';
import PaneContextMenu from './components/paneContextMenu';
import NodeEditModal from './components/nodeEditModal';
import AddNodeMenu from './components/addNodeMenu';
import ActionBar from './components/actionBar';
import { useAlignmentGuidelines } from '@/hooks/useAlignmentGuidelines';
import { useHistory } from './components/historyContext';
import { NodeTypes } from '@xyflow/react';
import { useSelector } from 'react-redux';
import HandlerBar from '@/pages/flowEditor/components/handlerBar';
import PublishFlowModal from '@/pages/flowEditor/components/publishFlowModal';

const edgeTypes = {
  custom: CustomEdge
};

interface FlowEditorMainProps {
  nodes: Node[];
  edges: Edge[];
  nodeTypes: NodeTypes;
  setNodes: React.Dispatch<React.SetStateAction<Node[]>>;
  setEdges: React.Dispatch<React.SetStateAction<Edge[]>>;
  useDefault: boolean;
  readOnly?: boolean; // 新增：只读模式
  reactFlowInstance: any;
  reactFlowWrapper: React.RefObject<HTMLDivElement>;
  menu: any;
  setMenu: React.Dispatch<React.SetStateAction<any>>;
  editingNode: Node | null;
  setEditingNode: React.Dispatch<React.SetStateAction<Node | null>>;
  isEditModalOpen: boolean;
  setIsEditModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
  isDelete: boolean;
  setIsDelete: React.Dispatch<React.SetStateAction<boolean>>;
  edgeForNodeAdd: Edge | null;
  setEdgeForNodeAdd: React.Dispatch<React.SetStateAction<Edge | null>>;
  positionForNodeAdd: { x: number, y: number } | null;
  setPositionForNodeAdd: React.Dispatch<React.SetStateAction<{ x: number, y: number } | null>>;
  isRunning: boolean;
  initialData: any;
  canvasDataMap: any;

  // Callbacks
  onNodesChange: OnNodesChange;
  onEdgesChange: OnEdgesChange;
  onConnect: OnConnect;
  onReconnect: OnReconnect;
  onDragOver: (event: React.DragEvent) => void;
  onDrop: (event: React.DragEvent) => void;
  onNodeDrag: (event: React.MouseEvent, node: Node) => void;
  onNodeDragStop: () => void;
  onNodeContextMenu: (event: React.MouseEvent, node: Node) => void;
  onNodeDoubleClick: (event: React.MouseEvent, node: Node) => void;
  onEdgeContextMenu: (event: React.MouseEvent, edge: Edge) => void;
  onPaneContextMenu: (event: React.MouseEvent) => void;
  onPaneClick: () => void;
  closeEditModal: () => void;
  saveNodeEdit: (updatedData: any) => void;
  deleteNode: (node: Node) => void;
  deleteEdge: (edge: Edge) => void;
  editNode: (node: Node) => void;
  editEdge: (edge: Edge) => void;
  copyNode: (node: Node) => void;
  pasteNode: (position: { x: number; y: number }) => void;
  addNodeOnEdge: (nodeType: string, node: any) => void;
  addNodeOnPane: (nodeType: string, position: { x: number, y: number }, node?: any) => void;
  handleAddNode: (nodeType: string, node: any) => void;
  saveFlowDataToServer: () => void;
  handleRun: (running: boolean) => void;
  handlePause: (isPaused: boolean) => void;
  handleReRun: () => void;
}

const FlowEditorMain: React.FC<FlowEditorMainProps> = (props) => {
  const {
    nodes,
    edges,
    nodeTypes,
    setNodes,
    setEdges,
    useDefault,
    readOnly = false, // 解构 readOnly，默认为 false
    reactFlowInstance,
    reactFlowWrapper,
    menu,
    setMenu,
    editingNode,
    setEditingNode,
    isEditModalOpen,
    setIsEditModalOpen,
    isDelete,
    setIsDelete,
    edgeForNodeAdd,
    setEdgeForNodeAdd,
    positionForNodeAdd,
    setPositionForNodeAdd,
    isRunning,
    initialData,
    canvasDataMap,
    onNodesChange,
    onEdgesChange,
    onConnect,
    onReconnect,
    onDragOver,
    onDrop,
    onNodeDrag,
    onNodeDragStop,
    onNodeContextMenu,
    onNodeDoubleClick,
    onEdgeContextMenu,
    onPaneContextMenu,
    onPaneClick,
    closeEditModal,
    saveNodeEdit,
    deleteNode,
    deleteEdge,
    editNode,
    editEdge,
    copyNode,
    pasteNode,
    addNodeOnEdge,
    addNodeOnPane,
    handleAddNode,
    saveFlowDataToServer,
    handleRun,
    handlePause,
    handleReRun
  } = props;

  const { getGuidelines, clearGuidelines, AlignmentGuides } = useAlignmentGuidelines();
  const { undo, redo, canUndo, canRedo } = useHistory();
  const reactFlowId = useMemo(() => new Date().getTime().toString(), []);

  // 用于存储隐藏的节点ID
  const [hiddenNodes, setHiddenNodes] = React.useState<Set<string>>(new Set());

  // 流程发布弹窗状态
  const [publishModalVisible, setPublishModalVisible] = React.useState(false);

  // 监听自定义事件以隐藏/显示节点
  useEffect(() => {
    const handleToggleNodeVisibility = (event: CustomEvent) => {
      const { appId, isVisible } = event.detail;

      if (isVisible) {
        // 显示节点 - 从隐藏节点集合中移除
        setHiddenNodes(prev => {
          const newSet = new Set(prev);
          newSet.delete(appId);
          return newSet;
        });
      }
      else {
        // 隐藏节点 - 添加到隐藏节点集合
        setHiddenNodes(prev => new Set(prev).add(appId));
      }
    };

    document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);

    return () => {
      document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
    };
  }, []);

  // 从Redux store中获取当前应用的运行状态
  const { appRuntimeData, currentAppData } = useSelector((state: any) => state.ideContainer);

  // 辅助函数：获取当前应用/子流程的唯一标识符
  const getCurrentAppKey = () => {
    if (!currentAppData) return null;
    // 如果是子流程（key包含'sub'），使用key作为标识符
    if (currentAppData.key && currentAppData.key.includes('sub')) {
      return currentAppData.key;
    }
    // 否则使用id
    return currentAppData.id;
  };

  const currentAppKey = getCurrentAppKey();
  const currentAppIsRunning = currentAppKey && appRuntimeData[currentAppKey]
    ? appRuntimeData[currentAppKey].isRunning
    : false;

  // 监听自定义事件以隐藏/显示节点
  useEffect(() => {
    const handleToggleNodeVisibility = (event: CustomEvent) => {
      const { appId, isVisible } = event.detail;

      if (isVisible) {
        // 显示节点 - 从隐藏节点集合中移除
        setHiddenNodes(prev => {
          const newSet = new Set(prev);
          newSet.delete(appId);
          return newSet;
        });
      }
      else {
        // 隐藏节点 - 添加到隐藏节点集合
        setHiddenNodes(prev => new Set(prev).add(appId));
      }
    };

    document.addEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);

    return () => {
      document.removeEventListener('toggleNodeVisibility', handleToggleNodeVisibility as EventListener);
    };
  }, []);

  // 监听键盘事件实现快捷键
  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      // 如果当前正在运行或不是默认模式，不处理复制粘贴快捷键
      const canEdit = !currentAppIsRunning && useDefault;
      // 兼容 Mac (metaKey) 和 Windows/Linux (ctrlKey)
      const isModifierKey = e.ctrlKey || e.metaKey;

      // 检查事件目标是否在可编辑元素中（input、textarea、contenteditable、CodeMirror等）
      const target = e.target as HTMLElement;
      const isEditableElement =
        target instanceof HTMLInputElement ||
        target instanceof HTMLTextAreaElement ||
        target?.getAttribute('contenteditable') === 'true' ||
        target?.closest('[contenteditable="true"]') !== null ||
        target?.closest('.cm-content') !== null || // CodeMirror 编辑器
        target?.closest('.cm-editor') !== null ||
        target?.closest('.arco-input') !== null || // Arco Design 输入框
        target?.closest('.arco-textarea') !== null;

      // 检查是否有打开的弹出层（Modal、Drawer、Popover等），如果有则不拦截快捷键
      const hasOpenPopup =
        document.querySelector('.arco-modal-wrapper') !== null ||
        document.querySelector('.arco-drawer-wrapper') !== null ||
        document.querySelector('.arco-popover-popup') !== null;

      // 如果在可编辑元素中或有打开的弹出层，不拦截复制粘贴快捷键，让浏览器处理
      if (isEditableElement || hasOpenPopup) {
        return;
      }

      // Ctrl/Cmd+Z 撤销
      if (isModifierKey && e.key === 'z' && !e.shiftKey && canUndo) {
        e.preventDefault();
        undo();
      }
      // Ctrl/Cmd+Shift+Z 重做
      if (isModifierKey && e.shiftKey && e.key === 'Z' && canRedo) {
        e.preventDefault();
        redo();
      }
      // Ctrl/Cmd+Y 重做
      if (isModifierKey && e.key === 'y' && canRedo) {
        e.preventDefault();
        redo();
      }
      // Ctrl/Cmd+C 复制选中的节点
      if (isModifierKey && e.key === 'c' && canEdit) {
        // 获取当前选中的节点
        const selectedNode = nodes.find(node => node.selected);
        if (selectedNode) {
          // 不允许复制开始和结束节点
          if (selectedNode.type === 'start' || selectedNode.type === 'end') {
            return;
          }
          e.preventDefault();
          copyNode(selectedNode);
        }
      }
      // Ctrl/Cmd+V 粘贴节点
      if (isModifierKey && e.key === 'v' && canEdit) {
        const copiedNodeStr = localStorage.getItem('copiedNode');
        if (copiedNodeStr) {
          e.preventDefault();
          // 获取当前视口中心位置
          if (reactFlowInstance) {
            const viewport = reactFlowInstance.getViewport();
            const { x, y, zoom } = viewport;
            // 获取画布容器的尺寸
            const wrapper = reactFlowWrapper.current;
            if (wrapper) {
              const rect = wrapper.getBoundingClientRect();
              // 计算视口中心点在流程图坐标系中的位置
              const centerX = (-x + rect.width / 2) / zoom;
              const centerY = (-y + rect.height / 2) / zoom;
              pasteNode({ x: centerX, y: centerY });
            }
          }
        }
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [undo, redo, canUndo, canRedo, currentAppIsRunning, useDefault, nodes, copyNode, pasteNode, reactFlowInstance]);

  // 处理流程发布
  const handlePublish = () => {
    // 先保存流程数据
    saveFlowDataToServer();
    // 打开发布弹窗
    setPublishModalVisible(true);
  };

  // 发布成功后的回调
  const handlePublishSuccess = () => {
    setPublishModalVisible(false);
    // 可以在这里添加其他逻辑，比如刷新流程列表等
  };

  // 监听节点和边的变化以拍摄快照
  useEffect(() => {
    // 获取 HistoryProvider 中的 takeSnapshot 方法
    const event = new CustomEvent('takeSnapshot', {
      detail: { nodes: [...nodes], edges: [...edges] }
    });
    document.dispatchEvent(event);
  }, [nodes, edges]);

  return (
    <div ref={reactFlowWrapper} style={{ width: '100%', height: '100%', position: 'relative' }}
         onContextMenu={(e) => e.preventDefault()}
      // 添加点击事件处理器，用于关闭添加节点菜单
         onClick={() => {
           if (edgeForNodeAdd || positionForNodeAdd) {
             setEdgeForNodeAdd(null);
             setPositionForNodeAdd(null);
           }
         }}>
      <ReactFlow
        id={reactFlowId}
        nodes={nodes.map(node => {
          // 检查节点是否应该被隐藏
          const isHidden = hiddenNodes.has(node.id);
          // 应用透明度样式
          const style = isHidden ? { opacity: 0.3 } : {};

          return {
            ...node,
            draggable: readOnly ? false : !currentAppIsRunning, // readOnly 模式下禁止拖拽
            style: {
              ...node.style,
              ...style
            }
          };
        })}
        edges={edges.map(edge => {
          // 检查边连接的节点是否被隐藏
          const isSourceHidden = hiddenNodes.has(edge.source);
          const isTargetHidden = hiddenNodes.has(edge.target);
          // 如果源节点或目标节点被隐藏，则边也应用透明度
          const style = (isSourceHidden || isTargetHidden) ? { opacity: 0.3 } : {};

          // 更新边的数据，确保选择框也应用透明度
          return {
            ...edge,
            style: {
              ...edge.style,
              ...style
            },
            data: {
              ...edge.data,
              ...(isSourceHidden || isTargetHidden ? { hidden: true, opacity: 0.3 } : { opacity: 1 })
            }
          };
        })}
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        snapToGrid={true}
        snapGrid={[2, 2]}
        proOptions={{ hideAttribution: true }} // 隐藏水印
        nodesConnectable={readOnly ? false : !currentAppIsRunning} // readOnly 或运行时禁用节点连接
        nodesDraggable={readOnly ? false : !currentAppIsRunning} // readOnly 或运行时禁用节点拖拽
        elementsSelectable={!readOnly} // readOnly 模式下禁用元素选择
        connectOnClick={readOnly ? false : !currentAppIsRunning} // readOnly 或运行时禁用点击连接
        disableKeyboardA11y={readOnly || currentAppIsRunning} // readOnly 或运行时禁用键盘交互
        edgesFocusable={!readOnly} // readOnly 模式下边不可聚焦
        nodesFocusable={!readOnly} // readOnly 模式下节点不可聚焦
        edgesReconnectable={readOnly ? false : !currentAppIsRunning} // readOnly 或运行时禁用边重连
        onBeforeDelete={async ({ nodes, edges }) => {
          // readOnly 模式下禁止删除
          if (readOnly) {
            return false;
          }

          // 在应用编排模式下（useDefault为false）只允许删除边，不允许删除节点
          if (!useDefault && nodes.length > 0) {
            console.warn('在应用编排模式下不允许删除节点');
            return false; // 阻止删除节点操作
          }

          // 检查是否有开始或结束节点
          const hasStartOrEndNode = nodes.some(node => node.type === 'start' || node.type === 'end');
          if (hasStartOrEndNode) {
            console.warn('开始和结束节点不允许删除');
            return false; // 阻止删除操作
          }

          // 检查是否有循环节点（这里只是检查，实际删除逻辑在onNodesDelete中处理）
          const loopNodes = nodes.filter(node =>
            node.data?.type === 'LOOP_START' || node.data?.type === 'LOOP_END'
          );

          // 允许删除操作继续进行
          return !currentAppIsRunning; // 在运行时禁止删除任何元素
        }}
        onNodesDelete={(deleted) => {
          // 在应用编排模式下（useDefault为false）不允许删除节点
          if (!useDefault) {
            console.warn('在应用编排模式下不允许删除节点');
            return;
          }

          // 如果在运行时，禁止删除
          if (currentAppIsRunning) {
            return;
          }

          // 检查是否有循环节点
          const loopNodes = deleted.filter(node =>
            node.data?.type === 'LOOP_START' || node.data?.type === 'LOOP_END'
          );

          if (loopNodes.length > 0) {
            // 处理循环节点删除
            let nodesToRemove = [...deleted];

            // 为每个循环节点找到其配对节点
            loopNodes.forEach(loopNode => {
              const component = loopNode.data?.component as { customDef?: string } | undefined;

              if (loopNode.data?.type === 'LOOP_START' && component?.customDef) {
                try {
                  const customDef = JSON.parse(component.customDef);
                  const relatedNodeId = customDef.loopEndNodeId;
                  // 添加关联的结束节点到删除列表
                  const relatedNode = nodes.find(n => n.id === relatedNodeId);
                  if (relatedNode) {
                    nodesToRemove.push(relatedNode);
                  }
                } catch (e) {
                  console.error('解析循环开始节点数据失败:', e);
                }
              }
              else if (loopNode.data?.type === 'LOOP_END' && component?.customDef) {
                try {
                  const customDef = JSON.parse(component.customDef);
                  const relatedNodeId = customDef.loopStartNodeId;
                  // 添加关联的开始节点到删除列表
                  const relatedNode = nodes.find(n => n.id === relatedNodeId);
                  if (relatedNode) {
                    nodesToRemove.push(relatedNode);
                  }
                } catch (e) {
                  console.error('解析循环结束节点数据失败:', e);
                }
              }
            });

            // 去重
            nodesToRemove = nodesToRemove.filter((node, index, self) =>
              index === self.findIndex(n => n.id === node.id)
            );

            // 删除所有相关节点和边
            setNodes((nds) => nds.filter((n) => !nodesToRemove.find((d) => d.id === n.id)));

            // 删除与这些节点相关的所有边
            const nodeIdsToRemove = nodesToRemove.map(node => node.id);
            setEdges((eds) => eds.filter((e) =>
              !nodeIdsToRemove.includes(e.source) && !nodeIdsToRemove.includes(e.target)
            ));
          }
          else {
            // 普通节点删除
            setNodes((nds) => nds.filter((n) => !deleted.find((d) => d.id === n.id)));
          }

          setIsEditModalOpen(false);
        }}
        onNodesChange={readOnly ? undefined : (!currentAppIsRunning ? onNodesChange : undefined)} // readOnly 或运行时禁用节点变更
        onEdgesChange={readOnly ? undefined : (!currentAppIsRunning ? onEdgesChange : undefined)} // readOnly 或运行时禁用边变更
        onConnect={readOnly ? undefined : (!currentAppIsRunning ? onConnect : undefined)} // readOnly 或运行时禁用连接
        onReconnect={readOnly ? undefined : (!currentAppIsRunning ? onReconnect : undefined)} // readOnly 或运行时禁用重新连接
        onDragOver={readOnly ? undefined : (!currentAppIsRunning ? onDragOver : undefined)} // readOnly 或运行时禁用拖拽
        onDrop={readOnly ? undefined : (!currentAppIsRunning ? onDrop : undefined)} // readOnly 或运行时禁用放置
        onNodeDrag={readOnly ? undefined : (!currentAppIsRunning ? onNodeDrag : undefined)} // readOnly 或运行时禁用节点拖拽
        connectionLineType={ConnectionLineType.SmoothStep}
        connectionLineComponent={CustomConnectionLine}
        onNodeDragStop={readOnly ? undefined : (!currentAppIsRunning ? onNodeDragStop : undefined)} // readOnly 或运行时禁用节点拖拽停止
        onNodeContextMenu={readOnly ? undefined : ((useDefault || currentAppIsRunning) ? onNodeContextMenu : undefined)} // readOnly 或应用编排模式下禁用节点上下文菜单
        onNodeDoubleClick={readOnly ? undefined : (!currentAppIsRunning ? onNodeDoubleClick : undefined)} // readOnly 或运行时禁用节点双击
        onEdgeContextMenu={readOnly ? undefined : ((!currentAppIsRunning && useDefault) ? onEdgeContextMenu : undefined)} // readOnly 或运行时或应用编排模式下禁用边上下文菜单
        onPaneClick={(useDefault || currentAppIsRunning) ? onPaneClick : undefined} // 运行时禁用面板点击
        onPaneContextMenu={readOnly ? undefined : ((!currentAppIsRunning && useDefault) ? onPaneContextMenu : undefined)} // readOnly 或运行时或应用编排模式下禁用面板上下文菜单
        onEdgeMouseEnter={(_event, edge) => {
          setEdges((eds) => eds.map(e => {
            if (e.id === edge.id) {
              return { ...e, data: { ...e.data, hovered: true } };
            }
            return e;
          }));
        }}
        onEdgeMouseLeave={(_event, edge) => {
          setEdges((eds) => eds.map(e => {
            if (e.id === edge.id) {
              return { ...e, data: { ...e.data, hovered: false } };
            }
            return e;
          }));
        }}
        fitView
        selectionOnDrag={!currentAppIsRunning} // 运行时禁用拖拽选择
        selectionMode={!currentAppIsRunning ? SelectionMode.Partial : undefined} // 运行时禁用选择模式
      >
        <Background />
        {!readOnly && (
          <Panel position="top-left">
            <ActionBar
              useDefault={useDefault}
              onSave={saveFlowDataToServer}
              onUndo={undo}
              onRedo={redo}
              canUndo={canUndo}
              canRedo={canRedo}
              onRun={handleRun}
              onPause={handlePause}
              onReRun={handleReRun}
              isRunning={currentAppIsRunning}
            ></ActionBar>
          </Panel>
        )}
        {useDefault && !readOnly && <Panel position="top-right">
          <HandlerBar
            onPublish={handlePublish}
            isRunning={currentAppIsRunning}
            setNodes={setNodes}
            setEdges={setEdges}
          />
        </Panel>}
        <AlignmentGuides />
      </ReactFlow>

      {/*节点右键上下文 - 在默认模式或运行状态下显示，运行时隐藏编辑复制删除功能*/}
      {(useDefault || currentAppIsRunning) && menu && menu.type === 'node' && (
        <div
          style={{
            position: 'absolute',
            top: menu.top,
            left: menu.left,
            zIndex: 1000
          }}
        >
          <NodeContextMenu
            node={nodes.find(n => n.id === menu.id)!}
            onDelete={deleteNode}
            onEdit={editNode}
            onCopy={copyNode}
            onCloseMenu={setMenu}
            onCloseOpenModal={setIsEditModalOpen}
            isRunning={currentAppIsRunning}
          />
        </div>
      )}

      {/*边右键上下文 - 在非运行时显示，应用编排模式下也允许*/}
      {!currentAppIsRunning && menu && menu.type === 'edge' && (
        <div
          style={{
            position: 'absolute',
            top: menu.top,
            left: menu.left,
            zIndex: 1000
          }}
        >
          <EdgeContextMenu
            edge={edges.find(e => e.id === menu.id)!}
            onDelete={deleteEdge}
            onEdit={editEdge}
            onAddNode={(edge) => {
              setEdgeForNodeAdd(edge);
              setIsEditModalOpen(false);
              setMenu(null); // 关闭上下文菜单
            }}
          />
        </div>
      )}

      {/*画布右键上下文 - 仅在默认模式且非运行时显示*/}
      {!currentAppIsRunning && useDefault && menu && menu.type === 'pane' && (
        <div
          style={{
            position: 'absolute',
            top: menu.top,
            left: menu.left,
            zIndex: 1000
          }}
        >
          <PaneContextMenu
            position={menu.position!}
            onAddNode={(nodeType: string, position: { x: number, y: number }, node: any) => {
              addNodeOnPane(nodeType, position, node);
              setIsEditModalOpen(false);
              setMenu(null); // 关闭上下文菜单
            }}
          />
        </div>
      )}

      {/*节点点击/节点编辑上下文*/}
      <NodeEditModal
        popupContainer={reactFlowWrapper}
        node={editingNode}
        isOpen={isEditModalOpen && !currentAppIsRunning}
        isDelete={isDelete}
        onSave={saveNodeEdit}
        onClose={closeEditModal}
      />

      {/*统一的添加节点菜单 - 仅在默认模式且非运行时显示*/}
      {!currentAppIsRunning && useDefault && (edgeForNodeAdd || positionForNodeAdd) && (
        <div
          style={{
            position: 'absolute',
            top: edgeForNodeAdd ? (edgeForNodeAdd.data?.y as number || 0) : (positionForNodeAdd?.y || 0),
            left: edgeForNodeAdd ? ((edgeForNodeAdd.data?.x as number || 0) + 20) : (positionForNodeAdd?.x || 0),
            zIndex: 1000,
            transform: 'none'
          }}
          // 点击事件冒泡到父级处理，这里阻止默认行为
          onClick={(e) => e.stopPropagation()}
        >
          <AddNodeMenu
            onAddNode={(nodeType, node) => {
              handleAddNode(nodeType, node);
              // 关闭菜单
              setEdgeForNodeAdd(null);
              setPositionForNodeAdd(null);
            }}
            position={positionForNodeAdd || undefined}
            edgeId={edgeForNodeAdd?.id}
          />
        </div>
      )}

      {/*流程发布弹窗*/}
      <PublishFlowModal
        visible={publishModalVisible}
        onCancel={() => setPublishModalVisible(false)}
        onSuccess={handlePublishSuccess}
        appId={initialData?.id}
        flowId={initialData?.flowId}
        currentFlowName={initialData?.name}
      />
    </div>
  );
};

export default FlowEditorMain;