import React, { useEffect, useState, useMemo, useCallback } from 'react';
import { ReactFlowProvider, ReactFlow, Background, Node, Edge, Handle, Position, BackgroundVariant, NodeProps, Controls, MiniMap } from '@xyflow/react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Alert, AlertDescription } from '@/components/ui/alert';
import { Separator } from '@/components/ui/separator';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import {
  Loader2,
  AlertCircle,
  User,
  Building2,
  Layers,
  Calendar,
  Clock,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  FileText,
  ArrowRightLeft,
  ArrowDownUp
} from 'lucide-react';
import { cn } from '@/lib/utils';
import '@xyflow/react/dist/style.css';
import dagre from 'dagre';
import { getDeployRecordFlowGraph } from '../service';
import type { DeployRecordFlowGraph, WorkflowNodeInstance } from '../types';
import {
  getStatusIcon,
  getStatusText,
  getNodeStatusText,
  getNodeStatusColor,
  formatTime,
  formatDuration,
  calculateRunningDuration
} from '../utils/dashboardUtils';
import DeployNodeLogDialog from './DeployNodeLogDialog';

interface DeployFlowGraphModalProps {
  open: boolean;
  deployRecordId: number | null;
  onOpenChange: (open: boolean) => void;
}

interface CustomNodeData {
  nodeName: string;
  nodeType: string;
  nodeId: string;
  status: string;
  startTime?: string | null;
  endTime?: string | null;
  duration?: number | null;
  errorMessage?: string | null;
  processInstanceId?: string;
  onViewLog?: (nodeId: string, nodeName: string) => void;
}

type LayoutDirection = 'TB' | 'LR';

/**
 * 使用 dagre 进行自动布局
 */
const getLayoutedElements = (
  nodes: Node[],
  edges: Edge[],
  direction: LayoutDirection = 'TB'
) => {
  const dagreGraph = new dagre.graphlib.Graph();
  dagreGraph.setDefaultEdgeLabel(() => ({}));

  const nodeWidth = 180;
  const nodeHeight = 120;

  const isHorizontal = direction === 'LR';
  dagreGraph.setGraph({
    rankdir: direction,
    nodesep: isHorizontal ? 90 : 120, // 同一层节点间距：横向80，纵向100
    ranksep: isHorizontal ? 170 : 160, // 层级间距：横向150，纵向120
    marginx: 40,
    marginy: 40,
    align: 'UL', // 对齐方式
  });

  nodes.forEach((node) => {
    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
  });

  edges.forEach((edge) => {
    dagreGraph.setEdge(edge.source, edge.target);
  });

  dagre.layout(dagreGraph);

  const layoutedNodes = nodes.map((node) => {
    const nodeWithPosition = dagreGraph.node(node.id);
    return {
      ...node,
      position: {
        x: nodeWithPosition.x - nodeWidth / 2,
        y: nodeWithPosition.y - nodeHeight / 2,
      },
    };
  });

  return { nodes: layoutedNodes, edges };
};

/**
 * 自定义流程节点组件
 */
