import React, { useState, useRef, useEffect } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ArrowLeft, Play, Save, Rocket, Plus, Bot, UserCheck, Wrench, Ban, Zap, X, Copy, MousePointer2 } from 'lucide-react';
import { Button, Input, Badge } from '../components/UI';
import { mockAssistants, mockKnowledgeBases, mockWorkflows } from '../services/mockData';
import { WorkflowNode, WorkflowEdge, Workflow } from '../types';
import { DebugDrawer } from './Assistants';

export const WorkflowEditorPage: React.FC = () => {
  const navigate = useNavigate();
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  
  // Template data for new workflows
  const templateName = searchParams.get('name');
  const templateType = searchParams.get('template');

  // Find initial workflow or create a new one
  const existingWf = mockWorkflows.find(w => w.id === id);
  const [name, setName] = useState(templateName || existingWf?.name || '新工作流');
  const [nodes, setNodes] = useState<WorkflowNode[]>(() => {
    if (existingWf) return existingWf.nodes;
    if (templateType === 'lead') {
      return [
        { 
          name: 'introduction', 
          type: 'conversation', 
          isStart: true,
          metadata: { position: { x: 100, y: 100 } }, 
          prompt: "You are Morgan from GrowthPartners. Start with: 'Hello, this is Morgan from GrowthPartners. We help businesses improve their operational efficiency through custom software solutions. Do you have a few minutes to chat about how we might be able to help your business?'",
          messagePlan: { firstMessage: "Hello, this is Morgan from GrowthPartners. Do you have a few minutes to chat?" }
        },
        { 
          name: 'need_discovery', 
          type: 'conversation', 
          metadata: { position: { x: 450, y: 250 } }, 
          prompt: "Conduct need discovery by asking about business challenges...",
          variableExtractionPlan: {
              output: [
                  { title: 'industry', type: 'string', description: 'user industry' },
                  { title: 'pain_points', type: 'string', description: 'main challenges' }
              ]
          }
        },
        {
          name: 'hangup_node',
          type: 'end',
          metadata: { position: { x: 450, y: 550 } },
          tool: {
              type: 'endCall',
              function: { name: 'hangup', parameters: {} },
              messages: [{ type: 'request-start', content: 'Thank you for your time!', blocking: true }]
          }
        }
      ];
    }
    return [
      { 
        name: 'start_node', 
        type: 'conversation', 
        isStart: true,
        metadata: { position: { x: 200, y: 200 } }, 
        prompt: '欢迎对话系统...',
        messagePlan: { firstMessage: '你好！' }
      }
    ];
  });
  const [edges, setEdges] = useState<WorkflowEdge[]>(existingWf?.edges || []);
  
  const [selectedNodeName, setSelectedNodeName] = useState<string | null>(null);
  const [isAddMenuOpen, setIsAddMenuOpen] = useState(false);
  const [isDebugOpen, setIsDebugOpen] = useState(false);
  const [zoom, setZoom] = useState(1);
  const [panOffset, setPanOffset] = useState({ x: 0, y: 0 });
  
  const [draggingNodeName, setDraggingNodeName] = useState<string | null>(null);
  const [isPanning, setIsPanning] = useState(false);
  const dragOffset = useRef({ x: 0, y: 0 });
  const panStart = useRef({ x: 0, y: 0 });

  const selectedNode = nodes.find(n => n.name === selectedNodeName);

  // Scroll Zoom handler
  const handleWheel = (e: React.WheelEvent) => {
    e.preventDefault();
    const zoomSpeed = 0.001;
    const newZoom = Math.min(Math.max(zoom - e.deltaY * zoomSpeed, 0.2), 3);
    setZoom(newZoom);
  };

  // Middle mouse click handler for panning
  const handleMouseDown = (e: React.MouseEvent) => {
    // Button 1 is middle mouse
    if (e.button === 1) {
        e.preventDefault();
        setIsPanning(true);
        panStart.current = { x: e.clientX - panOffset.x, y: e.clientY - panOffset.y };
    }
  };

  const handleNodeMouseDown = (e: React.MouseEvent, nodeName: string) => {
    if (e.button !== 0) return; // Only left click for nodes
    e.stopPropagation();
    setSelectedNodeName(nodeName);
    setDraggingNodeName(nodeName);
    const node = nodes.find(n => n.name === nodeName);
    if (node) {
        dragOffset.current = {
            x: e.clientX - node.metadata.position.x * zoom,
            y: e.clientY - node.metadata.position.y * zoom
        };
    }
  };

  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
        if (draggingNodeName) {
            setNodes(prev => prev.map(n => 
                n.name === draggingNodeName 
                ? { ...n, metadata: { ...n.metadata, position: { x: (e.clientX - dragOffset.current.x) / zoom, y: (e.clientY - dragOffset.current.y) / zoom } } } 
                : n
            ));
        } else if (isPanning) {
            setPanOffset({
                x: e.clientX - panStart.current.x,
                y: e.clientY - panStart.current.y
            });
        }
    };
    const handleMouseUp = (e: MouseEvent) => {
        setDraggingNodeName(null);
        setIsPanning(false);
    };

    window.addEventListener('mousemove', handleMouseMove);
    window.addEventListener('mouseup', handleMouseUp);
    return () => {
        window.removeEventListener('mousemove', handleMouseMove);
        window.removeEventListener('mouseup', handleMouseUp);
    };
  }, [draggingNodeName, isPanning, zoom]);

  const addNode = (type: WorkflowNode['type']) => {
      const newNode: WorkflowNode = {
          name: `${type}_${Date.now()}`,
          type,
          metadata: { position: { x: (300 - panOffset.x) / zoom, y: (300 - panOffset.y) / zoom } },
          prompt: type === 'conversation' ? '输入该节点的 Prompt...' : '',
          tool: type === 'end' ? { type: 'endCall', function: { name: 'hangup', parameters: {} } } : undefined
      };
      setNodes([...nodes, newNode]);
      setIsAddMenuOpen(false);
  };

  const updateNodeData = (field: string, value: any) => {
    if (!selectedNodeName) return;
    setNodes(prev => prev.map(n => n.name === selectedNodeName ? { ...n, [field]: value } : n));
  };

  const handleSave = () => {
    const now = new Date().toISOString().replace('T', ' ').substring(0, 16);
    const updatedWorkflow: Workflow = {
      id: id || `wf_${Date.now()}`,
      name,
      nodeCount: nodes.length,
      createdAt: existingWf?.createdAt || now,
      updatedAt: now,
      nodes,
      edges,
    };

    if (id) {
        const idx = mockWorkflows.findIndex(w => w.id === id);
        if (idx !== -1) mockWorkflows[idx] = updatedWorkflow;
    } else {
        mockWorkflows.push(updatedWorkflow);
    }
    alert('保存成功！工作流已同步至列表。');
    navigate('/workflows');
  };

  return (
    <div className="flex flex-col h-[calc(100vh-6rem)] relative bg-card/10 border border-white/5 rounded-2xl overflow-hidden animate-in fade-in duration-300">
      {/* Editor Header */}
      <header className="h-14 border-b border-white/5 bg-white/[0.02] flex items-center justify-between px-4 shrink-0">
        <div className="flex items-center space-x-3">
            <Button variant="ghost" size="icon" onClick={() => navigate('/workflows')} className="h-8 w-8">
                <ArrowLeft className="h-4 w-4" />
            </Button>
            <div className="h-4 w-px bg-white/10"></div>
            <Input 
                value={name} 
                onChange={e => setName(e.target.value)} 
                className="bg-transparent border-transparent focus:bg-white/5 font-bold text-sm h-8 w-48 shadow-none text-white"
            />
        </div>
        <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" onClick={() => setIsDebugOpen(true)}>
                <Play className="mr-1.5 h-3.5 w-3.5" /> 调试
            </Button>
            <Button variant="secondary" size="sm" onClick={handleSave}>
                <Save className="mr-1.5 h-3.5 w-3.5" /> 保存
            </Button>
            <Button size="sm" onClick={() => alert('发布成功！')}>
                <Rocket className="mr-1.5 h-3.5 w-3.5" /> 发布
            </Button>
        </div>
      </header>

      {/* Canvas Area */}
      <div 
        className="flex-1 relative bg-[radial-gradient(rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:24px_24px] overflow-hidden select-none cursor-crosshair"
        onWheel={handleWheel}
        onMouseDown={handleMouseDown}
      >
        {/* Floating Controls */}
        <div className="absolute top-4 left-4 z-10 flex flex-col items-start gap-2">
            <Button 
                className="rounded-xl shadow-lg h-10 px-5 bg-primary text-primary-foreground font-semibold hover:bg-primary/90"
                onClick={() => setIsAddMenuOpen(!isAddMenuOpen)}
            >
                <Plus className="mr-2 h-4 w-4" /> {isAddMenuOpen ? '取消' : '添加节点'}
            </Button>
            {isAddMenuOpen && (
                <div className="bg-background/90 backdrop-blur-xl border border-white/10 rounded-xl p-1.5 w-48 shadow-2xl animate-in slide-in-from-top-2">
                    <button onClick={() => addNode('conversation')} className="flex items-center w-full p-2.5 hover:bg-primary/10 rounded-lg transition-colors text-sm text-left text-white">
                        <Bot className="w-4 h-4 mr-3 text-primary" /> <span>对话节点</span>
                    </button>
                    <button onClick={() => addNode('tool')} className="flex items-center w-full p-2.5 hover:bg-purple-400/10 rounded-lg transition-colors text-sm text-left text-white">
                        <Wrench className="w-4 h-4 mr-3 text-purple-400" /> <span>工具节点</span>
                    </button>
                    <button onClick={() => addNode('human')} className="flex items-center w-full p-2.5 hover:bg-orange-400/10 rounded-lg transition-colors text-sm text-left text-white">
                        <UserCheck className="w-4 h-4 mr-3 text-orange-400" /> <span>转人工</span>
                    </button>
                    <button onClick={() => addNode('end')} className="flex items-center w-full p-2.5 hover:bg-destructive/10 rounded-lg transition-colors text-sm text-left text-destructive">
                        <Ban className="w-4 h-4 mr-3" /> <span>结束对话</span>
                    </button>
                </div>
            )}
            <div className="flex items-center gap-2 bg-white/5 border border-white/10 rounded-lg px-2 py-1 text-[10px] text-muted-foreground font-mono">
                <span>{Math.round(zoom * 100)}%</span>
                <span className="opacity-30">|</span>
                <span>POS: {Math.round(panOffset.x)}, {Math.round(panOffset.y)}</span>
            </div>
        </div>

        {/* Scalable Container */}
        <div 
            className="absolute inset-0"
            style={{ 
                transform: `translate(${panOffset.x}px, ${panOffset.y}px) scale(${zoom})`,
                transformOrigin: '0 0'
            }}
        >
            {nodes.map(node => (
                <div 
                    key={node.name}
                    onMouseDown={(e) => handleNodeMouseDown(e, node.name)}
                    style={{ left: node.metadata.position.x, top: node.metadata.position.y }}
                    className={`absolute w-56 p-4 rounded-xl border bg-card/70 backdrop-blur-sm cursor-grab active:cursor-grabbing group transition-shadow ${selectedNodeName === node.name ? 'border-primary shadow-[0_0_30px_rgba(6,182,212,0.3)]' : 'border-white/10 hover:border-white/30'}`}
                >
                    <div className="flex items-center justify-between mb-3">
                        <div className="flex items-center space-x-2 overflow-hidden">
                            <NodeIcon type={node.type} />
                            <span className="font-semibold text-[10px] truncate uppercase tracking-tight text-white">{node.name}</span>
                        </div>
                        {node.isStart && <Badge variant="default" className="scale-75 origin-right">START</Badge>}
                    </div>
                    <div className="text-[10px] text-muted-foreground line-clamp-3 italic opacity-60 leading-relaxed">
                        {node.prompt || (node.tool ? `Action: ${node.tool.type}` : '待配置逻辑...')}
                    </div>

                    {/* Port simulation */}
                    <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-primary rounded-full border-2 border-background opacity-0 group-hover:opacity-100 cursor-crosshair transition-opacity shadow-[0_0_5px_rgba(6,182,212,0.5)]"></div>
                    <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 bg-muted rounded-full border-2 border-background opacity-0 group-hover:opacity-100 cursor-crosshair transition-opacity"></div>
                </div>
            ))}
        </div>

        {/* Bottom Right: Minimap */}
        <div className="absolute bottom-6 right-6 w-48 h-32 bg-black/60 border border-white/10 rounded-2xl shadow-2xl pointer-events-none overflow-hidden flex flex-col backdrop-blur-md">
            <div className="p-2 border-b border-white/5 bg-white/5 text-[9px] text-muted-foreground font-bold tracking-[0.2em] text-center uppercase">Minimap</div>
            <div className="flex-1 relative p-3 opacity-60">
                <div className="absolute inset-0 flex items-center justify-center">
                    <div className="relative w-full h-full">
                        {nodes.map((n, i) => {
                            // Simple scaling for minimap
                            const mx = (n.metadata.position.x / 10) % 100;
                            const my = (n.metadata.position.y / 10) % 100;
                            return (
                                <div 
                                    key={i} 
                                    className={`absolute w-3 h-2 rounded-sm ${n.type === 'conversation' ? 'bg-primary' : n.type === 'end' ? 'bg-destructive' : 'bg-white/40'}`}
                                    style={{ left: `${20 + mx}%`, top: `${20 + my}%` }}
                                ></div>
                            );
                        })}
                    </div>
                </div>
                {/* Viewport visualization */}
                <div 
                  className="absolute border border-primary/40 bg-primary/5 rounded shadow-sm"
                  style={{ width: '40%', height: '40%', left: '30%', top: '30%' }}
                />
            </div>
        </div>

        {/* Navigator Guide */}
        <div className="absolute bottom-4 left-4 text-[10px] text-muted-foreground/30 font-mono flex items-center gap-2">
            <MousePointer2 className="w-3 h-3" /> 鼠标中键拖拽画布 | 滚轮缩放
        </div>
      </div>

      {/* Right Settings Panel */}
      {selectedNode && (
          <div className="absolute right-0 top-14 bottom-0 w-80 border-l border-white/10 bg-background/95 backdrop-blur-2xl flex flex-col animate-in slide-in-from-right duration-300 z-20 shadow-[-10px_0_30px_rgba(0,0,0,0.5)]">
              <div className="p-4 border-b border-white/5 flex items-center justify-between bg-white/5">
                  <h3 className="text-sm font-bold uppercase tracking-widest text-primary">节点设置</h3>
                  <Button variant="ghost" size="icon" onClick={() => setSelectedNodeName(null)} className="h-8 w-8">
                      <X className="h-4 w-4" />
                  </Button>
              </div>
              <div className="flex-1 overflow-y-auto p-5 space-y-6 custom-scrollbar">
                  <div className="space-y-2">
                      <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">唯一标识 (Node Name)</label>
                      <Input 
                        value={selectedNode.name} 
                        onChange={e => updateNodeData('name', e.target.value)}
                        className="h-8 text-xs font-mono text-white bg-white/10"
                      />
                  </div>

                  <div className="space-y-2">
                      <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">节点类型</label>
                      <Badge variant="outline" className="w-fit">{selectedNode.type.toUpperCase()}</Badge>
                  </div>

                  {selectedNode.type === 'conversation' && (
                      <>
                        <div className="space-y-2">
                            <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">Prompt (指令)</label>
                            <textarea 
                                className="w-full h-48 bg-white/5 border border-white/10 rounded-lg p-3 text-xs focus:outline-none focus:ring-1 focus:ring-primary/50 text-white placeholder:text-muted-foreground/30 leading-relaxed"
                                value={selectedNode.prompt || ''}
                                onChange={e => updateNodeData('prompt', e.target.value)}
                                placeholder="输入该节点的业务规则、语气要求和回复逻辑..."
                            />
                        </div>
                        <div className="space-y-2">
                            <label className="text-[10px] text-muted-foreground uppercase font-mono tracking-widest">First Message (开场白)</label>
                            <Input 
                                value={selectedNode.messagePlan?.firstMessage || ''}
                                onChange={e => updateNodeData('messagePlan', { ...selectedNode.messagePlan, firstMessage: e.target.value })}
                                className="h-8 text-xs text-white"
                                placeholder="进入该节点时 AI 主动发起的消息..."
                            />
                        </div>
                      </>
                  )}

                  {selectedNode.type === 'end' && (
                      <div className="p-4 rounded-xl border border-destructive/20 bg-destructive/5 text-xs text-destructive/80 space-y-2">
                          <p className="font-bold">结束对话节点</p>
                          <p>到达此节点后，系统将根据配置执行挂断操作。</p>
                      </div>
                  )}

                  <div className="pt-4 border-t border-white/5">
                      <label className="flex items-center gap-3 cursor-pointer group">
                          <input 
                            type="checkbox" 
                            checked={selectedNode.isStart} 
                            onChange={e => updateNodeData('isStart', e.target.checked)}
                            className="w-4 h-4 rounded accent-primary border-white/10 bg-white/5"
                          />
                          <span className="text-[10px] text-muted-foreground group-hover:text-primary transition-colors uppercase font-mono tracking-widest">起始节点 (Start Node)</span>
                      </label>
                  </div>
              </div>
          </div>
      )}

      {/* Debug Side Drawer */}
      <DebugDrawer 
        isOpen={isDebugOpen} 
        onClose={() => setIsDebugOpen(false)} 
        assistant={mockAssistants[0]} 
      />
    </div>
  );
};

const NodeIcon = ({ type }: { type: WorkflowNode['type'] }) => {
    switch (type) {
        case 'conversation': return <Bot className="h-4 w-4 text-primary" />;
        case 'human': return <UserCheck className="h-4 w-4 text-orange-400" />;
        case 'tool': return <Wrench className="h-4 w-4 text-purple-400" />;
        case 'end': return <Ban className="h-4 w-4 text-destructive" />;
        default: return <MousePointer2 className="h-4 w-4" />;
    }
};