// Variable global para almacenar el historial completo sin saturar la BD
let ticketsGlobal = []; 

document.addEventListener('DOMContentLoaded', () => {
    // 1. LEER LA SESIÓN REAL DEL USUARIO (Con tus llaves exactas)
    const nombres = localStorage.getItem('nombres') || 'Usuario';
    const area = localStorage.getItem('area') || 'Sin Área';
    
    // Validamos si tu login guarda el identificador como 'usuario_id' o simplemente como 'id'
    const usuario_id = localStorage.getItem('usuario_id') || localStorage.getItem('id');

    // Si no hay ID en la sesión, lo mandamos al login
    if (!usuario_id) {
        console.warn("No se encontró sesión activa. Redirigiendo al login...");
        window.location.href = 'login.html'; 
        return;
    }

    // Pintamos el nombre real en la barra superior
    const txtNombre = document.getElementById('nombreUsuario');
    if (txtNombre) {
        txtNombre.textContent = `${nombres} (${area})`;
    }

    // Activamos tu botón original de Cerrar Sesión
    const btnLogout = document.getElementById('btnCerrarSesion');
    if (btnLogout) {
        btnLogout.addEventListener('click', () => {
            localStorage.clear();
            window.location.href = 'login.html';
        });
    }

    // 2. CARGAR EL HISTORIAL CON EL ID REAL DE LA BASE DE DATOS
    cargarHistorial(usuario_id);
});

async function cargarHistorial(usuario_id) {
    try {
        // Hacemos el fetch enviando el usuario_id real extraído de la sesión
        const response = await fetch(`/api/historial?usuario_id=${usuario_id}`);
        ticketsGlobal = await response.json();
        
        // Renderizamos la tabla con los datos reales
        renderizarTabla(ticketsGlobal);
    } catch (error) {
        console.error("Error al cargar el historial:", error);
        document.getElementById('historialBody').innerHTML = `<tr><td colspan="6" style="text-align: center; color: #ef4444; padding: 20px; font-weight: bold;">⚠️ Error al conectar con el servidor de TI.</td></tr>`;
    }
}

function renderizarTabla(tickets) {
    const tbody = document.getElementById('historialBody');
    
    // Si la base de datos no devuelve registros para este usuario
    if (!tickets || tickets.length === 0) {
        tbody.innerHTML = `<tr><td colspan="6" style="text-align: center; padding: 40px; color: #64748b; font-weight: 600;">📂 No cuentas con tickets registrados en tu historial.</td></tr>`;
        return;
    }

    tbody.innerHTML = tickets.map(t => {
        // Formateo de fecha seguro para evitar fallos de formato
        let fechaF = "Sin fecha";
        if (t.fecha_creacion) {
            const f = new Date(t.fecha_creacion);
            fechaF = f.toLocaleString('es-PE', { 
                day: '2-digit', month: '2-digit', year: 'numeric',
                hour: '2-digit', minute: '2-digit', hour12: true
            });
        }
        
        // Controladores dinámicos de los badges de estado
        let badge = 'bg-abierto';
        if(t.estado === 'En Proceso') badge = 'bg-proceso';
        if(t.estado === 'Resuelto') badge = 'bg-resuelto';

        return `
            <tr>
                <td><strong>#TK-${t.id.toString().padStart(3, '0')}</strong></td>
                <td>${t.titulo || 'Sin asunto asignado'}</td>
                <td>${t.categoria || 'Otro'}</td>
                <td>${fechaF}</td>
                <td><span class="badge ${badge}">${t.estado || 'Abierto'}</span></td>
                <td style="text-align: center;">
                    <button class="btn-detalle" title="Ver Detalle" style="background: none; border: none; cursor: pointer; color: #cbd5e1; font-size: 18px; transition: color 0.3s;" onmouseover="this.style.color='#0284c7'" onmouseout="this.style.color='#cbd5e1'">
                        <i class="bi bi-eye-fill"></i>
                    </button>
                </td>
            </tr>
        `;
    }).join('');
}

// =======================================================
// ESCUCHADORES DE EVENTOS SEGUROS PARA FILTROS CRUZADOS
// =======================================================
const inputBusqueda = document.getElementById('busqueda');
const selectEstado = document.getElementById('filtroEstado');
const selectPrioridad = document.getElementById('filtroPrioridad');
const selectCategoria = document.getElementById('filtroCategoria');

if (inputBusqueda) inputBusqueda.addEventListener('input', aplicarFiltros);
if (selectEstado) selectEstado.addEventListener('change', aplicarFiltros);
if (selectPrioridad) selectPrioridad.addEventListener('change', aplicarFiltros);
if (selectCategoria) selectCategoria.addEventListener('change', aplicarFiltros);

function aplicarFiltros() {
    const txtBusqueda = inputBusqueda ? inputBusqueda.value.toLowerCase() : '';
    const valEstado = selectEstado ? selectEstado.value : 'todos';
    const valPrioridad = selectPrioridad ? selectPrioridad.value : 'todos';
    const valCategoria = selectCategoria ? selectCategoria.value : 'todos';

    const ticketsFiltrados = ticketsGlobal.filter(ticket => {
        // Evitamos caídas de JS forzando validación de strings existentes
        const tituloReal = ticket.titulo ? ticket.titulo.toLowerCase() : '';
        const categoriaReal = ticket.categoria ? ticket.categoria.toLowerCase() : '';
        
        const coincideTexto = tituloReal.includes(txtBusqueda) || ticket.id.toString().includes(txtBusqueda);
        const coincideEstado = valEstado === 'todos' || ticket.estado === valEstado;
        
        const prioridadReal = ticket.prioridad || 'Media';
        const coincidePrioridad = valPrioridad === 'todos' || prioridadReal === valPrioridad;
        
        const coincideCategoria = valCategoria === 'todos' || categoriaReal.includes(valCategoria.toLowerCase());

        return coincideTexto && coincideEstado && coincidePrioridad && coincideCategoria;
    });

    renderizarTabla(ticketsFiltrados);
}