const CustomFlowNode: React.FC<any> = ({ data }) => {
  const { nodeName, nodeType, status, startTime, endTime, duration, errorMessage } = data as CustomNodeData;
  const statusColor = getNodeStatusColor(status);
  const isNotStarted = status === 'NOT_STARTED';
  const isRunning = status === 'RUNNING';
  const hasFailed = status === 'FAILED';

  // 判断是否可以查看日志（具有日志输出能力的节点类型）
  const loggableNodeTypes = ['JENKINS_BUILD', 'ServiceTask'];
  const canViewLog = loggableNodeTypes.includes(nodeType) && status !== 'NOT_STARTED';

  // 计算显示的时长
  const displayDuration = useMemo(() => {
    if (duration !== null && duration !== undefined) {
      // 后端返回的 duration 单位已经是毫秒
      return formatDuration(duration);
    }
    if (isRunning && startTime) {
      const runningDuration = calculateRunningDuration(startTime);
      return formatDuration(runningDuration);
    }
    return null;
  }, [duration, isRunning, startTime]);

  const nodeContent = (
    <div
      className={cn(
        'px-4 py-3 rounded-lg w-[180px] min-h-[120px] transition-all duration-200 relative overflow-hidden flex flex-col',
        isNotStarted && 'border-2 border-dashed bg-gradient-to-br from-slate-50 to-gray-50',
        !isNotStarted && 'border-2 border-solid shadow-lg hover:shadow-2xl bg-white',
        isRunning && 'ring-2 ring-blue-400 ring-opacity-60 shadow-blue-200',
        canViewLog && 'cursor-pointer hover:shadow-2xl hover:scale-105 active:scale-100'
      )}
      style={{
        borderColor: statusColor,
        borderWidth: '3px',
      }}
    >
      {/* 顶部状态指示条 */}
      {!isNotStarted && (
        <div 
          className="absolute top-0 left-0 right-0 h-1"
          style={{ backgroundColor: statusColor, opacity: 0.6 }}
        />
      )}

      {/* 节点名称 */}
      <div className="flex items-center justify-between gap-2 mb-2 mt-0.5">
        <div className="font-semibold text-sm truncate text-gray-900">{nodeName}</div>
        {canViewLog && (
          <FileText className="h-4 w-4 text-blue-500 flex-shrink-0" />
        )}
      </div>

      {/* 节点状态 - 使用徽章样式 */}
      <div
        className={cn(
          "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-bold mb-1",
          isRunning && "animate-pulse"
        )}
        style={{ 
          backgroundColor: `${statusColor}20`,
          color: statusColor,
          border: `1.5px solid ${statusColor}`
        }}
      >
        {getNodeStatusText(status)}
      </div>

      {/* 时间信息 - 更紧凑的显示 */}
      {!isNotStarted && displayDuration && (
        <div className="text-xs text-muted-foreground mb-1">
          <div className="font-medium text-blue-600">
            ⏱️ {displayDuration}
          </div>
        </div>
      )}

      {/* 弹性空间，让底部提示始终在底部 */}
      <div className="flex-1 min-h-[2px]" />

      {/* 错误提示 - 增强样式 */}
      {hasFailed && errorMessage && (
        <div className="flex items-center gap-1 text-xs text-red-600">
          <AlertCircle className="h-3.5 w-3.5 text-red-600 flex-shrink-0" />
          <span className="font-medium">查看错误</span>
        </div>
      )}

      {/* 查看日志提示 - 增强样式 */}
      {canViewLog && !hasFailed && (
        <div className="flex items-center gap-1 text-xs text-blue-600">
          <FileText className="h-3.5 w-3.5 text-blue-600 flex-shrink-0" />
          <span className="font-medium">查看日志</span>
        </div>
      )}
    </div>
  );

  return (
    <>
      {/* 输入连接点 */}
      {nodeType !== 'START_EVENT' && (
        <Handle type="target" position={Position.Left} />
      )}

      {/* 节点内容 - 如果有错误信息，包装在 Tooltip 中 */}
      {hasFailed && errorMessage ? (
        <TooltipProvider>
          <Tooltip>
            <TooltipTrigger asChild>
              {nodeContent}
            </TooltipTrigger>
            <TooltipContent side="top" className="max-w-sm">
              <p className="font-medium mb-1">错误信息:</p>
              <p className="text-xs">{errorMessage}</p>
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      ) : (
        nodeContent
      )}

      {/* 输出连接点 */}
      {nodeType !== 'END_EVENT' && (
        <Handle type="source" position={Position.Right} />
      )}
    </>
  );
};

const nodeTypes = {
  custom: CustomFlowNode,
};

/**
 * 业务信息卡片
 */
