// Variable global para almacenar y destruir el gráfico anterior
let miGrafico = null;

document.addEventListener('DOMContentLoaded', () => {
    // 1. Cargar nombre
    const elNombre = document.getElementById('nombreUsuario');
    if (elNombre) elNombre.textContent = localStorage.getItem('nombres') || "Usuario";

    // 2. Cargar los datos iniciales (Por defecto cargamos 'mes' porque es la primera opción del HTML)
    cargarDatosPanel('actual');

    // 3. Activar el filtro interactivo
    const selectorFiltro = document.getElementById('filtroMes');
    if (selectorFiltro) {
        selectorFiltro.addEventListener('change', (evento) => {
            const opcionSeleccionada = evento.target.value; // 'mes' o 'total'
            cargarDatosPanel(opcionSeleccionada);
        });
    }
});

// Función que hace la petición al servidor dependiendo del filtro
async function cargarDatosPanel(periodo) {
    const usuario_id = localStorage.getItem('usuario_id');
    if (!usuario_id) return; 

    try {
        const response = await fetch(`http://localhost:3000/api/tickets/resumen?usuario_id=${usuario_id}&periodo=${periodo}`);
        const data = await response.json();
        renderizarDashboard(data);
    } catch (e) {
        console.error("Error al cargar datos filtrados:", e);
    }
}

