window.Sidebar = ({ user, emailList, activeEmail, onSelect, onDelete, onLogin, onLogout, onClose, isDark, showToast }) => {
    if (!user) return null;
    const isGuest = user.isAnonymous;

    return (
        <aside className={`h-full w-72 backdrop-blur-[30px] border-r flex flex-col shadow-2xl relative overflow-hidden transition-colors duration-500
            ${isDark 
                ? 'bg-[#020617]/80 border-white/10 shadow-[20px_0_50px_rgba(0,0,0,0.5)]' 
                : 'bg-white/90 border-slate-200 shadow-[20px_0_50px_rgba(200,200,200,0.5)]'}
        `}>
            
            {isDark && <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-20 mix-blend-overlay pointer-events-none"></div>}

            {/* Header */}
            <div className={`h-20 flex items-center justify-between px-6 border-b relative z-10 shrink-0 ${isDark ? 'border-white/5' : 'border-slate-200'}`}>
                <div className="flex items-center">
                    <img 
                        src={isDark ? "/logo-dark.jpg" : "/logo-light.jpg"} 
                        alt="Infinity Mail" 
                        className="h-10 w-auto object-contain transition-all duration-300"
                        onError={(e) => { e.target.style.display='none'; e.target.nextSibling.style.display='flex'; }}
                    />
                    {/* Fallback Logo */}
                    <div className="hidden items-center gap-2" style={{display: 'none'}}>
                         <span className={`text-xl font-bold brand-font ${isDark ? 'text-white' : 'text-slate-800'}`}>Infinity</span>
                    </div>
                </div>
                <button onClick={onClose} className="md:hidden text-gray-400 hover:text-red-500">
                    <i className="fa-solid fa-xmark text-xl"></i>
                </button>
            </div>

            {/* User Profile Section */}
            <div className="p-6 relative z-10 shrink-0">
                <div className={`p-[1px] rounded-2xl relative group overflow-hidden transition-all duration-500 ${isGuest ? 'bg-gradient-to-br from-yellow-500/50 via-orange-500/20 to-transparent' : 'bg-gradient-to-br from-blue-500/50 via-purple-500/20 to-transparent'}`}>
                    <div className={`p-4 rounded-2xl relative h-full backdrop-blur-xl ${isDark ? 'bg-[#0a0a0a]/90' : 'bg-white/90'}`}>
                        <div className="flex items-center gap-4 relative z-10">
                            <div className={`p-0.5 rounded-full bg-gradient-to-tr ${isGuest ? 'from-yellow-400 to-orange-600' : 'from-blue-400 to-purple-600'}`}>
                                {isGuest ? (
                                    <div className={`w-11 h-11 rounded-full flex items-center justify-center text-yellow-500 ${isDark ? 'bg-[#111]' : 'bg-white'}`}><i className="fa-solid fa-user-secret text-xl"></i></div>
                                ) : (
                                    <img src={user.photoURL} className={`w-11 h-11 rounded-full border-2 ${isDark ? 'border-[#111]' : 'border-white'}`} alt="User" />
                                )}
                            </div>
                            <div className="overflow-hidden flex-1">
                                <p className={`text-sm font-bold truncate brand-font ${isDark ? (isGuest ? 'text-yellow-400' : 'text-white') : (isGuest ? 'text-yellow-600' : 'text-slate-900')}`}>{isGuest ? 'Ghost User' : user.displayName}</p>
                                <p className="text-[10px] text-gray-500 font-mono uppercase tracking-widest mb-2">{isGuest ? 'Not Saved' : 'Verified'}</p>
                                {isGuest ? (
                                    <button onClick={onLogin} className="w-full py-1.5 text-xs bg-yellow-500/20 text-yellow-500 rounded-lg font-bold uppercase tracking-wider flex items-center justify-center gap-2 border border-yellow-500/30 hover:bg-yellow-500/30"><i className="fa-brands fa-google"></i> Secure Data</button>
                                ) : (
                                    <button onClick={onLogout} className="text-[10px] text-red-400 hover:text-red-500 font-bold uppercase tracking-wider flex items-center gap-1"><i className="fa-solid fa-power-off"></i> Sign Out</button>
                                )}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* List (Create Button Removed) */}
            <div className="flex-1 overflow-y-auto px-4 pb-4 space-y-2 glass-scroll relative z-10">
                {emailList.map((item, idx) => {
                    const isActive = activeEmail === item.address;
                    return (
                        <div 
                            key={idx} 
                            onClick={() => onSelect(item)} 
                            className={`
                                group p-3 rounded-xl cursor-pointer transition-all duration-300 border relative overflow-hidden flex justify-between items-center
                                ${isActive 
                                    ? (isDark ? 'bg-gradient-to-r from-blue-900/40 via-purple-900/20 to-transparent border-blue-500/50' : 'bg-white border-blue-200 shadow-md')
                                    : (isDark ? 'bg-white/5 border-white/5 hover:bg-white/10' : 'bg-white/50 border-slate-100 hover:bg-white hover:shadow-sm')
                                }
                            `}
                        >
                            {isActive && <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-500 to-purple-600"></div>}

                            <div className={`pl-2 text-xs font-mono truncate transition-colors flex items-center gap-2 flex-1
                                ${isActive 
                                    ? (isDark ? 'text-white font-bold' : 'text-blue-900 font-bold') 
                                    : (isDark ? 'text-gray-400 group-hover:text-gray-200' : 'text-slate-500 group-hover:text-slate-800')
                                }
                            `}>
                                <i className={`fa-regular fa-envelope ${isActive ? 'text-blue-500' : 'opacity-50'}`}></i>
                                <span className="truncate w-32">{item.address}</span>
                            </div>

                            {/* Actions */}
                            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                <button 
                                    onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(item.address); showToast("Copied!", "success"); }}
                                    className={`p-1.5 rounded-lg transition-colors ${isDark ? 'hover:bg-white/20 text-gray-400 hover:text-white' : 'hover:bg-slate-200 text-slate-400 hover:text-slate-700'}`}
                                    title="Copy"
                                >
                                    <i className="fa-regular fa-copy"></i>
                                </button>
                                
                                {/* Delete Button */}
                                <button 
                                    onClick={(e) => { e.stopPropagation(); onDelete(item); }}
                                    className={`p-1.5 rounded-lg transition-colors hover:bg-red-500/20 text-red-400 hover:text-red-500`}
                                    title="Delete"
                                >
                                    <i className="fa-regular fa-trash-can"></i>
                                </button>
                            </div>
                        </div>
                    );
                })}
            </div>
        </aside>
    );
};