import { useState, useCallback, useRef, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import type {
  Connection,
  Edge,
  Node,
  NodeTypes,
} from '@xyflow/react';
import {
  ReactFlow,
  ReactFlowProvider,
  addEdge,
  useNodesState,
  useEdgesState,
  Controls,
  Background,
  MiniMap,
  Panel,
  MarkerType,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import { 
  Save, Trash2, ArrowLeft, Play, Download, Upload, 
  Copy, Undo, Redo, Settings, AlertCircle,
  Layers
} from 'lucide-react';
import api from '../lib/api';
import { useToast } from '../contexts/ToastContext';

interface Agent {
  id: string;
  name: string;
  avatar: string;
  role: string;
  model: string;
  temperature: number;
  enabled: number;
  system_prompt?: string;
  description?: string;
}

interface WorkflowData {
  id?: string;
  name: string;
  description: string;
  nodes: Node[];
  edges: Edge[];
  is_template?: number;
}

import { Handle, Position } from '@xyflow/react';

const AgentNode = ({ data, selected }: { data: any; selected: boolean }) => {
  return (
    <div
      className={`
        px-4 py-3 rounded-lg shadow-md border-2 min-w-[200px]
        ${selected ? 'border-primary bg-primary/10 ring-2 ring-primary/30' : 'border-border bg-surface'}
        transition-all duration-200
      `}
    >
      <Handle type="target" position={Position.Left} className="w-3 h-3 bg-primary" />
      <div className="flex items-center gap-2 mb-2">
        <span className="text-2xl">{data.avatar || '🤖'}</span>
        <span className="font-semibold text-text-primary text-sm">{data.label || 'Agent'}</span>
      </div>
      {data.description && (
        <div className="text-xs text-text-secondary mb-2 line-clamp-2">{data.description}</div>
      )}
      {/* 输入输出显示 */}
      <div className="space-y-1 mb-2">
        {data.inputKey && (
          <div className="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded border border-blue-200">
            ← 输入: {data.inputKey}
          </div>
        )}
        {data.outputKey && (
          <div className="text-xs text-green-600 bg-green-50 px-2 py-1 rounded border border-green-200">
          → 输出: {data.outputKey}
          </div>
        )}
      </div>
      {data.prompt && (
        <div className="text-xs text-text-secondary bg-background px-2 py-1 rounded border border-border">
          已配置Prompt
        </div>
      )}
      <Handle type="source" position={Position.Right} className="w-3 h-3 bg-primary" />
    </div>
  );
};

const nodeTypes: NodeTypes = {
  agent: AgentNode,
};

function WorkflowEditorContent() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const toast = useToast();
  const reactFlowWrapper = useRef<HTMLDivElement>(null);
  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
  const [reactFlowInstance, setReactFlowInstance] = useState<any>(null);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [selectedNode, setSelectedNode] = useState<Node | null>(null);
  const [isTemplate, setIsTemplate] = useState(false);
  const [history, setHistory] = useState<{ nodes: Node[]; edges: Edge[] }[]>([]);
  const [historyIndex, setHistoryIndex] = useState(-1);
  const [validationErrors, setValidationErrors] = useState<string[]>([]);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const { data: agents } = useQuery({
    queryKey: ['agents'],
    queryFn: async () => {
      const res = await api.get('/api/agents');
      return res.data.data as Agent[];
    },
  });

  const { data: workflow } = useQuery({
    queryKey: ['workflow', id],
    queryFn: async () => {
      const res = await api.get(`/api/workflows/${id}`);
      return res.data.data;
    },
    enabled: !!id && id !== 'new',
  });

  // Save history for undo/redo
  const saveHistory = useCallback(() => {
    const newHistory = history.slice(0, historyIndex + 1);
    newHistory.push({ nodes: [...nodes], edges: [...edges] });
    if (newHistory.length > 50) newHistory.shift();
    setHistory(newHistory);
    setHistoryIndex(newHistory.length - 1);
  }, [nodes, edges, history, historyIndex]);

  // eslint-disable-next-line react-hooks/set-state-in-effect
  useEffect(() => {
    if (workflow) {
      setName(workflow.name);
      setDescription(workflow.description);
      setIsTemplate(workflow.is_template === 1);
      if (workflow.nodes && workflow.nodes.length > 0) {
        setNodes(workflow.nodes);
      }
      if (workflow.edges && workflow.edges.length > 0) {
        setEdges(workflow.edges);
      }
      // Initialize history
      setHistory([{ nodes: workflow.nodes || [], edges: workflow.edges || [] }]);
      setHistoryIndex(0);
    }
  }, [workflow, setNodes, setEdges]);

  // Track changes for history
  const saveHistoryRef = useRef(saveHistory);
  useEffect(() => {
    saveHistoryRef.current = saveHistory;
  }, [saveHistory]);

  useEffect(() => {
    if (nodes.length > 0 || edges.length > 0) {
      // Debounce history save
      const timer = setTimeout(() => {
        saveHistoryRef.current();
      }, 500);
      return () => clearTimeout(timer);
    }
  }, [nodes.length, edges.length]);

  const validateWorkflow = useCallback(() => {
    const errors: string[] = [];
    
    if (!name.trim()) {
      errors.push('请输入工作流名称');
    }
    
    if (nodes.length === 0) {
      errors.push('请至少添加一个节点');
    }
    
    // Check for orphan nodes (except single node)
    if (nodes.length > 1) {
      const connectedNodes = new Set<string>();
      edges.forEach(e => {
        connectedNodes.add(e.source);
        connectedNodes.add(e.target);
      });
      
      const orphanNodes = nodes.filter(n => !connectedNodes.has(n.id));
      if (orphanNodes.length > 0) {
        errors.push(`发现 ${orphanNodes.length} 个孤立节点，请连接或删除`);
      }
    }
    
    // Check for cycles (simplified)
    setValidationErrors(errors);
    return errors.length === 0;
  }, [name, nodes, edges]);

  const saveMutation = useMutation({
    mutationFn: async (data: WorkflowData) => {
      if (!validateWorkflow()) {
        throw new Error('工作流验证失败');
      }
      
      if (id && id !== 'new') {
        await api.put(`/api/workflows/${id}`, data);
      } else {
        await api.post('/api/workflows', data);
      }
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['workflows'] });
      navigate('/workflows');
      toast.success('保存成功！');
    },
    onError: (error: any) => {
      toast.error(error.message || '保存失败，请重试');
    },
  });

  const onConnect = useCallback(
    (params: Connection) => {
      setEdges((eds) => addEdge({
        ...params,
        animated: true,
        markerEnd: { type: MarkerType.ArrowClosed },
        style: { stroke: '#3b82f6', strokeWidth: 2 },
      }, eds));
    },
    [setEdges]
  );

  const onDragOver = useCallback((event: React.DragEvent) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }, []);

  const onDrop = useCallback(
    (event: React.DragEvent) => {
      event.preventDefault();

      const agentId = event.dataTransfer.getData('application/reactflow/agentId');
      const agentName = event.dataTransfer.getData('application/reactflow/agentName');
      const agentAvatar = event.dataTransfer.getData('application/reactflow/agentAvatar');
      const agentDescription = event.dataTransfer.getData('application/reactflow/agentDescription');
      const agentSystemPrompt = event.dataTransfer.getData('application/reactflow/agentSystemPrompt');

      if (typeof agentId !== 'string' || !reactFlowWrapper.current) return;

      const position = reactFlowInstance.screenToFlowPosition({
        x: event.clientX,
        y: event.clientY,
      });

      const newNode: Node = {
        id: `node-${Date.now()}`,
        type: 'agent',
        position,
        data: {
          label: agentName,
          agentId,
          avatar: agentAvatar,
          description: agentDescription,
          prompt: agentSystemPrompt,
        },
        connectable: true,
      };

      setNodes((nds) => nds.concat(newNode));
    },
    [reactFlowInstance, setNodes]
  );

  const onNodeClick = useCallback((_: React.MouseEvent, node: Node) => {
    setSelectedNode(node);
  }, []);

  const onPaneClick = useCallback(() => {
    setSelectedNode(null);
  }, []);

  const deleteSelectedNode = useCallback(() => {
    if (!selectedNode) return;
    setNodes((nds) => nds.filter((n) => n.id !== selectedNode.id));
    setEdges((eds) => eds.filter((e) => e.source !== selectedNode.id && e.target !== selectedNode.id));
    setSelectedNode(null);
  }, [selectedNode, setNodes, setEdges]);

  const duplicateSelectedNode = useCallback(() => {
    if (!selectedNode) return;
    const newNode: Node = {
      ...selectedNode,
      id: `node-${Date.now()}`,
      position: { x: selectedNode.position.x + 50, y: selectedNode.position.y + 50 },
    };
    setNodes((nds) => nds.concat(newNode));
  }, [selectedNode, setNodes]);

  const handleUndo = useCallback(() => {
    if (historyIndex > 0) {
      const newIndex = historyIndex - 1;
      const state = history[newIndex];
      setNodes(state.nodes);
      setEdges(state.edges);
      setHistoryIndex(newIndex);
    }
  }, [history, historyIndex, setNodes, setEdges]);

  const handleRedo = useCallback(() => {
    if (historyIndex < history.length - 1) {
      const newIndex = historyIndex + 1;
      const state = history[newIndex];
      setNodes(state.nodes);
      setEdges(state.edges);
      setHistoryIndex(newIndex);
    }
  }, [history, historyIndex, setNodes, setEdges]);

  const handleSave = useCallback(() => {
    if (!validateWorkflow()) {
      toast.error('工作流验证失败:\n' + validationErrors.join('\n'));
      return;
    }

    saveMutation.mutate({
      name,
      description,
      nodes,
      edges,
      is_template: isTemplate ? 1 : 0,
    });
  }, [name, description, nodes, edges, isTemplate, saveMutation, validateWorkflow, validationErrors, toast]);

  const handleExecute = useCallback(() => {
    if (!id || id === 'new') {
      toast.warning('请先保存工作流再执行');
      return;
    }
    navigate(`/tasks?workflowId=${id}`);
  }, [id, navigate, toast]);

  const handleExport = useCallback(() => {
    const data = {
      name,
      description,
      nodes,
      edges,
      is_template: isTemplate ? 1 : 0,
      exportedAt: new Date().toISOString(),
    };
    
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${name || 'workflow'}-${Date.now()}.json`;
    a.click();
    URL.revokeObjectURL(url);
  }, [name, description, nodes, edges, isTemplate]);

  const handleImport = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target?.result as string);
        if (data.nodes && data.edges) {
          setName(data.name || '导入的工作流');
          setDescription(data.description || '');
          setIsTemplate(data.is_template === 1);
          setNodes(data.nodes);
          setEdges(data.edges);
          toast.success('导入成功！');
        } else {
          toast.error('无效的工作流文件');
        }
      } catch {
        toast.error('导入失败：无效的JSON格式');
      }
    };
    reader.readAsText(file);
    event.target.value = '';
  }, [setNodes, setEdges, toast]);

  const handleClear = useCallback(() => {
    if (confirm('确定要清空画布吗？此操作不可撤销。')) {
      setNodes([]);
      setEdges([]);
      setSelectedNode(null);
    }
  }, [setNodes, setEdges]);

  const proOptions = { hideAttribution: true };

  return (
    <div className="h-full flex flex-col">
      <div className="border-b border-border bg-surface p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-4">
            <button
              onClick={() => navigate('/workflows')}
              className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-background transition-colors"
            >
              <ArrowLeft className="w-4 h-4" />
              返回
            </button>
            <div>
              <h1 className="text-xl font-bold">
                {id === 'new' ? '新建工作流' : '编辑工作流'}
              </h1>
            </div>
          </div>
          <div className="flex items-center gap-2">
            {/* Undo/Redo */}
            <button
              onClick={handleUndo}
              disabled={historyIndex <= 0}
              className="p-2 rounded-lg hover:bg-background disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              title="撤销"
            >
              <Undo className="w-4 h-4" />
            </button>
            <button
              onClick={handleRedo}
              disabled={historyIndex >= history.length - 1}
              className="p-2 rounded-lg hover:bg-background disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              title="重做"
            >
              <Redo className="w-4 h-4" />
            </button>
            
            <div className="w-px h-6 bg-border mx-2" />
            
            {/* Import/Export */}
            <input
              type="file"
              ref={fileInputRef}
              onChange={handleImport}
              accept=".json"
              className="hidden"
            />
            <button
              onClick={() => fileInputRef.current?.click()}
              className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-background transition-colors"
              title="导入工作流"
            >
              <Upload className="w-4 h-4" />
              <span className="hidden sm:inline">导入</span>
            </button>
            <button
              onClick={handleExport}
              className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-background transition-colors"
              title="导出工作流"
            >
              <Download className="w-4 h-4" />
              <span className="hidden sm:inline">导出</span>
            </button>
            
            <div className="w-px h-6 bg-border mx-2" />
            
            {id && id !== 'new' && (
              <button
                onClick={handleExecute}
                className="flex items-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors"
              >
                <Play className="w-4 h-4" />
                立即执行
              </button>
            )}
            <button
              onClick={handleSave}
              disabled={saveMutation.isPending}
              className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors disabled:opacity-50"
            >
              <Save className="w-4 h-4" />
              {saveMutation.isPending ? '保存中...' : '保存'}
            </button>
          </div>
        </div>
        <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-sm font-medium text-text-secondary mb-2">工作流名称</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="例如：服务器CPU告警自动排查"
              className="w-full px-3 py-2 rounded-lg bg-background border border-border focus:border-primary focus:outline-none"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-text-secondary mb-2">工作流描述</label>
            <input
              type="text"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="描述这个工作流的用途"
              className="w-full px-3 py-2 rounded-lg bg-background border border-border focus:border-primary focus:outline-none"
            />
          </div>
          <div className="flex items-end">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={isTemplate}
                onChange={(e) => setIsTemplate(e.target.checked)}
                className="w-4 h-4 rounded border-border text-primary focus:ring-primary"
              />
              <span className="text-sm text-text-secondary">设为模板</span>
            </label>
          </div>
        </div>
        
        {/* Validation Errors */}
        {validationErrors.length > 0 && (
          <div className="mt-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
            <div className="flex items-center gap-2 text-red-500 mb-2">
              <AlertCircle className="w-4 h-4" />
              <span className="font-medium">发现问题</span>
            </div>
            <ul className="text-sm text-red-500 space-y-1">
              {validationErrors.map((err, i) => (
                <li key={i}>• {err}</li>
              ))}
            </ul>
          </div>
        )}
      </div>

      <div className="flex-1 flex min-h-0">
        <div className="w-80 border-r border-border bg-surface flex flex-col min-h-0">
          <div className="p-4 border-b border-border">
            <h3 className="font-semibold flex items-center gap-2">
              <Layers className="w-4 h-4" />
              可用Agent
            </h3>
          </div>
          
          <div className="flex-1 overflow-y-auto p-4">
            <div className="space-y-3">
              {(agents || []).filter(a => a.enabled === 1).map((agent) => (
                <div
                  key={agent.id}
                  draggable
                  onDragStart={(event) => {
                    event.dataTransfer.setData('application/reactflow/agentId', agent.id);
                    event.dataTransfer.setData('application/reactflow/agentName', agent.name);
                    event.dataTransfer.setData('application/reactflow/agentAvatar', agent.avatar || '🤖');
                    event.dataTransfer.setData('application/reactflow/agentDescription', agent.description || '');
                    event.dataTransfer.setData('application/reactflow/agentSystemPrompt', agent.system_prompt || '');
                    event.dataTransfer.effectAllowed = 'move';
                  }}
                  className="p-3 rounded-lg border border-border bg-background hover:border-primary hover:bg-primary/5 cursor-move transition-all"
                >
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-xl">{agent.avatar || '🤖'}</span>
                    <div className="flex-1 min-w-0">
                      <div className="font-medium text-text-primary text-sm truncate">{agent.name}</div>
                      <div className="text-xs text-text-secondary truncate">{agent.role}</div>
                    </div>
                  </div>
                  {agent.description && (
                    <div className="text-xs text-text-secondary line-clamp-2 mt-1">
                      {agent.description}
                    </div>
                  )}
                </div>
              ))}
              {(agents || []).filter(a => a.enabled === 1).length === 0 && (
                <div className="text-center py-8 text-text-secondary">
                  <p>暂无可用Agent</p>
                </div>
              )}
            </div>
          </div>

          {selectedNode && (
            <div className="border-t border-border p-4 bg-background/50 overflow-y-auto max-h-96">
              <div className="flex items-center justify-between mb-4">
                <h3 className="font-semibold flex items-center gap-2">
                  <Settings className="w-4 h-4" />
                  节点配置
                </h3>
                <div className="flex gap-1">
                  <button
                    onClick={duplicateSelectedNode}
                    className="p-1 text-blue-500 hover:bg-blue-500/10 rounded transition-colors"
                    title="复制节点"
                  >
                    <Copy className="w-4 h-4" />
                  </button>
                  <button
                    onClick={deleteSelectedNode}
                    className="p-1 text-red-500 hover:bg-red-500/10 rounded transition-colors"
                    title="删除节点"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              </div>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm text-text-secondary mb-2">显示名称</label>
                  <input
                    type="text"
                    value={(selectedNode.data?.label as string) || ''}
                    onChange={(e) => {
                      setNodes((nds) =>
                        nds.map((n) =>
                          n.id === selectedNode.id
                            ? { ...n, data: { ...n.data, label: e.target.value } }
                            : n
                        )
                      );
                      setSelectedNode((prev) => prev ? { ...prev, data: { ...prev.data, label: e.target.value } } : null);
                    }}
                    className="w-full px-3 py-2 rounded bg-background border border-border focus:border-primary focus:outline-none"
                  />
                </div>
                
                <div>
                  <label className="block text-sm text-text-secondary mb-2">节点描述</label>
                  <textarea
                    value={(selectedNode.data?.description as string) || ''}
                    onChange={(e) => {
                      setNodes((nds) =>
                        nds.map((n) =>
                          n.id === selectedNode.id
                            ? { ...n, data: { ...n.data, description: e.target.value } }
                            : n
                        )
                      );
                      setSelectedNode((prev) => prev ? { ...prev, data: { ...prev.data, description: e.target.value } } : null);
                    }}
                    placeholder="描述这个节点的作用"
                    rows={2}
                    className="w-full px-3 py-2 rounded bg-background border border-border focus:border-primary focus:outline-none resize-none"
                  />
                </div>

                {/* 输入输出配置 */}
                <div className="pt-3 border-t border-border">
                  <h4 className="text-sm font-semibold text-text-primary mb-3">数据流转配置</h4>
                  
                  <div className="space-y-3">
                    <div>
                      <label className="block text-sm text-text-secondary mb-1 flex items-center gap-1">
                        <span className="text-blue-500">←</span>
                        输入键名
                      </label>
                      <input
                        type="text"
                        value={(selectedNode.data?.inputKey as string) || ''}
                        onChange={(e) => {
                          setNodes((nds) =>
                            nds.map((n) =>
                              n.id === selectedNode.id
                                ? { ...n, data: { ...n.data, inputKey: e.target.value } }
                                : n
                            )
                          );
                          setSelectedNode((prev) => prev ? { ...prev, data: { ...prev.data, inputKey: e.target.value } } : null);
                        }}
                        placeholder="例如: input, message"
                        className="w-full px-3 py-2 rounded bg-background border border-border focus:border-primary focus:outline-none text-sm"
                      />
                      <p className="text-xs text-text-secondary mt-1">从上一节点接收的数据键</p>
                    </div>
                    
                    <div>
                      <label className="block text-sm text-text-secondary mb-1 flex items-center gap-1">
                        <span className="text-green-500">→</span>
                        输出键名
                      </label>
                      <input
                        type="text"
                        value={(selectedNode.data?.outputKey as string) || ''}
                        onChange={(e) => {
                          setNodes((nds) =>
                            nds.map((n) =>
                              n.id === selectedNode.id
                                ? { ...n, data: { ...n.data, outputKey: e.target.value } }
                                : n
                            )
                          );
                          setSelectedNode((prev) => prev ? { ...prev, data: { ...prev.data, outputKey: e.target.value } } : null);
                        }}
                        placeholder="例如: result, output"
                        className="w-full px-3 py-2 rounded bg-background border border-border focus:border-primary focus:outline-none text-sm"
                      />
                      <p className="text-xs text-text-secondary mt-1">传递给下一节点的数据键</p>
                    </div>
                  </div>
                </div>
                
                <div className="pt-3 border-t border-border">
                  <label className="block text-sm text-text-secondary mb-2">自定义Prompt</label>
                  <textarea
                    value={(selectedNode.data?.prompt as string) || ''}
                    onChange={(e) => {
                      setNodes((nds) =>
                        nds.map((n) =>
                          n.id === selectedNode.id
                            ? { ...n, data: { ...n.data, prompt: e.target.value } }
                            : n
                        )
                      );
                      setSelectedNode((prev) => prev ? { ...prev, data: { ...prev.data, prompt: e.target.value } } : null);
                    }}
                    placeholder="覆盖Agent的系统提示词（可选）"
                    rows={4}
                    className="w-full px-3 py-2 rounded bg-background border border-border focus:border-primary focus:outline-none resize-none font-mono text-sm"
                  />
                </div>
                
                <div className="pt-2 border-t border-border">
                  <div className="text-xs text-text-secondary space-y-1">
                    <p>• ID: {String(selectedNode.id)}</p>
                    <p>• Agent ID: {String(selectedNode.data?.agentId || '-')}</p>
                    <p>• 位置: ({Math.round(selectedNode.position.x)}, {Math.round(selectedNode.position.y)})</p>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>

        <div className="flex-1 flex flex-col">
          <div className="flex-1" ref={reactFlowWrapper}>
            <ReactFlow
              nodes={nodes}
              edges={edges}
              onNodesChange={onNodesChange}
              onEdgesChange={onEdgesChange}
              onConnect={onConnect}
              onInit={setReactFlowInstance}
              onDrop={onDrop}
              onDragOver={onDragOver}
              onNodeClick={onNodeClick}
              onPaneClick={onPaneClick}
              nodeTypes={nodeTypes}
              proOptions={proOptions}
              fitView
            >
              <Background gap={16} size={1} />
              <Controls />
              <MiniMap
                nodeColor={(node) => {
                  return node.selected ? '#3b82f6' : '#475569';
                }}
                className="border border-border rounded-lg overflow-hidden"
              />
              <Panel position="top-center">
                <div className="bg-surface/95 backdrop-blur-sm px-4 py-2 rounded-lg border border-border shadow-lg">
                  <div className="flex items-center gap-4 text-sm">
                    <span className="text-text-secondary">
                      从左侧拖拽Agent到画布创建节点
                    </span>
                    <span className="text-text-secondary">•</span>
                    <span className="text-text-secondary">
                      {nodes.length} 个节点
                    </span>
                    <span className="text-text-secondary">•</span>
                    <span className="text-text-secondary">
                      {edges.length} 条连接
                    </span>
                  </div>
                </div>
              </Panel>
              <Panel position="bottom-left">
                <div className="bg-surface/95 backdrop-blur-sm p-2 rounded-lg border border-border">
                  <button
                    onClick={handleClear}
                    className="flex items-center gap-1 px-2 py-1 text-sm text-red-500 hover:bg-red-500/10 rounded transition-colors"
                  >
                    <Trash2 className="w-3 h-3" />
                    清空画布
                  </button>
                </div>
              </Panel>
            </ReactFlow>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function WorkflowEditor() {
  return (
    <ReactFlowProvider>
      <WorkflowEditorContent />
    </ReactFlowProvider>
  );
}
