document.addEventListener('DOMContentLoaded', function () {
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const form = e.target;
            const formData = new FormData(form);
            const alertContainer = document.getElementById('form-alerts');
            
            alertContainer.innerHTML = '';

            fetch('contact.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', 'Message sent successfully! We will get back to you shortly.');
                    form.reset();
                } else {
                    showAlert('danger', 'An error occurred: ' + (data.error || 'Please try again.'));
                }
            })
            .catch(error => {
                showAlert('danger', 'A network error occurred. Please try again.');
                console.error('Error:', error);
            });
        });
    }

    function showAlert(type, message) {
        const alertContainer = document.getElementById('form-alerts');
        const wrapper = document.createElement('div');
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div>${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('');
        alertContainer.append(wrapper);
    }

    // --- Search Functionality ---
    const searchForm = document.getElementById('searchForm');
    if (searchForm) {
        const searchInput = document.getElementById('searchInput');
        const searchButton = document.getElementById('searchButton');
        const searchResultsSection = document.getElementById('searchResults');
        const resultsContainer = document.getElementById('resultsContainer');
        const noResults = document.getElementById('noResults');

        searchForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const query = searchInput.value.trim();

            if (query === '') {
                return;
            }

            // Show loading state
            searchButton.disabled = true;
            searchButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Searching...';
            resultsContainer.innerHTML = '';
            noResults.style.display = 'none';
            searchResultsSection.style.display = 'block';

            fetch(`search.php?q=${encodeURIComponent(query)}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.length > 0) {
                        displayResults(data);
                    } else {
                        noResults.style.display = 'block';
                    }
                })
                .catch(error => {
                    console.error('Search error:', error);
                    resultsContainer.innerHTML = '<p class="text-danger text-center">An error occurred while searching. Please try again.</p>';
                })
                .finally(() => {
                    // Restore button state
                    searchButton.disabled = false;
                    searchButton.innerHTML = 'Search';
                });
        });

        function displayResults(products) {
            products.forEach(product => {
                const pricesHtml = product.prices.map(p => `
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        ${p.retailer}
                        <span class="badge bg-primary rounded-pill">R ${parseFloat(p.price).toFixed(2)}</span>
                    </li>
                `).join('');

                const productCard = `
                    <div class="col-md-6 col-lg-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">${product.name}</h5>
                                <ul class="list-group list-group-flush">
                                    ${pricesHtml}
                                </ul>
                            </div>
                        </div>
                    </div>
                `;
                resultsContainer.innerHTML += productCard;
            });
        }
    }
});