function Sidebar({ activeTab, onTabChange, onLogout, userEmail, isLocked, onToggleLock, currentYear, onYearChange, mobileOpen, onMobileClose }) {
    const [isHovered, setIsHovered] = React.useState(false);

    // Sidebar is expanded if it's locked OR if it's being hovered (Desktop logic)
    // On Mobile, it's fully expanded if open
    const isMobile = window.innerWidth < 768; 
    const isExpanded = mobileOpen || isLocked || isHovered;
    
    // Generate years for dropdown (Current +/- 2 years)
    const baseYear = new Date().getFullYear();
    const years = [baseYear - 2, baseYear - 1, baseYear, baseYear + 1];

    const menuItems = [
        { id: 'employees', label: 'Data Guru & Pegawai', icon: 'users' },
        { id: 'duplicates', label: 'Cek Duplikasi', icon: 'git-merge' },
        { id: 'institutions', label: 'Data Per Lembaga', icon: 'building' },
        { id: 'inactive', label: 'Pegawai Non-Aktif', icon: 'user-x' },
        { id: 'parcel_check', label: 'Cek Pengambilan', icon: 'qr-code' },
        { id: 'parcel', label: 'Laporan Parsel', icon: 'gift' },
        { id: 'institutions_manager', label: 'Master Lembaga', icon: 'library' },
        { id: 'settings', label: 'Pengaturan', icon: 'settings' },
    ];

    return (
        <div 
            className={`bg-[var(--bg-sidebar)] text-white flex flex-col h-screen fixed left-0 top-0 z-50 transition-all duration-300 ease-in-out shadow-xl print:hidden 
                ${mobileOpen ? 'translate-x-0 w-64' : '-translate-x-full md:translate-x-0'} 
                ${isExpanded ? 'md:w-64' : 'md:w-20'}
            `}
            onMouseEnter={() => setIsHovered(true)}
            onMouseLeave={() => setIsHovered(false)}
            data-name="sidebar" 
            data-file="components/Sidebar.js"
        >
            {/* Header */}
            <div className="p-4 border-b border-gray-700 h-16 flex items-center justify-between overflow-hidden whitespace-nowrap">
                <div className="flex items-center gap-3 min-w-max">
                    <img 
                        src={window.AppAssets.logo} 
                        alt="Logo" 
                        className="w-10 h-10 rounded-lg shrink-0 object-contain bg-white p-1" 
                    />
                    <div className={`transition-opacity duration-300 ${isExpanded ? 'opacity-100' : 'opacity-0'}`}>
                        <h1 className="font-bold text-lg leading-tight">SIMPEG</h1>
                        <p className="text-[10px] text-gray-400 uppercase tracking-wider">PP Karangasem</p>
                    </div>
                </div>
                {/* Close Button Mobile */}
                <button onClick={onMobileClose} className="md:hidden text-gray-400 hover:text-white">
                    <div className="icon-x text-xl"></div>
                </button>
            </div>
            
            {/* Year Display (Locked) */}
            <div className={`px-3 py-2 transition-all duration-300 ${isExpanded ? 'opacity-100' : 'opacity-0 hidden'}`}>
                <div className="text-[10px] text-gray-400 font-bold uppercase mb-1 ml-1">Tahun Aktif</div>
                <div 
                    className="w-full bg-gray-900/50 text-gray-300 border border-gray-700 rounded p-2 text-sm flex items-center justify-between cursor-help select-none group"
                    title="Untuk mengganti tahun, silakan ke menu Pengaturan"
                >
                    <span className="font-bold flex items-center gap-2">
                        <div className="icon-calendar text-xs text-teal-500"></div>
                        {currentYear}
                    </span>
                    <div className="icon-lock text-xs text-gray-500 group-hover:text-teal-400 transition-colors"></div>
                </div>
            </div>

            {/* Menu */}
            <nav className="flex-1 py-2 overflow-y-auto overflow-x-hidden">
                <ul className="space-y-1 px-3">
                    {menuItems.map(item => (
                        <li key={item.id}>
                            <button
                                onClick={() => onTabChange(item.id)}
                                title={!isExpanded ? item.label : ''}
                                className={`w-full flex items-center h-12 rounded-lg transition-all duration-200 group relative ${
                                    activeTab === item.id 
                                    ? 'bg-teal-700 text-white shadow-md' 
                                    : 'text-gray-400 hover:bg-gray-800 hover:text-white'
                                }`}
                            >
                                <div className="w-14 h-full flex items-center justify-center shrink-0">
                                    <div className={`icon-${item.icon} text-xl transition-transform duration-300 ${activeTab === item.id ? 'scale-110' : 'group-hover:scale-110'}`}></div>
                                </div>
                                <span className={`whitespace-nowrap transition-all duration-300 origin-left ${
                                    isExpanded ? 'opacity-100 translate-x-0 w-auto' : 'opacity-0 -translate-x-4 w-0 overflow-hidden'
                                }`}>
                                    {item.label}
                                </span>
                                
                                {/* Tooltip for mini mode (optional/backup if hover doesn't trigger fast enough) */}
                                {!isExpanded && (
                                    <div className="absolute left-14 bg-gray-900 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-50 whitespace-nowrap border border-gray-700 ml-2 shadow-lg hidden md:block">
                                        {item.label}
                                    </div>
                                )}
                            </button>
                        </li>
                    ))}
                </ul>
            </nav>

            {/* Footer / User Info */}
            <div className="p-4 border-t border-gray-700 bg-gray-900/50">
                <div className={`flex items-center gap-3 overflow-hidden whitespace-nowrap transition-all duration-300 ${isExpanded ? 'mb-4' : 'mb-0 justify-center'}`}>
                    <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-teal-500 to-blue-500 flex items-center justify-center text-white font-bold shrink-0">
                         {userEmail ? userEmail.charAt(0).toUpperCase() : 'U'}
                    </div>
                    <div className={`transition-opacity duration-300 ${isExpanded ? 'opacity-100' : 'opacity-0 hidden'}`}>
                        <div className="text-xs text-gray-400">Login sebagai:</div>
                        <div className="text-sm font-medium text-gray-200 truncate w-32" title={userEmail}>
                            {userEmail || 'User'}
                        </div>
                    </div>
                </div>

                {isExpanded && (
                    <div className="flex flex-col md:grid md:grid-cols-2 gap-2 animate-fade-in">
                        <button 
                            onClick={onToggleLock}
                            className="items-center justify-center gap-2 bg-gray-800 hover:bg-gray-700 text-gray-300 py-2 rounded text-xs transition-colors border border-gray-700 hidden md:flex"
                            title={isLocked ? "Unlock Sidebar (Auto-collapse)" : "Lock Sidebar (Always Open)"}
                        >
                            <div className={`icon-${isLocked ? 'pin' : 'pin-off'} text-sm`}></div>
                            <span>{isLocked ? 'Locked' : 'Auto'}</span>
                        </button>
                        <button 
                            onClick={onLogout}
                            className="flex items-center justify-center gap-2 bg-red-900/30 hover:bg-red-900/50 text-red-400 py-2 rounded text-xs transition-colors border border-red-900/50 w-full"
                        >
                            <div className="icon-log-out text-sm"></div>
                            <span>Logout</span>
                        </button>
                    </div>
                )}

                {/* Mini Mode Footer Action */}
                {!isExpanded && (
                    <div className="flex flex-col gap-3 items-center mt-2">
                        <button 
                            onClick={onToggleLock} 
                            className="text-gray-500 hover:text-teal-400 transition-colors hidden md:block"
                            title="Lock Sidebar"
                        >
                            <div className="icon-pin-off text-lg"></div>
                        </button>
                        <button 
                            onClick={onLogout} 
                            className="text-gray-500 hover:text-red-400 transition-colors"
                            title="Logout"
                        >
                            <div className="icon-log-out text-lg"></div>
                        </button>
                    </div>
                )}
            </div>
            
            {/* Lock Toggle Button (Floating) - Optional, mainly for visual cue on border */}
            <button
                onClick={onToggleLock}
                className="absolute -right-3 top-20 bg-gray-800 text-teal-400 w-6 h-6 rounded-full border border-gray-600 items-center justify-center hover:bg-gray-700 cursor-pointer shadow-md z-50 transform hover:scale-110 transition-all hidden md:flex"
                title={isLocked ? "Lepas Kunci (Auto-collapse)" : "Kunci Sidebar (Selalu Terbuka)"}
            >
                <div className={`icon-${isLocked ? 'chevron-left' : 'chevron-right'} text-xs`}></div>
            </button>
        </div>
    );
}