document.addEventListener('DOMContentLoaded', function () {
    const registrationForm = document.getElementById('registrationForm');
    const patientTableBody = document.getElementById('patientTableBody');
    const toastContainer = document.getElementById('toastContainer');

    // --- Function to show a toast notification ---
    function showToast(message, type = 'success') {
        const toastId = 'toast-' + Date.now();
        const toastHTML = `
            <div id="${toastId}" class="toast align-items-center text-white bg-${type === 'success' ? 'primary' : '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>
        `;
        toastContainer.innerHTML += toastHTML;
        const toastElement = document.getElementById(toastId);
        const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
        toast.show();
        toastElement.addEventListener('hidden.bs.toast', () => toastElement.remove());
    }

    // --- Function to add a patient to the table ---
    function addPatientToTable(patient) {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${patient.id}</td>
            <td>${patient.first_name} ${patient.last_name}</td>
            <td>${patient.date_of_birth}</td>
            <td>${patient.gender}</td>
            <td>${patient.contact_number}</td>
            <td>${patient.registration_date || new Date().toISOString().split('T')[0]}</td>
        `;
        patientTableBody.prepend(row);
    }

    // --- Fetch and display initial patients ---
    async function loadInitialPatients() {
        try {
            const response = await fetch('api/patients.php');
            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
            const data = await response.json();

            if (data.status === 'success' && data.patients) {
                patientTableBody.innerHTML = ''; // Clear existing rows
                data.patients.forEach(addPatientToTable);
            } else {
                showToast(data.message || 'Could not load patients.', 'danger');
            }
        } catch (error) {
            console.error('Fetch error:', error);
            showToast('An error occurred while fetching patient data.', 'danger');
        }
    }

    // --- Handle form submission ---
    if (registrationForm) {
        registrationForm.addEventListener('submit', async function (e) {
            e.preventDefault();

            const formData = new FormData(registrationForm);
            const patientData = Object.fromEntries(formData.entries());

            try {
                const response = await fetch('api/patients.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(patientData)
                });

                if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

                const result = await response.json();

                if (result.status === 'success') {
                    showToast('Patient registered successfully!');
                    addPatientToTable(result.patient);
                    registrationForm.reset();
                    const modal = bootstrap.Modal.getInstance(document.getElementById('registerPatientModal'));
                    modal.hide();
                } else {
                    showToast(result.message || 'Registration failed.', 'danger');
                }
            } catch (error) {
                console.error('Submit error:', error);
                showToast('An error occurred during registration.', 'danger');
            }
        });
    }

    // --- Initial load ---
    loadInitialPatients();
});