/*
 * Created by: Molla Samser & Rima Khatun
 * Website: https://rskworld.in/contact.php
 * Emails: help@rskworld.in, support@rskworld.in
 * Phone: +91 93305 39277
 * Year: 2026
 */

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('contactForm');
    const nameInput = document.getElementById('name');
    const emailInput = document.getElementById('email');
    const messageInput = document.getElementById('message');
    const themeToggle = document.getElementById('themeToggle');
    const charCounter = document.querySelector('.char-counter');

    // Initialize Features
    initTheme();
    initAutosave();
    initCharCounter();

    form.addEventListener('submit', (e) => {
        e.preventDefault();

        if (validateForm()) {
            const submitBtn = form.querySelector('.submit-btn');
            const originalContent = submitBtn.innerHTML;

            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending...';
            submitBtn.disabled = true;

            const handleSuccess = (msg) => {
                showToast(msg, 'success');
                localStorage.removeItem('formData');
                form.reset();
                resetValidationStyles();
                updateCharCounter();
            };

            if (window.location.protocol === 'file:') {
                setTimeout(() => {
                    handleSuccess('Message sent successfully! (Simulation Mode)');
                    submitBtn.innerHTML = originalContent;
                    submitBtn.style.backgroundColor = '';
                    submitBtn.disabled = false;
                }, 1500);
                return;
            }

            const formData = new FormData(form);

            fetch('submit.php', {
                method: 'POST',
                body: formData
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    const contentType = response.headers.get("content-type");
                    if (contentType && contentType.indexOf("application/json") !== -1) {
                        return response.json();
                    } else {
                        throw new Error('Invalid JSON response from server');
                    }
                })
                .then(data => {
                    if (data.success) {
                        handleSuccess(data.message);
                    } else {
                        showToast(data.message || 'Error sending message', 'error');
                    }
                })
                .catch(error => {
                    showToast('Backend unreachable. Showing simulation.', 'warning');
                    setTimeout(() => {
                        handleSuccess('Message sent successfully! (Fallback Mode)');
                    }, 1000);
                })
                .finally(() => {
                    setTimeout(() => {
                        submitBtn.innerHTML = originalContent;
                        submitBtn.style.backgroundColor = '';
                        submitBtn.disabled = false;
                    }, 1500);
                });
        }
    });

    // Real-time validation
    const inputs = [nameInput, emailInput, messageInput];
    inputs.forEach(input => {
        input.addEventListener('input', () => {
            validateInput(input);
        });

        input.addEventListener('blur', () => {
            validateInput(input);
        });
    });

    function validateForm() {
        let isValid = true;

        if (!validateInput(nameInput)) isValid = false;
        if (!validateInput(emailInput)) isValid = false;
        if (!validateInput(messageInput)) isValid = false;

        return isValid;
    }

    function validateInput(input) {
        const value = input.value.trim();
        const inputGroup = input.closest('.input-group');
        const errorMessage = inputGroup.querySelector('.error-message');

        let valid = true;
        let message = '';

        if (value === '') {
            valid = false;
            message = `${getFieldName(input)} is required`;
        } else if (input.type === 'email' && !isValidEmail(value)) {
            valid = false;
            message = 'Please enter a valid email address';
        }

        if (valid) {
            setSuccess(inputGroup);
        } else {
            setError(inputGroup, message);
        }

        return valid;
    }

    function getFieldName(input) {
        return input.previousElementSibling ? input.previousElementSibling.innerText : input.name; // Fallback
    }

    function setError(inputGroup, message) {
        inputGroup.classList.add('error');
        inputGroup.classList.remove('success');
        inputGroup.querySelector('.error-message').innerText = message;
    }

    function setSuccess(inputGroup) {
        inputGroup.classList.add('success');
        inputGroup.classList.remove('error');
        inputGroup.querySelector('.error-message').innerText = '';
    }

    function resetValidationStyles() {
        inputs.forEach(input => {
            const group = input.closest('.input-group');
            group.classList.remove('error', 'success');
        });
    }

    function isValidEmail(email) {
        const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    // Advanced Features Implementation

    function initTheme() {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            document.body.classList.add('dark-mode');
            themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
        }

        themeToggle.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
            const isDark = document.body.classList.contains('dark-mode');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
            themeToggle.innerHTML = isDark ? '<i class="fas fa-sun"></i>' : '<i class="fas fa-moon"></i>';
        });
    }

    function initAutosave() {
        // Load saved data
        if (localStorage.getItem('formData')) {
            const savedData = JSON.parse(localStorage.getItem('formData'));
            nameInput.value = savedData.name || '';
            emailInput.value = savedData.email || '';
            messageInput.value = savedData.message || '';
            validateForm(); // Validate loaded data
            updateCharCounter(); // Update counter
        }

        // Save data on input
        const inputs = [nameInput, emailInput, messageInput];
        inputs.forEach(input => {
            input.addEventListener('input', () => {
                const formData = {
                    name: nameInput.value,
                    email: emailInput.value,
                    message: messageInput.value
                };
                localStorage.setItem('formData', JSON.stringify(formData));
            });
        });


    }



    function initCharCounter() {
        messageInput.addEventListener('input', updateCharCounter);
        updateCharCounter();
    }

    function updateCharCounter() {
        const count = messageInput.value.length;
        const max = messageInput.getAttribute('maxlength');
        charCounter.innerText = `${count} / ${max}`;
    }
    function showToast(message, type = 'success') {
        const container = document.querySelector('.toast-container') || createToastContainer();
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.innerHTML = `
            <i class="fas ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}"></i>
            <span>${message}</span>
        `;

        container.appendChild(toast);

        // Auto remove
        setTimeout(() => {
            toast.style.animation = 'slideIn 0.3s ease-in reverse';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    }

    function createToastContainer() {
        const container = document.createElement('div');
        container.className = 'toast-container';
        document.body.appendChild(container);
        return container;
    }
});