import React, { useState, useRef, useEffect } from 'react';
import { Input } from '@/components/ui/input';
import { X, User, Search, Loader2 } from 'lucide-react';
import { useUserSearch } from '@/hooks/use-user-search';

interface User {
    id: number;
    name: string;
    email: string;
}

interface CollaboratorSearchProps {
    collaborators: string[];
    onAddCollaborator: (email: string) => void;
    onRemoveCollaborator: (email: string) => void;
    error?: string;
}

export default function CollaboratorSearch({
    collaborators,
    onAddCollaborator,
    onRemoveCollaborator,
    error
}: CollaboratorSearchProps) {
    const [searchValue, setSearchValue] = useState('');
    const [showDropdown, setShowDropdown] = useState(false);
    const [selectedIndex, setSelectedIndex] = useState(-1);
    const inputRef = useRef<HTMLInputElement>(null);
    const dropdownRef = useRef<HTMLDivElement>(null);

    const { users, isLoading, error: searchError, searchUsers, clearResults } = useUserSearch(300);

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const value = e.target.value;
        setSearchValue(value);
        setSelectedIndex(-1);

        if (value.length >= 3) {
            searchUsers(value);
            setShowDropdown(true);
        } else {
            clearResults();
            setShowDropdown(false);
        }
    };

    const handleUserSelect = (user: User) => {
        if (!collaborators.includes(user.email)) {
            onAddCollaborator(user.email);
        }
        setSearchValue('');
        setShowDropdown(false);
        clearResults();
        inputRef.current?.focus();
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (!showDropdown || users.length === 0) {
            return;
        }

        switch (e.key) {
            case 'ArrowDown':
                e.preventDefault();
                setSelectedIndex(prev =>
                    prev < users.length - 1 ? prev + 1 : prev
                );
                break;
            case 'ArrowUp':
                e.preventDefault();
                setSelectedIndex(prev => prev > 0 ? prev - 1 : -1);
                break;
            case 'Enter':
                e.preventDefault();
                if (selectedIndex >= 0 && selectedIndex < users.length) {
                    handleUserSelect(users[selectedIndex]);
                }
                break;
            case 'Escape':
                setShowDropdown(false);
                setSelectedIndex(-1);
                break;
        }
    };    // Close dropdown when clicking outside
    useEffect(() => {
        const handleClickOutside = (event: MouseEvent) => {
            if (
                dropdownRef.current &&
                !dropdownRef.current.contains(event.target as Node) &&
                !inputRef.current?.contains(event.target as Node)
            ) {
                setShowDropdown(false);
            }
        };

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

    return (
        <div className="space-y-2">
            <label className="text-sm font-medium text-slate-900 dark:text-white">
                Investigadores
            </label>

            <div className="relative">
                <div className="relative">
                    <Input
                        ref={inputRef}
                        type="email"
                        value={searchValue}
                        onChange={handleInputChange}
                        onKeyDown={handleKeyDown}
                        placeholder="Buscar por email..."
                        className={`pr-10 ${error ? 'border-red-500' : ''}`}
                    />
                    <div className="absolute inset-y-0 right-0 flex items-center pr-3">
                        {isLoading ? (
                            <Loader2 className="h-4 w-4 animate-spin text-slate-400" />
                        ) : (
                            <Search className="h-4 w-4 text-slate-400" />
                        )}
                    </div>
                </div>

                {/* Dropdown with search results */}
                {showDropdown && (users.length > 0 || searchError || (searchValue.length >= 3 && users.length === 0 && !isLoading)) && (
                    <div
                        ref={dropdownRef}
                        className="absolute z-10 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-md shadow-lg max-h-60 overflow-auto"
                    >
                        {searchError && (
                            <div className="px-3 py-2 text-sm text-red-600 dark:text-red-400">
                                {searchError}
                            </div>
                        )}

                        {/* No results message */}
                        {!isLoading && !searchError && users.length === 0 && searchValue.length >= 3 && (
                            <div className="px-3 py-4 text-center text-slate-500 dark:text-slate-400">
                                <div className="flex flex-col items-center gap-2">
                                    <User className="w-8 h-8 text-slate-300 dark:text-slate-600" />
                                    <div className="text-sm">
                                        No se encontraron usuarios registrados con el email "<span className="font-medium">{searchValue}</span>"
                                    </div>
                                    <div className="text-xs text-slate-400 dark:text-slate-500">
                                        Solo se pueden agregar usuarios que estén registrados en el sistema
                                    </div>
                                </div>
                            </div>
                        )}

                        {users.map((user, index) => {
                            const isAlreadyAdded = collaborators.includes(user.email);
                            return (
                                <div
                                    key={user.id}
                                    className={`
                                        px-3 py-2 cursor-pointer transition-colors
                                        ${selectedIndex === index
                                            ? 'bg-emerald-50 dark:bg-emerald-900/20'
                                            : 'hover:bg-slate-50 dark:hover:bg-slate-700'
                                        }
                                        ${isAlreadyAdded
                                            ? 'opacity-50 cursor-not-allowed'
                                            : ''
                                        }
                                    `}
                                    onClick={() => !isAlreadyAdded && handleUserSelect(user)}
                                >
                                    <div className="flex items-center gap-3">
                                        <div className="w-8 h-8 bg-emerald-100 dark:bg-emerald-900/20 rounded-full flex items-center justify-center flex-shrink-0">
                                            <User className="w-4 h-4 text-emerald-600 dark:text-emerald-400" />
                                        </div>
                                        <div className="flex-1 min-w-0">
                                            <div className="font-medium text-slate-900 dark:text-white truncate">
                                                {user.name}
                                            </div>
                                            <div className="text-sm text-slate-500 dark:text-slate-400 truncate">
                                                {user.email}
                                            </div>
                                        </div>
                                        {isAlreadyAdded && (
                                            <div className="text-xs text-slate-400">
                                                Ya agregado
                                            </div>
                                        )}
                                    </div>
                                </div>
                            );
                        })}

                        {/* Manual email entry hint - only show if there are results */}
                        {users.length > 0 && searchValue.includes('@') && !users.some(u => u.email === searchValue) && (
                            <div className="px-3 py-2 border-t border-slate-200 dark:border-slate-700">
                                <div className="text-xs text-slate-500 dark:text-slate-400">
                                    Presiona Enter para agregar "{searchValue}" manualmente
                                </div>
                            </div>
                        )}
                    </div>
                )}
            </div>

            {/* Added collaborators */}
            {collaborators.length > 0 && (
                <div className="border rounded-lg p-3">
                    <p className="text-sm font-medium text-slate-900 dark:text-white mb-2">
                        Investigadores agregados ({collaborators.length}):
                    </p>
                    <div className="flex flex-wrap gap-2">
                        {collaborators.map((email, index) => (
                            <span
                                key={index}
                                className="inline-flex items-center gap-1 px-3 py-1 rounded-full text-sm bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300"
                            >
                                {email}
                                <button
                                    type="button"
                                    onClick={() => onRemoveCollaborator(email)}
                                    className="text-slate-400 hover:text-red-600 ml-1 p-0.5 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
                                >
                                    <X className="w-3 h-3" />
                                </button>
                            </span>
                        ))}
                    </div>
                </div>
            )}

            <p className="text-xs text-slate-500">
                Busca usuarios registrados por email o agrega emails manualmente.
                Usa las flechas ↑↓ para navegar y Enter para seleccionar.
            </p>

            {error && (
                <p className="text-sm text-red-600 dark:text-red-400">
                    {error}
                </p>
            )}
        </div>
    );
}