{{-- resources/views/public/athlete_detail_script.blade.php --}}
<script>
document.addEventListener("DOMContentLoaded", function() {
    const rawData = @json($chartData ?? []);
    const ctx = document.getElementById('publicProgressionChart');
    const buttons = document.querySelectorAll('.event-btn');
    const chartInfoText = document.getElementById('chartInfoText');

    let myChart = null;

    const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

    const colorConfig = {
        grid: isDarkMode ? 'rgba(148, 163, 184, 0.1)' : 'rgba(0, 0, 0, 0.05)', 
        text: isDarkMode ? '#94a3b8' : '#64748b', 
        tooltipBg: isDarkMode ? 'rgba(15, 23, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)', 
        tooltipText: isDarkMode ? '#fff' : '#1e293b', 
        tooltipBorder: isDarkMode ? 'rgba(59, 130, 246, 0.3)' : 'rgba(226, 232, 240, 1)', 
    };

    function formatAthleticsValue(value, isTimeEvent) {
        let absValue = Math.abs(value);

        if (isTimeEvent) {
            if (absValue < 60) {
                return absValue.toFixed(2) + ' s';
            } else if (absValue < 3600) {
                let minutes = Math.floor(absValue / 60);
                let seconds = (absValue % 60).toFixed(2);
                let secStr = seconds < 10 ? '0' + seconds : seconds;
                return `${minutes}:${secStr}`;
            } else {
                let hours = Math.floor(absValue / 3600);
                let remainingAfterHour = absValue % 3600;
                let minutes = Math.floor(remainingAfterHour / 60);
                let minStr = minutes < 10 ? '0' + minutes : minutes;
                let seconds = (remainingAfterHour % 60).toFixed(2);
                let secStr = seconds < 10 ? '0' + seconds : seconds;
                return `${hours}:${minStr}:${secStr}`;
            }
        } else {
            if (absValue >= 1000) {
                return (absValue / 1000).toFixed(2) + ' Km';
            } else {
                return absValue.toFixed(2) + ' m';
            }
        }
    }

    if(ctx && rawData && Object.keys(rawData).length > 0) {
        
        function renderDashboard(eventName) {
            const dataPoints = rawData[eventName];
            if(!dataPoints || dataPoints.length === 0) return;

            const firstPoint = dataPoints[0];
            const isTimeEvent = (firstPoint.type === 'time');
            
            if(chartInfoText) {
                if(isTimeEvent) {
                    chartInfoText.innerText = "Track Event: Waktu lebih cepat = Grafik lebih TINGGI";
                } else {
                    chartInfoText.innerText = "Field Event: Jarak lebih jauh = Grafik lebih TINGGI";
                }
            }

            renderChartCanvas(dataPoints, eventName, isTimeEvent);
        }

        function renderChartCanvas(dataPoints, label, isTimeEvent) {
            const labels = dataPoints.map(p => p.x); 
            
            const chartValues = dataPoints.map(p => {
                let val = Math.abs(p.y);
                return isTimeEvent ? -1 * val : val;
            });

            if(myChart) myChart.destroy();

            const ctx2d = ctx.getContext('2d');
            const gradient = ctx2d.createLinearGradient(0, 0, 0, 350);
            gradient.addColorStop(0, 'rgba(59, 130, 246, 0.5)'); 
            gradient.addColorStop(1, 'rgba(59, 130, 246, 0.0)'); 

            myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: label,
                        data: chartValues,
                        borderColor: '#3b82f6', 
                        backgroundColor: gradient,
                        borderWidth: 3,
                        pointBackgroundColor: '#10b981', 
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2,
                        pointRadius: 6,
                        pointHoverRadius: 8,
                        tension: 0.4,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: colorConfig.tooltipBg,
                            titleColor: colorConfig.tooltipText,
                            bodyColor: colorConfig.tooltipText,
                            borderColor: colorConfig.tooltipBorder,
                            borderWidth: 1,
                            padding: 10,
                            callbacks: {
                                label: function(context) {
                                    let idx = context.dataIndex;
                                    let venue = dataPoints[idx].venue || '';
                                    let rawVal = context.raw; 
                                    let formattedVal = formatAthleticsValue(rawVal, isTimeEvent);
                                    return ` Hasil: ${formattedVal} (${venue})`;
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            grid: { color: colorConfig.grid, borderDash: [5, 5] },
                            ticks: { 
                                color: colorConfig.text,
                                callback: function(value) {
                                    return formatAthleticsValue(value, isTimeEvent);
                                }
                            }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { color: colorConfig.text }
                        }
                    }
                }
            });
        }

        buttons.forEach(btn => {
            btn.addEventListener('click', function() {
                buttons.forEach(b => {
                    b.classList.remove('bg-blue-600', 'text-white', 'shadow-lg', 'shadow-blue-500/30');
                    b.classList.add('bg-gray-200', 'text-gray-600', 'hover:bg-gray-300', 'dark:bg-slate-700', 'dark:text-slate-300', 'dark:hover:bg-slate-600');
                });
                
                this.classList.remove('bg-gray-200', 'text-gray-600', 'hover:bg-gray-300', 'dark:bg-slate-700', 'dark:text-slate-300', 'dark:hover:bg-slate-600');
                this.classList.add('bg-blue-600', 'text-white', 'shadow-lg', 'shadow-blue-500/30');

                renderDashboard(this.dataset.event);
            });
        });

        if(buttons.length > 0) {
            buttons[0].click();
        }

    } else {
        const section = document.getElementById('progression-section');
        if(section) section.style.display = 'none';
    }
});
</script>