(function() {
    'use strict';
    
    function checkLoginStatus() {
        const loggedInUser = sessionStorage.getItem("loggedInUser");
        const loginBtn = document.querySelector('.btn-login');
        
        if (loggedInUser && loginBtn) {
            loginBtn.textContent = 'Logout';
            loginBtn.classList.remove('btn-login');
            loginBtn.classList.add('btn-logout');
            loginBtn.href = '#';
            loginBtn.replaceWith(loginBtn.cloneNode(true));
            
            const newLogoutBtn = document.querySelector('.btn-logout');
            if (newLogoutBtn) {
                newLogoutBtn.addEventListener('click', handleLogoutClick);
            }
            
            console.log('✅ User logged in:', loggedInUser);
        } else {
            console.log('ℹ️ No user logged in');
        }
    }
    
    function handleLogoutClick(e) {
        e.preventDefault();
        showLogoutModal();
    }
    
    function showLogoutModal() {
        const overlay = document.getElementById('logout-overlay');
        if (overlay) {
            overlay.style.display = 'flex';
            setTimeout(() => overlay.classList.add('active'), 10);
            setupModalButtons();
        }
    }
    
    function setupModalButtons() {
        const cancelBtn = document.getElementById('btn-logout-cancel');
        const confirmBtn = document.getElementById('btn-logout-confirm');
        const overlay = document.getElementById('logout-overlay');
        
        if (cancelBtn) {
            const newCancelBtn = cancelBtn.cloneNode(true);
            cancelBtn.replaceWith(newCancelBtn);
            newCancelBtn.onclick = closeLogoutModal;
        }
        
        if (confirmBtn) {
            const newConfirmBtn = confirmBtn.cloneNode(true);
            confirmBtn.replaceWith(newConfirmBtn);
            newConfirmBtn.onclick = confirmLogout;
        }
        
        if (overlay) {
            overlay.onclick = function(e) {
                if (e.target === overlay) {
                    closeLogoutModal();
                }
            };
        }
        
        document.addEventListener('keydown', handleEscapeKey);
    }
    
    function handleEscapeKey(e) {
        if (e.key === 'Escape') {
            const overlay = document.getElementById('logout-overlay');
            if (overlay && overlay.classList.contains('active')) {
                closeLogoutModal();
            }
        }
    }
    
    function closeLogoutModal() {
        const overlay = document.getElementById('logout-overlay');
        if (overlay) {
            overlay.classList.remove('active');
            setTimeout(() => {
                overlay.style.display = 'none';
            }, 300);
        }
        
        document.removeEventListener('keydown', handleEscapeKey);
    }
    
    function confirmLogout() {
        console.log("Attempting to log out to the server...");

        fetch('Logout.php') 
            .then(response => {
                console.log("Respon server:", response);
                return response.json();
            })
            .then(data => {
                console.log("Status Logout:", data);
            
                sessionStorage.removeItem("loggedInUser");
                sessionStorage.removeItem("authToken");
                sessionStorage.clear();
            
                closeLogoutModal();
                showSuccessModal();
            
                setTimeout(() => {
                    window.location.replace('Homepage.html'); 
                }, 1500);
            })
            .catch(error => {
                console.error('Logout error:', error);
        
                sessionStorage.clear();
                window.location.replace('Homepage.html');
            });
    }
    
    function showSuccessModal() {
        const successOverlay = document.getElementById('logout-success-overlay');
        if (successOverlay) {
            successOverlay.style.display = 'flex';
            setTimeout(() => successOverlay.classList.add('active'), 10);
            
            setTimeout(() => {
                successOverlay.classList.remove('active');
                setTimeout(() => {
                    successOverlay.style.display = 'none';
                }, 300);
            }, 1300);
        }
    }

    function init() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', checkLoginStatus);
        } else {
            checkLoginStatus();
        }
    }
    
    init();
    
})();