// Variables globales
let ticketsGlobales = [];
let ticketEnEdicion = null;

document.addEventListener('DOMContentLoaded', () => {
    // 1. SEGURIDAD Y SESIÓN
    const rol = localStorage.getItem('rol');
    const nombres = localStorage.getItem('nombres') || 'Administrador';

    // Expulsar si no es admin
    if (!rol || rol !== 'administrador') {
        window.location.href = 'login.html';
        return;
    }

    // Pintar nombre en la barra superior
    document.getElementById('nombreAdmin').textContent = `Admin: ${nombres}`;

    // Botón de cerrar sesión
    document.getElementById('btnCerrarSesion').addEventListener('click', () => {
        localStorage.clear();
        window.location.href = 'login.html';
    });

    // Botón para exportar a Excel
    const btnExportar = document.getElementById('btnExportar');
    if (btnExportar) {
        btnExportar.addEventListener('click', exportarAExcel);
    }

    // 2. INICIAR CARGA DE DATOS Y EVENTOS
    cargarTodosLosTickets();
    configurarFiltros();
});

// ==========================================
// 1. CARGA Y RENDERIZADO DE LA TABLA
// ==========================================
async function cargarTodosLosTickets() {
    try {
        const response = await fetch('/api/admin/tickets');
        ticketsGlobales = await response.json();
        renderizarTabla(ticketsGlobales);
    } catch (error) {
        console.error("Error al cargar los tickets:", error);
        document.getElementById('tablaTodosBody').innerHTML = `<tr><td colspan="7" style="text-align: center; color: red;">Error al conectar con la base de datos.</td></tr>`;
    }
}

function renderizarTabla(tickets) {
    const tbody = document.getElementById('tablaTodosBody');

    if (!tickets || tickets.length === 0) {
        tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; padding: 40px; color: #64748b;">No se encontraron tickets con los filtros actuales.</td></tr>`;
        return;
    }

    tbody.innerHTML = tickets.map(t => {
        // Formateo de fecha
        const fechaF = new Date(t.fecha_creacion).toLocaleString('es-PE', { 
            day: '2-digit', month: '2-digit', year: 'numeric',
            hour: '2-digit', minute: '2-digit', hour12: true
        });
        
        // Badges de estado dinámicos
        let badgeEstado = 'bg-abierto';
        if(t.estado === 'En Proceso') badgeEstado = 'bg-proceso';
        if(t.estado === 'Resuelto') badgeEstado = 'bg-resuelto';

        return `
            <tr>
                <td><strong>#TK-${t.id.toString().padStart(3, '0')}</strong></td>
                <td>
                    <div style="font-weight: bold; color: #1e293b;">${t.creador_nombre}</div>
                    <div style="font-size: 11px; color: #64748b;">${t.creador_area}</div>
                </td>
                <td><span style="font-size: 13px; color: #475569;"><i class="bi bi-tag"></i> ${t.categoria || 'Otro'}</span></td>
                <td>${t.titulo}</td>
                <td><span class="badge-status ${badgeEstado}">${t.estado}</span></td>
                <td>${fechaF}</td>
                <td style="text-align: center;">
                    <button class="btn-gestionar" style="padding: 6px 12px; background: #0f172a; color: white; border: none; border-radius: 6px; cursor: pointer; transition: 0.2s;" onmouseover="this.style.background='#334155'" onmouseout="this.style.background='#0f172a'" onclick="abrirGestion(${t.id})">
                        <i class="bi bi-eye"></i> Ver
                    </button>
                </td>
            </tr>
        `;
    }).join('');
}

// ==========================================
// 2. MOTOR MULTI-FILTROS
// ==========================================
function configurarFiltros() {
    // Arreglo con los IDs de todos nuestros inputs de filtro
    const idsFiltros = ['filtroTexto', 'filtroCategoria', 'filtroEstado', 'fechaInicio', 'fechaFin'];

    // Agregar el evento 'input' o 'change' a cada uno
    idsFiltros.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.addEventListener('input', aplicarFiltros);
    });

    // Botón para limpiar todos los filtros
    document.getElementById('btnLimpiarFiltros').addEventListener('click', () => {
        document.getElementById('filtroTexto').value = '';
        document.getElementById('filtroCategoria').value = 'todas';
        document.getElementById('filtroEstado').value = 'todos';
        document.getElementById('fechaInicio').value = '';
        document.getElementById('fechaFin').value = '';
        
        // Volvemos a pintar la tabla completa
        aplicarFiltros();
    });
}

