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

Empleados.init({
    title: 'Empleados',
    icon: 'fa-users',
    idSingular: 'Empleado',
    idField: 'id_empleado',
    endpoint: '/empleados',
    sortDefault: 'nombre',
    limite: 50,
    searchPlaceholder: 'Buscar por código, nombre o email...',
    filtroEstado: true,
    showEstado: true,
    exportFileName: 'Empleados',
    elementId: 'pageEmpleados',
    menuPage: 'Empleados',
    columnFilters: {},
    columns: [
        { field: 'cod_empleado', label: 'Código', sortable: true, filterable: true, width: '110px' },
        { field: 'nombre', label: 'Nombre', sortable: true, filterable: true },
        { field: 'tipo_documento_nombre', label: 'Tipo Doc.', sortable: false, filterable: true, width: '120px' },
        { field: 'num_documento', label: 'N° Documento', sortable: true, filterable: false, width: '140px' },
        { field: 'email', label: 'Email', sortable: true, filterable: false },
        { field: 'cargo', label: 'Cargo', sortable: true, filterable: true },
        { field: 'area', label: 'Área', sortable: true, filterable: true },
        { field: 'estado_civil', label: 'Estado Civil', sortable: true, filterable: true, width: '120px' },
        { 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:16px">';
        html += '<div class="prov-field"><label>Código <span class="req">*</span></label><input type="text" id="empFormCod" class="prov-input" maxlength="7" required></div>';
        html += '<div class="prov-field"><label>Nombre <span class="req">*</span></label><input type="text" id="empFormNombre" class="prov-input" maxlength="150" required></div>';
        html += '<div class="prov-field"><label>Tipo Documento</label><select id="empFormTipoDoc" class="prov-input"></select></div>';
        html += '<div class="prov-field"><label>N° Documento</label><input type="text" id="empFormNumDoc" class="prov-input" maxlength="20"></div>';
        html += '<div class="prov-field"><label>Email</label><input type="email" id="empFormEmail" class="prov-input" maxlength="100"></div>';
        html += '<div class="prov-field"><label>Teléfono</label><input type="text" id="empFormTelefono" class="prov-input" maxlength="20"></div>';
        html += '<div class="prov-field"><label>Cargo</label><input type="text" id="empFormCargo" class="prov-input" placeholder="Escriba para buscar..." autocomplete="off"><input type="hidden" id="empFormIdCargo"></div>';
        html += '<div class="prov-field"><label>Área</label><input type="text" id="empFormArea" class="prov-input" placeholder="Escriba para buscar..." autocomplete="off"><input type="hidden" id="empFormIdArea"></div>';
        html += '<div class="prov-field"><label>Dirección</label><input type="text" id="empFormDireccion" class="prov-input" maxlength="200"></div>';
        html += '<div class="prov-field"><label>Fecha Nacimiento</label><input type="date" id="empFormFechaNac" class="prov-input"></div>';
        html += '<div class="prov-field"><label>Estado Civil</label><select id="empFormEstadoCivil" class="prov-input"><option value="">-- Seleccione --</option><option value="SOLTERO">Soltero</option><option value="CASADO">Casado</option><option value="DIVORCIADO">Divorciado</option><option value="VIUDO">Viudo</option><option value="CONVIVIENTE">Conviviente</option></select></div>';
        html += '<div class="prov-field"><label>Fecha Ingreso</label><input type="date" id="empFormFechaIngreso" class="prov-input"></div>';
        html += '<div class="prov-field"><label>Estado</label><select id="empFormEstado" class="prov-input"><option value="1">Activo</option><option value="0">Inactivo</option></select></div>';
        html += '</div>';
        return html;
    },
    onCargarFormulario: function(data) {
        var self = this;
        var selTD = document.getElementById('empFormTipoDoc');
        fetch(this.API_URL + '/tipo-documento?limit=0&id_empresa=' + (this.sesion ? this.sesion.id_empresa : '') + '&estado=1' + (this.sesion && this.sesion.id_sucursal ? '&id_sucursal=' + this.sesion.id_sucursal : ''))
            .then(function(r) { return r.json(); })
            .then(function(res) {
                if (!res.ok) return;
                var html = '<option value="">-- Seleccione --</option>';
                res.data.forEach(function(td) {
                    if (!td.activo) return;
                    var s = (data && td.codigo === data.tipo_documento) ? ' selected' : '';
                    html += '<option value="' + td.codigo + '"' + s + '>' + td.descripcion + '</option>';
                });
                selTD.innerHTML = html;
            });

        // Autocomplete para Cargo
        (function(inputId, hiddenId, apiUrl, empId) {
            var input = document.getElementById(inputId);
            if (!input || input.dataset._autoCargoOk) return;
            input.dataset._autoCargoOk = '1';
            var dd = document.createElement('div');
            dd.style.cssText = 'position:fixed;z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:220px;overflow-y:auto;display:none';
            document.body.appendChild(dd);
            var timer;
            function ocultar() { dd.style.display = 'none'; dd.innerHTML = ''; }
            function posicionar() {
                var r = input.getBoundingClientRect();
                dd.style.top = r.bottom + 'px';
                dd.style.left = r.left + 'px';
                dd.style.width = r.width + 'px';
            }
            input.addEventListener('input', function() {
                clearTimeout(timer);
                var v = this.value.trim();
                if (v.length < 1) { ocultar(); return; }
                timer = setTimeout(function() {
                    var url = apiUrl + '/cargos?q=' + encodeURIComponent(v) + '&limit=20&estado=1&id_empresa=' + empId;
                    fetch(url).then(function(r) { return r.json(); }).then(function(res) {
                        posicionar();
                        if (!res.ok || !res.data || res.data.length === 0) {
                            dd.innerHTML = '<div style="padding:10px;color:#94a3b8;font-size:13px;text-align:center">Sin resultados</div>';
                            dd.style.display = 'block'; return;
                        }
                        var html = '';
                        res.data.forEach(function(item) {
                            html += '<div class="prov-ubigeo-dd-item prov-autocomplete-item" style="cursor:pointer" data-id="' + item.id_cargo + '" data-nombre="' + (item.nombre || '').replace(/"/g, '&quot;') + '">' + (item.nombre || '') + '</div>';
                        });
                        dd.innerHTML = html;
                        dd.style.display = 'block';
                        dd.querySelectorAll('.prov-autocomplete-item').forEach(function(el) {
                            el.addEventListener('click', function() {
                                input.value = this.dataset.nombre;
                                document.getElementById(hiddenId).value = this.dataset.id;
                                ocultar();
                            });
                        });
                    }).catch(function() { ocultar(); });
                }, 250);
            });
            input.addEventListener('blur', function() { setTimeout(ocultar, 200); });
            input.addEventListener('focus', function() { if (dd.children.length > 0 && this.value) { posicionar(); dd.style.display = 'block'; } });
            input.addEventListener('keydown', function(e) {
                var items = dd.querySelectorAll('.prov-autocomplete-item');
                if (items.length === 0) return;
                var active = dd.querySelector('.hover');
                var idx = active ? Array.prototype.indexOf.call(items, active) : -1;
                if (e.key === 'ArrowDown') { e.preventDefault(); if (active) active.classList.remove('hover'); items[(idx + 1) % items.length].classList.add('hover'); }
                else if (e.key === 'ArrowUp') { e.preventDefault(); if (active) active.classList.remove('hover'); items[(idx - 1 + items.length) % items.length].classList.add('hover'); }
                else if (e.key === 'Enter' && active) { e.preventDefault(); active.click(); }
                else if (e.key === 'Escape') { ocultar(); }
            });
        })('empFormCargo', 'empFormIdCargo', self.API_URL, self.sesion ? self.sesion.id_empresa : '');
        if (data && data.cargo) {
            document.getElementById('empFormCargo').value = data.cargo;
            document.getElementById('empFormIdCargo').value = data.id_cargo || '';
        }

        // Autocomplete para Área
        (function(inputId, hiddenId, apiUrl, empId) {
            var input = document.getElementById(inputId);
            if (!input || input.dataset._autoAreaOk) return;
            input.dataset._autoAreaOk = '1';
            var dd = document.createElement('div');
            dd.style.cssText = 'position:fixed;z-index:9999;background:#fff;border:1px solid #e2e8f0;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,0.1);max-height:220px;overflow-y:auto;display:none';
            document.body.appendChild(dd);
            var timer;
            function ocultar() { dd.style.display = 'none'; dd.innerHTML = ''; }
            function posicionar() {
                var r = input.getBoundingClientRect();
                dd.style.top = r.bottom + 'px';
                dd.style.left = r.left + 'px';
                dd.style.width = r.width + 'px';
            }
            input.addEventListener('input', function() {
                clearTimeout(timer);
                var v = this.value.trim();
                if (v.length < 1) { ocultar(); return; }
                timer = setTimeout(function() {
                    var url = apiUrl + '/areas?q=' + encodeURIComponent(v) + '&limit=20&estado=1&id_empresa=' + empId;
                    fetch(url).then(function(r) { return r.json(); }).then(function(res) {
                        posicionar();
                        if (!res.ok || !res.data || res.data.length === 0) {
                            dd.innerHTML = '<div style="padding:10px;color:#94a3b8;font-size:13px;text-align:center">Sin resultados</div>';
                            dd.style.display = 'block'; return;
                        }
                        var html = '';
                        res.data.forEach(function(item) {
                            html += '<div class="prov-ubigeo-dd-item prov-autocomplete-item" style="cursor:pointer" data-id="' + item.id_area + '" data-nombre="' + (item.nombre || '').replace(/"/g, '&quot;') + '">' + (item.nombre || '') + '</div>';
                        });
                        dd.innerHTML = html;
                        dd.style.display = 'block';
                        dd.querySelectorAll('.prov-autocomplete-item').forEach(function(el) {
                            el.addEventListener('click', function() {
                                input.value = this.dataset.nombre;
                                document.getElementById(hiddenId).value = this.dataset.id;
                                ocultar();
                            });
                        });
                    }).catch(function() { ocultar(); });
                }, 250);
            });
            input.addEventListener('blur', function() { setTimeout(ocultar, 200); });
            input.addEventListener('focus', function() { if (dd.children.length > 0 && this.value) { posicionar(); dd.style.display = 'block'; } });
            input.addEventListener('keydown', function(e) {
                var items = dd.querySelectorAll('.prov-autocomplete-item');
                if (items.length === 0) return;
                var active = dd.querySelector('.hover');
                var idx = active ? Array.prototype.indexOf.call(items, active) : -1;
                if (e.key === 'ArrowDown') { e.preventDefault(); if (active) active.classList.remove('hover'); items[(idx + 1) % items.length].classList.add('hover'); }
                else if (e.key === 'ArrowUp') { e.preventDefault(); if (active) active.classList.remove('hover'); items[(idx - 1 + items.length) % items.length].classList.add('hover'); }
                else if (e.key === 'Enter' && active) { e.preventDefault(); active.click(); }
                else if (e.key === 'Escape') { ocultar(); }
            });
        })('empFormArea', 'empFormIdArea', self.API_URL, self.sesion ? self.sesion.id_empresa : '');
        if (data && data.area_nombre) {
            document.getElementById('empFormArea').value = data.area_nombre;
            document.getElementById('empFormIdArea').value = data.id_area || '';
        }

        if (!data) {
            document.getElementById('empFormCod').value = '';
            document.getElementById('empFormNombre').value = '';
            document.getElementById('empFormNumDoc').value = '';
            document.getElementById('empFormEmail').value = '';
            document.getElementById('empFormTelefono').value = '';
            document.getElementById('empFormCargo').value = '';
            document.getElementById('empFormIdCargo').value = '';
            document.getElementById('empFormArea').value = '';
            document.getElementById('empFormIdArea').value = '';
            document.getElementById('empFormDireccion').value = '';
            document.getElementById('empFormFechaNac').value = '';
            document.getElementById('empFormEstadoCivil').value = '';
            document.getElementById('empFormFechaIngreso').value = '';
            document.getElementById('empFormEstado').value = '1';
            return;
        }
        document.getElementById('empFormCod').value = data.cod_empleado || '';
        document.getElementById('empFormNombre').value = data.nombre || '';
        document.getElementById('empFormTipoDoc').value = data.tipo_documento || '';
        document.getElementById('empFormNumDoc').value = data.num_documento || '';
        document.getElementById('empFormEmail').value = data.email || '';
        document.getElementById('empFormTelefono').value = data.telefono || '';
        if (data.cargo) document.getElementById('empFormCargo').value = data.cargo;
        document.getElementById('empFormIdCargo').value = data.id_cargo || '';
        if (data.area_nombre) document.getElementById('empFormArea').value = data.area_nombre;
        document.getElementById('empFormIdArea').value = data.id_area || '';
        document.getElementById('empFormDireccion').value = data.direccion || '';
        document.getElementById('empFormFechaNac').value = data.fecha_nacimiento ? data.fecha_nacimiento.substring(0, 10) : '';
        document.getElementById('empFormEstadoCivil').value = data.estado_civil || '';
        document.getElementById('empFormFechaIngreso').value = data.fecha_ingreso ? data.fecha_ingreso.substring(0, 10) : '';
        document.getElementById('empFormEstado').value = data.estado ? '1' : '0';
    },
    abrirModal: function(id) {
        var self = this;
        var titulo = id ? 'Editar Empleado' : 'Nuevo Empleado';

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

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

        if (id) {
            this.cargarDatos(id);
        } else {
            this.onCargarFormulario(null);
        }
    },
    onGuardar: function() {
        var id = document.getElementById('pageEmpleadosFormId')?.value;
        var cod = document.getElementById('empFormCod').value.trim().toUpperCase();
        var nom = document.getElementById('empFormNombre').value.trim().toUpperCase();
        var tipoDoc = document.getElementById('empFormTipoDoc').value;
        var numDoc = document.getElementById('empFormNumDoc').value.trim().toUpperCase();
        var email = document.getElementById('empFormEmail').value.trim();
        var tel = document.getElementById('empFormTelefono').value.trim();
        var cargo = document.getElementById('empFormCargo').value.trim().toUpperCase();
        var idCargo = document.getElementById('empFormIdCargo').value;
        var idArea = document.getElementById('empFormIdArea').value;
        var area = document.getElementById('empFormArea').value.trim().toUpperCase();
        var direccion = document.getElementById('empFormDireccion').value.trim().toUpperCase();
        var fechaNac = document.getElementById('empFormFechaNac').value;
        var estadoCivil = document.getElementById('empFormEstadoCivil').value;
        var fechaIngreso = document.getElementById('empFormFechaIngreso').value;
        var est = document.getElementById('empFormEstado').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 body = { id_empresa: this.sesion.id_empresa, id_sucursal: this.sesion.id_sucursal || null, cod_empleado: cod, nombre: nom, tipo_documento: tipoDoc, num_documento: numDoc, email: email, telefono: tel, cargo: cargo, id_cargo: idCargo || null, id_area: idArea || null, area: area, direccion: direccion, fecha_nacimiento: fechaNac || null, estado_civil: estadoCivil, fecha_ingreso: fechaIngreso || null, estado: est };

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