script.js

document.addEventListener('DOMContentLoaded', () => {
    // --- 1. Modal Control (DOM Manipulation) ---
    const modal = document.getElementById('auth-modal');
    const loginBtn = document.getElementById('login-btn');
    const closeBtn = document.querySelector('.close-btn');
    const showLoginBtn = document.getElementById('show-login');
    const showRegisterBtn = document.getElementById('show-register');
    const loginForm = document.getElementById('login-form');
    const registerForm = document.getElementById('register-form');

    // Function to open the modal
    loginBtn.onclick = function() {
        modal.style.display = 'block';
    }

    // Function to close the modal using the X button
    closeBtn.onclick = function() {
        modal.style.display = 'none';
    }

    // Function to close the modal when clicking outside of it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = 'none';
        }
    }

    // Tab switching logic
    function switchTab(showForm, hideForm, showButton, hideButton) {
        showForm.classList.add('active-form');
        hideForm.classList.remove('active-form');
        showButton.classList.add('active');
        hideButton.classList.remove('active');
        // Clear previous messages
        document.getElementById('login-message').textContent = '';
        document.getElementById('register-message').textContent = '';
    }

    showLoginBtn.onclick = () => switchTab(loginForm, registerForm, showLoginBtn, showRegisterBtn);
    showRegisterBtn.onclick = () => switchTab(registerForm, loginForm, showRegisterBtn, showLoginBtn);


    // --- 2. Input Field Validation ---

    // Generic Validation Function
    const validateEmail = (email) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    const validatePassword = (password) => password.length >= 8;
    const displayMessage = (id, message) => document.getElementById(id).textContent = message;
    
    // --- Login Form Validation ---
    loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const email = document.getElementById('login-email').value;
        const password = document.getElementById('login-password').value;
        let isValid = true;
        let message = '';

        if (!validateEmail(email)) {
            message += 'Invalid email format. ';
            isValid = false;
        }

        if (password.length === 0) {
            message += 'Password is required.';
            isValid = false;
        }
        
        displayMessage('login-message', message);

        if (isValid) {
            // In a real application, you would send data to a server here.
            displayMessage('login-message', 'Login successful! (Simulated)');
            // For prototype: Close modal after a short delay
            setTimeout(() => modal.style.display = 'none', 1500);
        }
    });

    // --- Registration Form Validation ---
    registerForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const username = document.getElementById('reg-username').value;
        const email = document.getElementById('reg-email').value;
        const password = document.getElementById('reg-password').value;
        const confirmPassword = document.getElementById('reg-confirm-password').value;
        let isValid = true;
        let message = '';

        if (username.length < 3) {
            message += 'Username must be at least 3 characters. ';
            isValid = false;
        }
        
        if (!validateEmail(email)) {
            message += 'Invalid email format. ';
            isValid = false;
        }

        if (!validatePassword(password)) {
            message += 'Password must be at least 8 characters. ';
            isValid = false;
        }

        if (password !== confirmPassword) {
            message += 'Passwords do not match.';
            isValid = false;
        }
        
        displayMessage('register-message', message);

        if (isValid) {
            // In a real application, this is where a new user would be created.
            displayMessage('register-message', 'Registration successful! Please login.');
            
            // Switch to login tab automatically
            setTimeout(() => {
                switchTab(loginForm, registerForm, showLoginBtn, showRegisterBtn);
                // Clear the form fields for security/convenience
                registerForm.reset();
            }, 1000);
        }
    });


    // --- 3. Dynamic Wishlist/Cart Interaction (Minimal DOM Demo) ---
    document.querySelectorAll('.wishlist-btn').forEach(button => {
        button.addEventListener('click', function() {
            const icon = this.querySelector('i');
            if (icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas');
                icon.style.color = '#F05454';
                alert('Product added to Wishlist!');
            } else {
                icon.classList.remove('fas');
                icon.classList.add('far');
                icon.style.color = '';
                alert('Product removed from Wishlist!');
            }
        });
    });

    document.querySelectorAll('.add-to-cart-btn').forEach(button => {
        button.addEventListener('click', function() {
            alert('Product added to Cart!');
        });
    });

});