window.ServerSelectModal = ({ isOpen, onClose, servers, currentServerId, onSelect, isDark }) => {
    if (!isOpen) return null;

    const [selectedId, setSelectedId] = React.useState(currentServerId);

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 animate-[fadeIn_0.2s_ease-out]">
            {/* Backdrop */}
            <div 
                className="absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity" 
                onClick={onClose}
            ></div>

            {/* Modal Content */}
            <div className={`relative w-full max-w-sm p-6 rounded-2xl border shadow-2xl transform scale-100 transition-all
                ${isDark ? 'bg-[#1e293b] border-white/10 text-white' : 'bg-white border-slate-200 text-slate-800'}
            `}>
                {/* Header */}
                <div className="flex items-center justify-between mb-6">
                    <h3 className="text-xl font-bold brand-font">Create New Identity</h3>
                    <button onClick={onClose} className="opacity-50 hover:opacity-100 transition">
                        <i className="fa-solid fa-xmark text-xl"></i>
                    </button>
                </div>

                {/* Server Selection List */}
                <div className="space-y-3 mb-6">
                    <label className="text-xs font-bold uppercase tracking-wider opacity-60">Select Network Provider</label>
                    
                    <div className="space-y-2 max-h-60 overflow-y-auto pr-1 glass-scroll">
                        {servers.map(server => (
                            <div 
                                key={server.id}
                                onClick={() => setSelectedId(server.id)}
                                className={`p-3 rounded-xl border cursor-pointer flex items-center gap-3 transition-all
                                    ${selectedId === server.id 
                                        ? (isDark ? 'bg-blue-600 border-blue-500 ring-2 ring-blue-500/30' : 'bg-blue-50 border-blue-500 ring-2 ring-blue-200') 
                                        : (isDark ? 'bg-white/5 border-white/10 hover:bg-white/10' : 'bg-slate-50 border-slate-200 hover:bg-slate-100')
                                    }
                                `}
                            >
                                <div className={`w-8 h-8 rounded-full flex items-center justify-center shrink-0
                                    ${selectedId === server.id ? 'bg-white text-blue-600' : 'bg-gray-500/20 text-gray-500'}
                                `}>
                                    <i className="fa-solid fa-server text-xs"></i>
                                </div>
                                <div className="flex-1">
                                    <p className="font-bold text-sm">{server.name}</p>
                                    <p className="text-[10px] opacity-60">
                                        {server.type === 'auth' ? 'Secure • Password Protected' : 'Public • Social Unlocker'}
                                    </p>
                                </div>
                                {selectedId === server.id && <i className="fa-solid fa-circle-check text-blue-500"></i>}
                            </div>
                        ))}
                    </div>
                </div>

                {/* Action Button */}
                <button 
                    onClick={() => { onSelect(selectedId); onClose(); }}
                    className="w-full py-3 rounded-xl font-bold text-white bg-gradient-to-r from-blue-600 to-indigo-600 shadow-lg hover:shadow-blue-500/30 active:scale-95 transition-all flex items-center justify-center gap-2"
                >
                    <i className="fa-solid fa-wand-magic-sparkles"></i> Generate ID
                </button>
            </div>
        </div>
    );
};