/**
 * @file wally-chart.js
 * @description History chart rendering for Wally Monitor — renderHistoryChart.
 *              Uses Chart.js to render score/problems datasets over time.
 * @module WallyMonitor.Chart
 */
window.WallyMonitor = window.WallyMonitor || {};

(function($) {
    'use strict';

    WallyMonitor.Chart = WallyMonitor.Chart || {};

    /**
     * Renderiza gráfico de evolução temporal do score
     * @param {Array} historyData - Dados do histórico (array de objetos com timestamp, score, total_problems)
     */
    WallyMonitor.Chart.renderHistoryChart = function(historyData) {
        if (typeof Chart === 'undefined') {
            console.warn('Chart.js não carregado');
            return;
        }

        const ctx = document.getElementById('wally-history-chart');
        if (!ctx) {
            console.warn('Elemento canvas não encontrado');
            return;
        }

        // Valida se há dados
        if (!historyData || !Array.isArray(historyData) || historyData.length === 0) {
            ctx.parentElement.innerHTML = '<p style="text-align: center; padding: 40px; color: #666;">Nenhum dado disponível. Execute análises para ver o histórico.</p>';
            return;
        }

        // Ordena por timestamp (mais antigo primeiro)
        const sortedData = [...historyData].sort((a, b) => 
            new Date(a.timestamp) - new Date(b.timestamp)
        );

        // Limita a 30 análises mais recentes para não poluir o gráfico
        const recentData = sortedData.slice(-30);

        // Valida e filtra dados válidos
        const validData = recentData.filter(item => 
            item && 
            item.timestamp && 
            typeof item.score !== 'undefined' && 
            typeof item.total_problems !== 'undefined'
        );

        if (validData.length === 0) {
            ctx.parentElement.innerHTML = '<p style="text-align: center; padding: 40px; color: #666;">Dados de histórico incompletos. Execute novas análises.</p>';
            return;
        }

        // Prepara dados para o gráfico
        const labels = validData.map(item => {
            const date = new Date(item.timestamp);
            return date.toLocaleDateString('pt-BR', { 
                day: '2-digit', 
                month: '2-digit',
                year: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            });
        });

        const scores = validData.map(item => item.score);
        const problems = validData.map(item => item.total_problems);

        // Verifica se temos dados suficientes
        if (scores.length === 0 || problems.length === 0) {
            console.warn('Arrays de dados vazios após processamento');
            ctx.parentElement.innerHTML = '<p style="text-align: center; padding: 40px; color: #666;">Erro ao processar dados. Tente executar novas análises.</p>';
            return;
        }

        // Destrói instância anterior do Chart.js se existir
        const existingChart = Chart.getChart(ctx);
        if (existingChart) {
            existingChart.destroy();
        }

        // Cria gradiente para linha do score
        const gradient = ctx.getContext('2d').createLinearGradient(0, 0, 0, 400);
        gradient.addColorStop(0, 'rgba(56, 211, 159, 0.25)');
        gradient.addColorStop(0.5, 'rgba(229, 165, 55, 0.2)');
        gradient.addColorStop(1, 'rgba(229, 72, 77, 0.15)');

        const historyChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Score de Acessibilidade',
                        data: scores,
                        borderColor: function(context) {
                            // Verifica se parsed existe antes de acessar
                            if (!context.parsed || typeof context.parsed.y === 'undefined') {
                                return '#38D39F'; // cor padrão (mint)
                            }
                            const value = context.parsed.y;
                            if (value >= 90) return '#38D39F';
                            if (value >= 70) return '#e5a537';
                            if (value >= 50) return '#e5793a';
                            return '#e5484d';
                        },
                        backgroundColor: gradient,
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 5,
                        pointHoverRadius: 8,
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 2,
                        yAxisID: 'y'
                    },
                    {
                        label: 'Total de Problemas',
                        data: problems,
                        borderColor: '#0E4A70',
                        backgroundColor: 'rgba(14, 74, 112, 0.08)',
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 4,
                        pointHoverRadius: 7,
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 2,
                        yAxisID: 'y1',
                        hidden: true // Oculto por padrão
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: true,
                interaction: {
                    mode: 'index',
                    intersect: false
                },
                plugins: {
                    title: {
                        display: false
                    },
                    legend: {
                        display: true,
                        position: 'top',
                        labels: {
                            font: {
                                size: 13,
                                weight: 'bold'
                            },
                            padding: 15,
                            usePointStyle: true
                        }
                    },
                    tooltip: {
                        backgroundColor: '#0E2336',
                        padding: 14,
                        cornerRadius: 10,
                        titleFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        bodyFont: {
                            size: 13
                        },
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) {
                                    label += ': ';
                                }
                                // Verifica se parsed existe e tem valor
                                if (context.parsed && context.parsed.y !== null && typeof context.parsed.y !== 'undefined') {
                                    if (context.datasetIndex === 0) {
                                        label += context.parsed.y + '/100';
                                    } else {
                                        label += context.parsed.y + ' problemas';
                                    }
                                }
                                return label;
                            },
                            afterLabel: function(context) {
                                if (context.datasetIndex !== 0) return '';
                                var item = validData[context.dataIndex];
                                if (item && item.analysis_mode) {
                                    return 'Norma: ' + (item.analysis_mode === 'nbr' ? 'NBR 17.225' : 'WCAG 2.2');
                                }
                                return '';
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        display: true,
                        title: {
                            display: true,
                            text: 'Data da Análise',
                            font: {
                                size: 13,
                                weight: 'bold'
                            }
                        },
                        ticks: {
                            maxRotation: 45,
                            minRotation: 45,
                            font: {
                                size: 11
                            }
                        },
                        grid: {
                            display: false
                        }
                    },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        min: 0,
                        max: 100,
                        title: {
                            display: true,
                            text: 'Score (0-100)',
                            font: {
                                size: 13,
                                weight: 'bold'
                            },
                            color: '#38D39F'
                        },
                        ticks: {
                            stepSize: 10,
                            callback: function(value) {
                                return value + '/100';
                            },
                            font: {
                                size: 12
                            }
                        },
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    y1: {
                        type: 'linear',
                        display: false, // Oculto por padrão
                        position: 'right',
                        title: {
                            display: true,
                            text: 'Problemas Encontrados',
                            font: {
                                size: 13,
                                weight: 'bold'
                            },
                            color: '#0E4A70'
                        },
                        ticks: {
                            font: {
                                size: 12
                            }
                        },
                        grid: {
                            drawOnChartArea: false
                        }
                    }
                }
            }
        });
        
        // Adiciona event listener para o checkbox de toggle
        $('#wally-toggle-problems').on('change', function() {
            const isChecked = $(this).is(':checked');
            
            // Mostra/oculta o dataset de problemas
            historyChart.data.datasets[1].hidden = !isChecked;
            
            // Mostra/oculta o eixo Y1
            historyChart.options.scales.y1.display = isChecked;
            
            // Atualiza o gráfico
            historyChart.update();
        });
        

    };

})(jQuery);
