var Roles = Object.assign({}, TablaGenerica);
var permisosCache = null;

Roles.init({
    title: 'Roles',
    icon: 'fa-user-tag',
    idSingular: 'Rol',
    idField: 'id_rol',
    endpoint: '/roles',
    sortDefault: 'nombre_rol',
    limite: 50,
    searchPlaceholder: 'Buscar por nombre o descripcion...',
    filtroEstado: true,
    showEstado: true,
    exportFileName: 'Roles',
    elementId: 'pageRoles',
    menuPage: 'Roles',
    columnFilters: {},
    columns: [
        { field: 'nombre_rol', label: 'Nombre del Rol', sortable: true, filterable: true },
        { field: 'descripcion', label: 'Descripcion', sortable: true, filterable: true },
        { field: 'estado', label: 'Estado', sortable: true, filterable: true, width: '100px',
            render: function(row) {
                return row.estado
                    ? '<span class="prov-badge prov-badge-activo"><span class="prov-badge-dot"></span>Activo</span>'
                    : '<span class="prov-badge prov-badge-inactivo"><span class="prov-badge-dot"></span>Inactivo</span>';
            }
        }
    ],
    renderFormulario: function(data) {
        var id = data ? data.id_rol : '';
        var html = '<input type="hidden" id="pageRolesFormId" value="' + (id || '') + '">';
        html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">';
        html += '<div class="prov-field" style="grid-column:1/-1"><label>Nombre del Rol <span class="req">*</span></label><input type="text" id="rolFormNombre" class="prov-input" maxlength="50" required oninput="this.value=this.value.toUpperCase()"></div>';
        html += '<div class="prov-field" style="grid-column:1/-1"><label>Descripcion</label><textarea id="rolFormDesc" class="prov-input" rows="2" style="resize:vertical"></textarea></div>';
        html += '<div class="prov-field"><label>Estado</label><select id="rolFormEstado" class="prov-input"><option value="1">Activo</option><option value="0">Inactivo</option></select></div>';
        html += '</div>';
        html += '<hr style="margin:16px 0;border-color:var(--gris-200)">';
        html += '<div class="prov-field"><label style="font-size:0.95rem;font-weight:600;margin-bottom:12px;color:var(--gris-800)"><i class="fas fa-shield-halved" style="margin-right:6px;color:var(--azul-400)"></i>Permisos del Rol</label>';
        html += '<div id="rolPermisosContainer" class="permisos-grid"></div></div>';
        html += '<div style="margin-top:10px;display:flex;gap:8px">';
        html += '<button type="button" class="permiso-btn" onclick="marcarTodosPermisos(true)"><i class="fas fa-check-double"></i> Marcar todos</button>';
        html += '<button type="button" class="permiso-btn permiso-btn-off" onclick="marcarTodosPermisos(false)"><i class="fas fa-times"></i> Desmarcar todos</button>';
        html += '</div>';
        return html;
    },
    onCargarFormulario: function(data) {
        if (!data) {
            document.getElementById('rolFormNombre').value = '';
            document.getElementById('rolFormDesc').value = '';
            document.getElementById('rolFormEstado').value = '1';
            cargarPermisos(null);
            return;
        }
        document.getElementById('rolFormNombre').value = data.nombre_rol || '';
        document.getElementById('rolFormDesc').value = data.descripcion || '';
        document.getElementById('rolFormEstado').value = data.estado ? '1' : '0';

        var api = this.API_URL;
        var sesion = this.sesion || {};
        fetch(api + '/roles/' + data.id_rol + '?id_empresa=' + (sesion.id_empresa || ''))
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (res.ok) {
                    cargarPermisos(res.permisos);
                } else {
                    cargarPermisos(null);
                }
            })
            .catch(function() {
                cargarPermisos(null);
            });
    },
    onGuardar: function() {
        var id = document.getElementById('pageRolesFormId')?.value;
        var nombre = document.getElementById('rolFormNombre').value.trim().toUpperCase();
        var desc = document.getElementById('rolFormDesc').value.trim();
        var est = document.getElementById('rolFormEstado').value === '1';

        if (!nombre) { Mensaje.error({ titulo: 'Validacion', texto: 'El nombre del rol es requerido' }); return; }
        if (!this.sesion || !this.sesion.id_empresa) { Mensaje.error({ titulo: 'Error', texto: 'Sesion no disponible' }); return; }

        var checks = document.querySelectorAll('#rolPermisosContainer input[type=checkbox]');
        var permisos = [];
        checks.forEach(function(c) {
            if (c.checked) permisos.push(parseInt(c.value));
        });

        var body = {
            id_empresa: this.sesion.id_empresa,
            id_sucursal: this.sesion.id_sucursal || null,
            nombre_rol: nombre, descripcion: desc, estado: est, permisos: permisos
        };

        var metodo = id ? 'PUT' : 'POST';
        var url = this.API_URL + this.endpoint + (id ? '/' + id : '');

        fetch(url, {
            method: metodo,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(body)
        })
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (res.ok) {
                Mensaje.exito({ titulo: 'Guardado', texto: res.mensaje });
                Modal.cerrar();
                this.paginaActual = 1;
                this.cargarTabla();
            } else {
                Mensaje.error({ titulo: 'Error', texto: res.mensaje });
            }
        }.bind(this))
        .catch(function() {
            Mensaje.error({ titulo: 'Error', texto: 'Error al guardar rol' });
        });
    }
});

