const signUpButton = document.getElementById('signUp');
        const signInButton = document.getElementById('signIn');
        const container = document.getElementById('container');

        signUpButton.addEventListener('click', () => {
            container.classList.add('right-panel-active');
        });

        signInButton.addEventListener('click', () => {
            container.classList.remove('right-panel-active');
        });

        // URL parameter parsing
        function getUrlParams() {
            const params = new URLSearchParams(window.location.search);
            return {
                error: params.get('error'),
                email: params.get('email'),
                username: params.get('username')
            };
        }

        // Error handling
        function showError(elementId, message) {
            const errorElement = document.getElementById(elementId);
            if (errorElement) {
                errorElement.textContent = message;
                errorElement.classList.add('show');
                // Add error class to the corresponding input
                const inputId = elementId.replace('_error', '');
                const inputElement = document.getElementById(inputId);
                if (inputElement) {
                    inputElement.classList.add('error');
                }
            }
        }

        function clearErrors() {
            const errorElements = document.querySelectorAll('.error-message');
            const inputs = document.querySelectorAll('input');
            errorElements.forEach(element => {
                element.classList.remove('show');
                element.textContent = '';
            });
            inputs.forEach(input => {
                input.classList.remove('error');
            });
        }

        // Form validation
        document.getElementById('signupForm').addEventListener('submit', function(e) {
            clearErrors();
            let isValid = true;

            const username = document.getElementById('signup_username').value;
            const email = document.getElementById('signup_email').value;
            const password = document.getElementById('signup_password').value;

            if (!username) {
                showError('signup_username_error', 'Username is required');
                isValid = false;
            }

            if (!email) {
                showError('signup_email_error', 'Email is required');
                isValid = false;
            } else if (!/\S+@\S+\.\S+/.test(email)) {
                showError('signup_email_error', 'Please enter a valid email address');
                isValid = false;
            }

            if (!password) {
                showError('signup_password_error', 'Password is required');
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
            }
        });

        document.getElementById('loginForm').addEventListener('submit', function(e) {
            clearErrors();
            let isValid = true;

            const username = document.getElementById('login_username').value;
            const password = document.getElementById('login_password').value;

            if (!username) {
                showError('login_username_error', 'Username is required');
                isValid = false;
            }

            if (!password) {
                showError('login_password_error', 'Password is required');
                isValid = false;
            }

            if (!isValid) {
                e.preventDefault();
            }
        });

        // Handle URL parameters on page load
        window.addEventListener('load', function() {
            const params = getUrlParams();
            
            if (params.error) {
                switch(params.error) {
                    case 'INVALID_EMAIL':
                        container.classList.add('right-panel-active');
                        showError('signup_email_error', 'Please enter a valid email address');
                        break;
                    case 'INVALID_USERNAME':
                        if (params.email) {
                            container.classList.add('right-panel-active');
                            showError('signup_username_error', 'Username is required');
                            document.getElementById('signup_email').value = params.email;
                        } else {
                            showError('login_username_error', 'Invalid username');
                        }
                        break;
                    case 'INVALID_PASSWORD':
                        if (params.email) {
                            container.classList.add('right-panel-active');
                            showError('signup_password_error', 'Password is required');
                            document.getElementById('signup_email').value = params.email;
                            document.getElementById('signup_username').value = params.username;
                        }
                        break;
                    case 'USERNAME_TAKEN':
                        container.classList.add('right-panel-active');
                        showError('signup_username_error', 'Username is already taken');
                        document.getElementById('signup_email').value = params.email;
                        break;
                    case 'EMAIL_TAKEN':
                        container.classList.add('right-panel-active');
                        showError('signup_email_error', 'Email is already registered');
                        document.getElementById('signup_username').value = params.username;
                        break;
                    case 'INVALID_CREDENTIALS':
                        showError('login_general_error', 'Invalid username or password');
                        break;
					case 'TOO_MANY_ATTEMPTS':
						showError('login_general_error', 'Too many login attempts. Please try again later.');
						break;
                    case 'WEAK_PASSWORD':
                        container.classList.add('right-panel-active');
                        showError('signup_password_error', 'Password must be at least 8 characters long');
                        document.getElementById('signup_email').value = params.email;
                        document.getElementById('signup_username').value = params.username;
                        break;
                    case 'INVALID_USERNAME_FORMAT':
                        container.classList.add('right-panel-active');
                        showError('signup_username_error', 'Username can only contain letters, numbers, and underscores');
                        document.getElementById('signup_email').value = params.email;
                        break;
					case 'SERVER_ERROR':
						showError('login_general_error', 'A server error occurred. Please try again later.');
						break;
                }
            }
        });