var Usuarios = Object.assign({}, TablaGenerica);

Usuarios.init({
    title: 'Usuarios',
    icon: 'fa-user-lock',
    idSingular: 'Usuario',
    idField: 'id_usuario',
    endpoint: '/usuarios',
    sortDefault: 'usuario',
    limite: 50,
    searchPlaceholder: 'Buscar por usuario, nombre o email...',
    filtroEstado: true,
    showEstado: true,
    exportFileName: 'Usuarios',
    elementId: 'pageUsuarios',
    menuPage: 'Usuarios',
    columnFilters: {},
    columns: [
        { field: 'usuario', label: 'Usuario', sortable: true, filterable: true, width: '150px' },
        { field: 'nombre_completo', label: 'Nombre Completo', sortable: true, filterable: true },
        { field: 'email', label: 'Email', sortable: true, filterable: true, width: '200px' },
        { field: 'superadmin', label: 'Super Admin', sortable: true, filterable: false, width: '100px',
            render: function(row) {
                return row.superadmin
                    ? '<span style="color:#F59E0B;font-weight:600">Si</span>'
                    : '<span style="color:#6B7280">No</span>';
            }
        },
        { 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_usuario : '';
        var html = '<form id="usuForm" onsubmit="return false">';
        html += '<input type="hidden" id="pageUsuariosFormId" value="' + (id || '') + '">';
        html += '<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">';
        html += '<div class="prov-field"><label>Usuario <span class="req">*</span></label><input type="text" id="usuFormUsuario" class="prov-input" maxlength="50" autocomplete="username" required oninput="this.value=this.value.toUpperCase()"></div>';
        html += '<div class="prov-field"><label>Nombre Completo <span class="req">*</span></label><input type="text" id="usuFormNombre" class="prov-input" maxlength="150" autocomplete="name" required oninput="this.value=this.value.toUpperCase()"></div>';
        html += '<div class="prov-field"><label>Email</label><input type="email" id="usuFormEmail" class="prov-input" maxlength="100" autocomplete="email"></div>';
        html += '<div class="prov-field"><label>Contrasena <span class="req">' + (id ? '' : '*') + '</span></label><input type="password" id="usuFormPassword" class="prov-input" maxlength="100" autocomplete="current-password" ' + (id ? '' : 'required') + '></div>';
        if (id) {
            html += '<div class="prov-field"><label>Confirmar Contrasena</label><input type="password" id="usuFormPassword2" class="prov-input" maxlength="100" autocomplete="new-password" placeholder="Solo si desea cambiar"></div>';
        }
        html += '<div class="prov-field"><label>Estado</label><select id="usuFormEstado" class="prov-input"><option value="1">Activo</option><option value="0">Inactivo</option></select></div>';
        html += '<div class="prov-field"><label style="display:flex;align-items:center;gap:8px;padding-top:20px"><input type="checkbox" id="usuFormSuperadmin" style="width:18px;height:18px"> Super Admin (acceso a todas las empresas y sucursales)</label></div>';
        html += '</div>';

        html += '<div style="margin-top:16px;border-top:1px solid #E2E8F0;padding-top:12px">';
        html += '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">';
        html += '<label style="font-weight:600;font-size:0.8rem;color:#1A4480">Asignacion por Sucursal</label>';
        html += '<button type="button" class="btn-prov btn-prov-primario" onclick="Usuarios.agregarAsignacion()" style="font-size:0.72rem;padding:5px 12px"><i class="fas fa-plus" style="margin-right:4px"></i>Agregar</button>';
        html += '</div>';
        html += '<div id="usuAsignacionesContainer" style="display:grid;gap:6px"></div>';
        html += '</div>';
        html += '</form>';
        return html;
    },
    onCargarFormulario: function(data) {
        var api = this.API_URL;
        var self = this;

        if (!data) {
            document.getElementById('usuFormUsuario').value = '';
            document.getElementById('usuFormNombre').value = '';
            document.getElementById('usuFormEmail').value = '';
            document.getElementById('usuFormPassword').value = '';
            document.getElementById('usuFormEstado').value = '1';
            document.getElementById('usuFormSuperadmin').checked = false;
            Usuarios._asignaciones = [];
            Usuarios._renderAsignaciones([]);
            return;
        }
        document.getElementById('pageUsuariosFormId').value = data.id_usuario;
        document.getElementById('usuFormUsuario').value = data.usuario || '';
        document.getElementById('usuFormNombre').value = data.nombre_completo || '';
        document.getElementById('usuFormEmail').value = data.email || '';
        document.getElementById('usuFormPassword').value = '';
        if (document.getElementById('usuFormPassword2')) document.getElementById('usuFormPassword2').value = '';
        document.getElementById('usuFormEstado').value = data.estado ? '1' : '0';
        document.getElementById('usuFormSuperadmin').checked = data.superadmin === true || data.superadmin === 1;

        Usuarios._asignaciones = data.asignaciones || [];
        Usuarios._renderAsignaciones(data.asignaciones || []);
    },
    abrirModal: function(id) {
        var self = this;
        var titulo = id ? 'Editar ' + this.idSingular : 'Nuevo ' + this.idSingular;
        var esNuevo = !id;

        var contenido = '<div class="prov-modal-form" id="' + this.elementId + 'Form">';
        contenido += '<input type="hidden" id="' + this.elementId + 'FormId" value="' + (id || '') + '">';
        contenido += this.renderFormulario(null);
        contenido += '</div>';

        Modal.abrir({
            titulo: titulo,
            ancho: '700px',
            contenido: contenido,
            botones: [
                { texto: 'Cancelar', tipo: 'secundario', accion: function() { Modal.cerrar(); } },
                { texto: 'Guardar', tipo: 'primario', accion: function() { self.onGuardar(); } }
            ]
        });

        if (esNuevo) {
            this.onCargarFormulario(null);
        } else {
            this.cargarDatos(id);
        }
    },
    onGuardar: function() {
        var id = document.getElementById('pageUsuariosFormId')?.value;
        var usuario = document.getElementById('usuFormUsuario').value.trim().toUpperCase();
        var nombre = document.getElementById('usuFormNombre').value.trim().toUpperCase();
        var email = document.getElementById('usuFormEmail').value.trim();
        var password = document.getElementById('usuFormPassword').value;
        var password2 = document.getElementById('usuFormPassword2')?.value;
        var est = document.getElementById('usuFormEstado').value === '1';

        if (!usuario) { Mensaje.error({ titulo: 'Validacion', texto: 'El usuario es requerido' }); return; }
        if (!nombre) { Mensaje.error({ titulo: 'Validacion', texto: 'El nombre completo es requerido' }); return; }
        if (!id && !password) { Mensaje.error({ titulo: 'Validacion', texto: 'La contrasena es requerida' }); return; }
        if (password && password2 !== undefined && password !== password2) { Mensaje.error({ titulo: 'Validacion', texto: 'Las contrasenas no coinciden' }); return; }

        var superadmin = document.getElementById('usuFormSuperadmin').checked;
        var asignaciones = Usuarios._asignaciones || [];

        var body = {
            id_empresa: this.sesion ? this.sesion.id_empresa : undefined,
            usuario: usuario,
            nombre_completo: nombre,
            email: email,
            password: password || undefined,
            estado: est,
            superadmin: superadmin,
            id_sucursal: this.sesion ? this.sesion.id_sucursal || null : null,
            asignaciones: asignaciones
        };

        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 usuario' });
        });
    }
});

