document.addEventListener('DOMContentLoaded', () => {
    const joinForm = document.getElementById('joinForm');
    if (joinForm) {
        joinForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const submitBtn = joinForm.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerText;
            submitBtn.disabled = true;
            submitBtn.innerText = 'Joining...';

            const formData = new FormData(joinForm);

            try {
                const response = await fetch('join_community.php', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();

                if (result.success) {
                    showToast('Welcome to the Pit Wall! 🎉');
                    joinForm.reset();
                    // Optional: Refresh member list or redirect
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showToast('Error: ' + result.error, 'danger');
                }
            } catch (error) {
                showToast('Something went wrong. Please try again.', 'danger');
            } finally {
                submitBtn.disabled = false;
                submitBtn.innerText = originalText;
            }
        });
    }
});

function showToast(message, type = 'success') {
    const toastContainer = document.getElementById('toastContainer');
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type === 'success' ? 'dark' : 'danger'} border-0" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="d-flex">
                <div class="toast-body">${message}</div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
        </div>
    `;
    const toastEl = document.createRange().createContextualFragment(toastHtml).firstElementChild;
    toastContainer.appendChild(toastEl);
    const bsToast = new bootstrap.Toast(toastEl);
    bsToast.show();
    
    toastEl.addEventListener('hidden.bs.toast', () => {
        toastEl.remove();
    });
}