<div class="card-custom">
    <ul class="nav nav-tabs mb-4">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-users">Usuarios</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-perms">Permisos y Roles</button></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-users">
            <div class="d-flex justify-content-between mb-3">
                <h4 class="m-0">Equipo de Trabajo</h4>
                <button class="btn btn-primary rounded-pill shadow-sm" data-bs-toggle="modal" data-bs-target="#modalUser">
                    <i class="fas fa-plus me-2"></i> Nuevo Usuario
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Nombre</th>
                            <th>Usuario (Login)</th>
                            <th>Rol</th>
                            <th>Estado</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="user-list">
                        </tbody>
                </table>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-perms">
            <div class="alert alert-info small mb-3">
                <i class="fas fa-info-circle me-2"></i> Marca las casillas para decidir que puede ver cada rol. El Administrador siempre tiene acceso total.
            </div>
            <div class="table-responsive">
                <table class="table table-bordered text-center align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th class="text-start">Módulo del Sistema</th>
                            <th style="width:15%">CAJERO</th>
                            <th style="width:15%">ALMACENERO</th>
                            <th style="width:15%">ADMINISTRADOR</th>
                        </tr>
                    </thead>
                    <tbody id="perm-matrix">
                        </tbody>
                </table>
            </div>
            <div class="text-end mt-3">
                <button class="btn btn-success px-4 shadow" onclick="guardarPermisos()">
                    <i class="fas fa-save me-2"></i> Guardar Cambios
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalUser" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" class="modal-content p-4" id="formUser">
            <input type="hidden" name="action" value="save_user">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold m-0">Nuevo Usuario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            
            <div class="mb-3">
                <label class="small fw-bold text-muted">Nombre Completo</label>
                <input name="nombre" class="form-control" placeholder="Ej. Juan Perez" required>
            </div>
            <div class="mb-3">
                <label class="small fw-bold text-muted">Usuario (Login)</label>
                <input name="usuario" class="form-control" placeholder="Ej. jperez" required>
            </div>
            <div class="mb-3">
                <label class="small fw-bold text-muted">Contraseña</label>
                <input type="password" name="password" class="form-control" required>
            </div>
            <div class="mb-4">
                <label class="small fw-bold text-muted">Rol</label>
                <select name="rol" class="form-select">
                    <option value="CAJERO">CAJERO</option>
                    <option value="ALMACENERO">ALMACENERO</option>
                    <option value="ADMINISTRADOR">ADMINISTRADOR</option>
                </select>
            </div>
            <button class="btn btn-primary w-100 fw-bold">CREAR USUARIO</button>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    loadUsers();
    loadPermsMatrix();
});

// --- CARGAR USUARIOS (Con manejo de errores) ---
function loadUsers() {
    let tbody = document.getElementById('user-list');
    tbody.innerHTML = '<tr><td colspan="5" class="text-center">Cargando...</td></tr>';

    fetch('api.php?task=get_users')
        .then(r => r.json())
        .then(users => {
            // Verificar si vino un error
            if (users.error) {
                tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger fw-bold"><i class="fas fa-exclamation-triangle"></i> Error: ${users.error}</td></tr>`;
                return;
            }
            if (users.length === 0) {
                tbody.innerHTML = `<tr><td colspan="5" class="text-center text-muted">No hay usuarios registrados.</td></tr>`;
                return;
            }

            let html = '';
            users.forEach(x => {
                let badgeColor = x.rol === 'ADMINISTRADOR' ? 'bg-danger' : (x.rol === 'ALMACENERO' ? 'bg-warning text-dark' : 'bg-info text-dark');
                let estadoBtn = x.estado == 1 
                    ? `<button class="btn btn-sm btn-outline-success" onclick="tog(${x.id_empleado}, 0)" title="Desactivar"><i class="fas fa-check"></i> Activo</button>` 
                    : `<button class="btn btn-sm btn-outline-secondary" onclick="tog(${x.id_empleado}, 1)" title="Activar"><i class="fas fa-ban"></i> Inactivo</button>`;
                
                // Botón reset password
                let resetBtn = `<button class="btn btn-sm btn-warning ms-1" onclick="resetPass(${x.id_empleado})" title="Resetear Contraseña"><i class="fas fa-key"></i></button>`;

                html += `
                <tr>
                    <td class="fw-bold">${x.nombre}</td>
                    <td>${x.usuario}</td>
                    <td><span class="badge ${badgeColor}">${x.rol}</span></td>
                    <td>${estadoBtn}</td>
                    <td>${resetBtn}</td>
                </tr>`;
            });
            tbody.innerHTML = html;
        })
        .catch(err => {
            console.error(err);
            tbody.innerHTML = `<tr><td colspan="5" class="text-center text-danger">Error de conexión con API</td></tr>`;
        });
}