const BusinessInfoCard: React.FC<{ flowData: DeployRecordFlowGraph }> = ({ flowData }) => {
  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-sm font-medium flex items-center gap-2">
          <Building2 className="h-4 w-4" />
          业务信息
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-2 text-sm">
        <div className="flex justify-between">
          <span className="text-muted-foreground">应用名称:</span>
          <span className="font-medium">{flowData.applicationName}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">应用编码:</span>
          <span className="font-mono text-xs">{flowData.applicationCode}</span>
        </div>
        <Separator />
        <div className="flex justify-between">
          <span className="text-muted-foreground">部署环境:</span>
          <span className="font-medium">{flowData.environmentName}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-muted-foreground">所属团队:</span>
          <span className="font-medium">{flowData.teamName}</span>
        </div>
        <Separator />
        <div className="flex justify-between">
          <span className="text-muted-foreground flex items-center gap-1">
            <User className="h-3 w-3" />
            部署人:
          </span>
          <span className="font-medium">{flowData.deployBy}</span>
        </div>
        {flowData.deployRemark && (
          <>
            <Separator />
            <div>
              <span className="text-muted-foreground">备注:</span>
              <p className="text-xs mt-1 text-muted-foreground">{flowData.deployRemark}</p>
            </div>
          </>
        )}
      </CardContent>
    </Card>
  );
};

/**
 * 进度信息卡片
 */
