document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('contactForm');
    const formLoadedAtInput = document.getElementById('form_loaded_at');
    const formStatusDiv = document.getElementById('formStatus');

    // Set form_loaded_at to current timestamp in milliseconds
    if (formLoadedAtInput) {
        formLoadedAtInput.value = Date.now().toString();
    }

    // Form submit handler
    if (form) {
        form.addEventListener('submit', async function(e) {
            e.preventDefault();

            formStatusDiv.innerHTML = '';
            formStatusDiv.className = '';

            const name    = form.elements['name']?.value.trim();
            const email   = form.elements['email']?.value.trim();
            const address = form.elements['address']?.value.trim();

            if (!name || !email || !address) {
                formStatusDiv.className = 'form-status form-status--error';
                formStatusDiv.innerHTML = '<p>Please fill in all required fields.</p>';
                return;
            }

            if (!email.includes('@')) {
                formStatusDiv.className = 'form-status form-status--error';
                formStatusDiv.innerHTML = '<p>Please enter a valid email address.</p>';
                return;
            }

            if (form.elements['website']?.value) return;

            // Get altcha value from the web component
            const altchaWidget = document.getElementById('altcha-widget');
            const altchaPayload = altchaWidget ? (altchaWidget.value || '') : '';

            const payload = {
                name:           name,
                email:          email,
                phone:          form.elements['phone']?.value.trim() || '',
                address:        address,
                sqft:           form.elements['sqft']?.value.trim() || '',
                message:        form.elements['message']?.value.trim() || '',
                website:        form.elements['website']?.value || '',
                form_loaded_at: form.elements['form_loaded_at']?.value || '',
                altcha:         altchaPayload
            };

            // POST to /contact/
            try {
                const response = await fetch('/contact/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(payload)
                });

                const data = await response.json();

                if (data.ok) {
                    formStatusDiv.className = 'form-status form-status--success';
                    formStatusDiv.innerHTML = '<p>Thank you! Your message has been sent. We\'ll be in touch soon.</p>';
                    form.reset();
                    if (formLoadedAtInput) {
                        formLoadedAtInput.value = Date.now().toString();
                    }
                    if (window.altcha) {
                        window.altcha = new Altcha({
                            challengeUrl: '/altcha-challenge/',
                            element: document.getElementById('altcha-widget')
                        });
                    }
                } else {
                    formStatusDiv.className = 'form-status form-status--error';
                    formStatusDiv.innerHTML = '<p>' + (data.error || 'An error occurred. Please try again.') + '</p>';
                }
            } catch (err) {
                formStatusDiv.className = 'form-status form-status--error';
                formStatusDiv.innerHTML = '<p>Network error. Please try again.</p>';
            }
        });
    }
});