/**
 * ZLETS - Dashboard.js
 * Inicialización de gráficos Chart.js
 */

document.addEventListener('DOMContentLoaded', function() {
    if (typeof chartData === 'undefined') return;

    initBarChart();
    initPieChart();
});

/**
 * Gráfico de Barras - Montos mensuales de vencimiento
 */
function initBarChart() {
    const ctx = document.getElementById('chartBarMontos');
    if (!ctx) return;

    const meses = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
    const datos = chartData.montosMensuales || Array(12).fill(0);

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: meses,
            datasets: [{
                label: 'Monto USD',
                data: datos,
                backgroundColor: datos.map((val, i) => {
                    // Mes actual resaltado
                    const mesActual = new Date().getMonth();
                    return i === mesActual
                        ? 'rgba(61, 90, 245, 0.85)'
                        : 'rgba(61, 90, 245, 0.35)';
                }),
                borderColor: 'rgba(61, 90, 245, 0.6)',
                borderWidth: 1,
                borderRadius: 6,
                borderSkipped: false,
                hoverBackgroundColor: 'rgba(61, 90, 245, 0.95)',
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(30, 42, 58, 0.95)',
                    titleColor: '#fff',
                    bodyColor: '#94a3b8',
                    borderColor: 'rgba(255, 255, 255, 0.08)',
                    borderWidth: 1,
                    cornerRadius: 8,
                    padding: 12,
                    titleFont: { family: 'Inter', size: 13, weight: '600' },
                    bodyFont: { family: 'Inter', size: 12 },
                    callbacks: {
                        label: function(context) {
                            return 'US$ ' + context.parsed.y.toLocaleString('en-US', {
                                minimumFractionDigits: 2,
                                maximumFractionDigits: 2,
                            });
                        }
                    }
                }
            },
            scales: {
                x: {
                    grid: {
                        display: false,
                    },
                    ticks: {
                        color: '#64748b',
                        font: { family: 'Inter', size: 11 },
                    },
                    border: { display: false },
                },
                y: {
                    grid: {
                        color: 'rgba(255, 255, 255, 0.04)',
                        drawBorder: false,
                    },
                    ticks: {
                        color: '#64748b',
                        font: { family: 'Inter', size: 11 },
                        callback: function(value) {
                            if (value >= 1000) return (value / 1000).toFixed(0) + 'k';
                            return value;
                        }
                    },
                    border: { display: false },
                    beginAtZero: true,
                }
            },
            animation: {
                duration: 1200,
                easing: 'easeOutQuart',
            }
        }
    });
}

/**
 * Gráfico de Pastel - Distribución de estados
 */
function initPieChart() {
    const ctx = document.getElementById('chartPieEstados');
    if (!ctx) return;

    const estados = chartData.distribucionEstados || [];
    
    const colores = {
        'pendiente':  '#f59e0b',
        'pagada':     '#10b981',
        'vencida':    '#ef4444',
        'renovada':   '#3b82f6',
        'protestada': '#64748b',
    };

    const labels = estados.map(e => {
        const nombres = {
            'pendiente': 'Pendiente', 'pagada': 'Pagada', 'vencida': 'Vencida',
            'renovada': 'Renovada', 'protestada': 'Protestada'
        };
        return nombres[e.estado] || e.estado;
    });

    const totalLetras = estados.reduce((sum, e) => sum + parseInt(e.cantidad), 0);

    // Plugin para texto central
    const centerTextPlugin = {
        id: 'centerText',
        afterDraw(chart) {
            const { ctx: context, chartArea } = chart;
            const centerX = (chartArea.left + chartArea.right) / 2;
            const centerY = (chartArea.top + chartArea.bottom) / 2;
            
            context.save();
            context.textAlign = 'center';
            context.textBaseline = 'middle';
            
            context.font = "bold 28px 'Sora', 'Inter', sans-serif";
            context.fillStyle = '#ffffff';
            context.fillText(totalLetras, centerX, centerY - 8);
            
            context.font = "500 11px 'Inter', sans-serif";
            context.fillStyle = '#64748b';
            context.fillText('Total', centerX, centerY + 14);
            
            context.restore();
        }
    };

    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: estados.map(e => parseInt(e.cantidad)),
                backgroundColor: estados.map(e => colores[e.estado] || '#64748b'),
                borderColor: '#131c2e',
                borderWidth: 3,
                hoverBorderColor: '#131c2e',
                hoverBorderWidth: 3,
                hoverOffset: 4,
            }]
        },
        options: {
            responsive: false,
            cutout: '70%',
            plugins: {
                legend: { display: false },
                tooltip: {
                    backgroundColor: 'rgba(15, 23, 42, 0.95)',
                    titleColor: '#ffffff',
                    bodyColor: '#cbd5e1',
                    borderColor: 'rgba(255, 255, 255, 0.1)',
                    borderWidth: 1,
                    cornerRadius: 12,
                    padding: 14,
                    usePointStyle: true,
                    boxPadding: 6,
                    titleFont: { family: 'Inter', size: 14, weight: '600' },
                    bodyFont: { family: 'Inter', size: 13, weight: '500' },
                    callbacks: {
                        label: function(context) {
                            const value = context.parsed;
                            const pct = ((value / totalLetras) * 100).toFixed(1);
                            return ` ${context.label}: ${value} (${pct}%)`;
                        }
                    }
                }
            },
            animation: {
                animateRotate: true,
                duration: 1200,
                easing: 'easeOutQuart',
            }
        },
        plugins: [centerTextPlugin]
    });
}