function aplicarFiltros() {
    // 1. Obtener los valores actuales de todos los campos
    const txt = document.getElementById('filtroTexto').value.toLowerCase();
    const categoria = document.getElementById('filtroCategoria').value;
    const estado = document.getElementById('filtroEstado').value;
    const fechaIni = document.getElementById('fechaInicio').value;
    const fechaFin = document.getElementById('fechaFin').value;

    // 2. Filtrar el arreglo global
    const filtrados = ticketsGlobales.filter(t => {
        const tituloReal = t.titulo ? t.titulo.toLowerCase() : '';
        const nombreReal = t.creador_nombre ? t.creador_nombre.toLowerCase() : '';
        const idStr = t.id.toString();

        // Filtro de Texto (Busca en Título, Nombre o ID)
        const coincideTxt = tituloReal.includes(txt) || nombreReal.includes(txt) || idStr.includes(txt);
        
        // Filtros Selects
        const coincideCat = categoria === 'todas' || t.categoria === categoria;
        const coincideEst = estado === 'todos' || t.estado === estado;

        // Filtro de Fechas
        let coincideFecha = true;
        if (fechaIni || fechaFin) {
            // Extraemos solo la fecha de creación ignorando la hora para hacer una comparación justa
            const dateT = new Date(t.fecha_creacion);
            dateT.setHours(0, 0, 0, 0);

            if (fechaIni) {
                // Truco: Añadimos T00:00:00 para forzar la zona horaria local
                const dIni = new Date(fechaIni + 'T00:00:00'); 
                if (dateT < dIni) coincideFecha = false;
            }
            if (fechaFin) {
                const dFin = new Date(fechaFin + 'T00:00:00');
                if (dateT > dFin) coincideFecha = false;
            }
        }

        // El ticket debe pasar TODAS las pruebas para mostrarse
        return coincideTxt && coincideCat && coincideEst && coincideFecha;
    });

    // 3. Pintar la tabla con los resultados
    renderizarTabla(filtrados);
}