Usuarios._asignaciones = [];

Usuarios._renderAsignaciones = function(asignaciones) {
    var container = document.getElementById('usuAsignacionesContainer');
    if (!container) return;

    if (!asignaciones || asignaciones.length === 0) {
        container.innerHTML = '<div style="text-align:center;color:#94A3B8;font-size:0.72rem;padding:8px">Sin asignaciones. Haga clic en "Agregar" para asignar sucursal y rol.</div>';
        return;
    }

    var html = '<table style="width:100%;border-collapse:collapse;font-size:0.72rem">';
    html += '<thead><tr style="background:#F1F5F9">';
    html += '<th style="padding:6px 8px;text-align:left;font-weight:600;color:#475569">Sucursal</th>';
    html += '<th style="padding:6px 8px;text-align:left;font-weight:600;color:#475569">Rol</th>';
    html += '<th style="padding:6px 8px;text-align:center;width:40px"></th>';
    html += '</tr></thead><tbody>';

    for (var i = 0; i < asignaciones.length; i++) {
        var a = asignaciones[i];
        html += '<tr style="border-bottom:1px solid #E2E8F0">';
        html += '<td style="padding:4px 8px"><select class="prov-input" style="font-size:0.72rem;padding:4px 6px" onchange="Usuarios._asignaciones[' + i + '].id_sucursal=this.value;Usuarios._reloadRoles(this,' + i + ')" id="usuAsigSuc_' + i + '">';
        html += '<option value="">Seleccionar...</option>';
        html += '</select></td>';
        html += '<td style="padding:4px 8px"><select class="prov-input" style="font-size:0.72rem;padding:4px 6px" onchange="Usuarios._asignaciones[' + i + '].id_rol=this.value" id="usuAsigRol_' + i + '">';
        html += '<option value="">Seleccionar...</option>';
        html += '</select></td>';
        html += '<td style="padding:4px 8px;text-align:center"><button type="button" onclick="Usuarios._removeAsignacion(' + i + ')" style="background:none;border:none;color:#EF4444;cursor:pointer;font-size:0.75rem" title="Eliminar"><i class="fas fa-trash-alt"></i></button></td>';
        html += '</tr>';
    }
    html += '</tbody></table>';
    container.innerHTML = html;

    for (var j = 0; j < asignaciones.length; j++) {
        Usuarios._fillAsignacionSelects(j, asignaciones[j]);
    }
};

