document.addEventListener('DOMContentLoaded', function () {
    const addEquipmentForm = document.getElementById('addEquipmentForm');
    const addEquipmentModal = new bootstrap.Modal(document.getElementById('addEquipmentModal'));

    if (addEquipmentForm) {
        addEquipmentForm.addEventListener('submit', function (e) {
            e.preventDefault();

            const formData = new FormData(addEquipmentForm);
            const data = Object.fromEntries(formData.entries());

            fetch('/api/equipamento_handler.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })
            .then(response => response.json())
            .then(result => {
                showToast(result.message, result.success ? 'success' : 'danger');
                if (result.success) {
                    addEquipmentModal.hide();
                    addEquipmentForm.reset();
                    loadEquipment();
                }
            })
            .catch(error => {
                showToast('An error occurred.', 'danger');
                console.error('Error:', error);
            });
        });
    }

    if (document.getElementById('equipmentTableBody')) {
        loadEquipment();
    }
});

function loadEquipment() {
    const tableBody = document.getElementById('equipmentTableBody');
    if (!tableBody) return;

    fetch('/api/equipamento_handler.php')
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                tableBody.innerHTML = '';
                if (result.data.length === 0) {
                    tableBody.innerHTML = '<tr><td colspan="5" class="text-center">Nenhum equipamento encontrado.</td></tr>';
                }
                result.data.forEach(eq => {
                    const row = `<tr>
                        <td>${eq.nome}</td>
                        <td>${eq.categoria}</td>
                        <td>${eq.numero_serie}</td>
                        <td><span class="badge bg-${getBadgeClass(eq.status)}">${eq.status}</span></td>
                        <td>
                            <button class="btn btn-sm btn-outline-secondary">Editar</button>
                        </td>
                    </tr>`;
                    tableBody.innerHTML += row;
                });
            } else {
                showToast(result.message, 'danger');
            }
        })
        .catch(error => {
            showToast('Failed to load equipment.', 'danger');
            console.error('Error:', error);
        });
}

function getBadgeClass(status) {
    switch (status) {
        case 'Disponível':
            return 'success';
        case 'Em Manutenção':
            return 'warning';
        case 'Danificado':
            return 'danger';
        default:
            return 'secondary';
    }
}

function showToast(message, type = 'success') {
    const toastContainer = document.getElementById('toast-container');
    if (!toastContainer) return;

    const toastId = 'toast-' + Date.now();
    const toastHTML = `
        <div id="${toastId}" class="toast align-items-center text-white bg-${type} 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());
}