import React from 'react';
import { Music2, X } from 'lucide-react';
import { AppNodeData, NodeType } from '../../../types/node';
import { getNodeIcon, getNodeNameCN } from '../../../utils';

interface AddNodePanelProps {
    onClose: () => void;
    onAddNode: (type: NodeType, data?: Partial<AppNodeData>) => void;
}

export const AddNodePanel = ({ onClose, onAddNode }: AddNodePanelProps) => {
    const nodeOptions: 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="p-4 border-b border-white/5 flex justify-between items-center bg-white/5">
                <button onClick={onClose}><X size={14} className="text-muted-foreground hover:text-white" /></button>
                <span className="text-xs font-bold uppercase tracking-widest text-foreground/50">
                    添加节点
                </span>
            </div>
            <div className="flex-1 overflow-y-auto p-2 custom-scrollbar space-y-2">
                {nodeOptions.map((option) => {
                    const ItemIcon = option.icon;
                    return (
                        <button 
                            key={option.key} 
                            onClick={(e) => { e.stopPropagation(); onAddNode(option.type, option.data); onClose(); }} 
                            data-testid={`add-node-${String(option.key).toLowerCase()}`}
                            className="w-full text-left p-3 rounded-xl bg-white/10 hover:bg-white/10 flex items-center gap-3 text-sm text-foreground transition-colors border border-transparent hover:border-white/5 hover:shadow-lg"
                        >
                            <div className="p-2 bg-white/10 rounded-lg text-cyan-200 shadow-inner">
                                <ItemIcon size={16} />
                            </div> 
                            <div className="flex flex-col">
                                <span className="font-medium text-xs">{option.label}</span>
                            </div>
                        </button>
                    );
                })}
            </div>
        </>
    );
};
