// Variable global para almacenar los datos
let usuariosGlobales = [];

document.addEventListener('DOMContentLoaded', () => {
    // 1. SEGURIDAD Y SESIÓN
    const rol = localStorage.getItem('rol');
    const nombres = localStorage.getItem('nombres') || 'Administrador';

    if (!rol || rol !== 'administrador') {
        window.location.href = 'login.html';
        return;
    }

    // Pintar nombre de admin
    const nombreAdminEl = document.getElementById('nombreAdmin');
    if(nombreAdminEl) nombreAdminEl.textContent = `Admin: ${nombres}`;

    // Botón de cerrar sesión
    const btnCerrar = document.querySelector('.btn-logout');
    if(btnCerrar) {
        btnCerrar.addEventListener('click', () => {
            localStorage.clear();
            window.location.href = 'login.html';
        });
    }

    // 2. CARGAMOS LOS DATOS AL INICIAR
    cargarUsuarios();

    // 3. BUSCADOR EN TIEMPO REAL
    const inputBusqueda = document.querySelector('.search-box input');
    if (inputBusqueda) {
        inputBusqueda.addEventListener('input', filtrarUsuarios);
    }
});

// ==========================================
// OBTENER Y PINTAR USUARIOS EN LA TABLA
// ==========================================
async function cargarUsuarios() {
    try {
        const response = await fetch('/api/admin/usuarios'); 
        usuariosGlobales = await response.json();
        renderizarTablaUsuarios(usuariosGlobales);
    } catch (error) {
        console.error("Error al cargar usuarios:", error);
    }
}

function filtrarUsuarios(e) {
    const txt = e.target.value.toLowerCase();
    const filtrados = usuariosGlobales.filter(u => 
        (u.nombres && u.nombres.toLowerCase().includes(txt)) || 
        (u.apellidos && u.apellidos.toLowerCase().includes(txt)) ||
        (u.correo && u.correo.toLowerCase().includes(txt)) ||
        (u.area && u.area.toLowerCase().includes(txt))
    );
    renderizarTablaUsuarios(filtrados);
}

function renderizarTablaUsuarios(usuarios) {
    const tbody = document.getElementById('usuariosBody');
    if (!tbody) return; // Validación de seguridad

    if (!usuarios || usuarios.length === 0) {
        tbody.innerHTML = `<tr><td colspan="6" style="text-align: center; padding: 30px; color: #64748b;">No hay usuarios registrados o no se encontraron resultados.</td></tr>`;
        return;
    }

    tbody.innerHTML = usuarios.map(u => {
        const badgeRol = u.rol === 'administrador' ? '<span class="badge-status bg-resuelto">Administrador TI</span>' : '<span class="badge-status priority-baja">Colaborador</span>';
        
        return `
            <tr>
                <td><strong>#${u.id.toString().padStart(3, '0')}</strong></td>
                <td style="font-weight: bold; color: #1e293b;">${u.nombres} ${u.apellidos}</td>
                <td style="color: #64748b;">${u.correo}</td>
                <td><i class="bi bi-building"></i> ${u.area}</td>
                <td>${badgeRol}</td>
                <td style="text-align: center;">
                    <button class="btn-gestionar" style="padding: 6px 12px; background: #0f172a; color: white; border: none; border-radius: 6px; cursor: pointer;" onclick="abrirModalUsuario(${u.id})">
                        <i class="bi bi-pencil-square"></i> Editar
                    </button>
                </td>
            </tr>
        `;
    }).join('');
}

