'use client';

import React, { useEffect, useRef } from 'react';
import { 
    Video, Type, Image as ImageIcon, 
    Edit, Mic2, Info, FileSearch, Sparkles, ScrollText
} from 'lucide-react';
import { NodeType } from '../types/node';
import { cn } from '@/utils';
import { VALID_CONNECTIONS } from '../hooks/useSocketInteraction';

interface ConnectionMenuProps {
    x: number;
    y: number;
    sourceType?: string;
    onSelect: (type: NodeType) => void;
    onClose: () => void;
}

const NODE_OPTIONS = [
    { type: NodeType.PROMPT_INPUT, label: 'Prompt Input', icon: Type, color: 'text-amber-400' },
    { type: NodeType.LYRICS_GENERATOR, label: 'Lyrics Generator', icon: ScrollText, color: 'text-indigo-400' },
    { type: NodeType.PROMPT_GENERATOR, label: 'Prompt Optimizer', icon: Sparkles, color: 'text-fuchsia-400' },
    { type: NodeType.IMAGE_GENERATOR, label: 'Image Generator', icon: ImageIcon, color: 'text-cyan-400' },
    { type: NodeType.VIDEO_GENERATOR, label: 'Video Generator', icon: Video, color: 'text-purple-400' },
    { type: NodeType.AUDIO_GENERATOR, label: 'Audio Generator', icon: Mic2, color: 'text-pink-400' },
    { type: NodeType.VIDEO_ANALYZER, label: 'Video Analyzer', icon: FileSearch, color: 'text-emerald-400' },
    { type: NodeType.IMAGE_EDITOR, label: 'Image Editor', icon: Edit, color: 'text-rose-400' },
    { type: NodeType.INFO_DISPLAY, label: 'Info Display', icon: Info, color: 'text-blue-400' },
];

export const ConnectionMenu = ({ x, y, sourceType, onSelect, onClose }: ConnectionMenuProps) => {
    const menuRef = useRef<HTMLDivElement>(null);

    // Filter options based on source type validity
    const options = React.useMemo(() => {
        if (!sourceType) return NODE_OPTIONS;
        const validTargets = VALID_CONNECTIONS[sourceType] || [];
        return NODE_OPTIONS.filter(opt => validTargets.includes(opt.type));
    }, [sourceType]);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
                onClose();
            }
        };

        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, [onClose]);

    if (options.length === 0) return null;

    return (
        <div 
            ref={menuRef}
            className="fixed z-50 bg-black/80 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl p-2 min-w-[200px] animate-in fade-in zoom-in-95 duration-200"
            style={{ 
                left: x, 
                top: y,
            }}
        >
            <div className="text-xs font-bold text-muted-foreground px-2 py-1 mb-1 uppercase tracking-wider">
                Add Node
            </div>
            <div className="flex flex-col gap-1">
                {options.map((option) => (
                    <button
                        key={option.type}
                        onClick={() => onSelect(option.type)}
                        className="flex items-center gap-3 w-full px-3 py-2 text-sm rounded-lg hover:bg-white/10 transition-colors text-left group"
                    >
                        <option.icon size={16} className={cn(option.color, "group-hover:scale-110 transition-transform")} />
                        <span className="text-gray-200 font-medium">{option.label}</span>
                    </button>
                ))}
            </div>
        </div>
    );
};
