import React from 'react';
import { 
    Trash2, Copy, RefreshCw, Clipboard, Unplug, Music2, Folder, Ungroup
} from 'lucide-react';
import { NodeType, AppNodeType, AppNodeData, ContextMenuState, ContextMenuTarget } from '../types/node';
import { getNodeIcon, getNodeNameCN } from '../utils';

interface CanvasContextMenuProps {
    contextMenu: ContextMenuState;
    target: ContextMenuTarget;
    nodes: AppNodeType[];
    clipboard: AppNodeType | null;
    
    onClose: () => void;
    
    // Actions
    onCreateNode: (type: NodeType, data?: Partial<AppNodeData>) => void;
    onCreateAndConnect: (type: NodeType, data?: Partial<AppNodeData>) => void;
    
    // Node Actions
    onCopyNode: (nodeId: string) => void;
    onReplaceMedia: (nodeId: string, mediaType: 'image' | 'video') => void;
    onDeleteNode: (nodeId: string) => void;
    
    // Global Actions
    onPaste: () => void;
    
    // Connection Actions
    onDeleteEdge: (edgeId: string) => void;
    
    // Group Actions
    onCreateGroup?: () => void;
    onUngroup?: (groupId: string) => void;
    onDeleteGroup?: (groupId: string) => void;
}

