// Auth Page JavaScript

// Switch between login and register forms
function switchToRegister() {
    document.getElementById('loginForm').classList.add('hidden');
    document.getElementById('registerForm').classList.remove('hidden');
}

function switchToLogin() {
    document.getElementById('registerForm').classList.add('hidden');
    document.getElementById('loginForm').classList.remove('hidden');
}

// Toggle password visibility
function togglePassword(inputId) {
    const input = document.getElementById(inputId);
    const button = input.parentElement.querySelector('.toggle-password i');
    
    if (input.type === 'password') {
        input.type = 'text';
        button.classList.remove('fa-eye');
        button.classList.add('fa-eye-slash');
    } else {
        input.type = 'password';
        button.classList.remove('fa-eye-slash');
        button.classList.add('fa-eye');
    }
}


// Validation functions
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

function isValidPhone(phone) {
    const phoneRegex = /^[0-9+\-\s()]{10,}$/;
    return phoneRegex.test(phone);
}

// Show message function
function showMessage(message, type = 'info') {
    // Remove existing message
    const existingMessage = document.querySelector('.auth-message');
    if (existingMessage) {
        existingMessage.remove();
    }
    
    // Create message element
    const messageDiv = document.createElement('div');
    messageDiv.className = `auth-message auth-message-${type}`;
    messageDiv.innerHTML = `
        <div class="message-content">
            <i class="fas ${getMessageIcon(type)}"></i>
            <span>${message}</span>
        </div>
    `;
    
    // Add styles
    messageDiv.style.cssText = `
        position: fixed;
        top: 100px;
        right: 20px;
        background: ${getMessageColor(type)};
        color: white;
        padding: 1rem 1.5rem;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        z-index: 10000;
        max-width: 400px;
        animation: slideIn 0.3s ease;
    `;
    
    // Add to page
    document.body.appendChild(messageDiv);
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        if (messageDiv.parentNode) {
            messageDiv.style.animation = 'slideOut 0.3s ease';
            setTimeout(() => {
                if (messageDiv.parentNode) {
                    messageDiv.remove();
                }
            }, 300);
        }
    }, 5000);
}

function getMessageIcon(type) {
    const icons = {
        'success': 'fa-check-circle',
        'error': 'fa-exclamation-circle',
        'warning': 'fa-exclamation-triangle',
        'info': 'fa-info-circle'
    };
    return icons[type] || icons.info;
}

function getMessageColor(type) {
    const colors = {
        'success': '#28a745',
        'error': '#dc3545',
        'warning': '#ffc107',
        'info': '#17a2b8'
    };
    return colors[type] || colors.info;
}

// Add CSS animations
const style = document.createElement('style');
style.textContent = `
    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }
    
    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1;
        }
        to {
            transform: translateX(100%);
            opacity: 0;
        }
    }
    
    .message-content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .message-content i {
        font-size: 1.2rem;
    }
`;
document.head.appendChild(style);

// Social login buttons (demo)
document.querySelectorAll('.btn-social').forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        const provider = this.classList.contains('btn-google') ? 'Google' : 'Facebook';
        showMessage(`Đăng nhập với ${provider} đang được phát triển!`, 'info');
    });
});

// Forgot password link
const forgotPasswordLink = document.querySelector('.forgot-password');
if (forgotPasswordLink) {
    forgotPasswordLink.addEventListener('click', function(e) {
        e.preventDefault();
        showMessage('Tính năng quên mật khẩu đang được phát triển!', 'info');
    });
}

// --- AJAX Login/Register ---

document.addEventListener('DOMContentLoaded', function() {
    // LOGIN FORM
    const loginForm = document.getElementById('loginFormElement');
    const rememberCheckbox = loginForm ? loginForm.querySelector('input[name="remember"]') : null;
    const loginEmailInput = document.getElementById('loginEmail');
    // Khi load trang, nếu có email đã lưu thì tự động điền
    if (loginEmailInput && rememberCheckbox) {
        const savedEmail = localStorage.getItem('rememberedEmail');
        if (savedEmail) {
            loginEmailInput.value = savedEmail;
            rememberCheckbox.checked = true;
        }
    }
    if (loginForm) {
        loginForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const email = loginEmailInput.value.trim();
            const password = document.getElementById('loginPassword').value;
            if (!isValidEmail(email)) {
                showMessage('Email không hợp lệ!', 'error');
                return;
            }
            if (!password) {
                showMessage('Vui lòng nhập mật khẩu!', 'error');
                return;
            }
            // Xử lý nhớ email
            if (rememberCheckbox && rememberCheckbox.checked) {
                localStorage.setItem('rememberedEmail', email);
            } else {
                localStorage.removeItem('rememberedEmail');
            }
            try {
                const res = await fetch('login.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
                    body: `email=${encodeURIComponent(email)}&password=${encodeURIComponent(password)}`
                });
                const data = await res.json();
                if (data.success) {
                    showMessage('Đăng nhập thành công! Đang chuyển hướng...', 'success');
                    setTimeout(() => { window.location.href = '/public_html/index.php'; }, 1200);
                } else {
                    showMessage(data.message || 'Đăng nhập thất bại!', 'error');
                }
            } catch (err) {
                showMessage('Lỗi kết nối máy chủ!', 'error');
            }
        });
    }

    // REGISTER FORM
    const registerForm = document.getElementById('registerFormElement');
    if (registerForm) {
        registerForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            const fullName = document.getElementById('registerFullName').value.trim();
            const email = document.getElementById('registerEmail').value.trim();
            const phone = document.getElementById('registerPhone').value.trim();
            const password = document.getElementById('registerPassword').value;
            const confirmPassword = document.getElementById('registerConfirmPassword').value;
            const agree = registerForm.querySelector('input[name="agree"]');
            if (!fullName) {
                showMessage('Vui lòng nhập họ tên!', 'error'); return;
            }
            if (!isValidEmail(email)) {
                showMessage('Email không hợp lệ!', 'error'); return;
            }
            if (!isValidPhone(phone)) {
                showMessage('Số điện thoại không hợp lệ!', 'error'); return;
            }
            if (!password || password.length < 6) {
                showMessage('Mật khẩu phải từ 6 ký tự!', 'error'); return;
            }
            if (password !== confirmPassword) {
                showMessage('Mật khẩu xác nhận không khớp!', 'error'); return;
            }
            if (!agree || !agree.checked) {
                showMessage('Bạn phải đồng ý với Điều khoản sử dụng và Chính sách bảo mật!', 'error'); return;
            }
            try {
                const res = await fetch('register.php', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'X-Requested-With': 'XMLHttpRequest' },
                    body: `fullName=${encodeURIComponent(fullName)}&email=${encodeURIComponent(email)}&phone=${encodeURIComponent(phone)}&password=${encodeURIComponent(password)}&confirmPassword=${encodeURIComponent(confirmPassword)}&agree=on`
                });
                const data = await res.json();
                if (data.success) {
                    showMessage('Đăng ký thành công! Vui lòng đăng nhập.', 'success');
                    setTimeout(() => { switchToLogin(); }, 1200);
                    registerForm.reset();
                } else {
                    showMessage(data.message || 'Đăng ký thất bại!', 'error');
                }
            } catch (err) {
                showMessage('Lỗi kết nối máy chủ!', 'error');
            }
        });
    }
});