document.addEventListener('DOMContentLoaded', () => {
    const modalElement = document.getElementById('modalUsuario');
    const modal = new bootstrap.Modal(modalElement);
    const modalLabel = document.getElementById('modalUsuarioLabel');
    const formUsuario = document.getElementById('formUsuario');
    const tablaBody = document.getElementById('tablaUsuariosBody');

    // --- FUNCIÓN PARA CARGAR USUARIOS ---
    async function cargarUsuarios() {
        try {
            // Añadimos un timestamp para evitar que el navegador use datos de caché
            const response = await fetch(src(`get_usuarios.php?_=${new Date().getTime()}`));
            if (!response.ok) throw new Error('Error al cargar los usuarios.');
            const usuarios = await response.json();

            tablaBody.innerHTML = ''; // Limpiar tabla
            if (usuarios.length === 0) {
                tablaBody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">No hay usuarios registrados.</td></tr>';
                return;
            }

            usuarios.forEach(user => {
                const fecha = new Date(user.creado_en).toLocaleDateString();
                let badgeClass = 'bg-secondary'; // Color por defecto
                const userRol = user.rol ? user.rol.toLowerCase() : '';

                if (userRol === 'administrador') {
                    badgeClass = 'bg-danger'; // Rojo: rol con privilegios críticos.
                } else if (userRol === 'inspector') {
                    badgeClass = 'bg-warning text-dark';
                } else if (userRol === 'convivencia') {
                    badgeClass = 'bg-success';
                } else if (userRol === 'digitador') {
                    badgeClass = 'bg-primary'; // Azul: rol operativo principal.
                }

                const fila = `
                    <tr>
                        <td>${user.usuario}</td>
                        <td><span class="badge ${badgeClass}">${user.rol}</span></td>
                        <td>${fecha}</td>
                        <td class="text-end">
                            <button class="btn btn-sm btn-outline-primary btn-editar" data-id="${user.id}" data-usuario="${user.usuario}" data-rol="${user.rol}">
                                <i class="bi bi-pencil-square"></i> Editar
                            </button>
                            <button class="btn btn-sm btn-outline-danger btn-eliminar" data-id="${user.id}">
                                <i class="bi bi-trash"></i> Eliminar
                            </button>
                        </td>
                    </tr>
                `;
                tablaBody.insertAdjacentHTML('beforeend', fila);
            });
        } catch (error) {
            console.error(error);
            tablaBody.innerHTML = `<tr><td colspan="4" class="text-center text-danger">${error.message}</td></tr>`;
        }
    }

    // --- EVENT LISTENERS ---

    // Botón "Crear Nuevo Usuario"
    document.getElementById('btnCrearUsuario').addEventListener('click', () => {
        formUsuario.reset();
        document.getElementById('usuario_id').value = '';
        modalLabel.textContent = 'Crear Nuevo Usuario';
        document.getElementById('usuario_password').setAttribute('required', 'required');
        modal.show();
    });

    // Botones "Editar" y "Eliminar" (usando delegación de eventos)
    tablaBody.addEventListener('click', async (e) => {
        const target = e.target.closest('button');
        if (!target) return;

        const id = target.dataset.id;

        // Editar
        if (target.classList.contains('btn-editar')) {
            formUsuario.reset();
            modalLabel.textContent = 'Editar Usuario';
            document.getElementById('usuario_id').value = id;
            document.getElementById('usuario_nombre').value = target.dataset.usuario;
            document.getElementById('usuario_rol').value = target.dataset.rol;
            document.getElementById('usuario_password').removeAttribute('required');
            modal.show();
        }

        // Eliminar
        if (target.classList.contains('btn-eliminar')) {
            if (!confirm('¿Estás seguro de que deseas eliminar este usuario? Esta acción no se puede deshacer.')) {
                return;
            }
            try {
                const formData = new FormData();
                formData.append('id', id);
                const response = await fetch(src('eliminar_usuario.php'), {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                if (!result.success) throw new Error(result.error || 'Error desconocido.');
                cargarUsuarios(); // Recargar la tabla
            } catch (error) {
                alert(`Error al eliminar: ${error.message}`);
            }
        }
    });

    // Envío del formulario del modal
    formUsuario.addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(formUsuario);

        // Si es un nuevo usuario, la contraseña es obligatoria
        if (!formData.get('id') && !formData.get('password')) {
            alert('La contraseña es obligatoria para los nuevos usuarios.');
            return;
        }

        try {
            const response = await fetch(src('guardar_usuario.php'), {
                method: 'POST',
                body: formData
            });
            const result = await response.json();
            if (!result.success) throw new Error(result.error || 'Error desconocido.');

            document.activeElement.blur(); // Quitar el foco antes de ocultar
            modal.hide();
            cargarUsuarios(); // Recargar la tabla
        } catch (error) {
            alert(`Error al guardar: ${error.message}`);
        }
    });

    // --- CARGA INICIAL ---
    cargarUsuarios();
});