function cargarPermisos(idsSeleccionados) {
    var cont = document.getElementById('rolPermisosContainer');
    if (!cont) return;

    if (permisosCache) {
        renderPermisos(cont, permisosCache, idsSeleccionados);
        return;
    }

    cont.innerHTML = '<div style="grid-column:1/-1;color:var(--gris-400);padding:12px;text-align:center"><i class="fas fa-spinner fa-spin"></i> Cargando permisos...</div>';

    var url = Roles.API_URL || 'http://localhost:3000/api';
    var sesion = Roles.sesion || {};
    fetch(url + '/permisos?id_empresa=' + (sesion.id_empresa || ''))
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (res.ok && res.data) {
                permisosCache = res.data;
                renderPermisos(cont, res.data, idsSeleccionados);
            } else {
                cont.innerHTML = '<div style="grid-column:1/-1;color:#EF4444;padding:12px;text-align:center"><i class="fas fa-exclamation-triangle"></i> Error al cargar permisos</div>';
            }
        })
        .catch(function() {
            cont.innerHTML = '<div style="grid-column:1/-1;color:#EF4444;padding:12px;text-align:center"><i class="fas fa-exclamation-triangle"></i> Error de conexion</div>';
        });
}

var iconosModulos = {
    Dashboard: 'fa-th-large',
    Empresas: 'fa-building',
    Usuarios: 'fa-user-lock',
    Roles: 'fa-user-tag',
    Clientes: 'fa-users',
    Proveedores: 'fa-truck',
    Compras: 'fa-cart-shopping',
    Ventas: 'fa-receipt',
    Productos: 'fa-boxes-stacked',
    Inventario: 'fa-warehouse',
    Contabilidad: 'fa-calculator',
    Reportes: 'fa-chart-bar',
    Sistema: 'fa-cog'
};

function renderPermisos(cont, permisos, idsSeleccionados) {
    var set = {};
    if (idsSeleccionados) {
        for (var i = 0; i < idsSeleccionados.length; i++) {
            set[idsSeleccionados[i]] = true;
        }
    }

    var modulos = {};
    for (var i = 0; i < permisos.length; i++) {
        var p = permisos[i];
        if (!modulos[p.modulo]) modulos[p.modulo] = [];
        modulos[p.modulo].push(p);
    }

    var html = '';
    for (var mod in modulos) {
        var icono = iconosModulos[mod] || 'fa-folder';
        html += '<div class="permiso-modulo">';
        html += '<div class="permiso-modulo-title"><i class="fas ' + icono + '"></i>' + mod + '</div>';
        var accs = modulos[mod];
        for (var j = 0; j < accs.length; j++) {
            var a = accs[j];
            var checked = set[a.id_permiso] ? 'checked' : '';
            html += '<label class="toggle-switch">';
            html += '<input type="checkbox" value="' + a.id_permiso + '" ' + checked + '>';
            html += '<span class="toggle-slider"></span>';
            html += '<span class="toggle-label">' + a.accion.charAt(0).toUpperCase() + a.accion.slice(1) + '</span>';
            html += '</label>';
        }
        html += '</div>';
    }
    cont.innerHTML = html;
}

function marcarTodosPermisos(marcar) {
    var checks = document.querySelectorAll('#rolPermisosContainer input[type=checkbox]');
    checks.forEach(function(c) { c.checked = marcar; });
}

function cargarRolesEnSelect(apiUrl, seleccionado, idEmpresa) {
    var sel = document.getElementById('usuFormRol');
    if (!sel) return;
    sel.innerHTML = '<option value="">Cargando roles...</option>';

    var qs = idEmpresa ? '?id_empresa=' + idEmpresa : '';
    fetch((apiUrl || 'http://localhost:3000/api') + '/roles' + qs)
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (res.ok && res.data) {
                var html = '<option value="">Seleccionar rol...</option>';
                res.data.forEach(function(r) {
                    if (r.estado) {
                        var selAttr = seleccionado && r.id_rol === seleccionado ? ' selected' : '';
                        html += '<option value="' + r.id_rol + '"' + selAttr + '>' + r.nombre_rol + '</option>';
                    }
                });
                sel.innerHTML = html;
            }
        })
        .catch(function() {
            sel.innerHTML = '<option value="">Error al cargar roles</option>';
        });
}
