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

Cargos.init({
    title: 'Cargos',
    icon: 'fa-briefcase',
    idSingular: 'Cargo',
    idField: 'id_cargo',
    endpoint: '/cargos',
    sortDefault: 'nombre',
    limite: 50,
    searchPlaceholder: 'Buscar por código o nombre...',
    filtroEstado: true,
    showEstado: true,
    exportFileName: 'Cargos',
    elementId: 'pageCargos',
    menuPage: 'Cargos',
    columnFilters: {},
    columns: [
        { field: 'cod_cargo', label: 'Código', sortable: true, filterable: true, width: '100px' },
        { field: 'nombre', label: 'Nombre', sortable: true, filterable: true },
        { field: 'descripcion', label: 'Descripción', sortable: true, filterable: true },
        { field: 'cod_sunat', label: 'SUNAT', sortable: true, filterable: true, width: '90px',
            render: function(row) {
                return row.cod_sunat
                    ? '<span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;background:#e8f5e9;border-radius:3px;font-size:11px;font-weight:600;color:#2e7d32"><i class="fas fa-check-circle" style="font-size:10px"></i>' + row.cod_sunat + '</span>'
                    : '<span style="color:#ccc;font-size:11px">—</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 html = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">';
        html += '<div class="prov-field" style="grid-column:1/-1"><label>Código <span class="req">*</span></label><div style="display:flex;gap:8px;align-items:center">';
        html += '<input type="text" id="cargoFormCod" class="prov-input" maxlength="10" required style="width:120px;flex:none">';
        html += '<button type="button" id="btnBuscarSunatCargo" class="btn-prov btn-prov-secundario" onclick="Cargos.abrirBuscadorSunat()" style="white-space:nowrap;padding:0 10px;font-size:12px;height:34px;display:flex;align-items:center;gap:4px" title="Buscar en catálogo SUNAT"><i class="fas fa-search" style="font-size:11px"></i> BUSCAR SUNAT</button>';
        html += '<span id="cargoSunatInfo" style="display:none;align-items:center;gap:4px;padding:2px 8px;background:#e8f5e9;border-radius:3px;font-size:12px;font-weight:600;color:#2e7d32;height:28px"><i class="fas fa-check-circle" style="font-size:11px"></i> SUNAT: <span id="cargoSunatCod"></span></span>';
        html += '<input type="hidden" id="cargoFormCodSunat">';
        html += '</div></div>';
        html += '<div class="prov-field"><label>Nombre <span class="req">*</span></label><input type="text" id="cargoFormNombre" class="prov-input" maxlength="100" required></div>';
        html += '<div class="prov-field"><label>Estado</label><select id="cargoFormEstado" class="prov-input"><option value="1">Activo</option><option value="0">Inactivo</option></select></div>';
        html += '<div class="prov-field" style="grid-column:1/-1"><label>Descripción</label><textarea id="cargoFormDesc" class="prov-input" maxlength="200" rows="2" style="resize:vertical"></textarea></div>';
        html += '</div>';
        return html;
    },
    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: '620px',
            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);
        }
    },
    onCargarFormulario: function(data) {
        this._ultimosDatosCargo = data;
        if (!data) {
            document.getElementById('cargoFormCod').value = '';
            document.getElementById('cargoFormNombre').value = '';
            document.getElementById('cargoFormDesc').value = '';
            document.getElementById('cargoFormEstado').value = '1';
            document.getElementById('cargoFormCodSunat').value = '';
            var sunatInfo = document.getElementById('cargoSunatInfo');
            if (sunatInfo) sunatInfo.style.display = 'none';
        } else {
            document.getElementById('cargoFormCod').value = data.cod_cargo || '';
            document.getElementById('cargoFormNombre').value = data.nombre || '';
            document.getElementById('cargoFormDesc').value = data.descripcion || '';
            document.getElementById('cargoFormEstado').value = data.estado ? '1' : '0';
            document.getElementById('cargoFormCodSunat').value = data.cod_sunat || '';
            var sunatInfo = document.getElementById('cargoSunatInfo');
            var sunatCod = document.getElementById('cargoSunatCod');
            if (data.cod_sunat) {
                sunatCod.textContent = data.cod_sunat;
                sunatInfo.style.display = 'inline-flex';
            } else {
                sunatInfo.style.display = 'none';
            }
        }
    },
    onGuardar: function() {
        var id = document.getElementById('pageCargosFormId')?.value;
        var cod = document.getElementById('cargoFormCod').value.trim().toUpperCase();
        var nom = document.getElementById('cargoFormNombre').value.trim().toUpperCase();
        var desc = document.getElementById('cargoFormDesc').value.trim().toUpperCase();
        var est = document.getElementById('cargoFormEstado').value === '1';

        if (!cod) { Mensaje.error({ titulo: 'Validación', texto: 'El código es requerido' }); return; }
        if (!nom) { Mensaje.error({ titulo: 'Validación', texto: 'El nombre es requerido' }); return; }
        if (!this.sesion || !this.sesion.id_empresa) { Mensaje.error({ titulo: 'Error', texto: 'Sesión no disponible' }); return; }

        var codSunat = document.getElementById('cargoFormCodSunat').value.trim() || null;
        var body = { id_empresa: this.sesion.id_empresa, id_sucursal: this.sesion.id_sucursal || null, cod_cargo: cod, nombre: nom, descripcion: desc, estado: est, cod_sunat: codSunat };

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

// ============================================================
// Buscador SUNAT - adjuntado directamente a Cargos
// ============================================================
Cargos.adjuntarBuscadorSunat = function() {
    // Ya no es necesario — el onclick está en el HTML del botón.
    // La captura de estado se hace en abrirBuscadorSunat().
};

Cargos.restaurarModalCargo = function() {
    var cont = document.querySelector('.modal-container');
    if (!cont) return;
    var body = cont.querySelector('.modal-body');
    var tit = cont.querySelector('.modal-title');
    if (!body) return;
    var formWrap = body.querySelector('#cargosFormWrap');
    var buscWrap = body.querySelector('#sunatBuscadorWrap');
    if (formWrap && buscWrap) {
        formWrap.style.display = 'block';
        buscWrap.style.display = 'none';
    }
    if (tit && this._tituloCargoOriginal) {
        tit.textContent = this._tituloCargoOriginal;
    }
    this.onCargarFormulario(this.datosCargoActual || null);
};

Cargos.abrirBuscadorSunat = function() {
    var self = this;
    // Capturar estado actual del formulario
    self.datosCargoActual = self._ultimosDatosCargo || null;
    if (document.getElementById('cargoFormCod')) {
        self.datosCargoActual = {
            cod_cargo: document.getElementById('cargoFormCod').value || null,
            nombre: document.getElementById('cargoFormNombre').value || null,
            descripcion: document.getElementById('cargoFormDesc').value || null,
            estado: document.getElementById('cargoFormEstado').value === '1',
            cod_sunat: document.getElementById('cargoFormCodSunat').value || null
        };
    }
    var cont = document.querySelector('.modal-container');
    if (!cont) return;
    var body = cont.querySelector('.modal-body');
    var tit = cont.querySelector('.modal-title');
    if (!body) return;

    var formWrap = body.querySelector('#cargosFormWrap');
    var buscWrap = body.querySelector('#sunatBuscadorWrap');

    if (!formWrap) {
        // First time: wrap cargo form and create buscador
        var cargoHtml = body.innerHTML;
        body.innerHTML = ''
            + '<div id="cargosFormWrap">' + cargoHtml + '</div>'
            + '<div id="sunatBuscadorWrap" style="display:none"></div>';
        formWrap = body.querySelector('#cargosFormWrap');
        buscWrap = body.querySelector('#sunatBuscadorWrap');
    }

    this._tituloCargoOriginal = tit ? tit.textContent : '';
    if (tit) tit.textContent = 'Catálogo de Ocupaciones SUNAT';

    var estiloInput = 'padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:8px;font-family:\'Plus Jakarta Sans\',sans-serif;font-size:13px;color:#334155;outline:none;background:#fff;box-sizing:border-box';

    var h = '';
    h += '<div style="background:#f0f7ff;border:1px solid #d0e3f7;border-radius:6px;padding:12px;margin-bottom:14px;font-size:13px;color:#1a4480">';
    h += '<i class="fas fa-info-circle"></i> Seleccione una ocupación del catálogo nacional SUNAT.';
    h += '</div>';

    h += '<div style="display:flex;gap:8px;margin-bottom:12px">';
    h += '<input type="text" id="sunatBuscarInput" placeholder="Buscar por código o nombre..." style="flex:1;' + estiloInput + '">';
    h += '<select id="sunatSectorFiltro" style="width:130px;' + estiloInput + ';cursor:pointer;appearance:none;background-image:url(\'data:image/svg+xml,%3Csvg xmlns=\\\'http://www.w3.org/2000/svg\\\' width=\\\'12\\\' height=\\\'12\\\' viewBox=\\\'0 0 12 12\\\'%3E%3Cpath fill=\\\'%2394A3B8\\\' d=\\\'M6 8L1 3h10z\\\'/%3E%3C/svg%3E\');background-repeat:no-repeat;background-position:right 10px center;padding-right:30px">';
    h += '<option value="">Todos</option>';
    h += '<option value="PRIVADO">Privado</option>';
    h += '<option value="PUBLICO">Público</option>';
    h += '</select>';
    h += '<button type="button" id="sunatBuscarBtn" class="btn-prov btn-prov-primario" style="padding:0 16px;display:flex;align-items:center;gap:5px;white-space:nowrap"><i class="fas fa-search" style="font-size:12px"></i> Buscar</button>';
    h += '</div>';

    h += '<div id="sunatResultados" style="border:1px solid #e2e8f0;border-radius:6px;background:#fff;min-height:180px;max-height:360px;overflow-y:auto">';
    h += '<div style="display:flex;align-items:center;justify-content:center;height:180px;color:#94a3b8;font-size:14px"><i class="fas fa-search" style="margin-right:8px;font-size:18px"></i> Ingrese un código o nombre de ocupación</div>';
    h += '</div>';

    h += '<div style="margin-top:14px;display:flex;gap:10px;justify-content:flex-end">';
    h += '<button type="button" id="sunatVolverBtn" class="btn-prov btn-prov-secundario" style="display:flex;align-items:center;gap:5px;padding:0 14px"><i class="fas fa-arrow-left" style="font-size:11px"></i> Volver</button>';
    h += '<button type="button" id="sunatLimpiarBtn" class="btn-prov btn-prov-secundario" style="display:flex;align-items:center;gap:5px;padding:0 14px;color:#e74c3c;border-color:#e74c3c"><i class="fas fa-times" style="font-size:11px"></i> Sin SUNAT</button>';
    h += '</div>';

    buscWrap.innerHTML = h;
    formWrap.style.display = 'none';
    buscWrap.style.display = 'block';

    var input = document.getElementById('sunatBuscarInput');
    var sector = document.getElementById('sunatSectorFiltro');
    var btnBuscar = document.getElementById('sunatBuscarBtn');
    var btnVolver = document.getElementById('sunatVolverBtn');
    var btnLimpiar = document.getElementById('sunatLimpiarBtn');
    var resultados = document.getElementById('sunatResultados');

    function mostrarResultados(tablaHtml) {
        resultados.innerHTML = tablaHtml;
        resultados.querySelectorAll('[data-sel-codigo]').forEach(function(b) {
            b.addEventListener('click', function() {
                var codigo = this.getAttribute('data-sel-codigo');
                var nombre = this.getAttribute('data-sel-nombre');
                self.restaurarModalCargo();
                document.getElementById('cargoFormCod').value = codigo;
                document.getElementById('cargoFormNombre').value = nombre.toUpperCase();
                document.getElementById('cargoFormCodSunat').value = codigo;
                var sunatInfo = document.getElementById('cargoSunatInfo');
                var sunatCod = document.getElementById('cargoSunatCod');
                if (sunatInfo && sunatCod) {
                    sunatCod.textContent = codigo;
                    sunatInfo.style.display = 'inline-flex';
                }
            });
        });
    }

    function buscarSunat() {
        var q = input.value.trim();
        var sec = sector.value;
        if (!q && !sec) {
            mostrarResultados('<div style="display:flex;align-items:center;justify-content:center;height:180px;color:#94a3b8;font-size:14px"><i class="fas fa-search" style="margin-right:8px;font-size:18px"></i> Ingrese un código o nombre de ocupación</div>');
            return;
        }
        mostrarResultados('<div style="display:flex;align-items:center;justify-content:center;height:180px;color:#64748b;font-size:14px"><i class="fas fa-spinner fa-pulse" style="margin-right:8px;font-size:18px"></i> Buscando...</div>');

        var url = self.API_URL + '/sunat-cargos?limit=50&id_empresa=' + (self.sesion ? self.sesion.id_empresa : '') + '&buscar=' + encodeURIComponent(q);
        if (sec) url += '&sector=' + sec;

        fetch(url)
        .then(function(r) { return r.json(); })
        .then(function(res) {
            if (!res.ok || !res.data || res.data.length === 0) {
                mostrarResultados('<div style="display:flex;align-items:center;justify-content:center;height:180px;color:#94a3b8;font-size:14px;flex-direction:column;gap:6px"><i class="fas fa-exclamation-circle" style="font-size:24px;color:#f59e0b"></i> No se encontraron resultados</div>');
                return;
            }
            var totalPag = res.totalPaginas || 1;
            var pagInfo = ' <span style="font-weight:normal;color:#94a3b8;font-size:12px">(' + res.total + ' resultados' + (totalPag > 1 ? ', pág. ' + res.page + ' de ' + totalPag : '') + ')</span>';

            // Agrupar por código para evitar duplicados (mismo código en PRIVADO y PUBLICO)
            var grupos = {};
            for (var i = 0; i < res.data.length; i++) {
                var r = res.data[i];
                if (!grupos[r.codigo]) grupos[r.codigo] = { codigo: r.codigo, nombre: r.nombre, sectores: {} };
                grupos[r.codigo].sectores[r.sector] = true;
                if (r.nombre.length > grupos[r.codigo].nombre.length) grupos[r.codigo].nombre = r.nombre;
            }
            var lista = [];
            for (var k in grupos) lista.push(grupos[k]);

            var tabla = '<table style="width:100%;border-collapse:collapse;font-size:13px">';
            tabla += '<thead><tr style="background:#f8fafc">';
            tabla += '<th style="width:85px;padding:8px 10px;font-size:12px;font-weight:600;color:#475569;border-bottom:2px solid #e2e8f0;text-align:left">Código</th>';
            tabla += '<th style="padding:8px 10px;font-size:12px;font-weight:600;color:#475569;border-bottom:2px solid #e2e8f0;text-align:left">Nombre' + pagInfo + '</th>';
            tabla += '<th style="width:90px;padding:8px 10px;font-size:12px;font-weight:600;color:#475569;border-bottom:2px solid #e2e8f0;text-align:center">Sector</th>';
            tabla += '<th style="width:55px;padding:8px 10px;border-bottom:2px solid #e2e8f0"></th>';
            tabla += '</tr></thead><tbody>';
            for (var i = 0; i < lista.length; i++) {
                var g = lista[i];
                var tienePriv = g.sectores['PRIVADO'];
                var tienePubl = g.sectores['PUBLICO'];
                var badges = '';
                if (tienePriv && tienePubl) {
                    badges = '<span style="display:inline-block;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600;background:#e0f2fe;color:#0369a1;margin-right:2px">PRIV</span><span style="display:inline-block;padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600;background:#fce7f3;color:#be185d">PUBL</span>';
                } else if (tienePriv) {
                    badges = '<span style="display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-weight:600;background:#e0f2fe;color:#0369a1">PRIV</span>';
                } else {
                    badges = '<span style="display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;font-weight:600;background:#fce7f3;color:#be185d">PUBL</span>';
                }
                var bg = i % 2 === 0 ? '#fff' : '#f8fafc';
                tabla += '<tr style="background:' + bg + '">';
                tabla += '<td style="padding:7px 10px;font-weight:600;color:#1e40af;border-bottom:1px solid #f1f5f9">' + g.codigo + '</td>';
                tabla += '<td style="padding:7px 10px;border-bottom:1px solid #f1f5f9;color:#334155">' + g.nombre + '</td>';
                tabla += '<td style="padding:7px 10px;text-align:center;border-bottom:1px solid #f1f5f9">' + badges + '</td>';
                tabla += '<td style="padding:5px 10px;border-bottom:1px solid #f1f5f9;text-align:center"><button class="btn-prov btn-prov-primario" data-sel-codigo="' + g.codigo + '" data-sel-nombre="' + g.nombre.replace(/"/g, '&quot;') + '" style="padding:3px 10px;font-size:12px;min-width:55px;cursor:pointer"><i class="fas fa-check" style="font-size:10px"></i></button></td>';
                tabla += '</tr>';
            }
            mostrarResultados(tabla);
        })
        .catch(function() {
            mostrarResultados('<div style="display:flex;align-items:center;justify-content:center;height:180px;color:#e74c3c;font-size:14px;flex-direction:column;gap:6px"><i class="fas fa-exclamation-triangle" style="font-size:24px"></i> Error al consultar el catálogo SUNAT</div>');
        });
    }

    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') buscarSunat();
    });
    btnBuscar.addEventListener('click', buscarSunat);
    sector.addEventListener('change', buscarSunat);
    btnVolver.addEventListener('click', function() { self.restaurarModalCargo(); });
    btnLimpiar.addEventListener('click', function() {
        self.restaurarModalCargo();
        document.getElementById('cargoFormCodSunat').value = '';
        var sunatInfo = document.getElementById('cargoSunatInfo');
        if (sunatInfo) sunatInfo.style.display = 'none';
    });
    setTimeout(function() { input.focus(); }, 100);
};