export const CanvasContextMenu: React.FC<CanvasContextMenuProps> = ({
    contextMenu,
    target,
    nodes,
    clipboard,
    onClose,
    onCreateNode,
    onCreateAndConnect,
    onCopyNode,
    onReplaceMedia,
    onDeleteNode,
    onPaste,
    onDeleteEdge,
    onCreateGroup,
    onUngroup,
    onDeleteGroup
}) => {
    const createNodeOptions: Array<{
        key: string;
        type: NodeType;
        label: string;
        icon: React.ComponentType<{ size?: number; className?: string }>;
        data?: Partial<AppNodeData>;
    }> = [
        { key: NodeType.PROMPT_INPUT, type: NodeType.PROMPT_INPUT, label: getNodeNameCN(NodeType.PROMPT_INPUT), icon: getNodeIcon(NodeType.PROMPT_INPUT) },
        { key: NodeType.LYRICS_GENERATOR, type: NodeType.LYRICS_GENERATOR, label: getNodeNameCN(NodeType.LYRICS_GENERATOR), icon: getNodeIcon(NodeType.LYRICS_GENERATOR), data: { title: '歌词生成' } },
        { key: NodeType.PROMPT_GENERATOR, type: NodeType.PROMPT_GENERATOR, label: getNodeNameCN(NodeType.PROMPT_GENERATOR), icon: getNodeIcon(NodeType.PROMPT_GENERATOR) },
        { key: NodeType.IMAGE_GENERATOR, type: NodeType.IMAGE_GENERATOR, label: getNodeNameCN(NodeType.IMAGE_GENERATOR), icon: getNodeIcon(NodeType.IMAGE_GENERATOR) },
        { key: NodeType.VIDEO_GENERATOR, type: NodeType.VIDEO_GENERATOR, label: getNodeNameCN(NodeType.VIDEO_GENERATOR), icon: getNodeIcon(NodeType.VIDEO_GENERATOR) },
        { key: NodeType.AUDIO_GENERATOR, type: NodeType.AUDIO_GENERATOR, label: getNodeNameCN(NodeType.AUDIO_GENERATOR), icon: getNodeIcon(NodeType.AUDIO_GENERATOR), data: { generationType: 'audio' } },
        { key: `${NodeType.AUDIO_GENERATOR}-music`, type: NodeType.AUDIO_GENERATOR, label: '音乐生成', icon: Music2, data: { generationType: 'music', title: '音乐生成' } },
        { key: NodeType.VIDEO_ANALYZER, type: NodeType.VIDEO_ANALYZER, label: getNodeNameCN(NodeType.VIDEO_ANALYZER), icon: getNodeIcon(NodeType.VIDEO_ANALYZER) },
        { key: NodeType.IMAGE_EDITOR, type: NodeType.IMAGE_EDITOR, label: getNodeNameCN(NodeType.IMAGE_EDITOR), icon: getNodeIcon(NodeType.IMAGE_EDITOR) },
    ];

    return (
        <div 
            className="fixed z-[100] bg-card/80 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl p-1.5 min-w-[160px] animate-in fade-in zoom-in-95 duration-200 origin-top-left" 
            style={{ top: contextMenu.y, left: contextMenu.x }} 
            onMouseDown={(e) => e.stopPropagation()}
        >
            {target.type === 'handle-create' && (
                <>
                    <div className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">添加并连接</div>
                    {createNodeOptions.map((option) => { 
                        const ItemIcon = option.icon; 
                        return ( 
                            <button key={option.key} className="w-full text-left px-3 py-2 text-xs font-medium text-foreground hover:bg-white/10 rounded-lg flex items-center gap-2.5 transition-colors" onClick={() => { onCreateAndConnect(option.type, option.data); onClose(); }}> 
                                <ItemIcon size={12} className="text-cyan-400" /> {option.label} 
                            </button> 
                        ); 
                    })}
                </>
            )}

            {target.type === 'node' && target.id && (
                <>
                    <button className="w-full text-left px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-cyan-500/20 hover:text-cyan-400 rounded-lg flex items-center gap-2 transition-colors" onClick={() => { 
                        onCopyNode(target.id!);
                        onClose(); 
                    }}>
                        <Copy size={12} /> 复制节点
                    </button>
                    {(() => { 
                        const targetNode = nodes.find(n => n.id === target.id); 
                        if (targetNode && targetNode.type === 'appNode') { 
                            const data = targetNode.data as AppNodeData;
                            const isVideo = data.type === NodeType.VIDEO_GENERATOR || data.type === NodeType.VIDEO_ANALYZER; 
                            const isImage = data.type === NodeType.IMAGE_GENERATOR || data.type === NodeType.IMAGE_EDITOR; 
                            if (isVideo || isImage) { 
                                return ( 
                                    <button className="w-full text-left px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-purple-500/20 hover:text-purple-400 rounded-lg flex items-center gap-2 transition-colors" onClick={() => { 
                                        onReplaceMedia(target.id!, isVideo ? 'video' : 'image');
                                        onClose(); 
                                    }}> 
                                        <RefreshCw size={12} /> 替换素材 
                                    </button> 
                                ); 
                            } 
                        } 
                        return null; 
                    })()}
                    <button className="w-full text-left px-3 py-2 text-xs font-medium text-red-400 hover:bg-red-500/20 rounded-lg flex items-center gap-2 transition-colors mt-1" onClick={() => { 
                        onDeleteNode(target.id!);
                        onClose(); 
                    }}>
                        <Trash2 size={12} /> 删除节点
                    </button>
                </>
            )}

            {(target.type === 'create' || target.type === 'pane') && (
                <>
                    {clipboard && (
                        <>
                            <button className="w-full text-left px-3 py-2 text-xs font-medium text-foreground hover:bg-white/10 rounded-lg flex items-center gap-2.5 transition-colors" onClick={() => {
                                onPaste();
                                onClose();
                            }}>
                                <Clipboard size={12} className="text-cyan-400" /> 粘贴节点
                            </button>
                            <div className="w-full h-px bg-white/10 my-1"></div>
                        </>
                    )}
                    <div className="px-3 py-1.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">创建新节点</div>
                    {createNodeOptions.map((option) => { 
                        const ItemIcon = option.icon; 
                        return ( 
                            <button key={option.key} className="w-full text-left px-3 py-2 text-xs font-medium text-foreground hover:bg-white/10 rounded-lg flex items-center gap-2.5 transition-colors" onClick={() => { 
                                onCreateNode(option.type, option.data); 
                                onClose(); 
                            }}> 
                                <ItemIcon size={12} className="text-cyan-400" /> {option.label} 
                            </button> 
                        ); 
                    })}
                </>
            )}

            {target.type === 'connection' && target.id && (
                <button className="w-full text-left px-3 py-2 text-xs font-medium text-red-400 hover:bg-red-500/20 rounded-lg flex items-center gap-2 transition-colors" onClick={() => { 
                    onDeleteEdge(target.id!);
                    onClose(); 
                }}> 
                    <Unplug size={12} /> 删除连接线 
                </button>
            )}

            {target.type === 'group' && target.id && (
                <>
                    <button className="w-full text-left px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-cyan-500/20 hover:text-cyan-400 rounded-lg flex items-center gap-2 transition-colors" onClick={() => { 
                        onUngroup?.(target.id!);
                        onClose(); 
                    }}>
                        <Ungroup size={12} /> 解散分组
                    </button>
                    <button className="w-full text-left px-3 py-2 text-xs font-medium text-red-400 hover:bg-red-500/20 rounded-lg flex items-center gap-2 transition-colors mt-1" onClick={() => { 
                        onDeleteGroup?.(target.id!);
                        onClose(); 
                    }}>
                        <Trash2 size={12} /> 删除分组
                    </button>
                </>
            )}

            {(target.type === 'create' || target.type === 'pane') && onCreateGroup && (
                <>
                    <div className="w-full h-px bg-white/10 my-1"></div>
                    <button className="w-full text-left px-3 py-2 text-xs font-medium text-muted-foreground hover:bg-cyan-500/20 hover:text-cyan-400 rounded-lg flex items-center gap-2 transition-colors" onClick={() => { 
                        onCreateGroup();
                        onClose(); 
                    }}>
                        <Folder size={12} /> 创建分组
                    </button>
                </>
            )}
        </div>
    );
};