const ProgressCard: React.FC<{ flowData: DeployRecordFlowGraph }> = ({ flowData }) => {
  const { executedNodeCount, totalNodeCount, successNodeCount, failedNodeCount, runningNodeCount } = flowData;
  const progress = totalNodeCount > 0 ? (executedNodeCount / totalNodeCount) * 100 : 0;

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-sm font-medium flex items-center gap-2">
          <Layers className="h-4 w-4" />
          执行进度
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <div>
          <div className="flex justify-between items-center mb-3">
            <span className="text-sm font-semibold text-blue-600">已执行</span>
            <span className="text-xl font-bold text-blue-600">
              {executedNodeCount} / {totalNodeCount}
            </span>
          </div>
          <div className="relative">
            <Progress value={progress} className="h-3 bg-blue-100" />
            <div className="absolute inset-0 flex items-center justify-end pr-2">
              <span className="text-xs font-bold text-white drop-shadow">
                {Math.round(progress)}%
              </span>
            </div>
          </div>
        </div>
        
        <Separator />
        
        <div className="grid grid-cols-3 gap-3 text-xs">
          <div className="flex flex-col items-center p-3 rounded-lg bg-gradient-to-br from-green-50 to-emerald-50 border border-green-100">
            <CheckCircle2 className="h-5 w-5 text-green-600 mb-1.5" />
            <span className="text-muted-foreground text-[10px]">成功</span>
            <span className="font-bold text-lg text-green-600">{successNodeCount}</span>
          </div>
          <div className="flex flex-col items-center p-3 rounded-lg bg-gradient-to-br from-red-50 to-rose-50 border border-red-100">
            <XCircle className="h-5 w-5 text-red-600 mb-1.5" />
            <span className="text-muted-foreground text-[10px]">失败</span>
            <span className="font-bold text-lg text-red-600">{failedNodeCount}</span>
          </div>
          <div className="flex flex-col items-center p-3 rounded-lg bg-gradient-to-br from-blue-50 to-cyan-50 border border-blue-100">
            <Loader2 className={cn("h-5 w-5 text-blue-600 mb-1.5", runningNodeCount > 0 && "animate-spin")} />
            <span className="text-muted-foreground text-[10px]">运行中</span>
            <span className="font-bold text-lg text-blue-600">{runningNodeCount}</span>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

/**
 * 时长统计卡片
 */
const DurationCard: React.FC<{ flowData: DeployRecordFlowGraph }> = ({ flowData }) => {
  const { deployStartTime, deployDuration, nodeInstances, runningNodeCount } = flowData;
  const isRunning = runningNodeCount > 0;
  
  // 计算当前总时长
  const currentDuration = useMemo(() => {
    if (deployDuration) return deployDuration; // 后端返回的已经是毫秒
    if (isRunning) return calculateRunningDuration(deployStartTime);
    return 0;
  }, [deployDuration, isRunning, deployStartTime]);

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="text-sm font-medium flex items-center gap-2">
          <Clock className="h-4 w-4" />
          时长统计
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="space-y-2 text-sm">
          <div className="flex justify-between">
            <span className="text-muted-foreground flex items-center gap-1">
              <Calendar className="h-3 w-3" />
              开始时间:
            </span>
            <span className="font-medium">
              {deployStartTime ? formatTime(deployStartTime) : '-'}
            </span>
          </div>
          <div className="flex justify-between">
            <span className="text-muted-foreground">总时长:</span>
            <span className="font-medium">
              {formatDuration(currentDuration)}
              {isRunning && <span className="text-blue-600 ml-1">(运行中...)</span>}
            </span>
          </div>
        </div>

        <Separator />

        <div>
          <div className="text-xs text-muted-foreground mb-2">节点执行时长:</div>
          <div className="space-y-1.5 text-xs max-h-32 overflow-y-auto">
            {nodeInstances
              .filter(ni => ni.status !== 'NOT_STARTED')
              .map((ni) => {
                // 后端返回的 duration 单位已经是毫秒
                const nodeDuration = ni.duration 
                  ? ni.duration 
                  : (ni.status === 'RUNNING' ? calculateRunningDuration(ni.startTime) : 0);
                return (
                  <div key={ni.nodeId} className="flex justify-between items-center">
                    <span className="truncate flex-1" title={ni.nodeName}>
                      {ni.nodeName}
                    </span>
                    <span className="font-mono ml-2" style={{ color: getNodeStatusColor(ni.status) }}>
                      {formatDuration(nodeDuration)}
                      {ni.status === 'RUNNING' && '...'}
                    </span>
                  </div>
                );
              })}
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

/**
 * 实时监控提示
 */
const MonitoringAlert: React.FC<{ flowData: DeployRecordFlowGraph }> = ({ flowData }) => {
  const { runningNodeCount } = flowData;

  if (runningNodeCount === 0) return null;

  return (
    <Alert className="border-blue-200 bg-blue-50">
      <Loader2 className="h-4 w-4 animate-spin text-blue-600" />
      <AlertDescription className="text-sm text-blue-900">
        <span className="font-medium">部署正在进行中</span>
        <span className="block text-xs mt-1">
          当前有 {runningNodeCount} 个节点正在执行，请稍候...
        </span>
      </AlertDescription>
    </Alert>
  );
};

/**
 * 信息面板（左侧边栏）
 */
const DeployInfoPanel: React.FC<{ flowData: DeployRecordFlowGraph }> = ({ flowData }) => {
  return (
    <div className="w-80 flex-shrink-0 border-r-2 border-border bg-gradient-to-b from-muted/20 to-muted/40 p-4 space-y-4 overflow-y-auto shadow-[2px_0_8px_rgba(0,0,0,0.05)]">
      <MonitoringAlert flowData={flowData} />
      <BusinessInfoCard flowData={flowData} />
      <ProgressCard flowData={flowData} />
      <DurationCard flowData={flowData} />
    </div>
  );
};

/**
 * 部署流程图模态框（主组件）
 */
export const DeployFlowGraphModal: React.FC<DeployFlowGraphModalProps> = ({
  open,
  deployRecordId,
  onOpenChange,
}) => {
  const [loading, setLoading] = useState(false);
  const [flowData, setFlowData] = useState<DeployRecordFlowGraph | null>(null);
  const [layoutDirection, setLayoutDirection] = useState<LayoutDirection>('TB');

  // 日志对话框状态
  const [logDialogOpen, setLogDialogOpen] = useState(false);
  const [selectedNodeId, setSelectedNodeId] = useState<string>('');
  const [selectedNodeName, setSelectedNodeName] = useState<string>('');

  // 查看日志处理函数
  const handleViewLog = (nodeId: string, nodeName: string) => {
    setSelectedNodeId(nodeId);
    setSelectedNodeName(nodeName);
    setLogDialogOpen(true);
  };

  // 切换布局方向
  const toggleLayoutDirection = () => {
    setLayoutDirection(prev => prev === 'TB' ? 'LR' : 'TB');
  };

  // ReactFlow 节点点击事件处理
  const onNodeClick = useCallback((_event: React.MouseEvent, node: Node) => {
    const nodeData = node.data as unknown as CustomNodeData;
    
    // 可以查看日志的节点类型
    const loggableNodeTypes = ['JENKINS_BUILD', 'ServiceTask'];
    const canViewLog = loggableNodeTypes.includes(nodeData.nodeType) && nodeData.status !== 'NOT_STARTED';
    
    if (canViewLog) {
      console.log('Node clicked, opening log dialog:', nodeData.nodeId, nodeData.nodeName);
      handleViewLog(nodeData.nodeId, nodeData.nodeName);
    } else {
      console.log('Node clicked but cannot view log:', nodeData.nodeType, nodeData.status);
    }
  }, []);

  // 加载流程图数据
  useEffect(() => {
    if (open && deployRecordId) {
      setLoading(true);
      getDeployRecordFlowGraph(deployRecordId)
        .then((data) => {
          setFlowData(data);
        })
        .catch((error) => {
          console.error('加载部署流程图失败:', error);
        })
        .finally(() => {
          setLoading(false);
        });
    } else {
      setFlowData(null);
    }
  }, [open, deployRecordId]);

  // 创建节点ID到实例的映射
  const nodeInstanceMap = useMemo(() => {
    if (!flowData?.nodeInstances) return new Map<string, WorkflowNodeInstance>();
    const map = new Map<string, WorkflowNodeInstance>();
    flowData.nodeInstances.forEach((instance) => {
      map.set(instance.nodeId, instance);
    });
    return map;
  }, [flowData]);

  // 智能过滤：只显示实际执行路径 + 到终点的路径
  const visibleNodeIds = useMemo(() => {
    if (!flowData?.graph?.nodes || !flowData?.graph?.edges || !flowData?.nodeInstances) {
      return new Set<string>();
    }

    const visible = new Set<string>();
    
    // 1. 收集所有已执行的节点（id !== null 表示后端创建了实例）
    const executedNodes = flowData.nodeInstances.filter(ni => ni.id !== null);
    executedNodes.forEach(ni => visible.add(ni.nodeId));

    // 如果没有执行任何节点，显示所有节点（初始状态）
    if (executedNodes.length === 0) {
      flowData.graph.nodes.forEach(n => visible.add(n.id));
      return visible;
    }

    // 2. 找出最后执行的节点（按时间排序）
    const lastExecutedNode = [...executedNodes].sort((a, b) => {
      const timeA = a.startTime ? new Date(a.startTime.replace(' ', 'T')).getTime() : 0;
      const timeB = b.startTime ? new Date(b.startTime.replace(' ', 'T')).getTime() : 0;
      return timeB - timeA; // 降序
    })[0];

    // 3. 找出所有终点节点（没有出边的节点，通常是 END_EVENT）
    const allNodeIds = new Set(flowData.graph.nodes.map(n => n.id));
    const nodesWithOutgoingEdges = new Set(flowData.graph.edges.map(e => e.from));
    const endNodes = flowData.graph.nodes.filter(n => !nodesWithOutgoingEdges.has(n.id));

    // 4. BFS 从最后执行的节点到所有终点节点的路径
    if (lastExecutedNode && endNodes.length > 0) {
      const queue = [lastExecutedNode.nodeId];
      const visited = new Set<string>([lastExecutedNode.nodeId]);

      while (queue.length > 0) {
        const currentId = queue.shift()!;
        const outgoingEdges = flowData.graph.edges.filter(e => e.from === currentId);

        for (const edge of outgoingEdges) {
          if (!visited.has(edge.to)) {
            visited.add(edge.to);
            visible.add(edge.to); // 添加到可见集合
            queue.push(edge.to);
          }
        }
      }
    }

    return visible;
  }, [flowData]);

  // 转换为 React Flow 节点（只显示可见节点）
  const flowNodes: Node[] = useMemo(() => {
    if (!flowData?.graph?.nodes || !flowData?.nodeInstances) return [];

    // 过滤并转换为 React Flow 节点
    const nodes = flowData.graph.nodes
      .filter(node => visibleNodeIds.has(node.id)) // 只显示可见节点
      .map((node) => {
        const instance = nodeInstanceMap.get(node.id);

        return {
          id: node.id,
          type: 'custom',
          position: { x: 0, y: 0 }, // 忽略设计器坐标，使用dagre自动布局
          data: {
            nodeName: node.nodeName,
            nodeType: instance?.nodeType || node.nodeType, // 优先使用运行时的 nodeType
            nodeId: node.id,
            status: instance?.status || 'NOT_STARTED',
            startTime: instance?.startTime,
            endTime: instance?.endTime,
            duration: instance?.duration,
            errorMessage: instance?.errorMessage,
            processInstanceId: flowData.processInstanceId,
          },
        };
      });

    return nodes;
  }, [flowData, nodeInstanceMap, visibleNodeIds]);

  // 转换为 React Flow 边（只显示连接可见节点的边）
  const flowEdges: Edge[] = useMemo(() => {
    if (!flowData?.graph?.edges) return [];

    return flowData.graph.edges
      .filter(edge => {
        // 只显示连接可见节点的边
        return visibleNodeIds.has(edge.from) && visibleNodeIds.has(edge.to);
      })
      .map((edge, index) => {
        const source = edge.from;
        const target = edge.to;
        const sourceInstance = nodeInstanceMap.get(source);
        const targetInstance = nodeInstanceMap.get(target);
        const sourceStatus = sourceInstance?.status || 'NOT_STARTED';
        const targetStatus = targetInstance?.status || 'NOT_STARTED';

        // 根据节点状态确定边的样式
        let strokeColor = '#cbd5e1'; // 默认浅灰色
        let strokeWidth = 3; // 增加连线粗细
        let animated = false;
        let strokeDasharray: string | undefined = undefined;

        // 源节点已完成 + 目标节点也已完成/运行中 = 绿色实线
        if (sourceStatus === 'COMPLETED' && (targetStatus === 'COMPLETED' || targetStatus === 'RUNNING')) {
          strokeColor = '#10b981'; // 绿色
          strokeWidth = 3.5;
        }
        // 源节点 TERMINATED = 橙色实线
        else if (sourceStatus === 'TERMINATED') {
          strokeColor = '#f59e0b'; // 橙色
          strokeWidth = 3.5;
        }
        // 源节点失败 = 红色实线
        else if (sourceStatus === 'FAILED') {
          strokeColor = '#ef4444'; // 红色
          strokeWidth = 3.5;
        }
        // 源节点运行中 = 蓝色动画
        else if (sourceStatus === 'RUNNING') {
          strokeColor = '#3b82f6'; // 蓝色
          strokeWidth = 4; // 运行中的线更粗
          animated = true;
        }
        // 源节点完成 + 目标节点未开始 = 虚线（即将执行的路径）
        else if ((sourceStatus === 'COMPLETED' || sourceStatus === 'TERMINATED') && targetStatus === 'NOT_STARTED') {
          strokeColor = '#94a3b8'; // 稍深的灰色
          strokeDasharray = '8,4';
          strokeWidth = 2.5;
        }

        return {
          id: edge.id || `edge-${source}-${target}-${index}`,
          source,
          target,
          type: layoutDirection === 'TB' ? 'step' : 'smoothstep', // TB用直角折线，LR用平滑曲线
          animated,
          style: {
            stroke: strokeColor,
            strokeWidth,
            strokeDasharray,
          },
          markerEnd: {
            type: 'arrowclosed',
            color: strokeColor,
            width: 24,
            height: 24,
          },
        };
      });
  }, [flowData, nodeInstanceMap, visibleNodeIds, layoutDirection]);

  // 应用自动布局
  const { nodes: layoutedNodes, edges: layoutedEdges } = useMemo(() => {
    if (flowNodes.length === 0) {
      return { nodes: [], edges: [] };
    }
    return getLayoutedElements(flowNodes, flowEdges, layoutDirection);
  }, [flowNodes, flowEdges, layoutDirection]);

  // 获取部署状态信息
  const deployStatusInfo = flowData
    ? (() => {
        const { icon: StatusIcon, color } = getStatusIcon(flowData.deployStatus);
        return {
          icon: StatusIcon,
          color,
          text: getStatusText(flowData.deployStatus),
        };
      })()
    : null;

  return (
    <>
      <Dialog open={open} onOpenChange={onOpenChange}>
        <DialogContent className="!max-w-7xl w-[90vw] h-[85vh] flex flex-col p-0 overflow-hidden">
          <DialogHeader className="px-6 pt-6 pb-4 border-b flex-shrink-0">
            <DialogTitle className="flex items-center justify-between">
              <div className="flex items-center gap-2">
                {flowData && (
                  <span className="text-muted-foreground">
                    #{flowData.deployRecordId}
                  </span>
                )}
                <span>部署流程图</span>
                {deployStatusInfo && (
                  <Badge
                    variant="outline"
                    className={cn('flex items-center gap-1', deployStatusInfo.color)}
                  >
                    <deployStatusInfo.icon
                      className={cn(
                        'h-3 w-3',
                        flowData?.deployStatus === 'RUNNING' && 'animate-spin'
                      )}
                    />
                    {deployStatusInfo.text}
                  </Badge>
                )}
              </div>

              {/* 布局切换按钮 */}
              <Button
                variant="outline"
                size="sm"
                onClick={toggleLayoutDirection}
                className="flex items-center gap-2"
              >
                {layoutDirection === 'TB' ? (
                  <>
                    <ArrowDownUp className="h-4 w-4" />
                    <span>垂直布局</span>
                  </>
                ) : (
                  <>
                    <ArrowRightLeft className="h-4 w-4" />
                    <span>水平布局</span>
                  </>
                )}
              </Button>
            </DialogTitle>
          </DialogHeader>

          <div className="flex flex-1 overflow-hidden min-h-0">
            {loading ? (
              <div className="flex items-center justify-center h-full w-full">
                <div className="text-center space-y-4">
                  <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
                  <p className="text-sm text-muted-foreground">加载流程图数据...</p>
                </div>
              </div>
            ) : flowData ? (
              <>
                {/* 左侧信息面板 */}
                <DeployInfoPanel flowData={flowData} />

                {/* 右侧流程图可视化 */}
                <div className="flex-1 relative">
                  <ReactFlowProvider>
                    <ReactFlow
                      nodes={layoutedNodes}
                      edges={layoutedEdges}
                      nodeTypes={nodeTypes}
                      onNodeClick={onNodeClick}
                      fitView
                      className="bg-muted/10"
                      fitViewOptions={{ padding: 0.22, maxZoom: 1.2, minZoom: 0.3 }}
                      nodesDraggable={false}
                      nodesConnectable={false}
                      elementsSelectable={true}
                      panOnScroll={true}
                      zoomOnScroll={true}
                      zoomOnPinch={true}
                      preventScrolling={false}
                      minZoom={0.1}
                      maxZoom={2}
                    >
                      <Background
                        variant={BackgroundVariant.Dots}
                        gap={20}
                        size={1.5}
                        color="#cbd5e1"
                        className="opacity-40"
                      />
                      <Controls
                        position="bottom-right"
                        showZoom={true}
                        showFitView={true}
                        showInteractive={false}
                        className="!shadow-xl !border-2 !border-border !rounded-lg !overflow-hidden"
                      />
                      <MiniMap
                        position="bottom-left"
                        nodeColor={(node: Node) => {
                          const nodeData = node.data as unknown as CustomNodeData;
                          return getNodeStatusColor(nodeData.status);
                        }}
                        maskColor="rgba(0, 0, 0, 0.1)"
                        className="!shadow-lg !border !border-border"
                        style={{
                          height: 100,
                          width: 150,
                        }}
                      />
                    </ReactFlow>
                  </ReactFlowProvider>
                </div>
              </>
            ) : (
              <div className="flex items-center justify-center h-full w-full">
                <div className="text-center">
                  <AlertTriangle className="h-12 w-12 text-muted-foreground mx-auto mb-2" />
                  <p className="text-sm text-muted-foreground">暂无流程图数据</p>
                </div>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

      {/* 节点日志对话框 */}
      {flowData && (
        <DeployNodeLogDialog
          open={logDialogOpen}
          onOpenChange={setLogDialogOpen}
          processInstanceId={flowData.processInstanceId}
          nodeId={selectedNodeId}
          nodeName={selectedNodeName}
        />
      )}
    </>
  );
};