// ==========================================
// LÓGICA DEL MODAL (CREAR / EDITAR)
// ==========================================
function abrirModalUsuario(id = null) {
    const modal = document.getElementById('modalUsuario');
    const titulo = document.getElementById('modalTituloUsuario');
    const passInput = document.getElementById('editUserPassword');
    const txtAyuda = document.getElementById('txtPasswordAyuda');
    const lblOpcional = document.getElementById('lblPasswordOpcional');

    // 1. Limpiamos todos los campos siempre que se abre
    document.getElementById('editUserId').value = id || '';
    document.getElementById('editUserNombre').value = '';
    document.getElementById('editUserApellido').value = '';
    document.getElementById('editUserTelefono').value = '';
    document.getElementById('editUserEmpresa').value = 'M&M SERVICIOS MOTORIZADOS';
    document.getElementById('editUserSede').value = 'RAYGADA';
    document.getElementById('editUserArea').value = '';
    document.getElementById('editUserCorreo').value = '';
    document.getElementById('editUserUsername').value = '';
    document.getElementById('editUserPassword').value = '';

    if (id) {
        // MODO EDICIÓN
        const u = usuariosGlobales.find(x => x.id === id);
        titulo.textContent = 'Editar Usuario';
        
        document.getElementById('editUserNombre').value = u.nombres || '';
        document.getElementById('editUserApellido').value = u.apellidos || '';
        document.getElementById('editUserTelefono').value = u.telefono || '';
        document.getElementById('editUserEmpresa').value = u.empresa || 'M&M SERVICIOS MOTORIZADOS';
        document.getElementById('editUserSede').value = u.sede || 'RAYGADA';
        document.getElementById('editUserArea').value = u.area || '';
        document.getElementById('editUserCorreo').value = u.correo || '';
        document.getElementById('editUserUsername').value = u.usuario || '';
        document.getElementById('editUserRol').value = u.rol || 'usuario';

        passInput.placeholder = '**********';
        if(txtAyuda) txtAyuda.style.display = 'block';
        if(lblOpcional) lblOpcional.textContent = '(Opcional)';
    } else {
        // MODO CREACIÓN
        titulo.textContent = 'Nuevo Usuario';
        document.getElementById('editUserRol').value = 'usuario';
        
        passInput.placeholder = 'Ingresa una contraseña';
        if(txtAyuda) txtAyuda.style.display = 'none';
        if(lblOpcional) lblOpcional.textContent = '*';
    }

    modal.style.display = 'block';
}

function cerrarModalUsuario() {
    document.getElementById('modalUsuario').style.display = 'none';
}

async function guardarUsuario() {
    const id = document.getElementById('editUserId').value;
    
    const payload = {
        nombres: document.getElementById('editUserNombre').value.trim(),
        apellidos: document.getElementById('editUserApellido').value.trim(),
        telefono: document.getElementById('editUserTelefono').value.trim(),
        empresa: document.getElementById('editUserEmpresa').value,
        sede: document.getElementById('editUserSede').value,
        area: document.getElementById('editUserArea').value.trim(),
        correo: document.getElementById('editUserCorreo').value.trim(),
        usuario: document.getElementById('editUserUsername').value.trim(),
        password: document.getElementById('editUserPassword').value,
        rol: document.getElementById('editUserRol').value
    };

    // Validaciones básicas
    if (!payload.nombres || !payload.correo || !payload.usuario) {
        alert("Faltan campos obligatorios (*).");
        return;
    }

    if (!id && !payload.password) {
        alert("Debes asignar una contraseña al nuevo usuario.");
        return;
    }

    const method = id ? 'PUT' : 'POST';
    const url = id ? `/api/admin/usuarios/${id}` : `/api/admin/usuarios`;

    try {
        // Deshabilitar el botón para no dar doble clic por error
        const btn = document.querySelector('.btn-guardar-pro');
        if(btn) btn.disabled = true;

        const response = await fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });

        if(btn) btn.disabled = false;

        if (response.ok) {
            cerrarModalUsuario();
            await cargarUsuarios(); // Recargamos la tabla en tiempo real
            alert(id ? "Usuario actualizado correctamente" : "Usuario creado exitosamente");
        } else {
            const error = await response.json();
            alert("Error: " + (error.error || error.message || "No se pudo guardar el usuario"));
        }
    } catch (err) {
        console.error("Error:", err);
        alert("Error de conexión al guardar el usuario");
        const btn = document.querySelector('.btn-guardar-pro');
        if(btn) btn.disabled = false;
    }
}