// Función que dibuja la interfaz (tarjetas, dona y leyenda)
function renderizarDashboard(data) {
    const abiertos = parseInt(data.abiertos) || 0;
    const proceso = parseInt(data.proceso) || 0;
    const resueltos = parseInt(data.resueltos) || 0;
    const total = abiertos + proceso + resueltos;

    const calcPct = (val) => total === 0 ? 0 : Math.round((val / total) * 100);

    // Actualizar Tarjetas
    document.getElementById('countAbiertos').textContent = abiertos;
    document.getElementById('countProceso').textContent = proceso;
    document.getElementById('countResueltos').textContent = resueltos;
    document.getElementById('pctAbiertos').textContent = calcPct(abiertos) + "% del total";
    document.getElementById('pctProceso').textContent = calcPct(proceso) + "% del total";
    document.getElementById('pctResueltos').textContent = calcPct(resueltos) + "% del total";

    // Actualizar Última Incidencia
    // Actualizar Última Incidencia
    const ultimoInfo = document.getElementById('ultimoTicketInfo');
    if (ultimoInfo) {
        if (data.ultimo_titulo) {
            // Asignar colores y estilos dinámicamente según el estado
            let badgeClass = 'status-abierto';
            let iconClass = 'bi-ticket-perforated';
            let iconBg = 'red'; // Usamos las clases de fondo que ya tienes en CSS

            if (data.ultimo_estado === 'En Proceso') {
                badgeClass = 'status-proceso';
                iconClass = 'bi-hourglass-split';
                iconBg = 'amber';
            } else if (data.ultimo_estado === 'Resuelto') {
                badgeClass = 'status-resuelto';
                iconClass = 'bi-check-circle';
                iconBg = 'green';
            }

            // Formatear la fecha (Ej: 13/05/2024 10:24 a. m.)
            let fechaTexto = "Fecha no disponible";
            if (data.ultima_fecha) {
                const fechaObj = new Date(data.ultima_fecha);
                fechaTexto = fechaObj.toLocaleString('es-PE', { 
                    day: '2-digit', month: '2-digit', year: 'numeric',
                    hour: '2-digit', minute: '2-digit', hour12: true 
                });
            }

            // Inyectar el HTML con la estructura corporativa
            ultimoInfo.innerHTML = `
                <div class="last-ticket-icon ${iconBg}">
                    <i class="bi ${iconClass}"></i>
                </div>
                <h5 class="last-ticket-title">${data.ultimo_titulo}</h5>
                <span class="status-badge ${badgeClass}">${data.ultimo_estado}</span>
                
                <div class="last-ticket-details">
                    <div class="detail-item">
                        <i class="bi bi-calendar3"></i> Creado: ${fechaTexto}
                    </div>
                    <div class="detail-item">
                        <i class="bi bi-person-fill"></i> Estado: ${data.ultimo_estado}
                    </div>
                </div>
            `;
        } else {
            ultimoInfo.innerHTML = "<p style='color: #64748b; font-size: 14px;'>No tienes tickets en este periodo.</p>";
        }
    }

    // DESTRUIR gráfico anterior si existe para evitar superposiciones (Glitches)
    if (miGrafico) {
        miGrafico.destroy();
    }

    // Dibujar Nuevo Gráfico
    const canvas = document.getElementById('ticketChart');
    if (canvas) {
        miGrafico = new Chart(canvas, {
            type: 'doughnut',
            data: {
                labels: ['Abiertos', 'En Proceso', 'Resueltos'],
                datasets: [{ 
                    data: [abiertos, proceso, resueltos], 
                    backgroundColor: ['#ef4444', '#f59e0b', '#10b981'],
                    borderWidth: 0
                }]
            },
            options: { 
                responsive: true, 
                maintainAspectRatio: false,
                cutout: '50%',
                layout: {
                    padding: 12
                },
                plugins: { 
                    legend: { display: false },
                    tooltip: { enabled: true }
                }
            }
        });
    }

    // Generar Leyenda
    const legendContainer = document.getElementById('customLegend');
    if (legendContainer) {
        const items = [
            { label: 'Abiertos', val: abiertos, pct: calcPct(abiertos), color: '#ef4444' },
            { label: 'En Proceso', val: proceso, pct: calcPct(proceso), color: '#f59e0b' },
            { label: 'Resueltos', val: resueltos, pct: calcPct(resueltos), color: '#10b981' }
        ];

        legendContainer.innerHTML = items.map(item => `
            <div class="legend-item">
                <div class="legend-label">
                    <span class="legend-dot" style="background-color: ${item.color}"></span>
                    <span>${item.label}</span>
                </div>
                <div class="legend-value">
                    ${item.val} <span class="legend-pct" style="color: ${item.color}">(${item.pct}%)</span>
                </div>
            </div>
        `).join('');
    }

    // F. Generar la Tabla de Tickets Recientes
    const tbody = document.getElementById('tablaTicketsRecientes');
    if (tbody && data.recientes) {
        if (data.recientes.length === 0) {
            // Si no hay tickets, mostramos un mensaje bonito en la tabla
            tbody.innerHTML = `<tr><td colspan="7" style="text-align: center; color: #64748b; padding: 30px;">No se encontraron tickets recientes en este periodo.</td></tr>`;
        } else {
            // Si hay tickets, armamos las filas
            tbody.innerHTML = data.recientes.map(ticket => {
                // 1. Formateamos la fecha
                let fechaF = "Sin fecha";
                if (ticket.fecha_creacion) {
                    const f = new Date(ticket.fecha_creacion);
                    fechaF = f.toLocaleString('es-PE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true });
                }

                // 2. Definimos el color del badge de ESTADO
                let badge = 'status-abierto';
                if(ticket.estado === 'En Proceso') badge = 'status-proceso';
                if(ticket.estado === 'Resuelto') badge = 'status-resuelto';

                // 3. Definimos el color del puntito de PRIORIDAD
                let prioTexto = ticket.prioridad || 'Media'; // Por defecto Media si viene vacío
                let prioClase = 'priority-media';
                
                if (prioTexto === 'Alta') prioClase = 'priority-alta';
                if (prioTexto === 'Baja') prioClase = 'priority-baja';

                // 4. Imprimimos la fila HTML inyectando las variables dinámicas
                return `
                    <tr>
                        <td><strong>#TK-2026-${ticket.id.toString().padStart(3, '0')}</strong></td>
                        <td>${ticket.titulo}</td>
                        <td><span class="status-badge ${badge}">${ticket.estado}</span></td>
                        <td><span class="priority-dot ${prioClase}"></span> ${prioTexto}</td>
                        <td>${fechaF}</td>
                        <td>${fechaF}</td>
                        <td style="color: #cbd5e1; cursor: pointer;"><i class="bi bi-three-dots-vertical"></i></td>
                    </tr>
                `;
            }).join('');
        }
    }
}