function startLoginFlow() {
    try {
        // Check if Firebase UI is loaded
        if (typeof firebaseui === 'undefined') {
            console.error("FirebaseUI is not loaded");
            return;
        }
        
        var ui = new firebaseui.auth.AuthUI(firebase.auth());
        const uiConfig = {
            signInSuccessUrl: "#login_state",
            signInOptions: [
                {
                    provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
                    scopes: [
                        'email'
                    ],
                    customParameters: {
                        // Forces account selection even when one account
                        // is available.
                        prompt: 'select_account'
                    }
                }
            ],
            'callbacks': {
                signInSuccessWithAuthResult: function(authResult, redirectUrl) {
                    // User successfully signed in.
                    // Return type determines whether we continue the redirect automatically
                    // or whether we leave that to developer to handle.
                    return true;
                },
            }
        };

        ui.start('#firebaseui-auth-container', uiConfig);
        
        // Don't redefine window.onload if it's already been called
        // Instead, immediately configure auth state listeners
        setupAuthStateListener();
        
    } catch (e) {
        console.error("Error in startLoginFlow:", e);
    }
}

// Separate the auth state listener into its own function
function setupAuthStateListener() {
    try {
        const loginWindow = document.getElementById("firebaseui-auth-container");
        const deleteBtn = document.getElementById("delete_account_btn");
        const loginState = document.getElementById("login_state");

        // Check if elements exist before trying to access them
        if (!loginWindow || !deleteBtn || !loginState) {
            console.error("One or more required elements not found in the DOM");
            // Retry after a short delay (elements might not be loaded yet)
            setTimeout(setupAuthStateListener, 500);
            return;
        }

        deleteBtn.disabled = true;
        
        firebase.auth().onAuthStateChanged((user) => {
            if (user) {
                // Instead of changing visibility, which could be the source of the error,
                // use display property which is more reliable
                if (loginWindow) loginWindow.style.display = "none";
                
                console.log(`email: ${user.email}`);
                try {
                    console.log(`info: ${JSON.stringify(user.toJSON())}`);
                } catch (e) {
                    console.log("Could not stringify user info:", e);
                }
                
                if (user.email) {
                    loginState.innerHTML = `<b>Logged in to ${user.email}</b>`;
                }
                deleteBtn.disabled = false;
            } else {
                // Show the login UI again if user is logged out
                if (loginWindow) loginWindow.style.display = "block";
                if (loginState) loginState.innerHTML = "";
                if (deleteBtn) deleteBtn.disabled = true;
            }
        });
    } catch (e) {
        console.error("Error in setupAuthStateListener:", e);
    }
}

function deleteAccount() {
    try {
        const user = firebase.auth().currentUser;
        const status = document.getElementById("delete_state");

        if (!status) {
            console.error("Status element not found");
            return;
        }

        if (user) {
            status.innerHTML = "Deleting your account...";

            // Construct the URL with any additional parameters you need
            // Use encodeURIComponent for better security
            const deleteUrl = "https://api.altlas-app.com/delete-user-account?uid=" + 
                             encodeURIComponent(user.uid) + 
                             "&key=09p7GFX3SLo4uksONNTv2fUi67OLhmL$";

            // Send a GET request using the Fetch API
            fetch(deleteUrl)
                .then(response => {
                    if (response.ok) {
                        return response.text(); // Parse the response as text
                    } else {
                        throw new Error("Error deleting account: " + response.status);
                    }
                })
                .then(data => {
                    // Successful response
                    console.log("Account info deleted successfully");
                    status.innerHTML = "Account info deleted successfully";

                    user.delete().then(() => {
                        status.innerHTML = "<p style=\"color:green\"><b>Your account has been deleted successfully.</b></p>";
                        console.log(`User deleted successfully`);
                    })
                    .catch((error) => {
                        console.error("Error while trying to delete user:", error);
                        
                        // Handle specific error codes
                        if (error.code === 'auth/requires-recent-login') {
                            status.innerHTML = "<p style=\"color:red\"><b>For security, please log out and log in again before deleting your account.</b></p>";
                        } else {
                            status.innerHTML = "<p style=\"color:red\"><b>Something went wrong. Please clear cookies and try again</b></p>";
                        }
                        console.log(`Error while trying to delete user: ${JSON.stringify(error)}`);
                    });
                })
                .catch(error => {
                    // Error handling
                    console.error("Fetch error:", error);
                    status.innerHTML = "<p style=\"color:red\"><b>Error deleting your account</b></p>";
                });
        } else {
            status.innerHTML = "<p style=\"color:red\"><b>You must sign in before deleting your account</b></p>";
            console.log("User isn't logged in");
        }
    } catch (e) {
        console.error("Error in deleteAccount function:", e);
        const status = document.getElementById("delete_state");
        if (status) {
            status.innerHTML = "<p style=\"color:red\"><b>An unexpected error occurred</b></p>";
        }
    }
}

// Ensure Firebase is ready before trying to use it
document.addEventListener('DOMContentLoaded', function() {
    // Check if Firebase is loaded already
    if (typeof firebase !== 'undefined' && firebase.auth) {
        // If Firebase is already initialized (as in your HTML), setup listeners
        setupAuthStateListener();
    } else {
        console.log("Firebase not loaded yet, waiting...");
        // If not, wait for it
        const checkFirebase = setInterval(function() {
            if (typeof firebase !== 'undefined' && firebase.auth) {
                clearInterval(checkFirebase);
                setupAuthStateListener();
            }
        }, 100);
    }
});