// ==========================================
// 3. LÓGICA DEL MODAL PRO (Igual al Dashboard)
// ==========================================
function abrirGestion(id) {
    ticketEnEdicion = id;
    const t = ticketsGlobales.find(x => x.id === id);
    
    document.getElementById('modalId').textContent = `#TK-${id.toString().padStart(3, '0')}`;
    document.getElementById('modalIdLabel').textContent = `#TK-${id.toString().padStart(3, '0')}`;
    document.getElementById('modalUsuario').textContent = t.creador_nombre;
    document.getElementById('modalArea').textContent = t.creador_area;
    
    const optionsDate = { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true };
    document.getElementById('modalFecha').textContent = new Date(t.fecha_creacion).toLocaleString('es-PE', optionsDate);
    document.getElementById('timeCreado').textContent = new Date(t.fecha_creacion).toLocaleString('es-PE', optionsDate);
    document.getElementById('timeActualizado').textContent = new Date(t.fecha_actualizacion).toLocaleString('es-PE', optionsDate);

    const bEstado = document.getElementById('badgeEstadoActual');
    bEstado.textContent = (t.estado || 'Abierto').toUpperCase();
    bEstado.className = 'badge-status ' + (t.estado === 'En Proceso' ? 'bg-proceso' : t.estado === 'Resuelto' ? 'bg-resuelto' : 'bg-abierto');

    const bPrio = document.getElementById('badgePrioridadActual');
    const prioVal = t.prioridad || 'Baja';
    bPrio.textContent = prioVal.toUpperCase();
    bPrio.className = 'badge-status ' + (prioVal === 'Alta' || prioVal === 'Crítica' ? 'priority-alta' : prioVal === 'Media' ? 'priority-media' : 'priority-baja');

    document.getElementById('modalDesc').textContent = t.descripcion;

    const imgElement = document.getElementById('modalEvidencia');
    const actionsBox = document.getElementById('evidenceActions');
    const noImgText = document.getElementById('textoSinEvidencia');

    if (t.evidencia && t.evidencia.trim() !== "") {
        let rutaImg = t.evidencia.replace(/\\/g, '/');
        if (!rutaImg.includes('uploads')) rutaImg = `/uploads/evidencias/${rutaImg}`;
        if (!rutaImg.startsWith('/')) rutaImg = '/' + rutaImg;
        rutaImg = rutaImg.replace(/\/\//g, '/');

        imgElement.src = rutaImg;
        document.getElementById('linkVerImg').href = rutaImg;
        document.getElementById('linkDescargarImg').href = rutaImg;
        
        imgElement.style.display = 'block';
        actionsBox.style.display = 'flex';
        noImgText.style.display = 'none';
    } else {
        imgElement.src = '../assets/sin-evidencia.png'; 
        imgElement.style.display = 'block';
        actionsBox.style.display = 'none';
        noImgText.style.display = 'block';
    }

    document.getElementById('editEstado').value = t.estado;
    document.getElementById('editPrioridad').value = t.prioridad || 'Baja';
    document.getElementById('editObservaciones').value = t.observaciones || '';
    contarCaracteres(document.getElementById('editObservaciones'));

    document.getElementById('modalGestion').style.display = 'block';
}

function cerrarModal() { document.getElementById('modalGestion').style.display = 'none'; }

function contarCaracteres(obj) {
    const max = 1000;
    const len = obj.value.length;
    document.getElementById('charCount').textContent = len;
    if (len > max) { obj.value = obj.value.substring(0, max); document.getElementById('charCount').textContent = max; }
}

async function guardarCambios() {
    const estado = document.getElementById('editEstado').value;
    const prioridad = document.getElementById('editPrioridad').value;
    const observaciones = document.getElementById('editObservaciones').value;
    const admin_id = localStorage.getItem('usuario_id');

    if (!ticketEnEdicion) return;

    try {
        const btn = document.querySelector('.btn-guardar-pro');
        btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Guardando...';
        btn.disabled = true;

        const response = await fetch(`/api/admin/actualizar/${ticketEnEdicion}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ estado, prioridad, observaciones, admin_id })
        });

        if (response.ok) {
            cerrarModal();
            // En lugar de recargar toda la página, solo recargamos los datos:
            await cargarTodosLosTickets(); 
            // Reaplicamos los filtros para no perder la búsqueda que el usuario estaba haciendo
            aplicarFiltros(); 
            btn.innerHTML = '<i class="bi bi-save"></i> Guardar Cambios';
            btn.disabled = false;
        } else {
            alert("Error al actualizar");
            btn.innerHTML = '<i class="bi bi-save"></i> Guardar Cambios';
            btn.disabled = false;
        }
    } catch (err) {
        console.error(err); alert("Error de conexión");
    }
}

// ==========================================
// 4. FUNCIONALIDAD DE EXPORTAR A EXCEL (CSV)
// ==========================================
function exportarAExcel() {
    // 1. Obtener las filas visibles de la tabla actual
    const filas = document.querySelectorAll('#tablaTodosBody tr');
    
    // Si la tabla está vacía o muestra el mensaje de "No se encontraron tickets", cancelamos
    if (filas.length === 0 || filas[0].textContent.includes('No se encontraron')) {
        alert("No hay datos en la tabla para exportar.");
        return;
    }

    // 2. Definir las cabeceras del archivo Excel
    let csvContent = "ID;Usuario;Área;Categoría;Asunto;Estado;Fecha\n";

    // 3. Recorrer cada fila visible y extraer el texto limpio de sus columnas
    filas.forEach(fila => {
        const columnas = fila.querySelectorAll('td');
        
        if (columnas.length >= 6) {
            const id = columnas[0].textContent.trim();
            
            // En la columna Usuario tenemos el nombre y el área en divs separados, los extraemos limpiamente:
            const nombreUsuario = columnas[1].querySelector('div:nth-child(1)').textContent.trim();
            const areaUsuario = columnas[1].querySelector('div:nth-child(2)').textContent.trim();
            
            const categoria = columnas[2].textContent.trim();
            const asunto = columnas[3].textContent.trim().replace(/;/g, ','); // Evitamos que un ';' en el asunto rompa las columnas
            const estado = columnas[4].textContent.trim();
            const fecha = columnas[5].textContent.trim();

            // Unimos los datos con punto y coma
            csvContent += `${id};${nombreUsuario};${areaUsuario};${categoria};${asunto};${estado};${fecha}\n`;
        }
    });

    // 4. Crear el archivo para la descarga forzando UTF-8 (BOM) para evitar problemas de tildes
    const BOM = "\uFEFF"; // Esto le dice a Excel: "Soy un archivo UTF-8, lee bien los acentos"
    const blob = new Blob([BOM + csvContent], { type: 'text/csv;charset=utf-8;' });
    
    // 5. Generar un nombre de archivo dinámico con la fecha de descarga
    const fechaHoy = new Date().toISOString().slice(0,10);
    const nombreArchivo = `Reporte_Tickets_${fechaHoy}.csv`;

    // 6. Disparar la descarga automática en el navegador
    if (navigator.msSaveBlob) { // Compatibilidad para navegadores antiguos de Microsoft
        navigator.msSaveBlob(blob, nombreArchivo);
    } else {
        const link = document.createElement("a");
        if (link.download !== undefined) {
            const url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", nombreArchivo);
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    }
}