Usuarios._fillAsignacionSelects = function(index, asignacion) {
    var api = this.API_URL;
    var sesion = this.sesion;

    var sucSelect = document.getElementById('usuAsigSuc_' + index);
    var rolSelect = document.getElementById('usuAsigRol_' + index);

    if (sucSelect && sesion) {
        fetch(api + '/sucursales?id_empresa=' + sesion.id_empresa + '&limit=0')
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (!res.ok) return;
                var html = '<option value="">Seleccionar...</option>';
                res.data.forEach(function(s) {
                    var sel = (asignacion && asignacion.id_sucursal == s.id_sucursal) ? ' selected' : '';
                    html += '<option value="' + s.id_sucursal + '"' + sel + '>' + s.nombre + '</option>';
                });
                sucSelect.innerHTML = html;
            });
    }

    if (rolSelect && sesion) {
        fetch(api + '/roles?id_empresa=' + sesion.id_empresa + '&limit=0')
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (!res.ok) return;
                var html = '<option value="">Seleccionar...</option>';
                res.data.forEach(function(r) {
                    var sel = (asignacion && asignacion.id_rol == r.id_rol) ? ' selected' : '';
                    html += '<option value="' + r.id_rol + '"' + sel + '>' + r.nombre_rol + '</option>';
                });
                rolSelect.innerHTML = html;
            });
    }
};

Usuarios._reloadRoles = function(sucSelect, index) {
    var idSucursal = sucSelect.value;
    Usuarios._asignaciones[index].id_sucursal = idSucursal;
    Usuarios._asignaciones[index].id_rol = '';
};

Usuarios.agregarAsignacion = function() {
    var asignaciones = Usuarios._asignaciones || [];
    if (asignaciones.length > 0) {
        var ultima = asignaciones[asignaciones.length - 1];
        if (!ultima.id_sucursal || !ultima.id_rol) {
            Mensaje.error({ titulo: 'Validacion', texto: 'Complete la asignacion anterior antes de agregar otra' });
            return;
        }
    }
    Usuarios._asignaciones.push({ id_sucursal: '', id_rol: '' });
    Usuarios._renderAsignaciones(Usuarios._asignaciones);
};

Usuarios._removeAsignacion = function(index) {
    Usuarios._asignaciones.splice(index, 1);
    Usuarios._renderAsignaciones(Usuarios._asignaciones);
};