function tog(id, estado) {
    let fd = new FormData();
    fd.append('id', id);
    fd.append('estado', estado);
    fetch('api.php?task=toggle_user', {method: 'POST', body: fd})
        .then(() => loadUsers());
}

function resetPass(id) { 
    Swal.fire({
        title: 'Resetear Contraseña',
        input: 'text',
        inputLabel: 'Escribe la nueva contraseña:',
        inputPlaceholder: 'Nueva clave...',
        showCancelButton: true,
        confirmButtonText: 'Guardar Cambios',
        confirmButtonColor: '#ffc107'
    }).then((r)=>{ 
        if(r.isConfirmed && r.value){ 
            let fd=new FormData(); fd.append('target_id',id); fd.append('new_pass',r.value); 
            fetch('api.php?task=admin_reset_pass',{method:'POST',body:fd})
                .then(res=>res.json())
                .then(d=>{ 
                    if(d.success) Swal.fire('Listo','Contraseña ambiada','success');
                    else Swal.fire('Error', d.error, 'error');
                }); 
        } 
    }); 
}

// --- PERMISOS ---
const modulos = [
    {k:'home', n:'Dashboard (Gráficos)'},
    {k:'pos', n:'Caja Venta (POS)'},
    {k:'productos', n:'Inventario / Productos'},
    {k:'proveedores', n:'Gestión Proveedores'},
    {k:'compras', n:'Compras / Abastecimiento'},
    {k:'kardex', n:'Auditoría (Kardex)'},
    {k:'reportes', n:'Reportes y Finanzas'},
    {k:'clientes', n:'Gestión Clientes'},
    {k:'egresos', n:'Gastos de Caja'},
    {k:'usuarios', n:'Usuarios y Accesos'},
    {k:'config', n:'Configuración Sistema'}
];

function loadPermsMatrix() { 
    fetch('api.php?task=get_permisos').then(r=>r.json()).then(perms => { 
        let html = ''; 
        modulos.forEach(m => { 
            html += `<tr>
                <td class="text-start fw-bold">${m.n}</td>
                <td><input type="checkbox" class="form-check-input perm-check" data-rol="CAJERO" data-vista="${m.k}" ${hasPerm(perms,'CAJERO',m.k)?'checked':''}></td>
                <td><input type="checkbox" class="form-check-input perm-check" data-rol="ALMACENERO" data-vista="${m.k}" ${hasPerm(perms,'ALMACENERO',m.k)?'checked':''}></td>
                <td><i class="fas fa-check-circle text-success"></i></td>
            </tr>`; 
        }); 
        document.getElementById('perm-matrix').innerHTML = html; 
    }); 
}

function hasPerm(list, rol, vista) { return list.some(p => p.rol === rol && p.vista === vista); }

function guardarPermisos() { 
    let checks = document.querySelectorAll('.perm-check'); 
    let map = { 'CAJERO': [], 'ALMACENERO': [] }; 
    checks.forEach(c => { if(c.checked) map[c.dataset.rol].push(c.dataset.vista); }); 
    
    Promise.all([
        saveRole('CAJERO', map['CAJERO']), 
        saveRole('ALMACENERO', map['ALMACENERO'])
    ]).then(() => { Swal.fire('Guardado', 'Los usuarios deben reiniciar sesión para ver los cambios.', 'success'); }); 
}

function saveRole(rol, vistas) { 
    let fd = new FormData(); 
    fd.append('rol', rol); 
    fd.append('vistas', JSON.stringify(vistas)); 
    return fetch('api.php?task=save_permisos', {method:'POST', body:fd}); 
}
</script>