/**
 * Muestra el detalle de una card en un SweetAlert (Vista Rápida)
 */
function mostrarDetalleCard(tipo) {
    Swal.fire({
        title: 'Cargando...',
        text: 'Obteniendo detalle de letras',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    fetch(`?c=dashboard&a=detalleLetras&tipo=${tipo}`)
        .then(response => response.json())
        .then(data => {
            if (data.letras.length === 0) {
                Swal.fire({
                    icon: 'info',
                    title: data.titulo,
                    text: 'No hay letras en esta categoría.',
                    background: '#1e2a3a',
                    color: '#fff',
                    confirmButtonColor: '#3d5af5'
                });
                return;
            }

            // Construir HTML de la tabla
            let html = `
            <div class="overflow-x-auto custom-scrollbar" style="max-height: 60vh;">
                <table class="w-full text-sm text-left border-collapse">
                    <thead class="sticky top-0 bg-[#172033] z-10 shadow-sm border-b border-white/10">
                        <tr>
                            <th class="px-3 py-2 text-xs text-gray-400">Nº Letra</th>
                            <th class="px-3 py-2 text-xs text-gray-400">Empresa</th>
                            <th class="px-3 py-2 text-xs text-gray-400">Vencimiento</th>
                            <th class="px-3 py-2 text-xs text-gray-400 text-center">F. Pago (+8d)</th>
                            <th class="px-3 py-2 text-xs text-gray-400 text-right">Importe</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-white/5">
            `;
            
            let totalImporte = 0;

            data.letras.forEach(letra => {
                totalImporte += parseFloat(letra.importe);
                // Dar formato a fecha y moneda
                const fechaVec = new Date(letra.fecha_vencimiento + 'T00:00:00').toLocaleDateString('es-PE');
                const fechaPago = letra.fecha_pago ? new Date(letra.fecha_pago + 'T00:00:00').toLocaleDateString('es-PE') : '-';
                const moneda = letra.moneda === 'USD' ? '$' : 'S/';
                const importe = parseFloat(letra.importe).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
                
                html += `
                    <tr class="hover:bg-white/5">
                        <td class="px-3 py-2 font-mono text-xs text-white">${letra.numero_letra}</td>
                        <td class="px-3 py-2 text-xs text-white truncate max-w-[150px]">${letra.razon_social}</td>
                        <td class="px-3 py-2 text-xs text-gray-300">${fechaVec}</td>
                        <td class="px-3 py-2 text-xs text-gray-400 text-center">${fechaPago}</td>
                        <td class="px-3 py-2 text-xs font-semibold text-white text-right">${moneda}${importe}</td>
                    </tr>
                `;
            });

            html += `
                    </tbody>
                    <tfoot class="sticky bottom-0 bg-[#172033] border-t border-white/10">
                        <tr>
                            <th colspan="3" class="px-3 py-2 text-right text-xs text-gray-400">Total:</th>
                            <th class="px-3 py-2 text-right text-xs text-emerald-400 font-bold">$${totalImporte.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</th>
                        </tr>
                    </tfoot>
                </table>
            </div>`;

            Swal.fire({
                title: `<span class="font-sora text-lg">${data.titulo}</span>`,
                html: html,
                width: 600,
                background: '#1e2a3a',
                color: '#fff',
                showCloseButton: true,
                showConfirmButton: false,
                customClass: {
                    container: 'swal-glass',
                    popup: 'rounded-2xl border border-white/10 shadow-2xl shadow-black/50',
                    header: 'border-b border-white/5 pb-2',
                    title: 'text-left w-full',
                    closeButton: 'hover:text-red-400 focus:outline-none',
                    htmlContainer: 'p-0 text-left'
                }
            });
        })
        .catch(error => {
            console.error('Error:', error);
            Swal.fire('Error', 'No se pudo cargar el detalle.', 'error');
        });
}
