{{-- resources/views/admin/competitors/_edit_grafik.blade.php --}}

@php
    $groupedDatasets = [];
    $progressionData = $progressionData ?? [];
    
    foreach($progressionData as $dataset) {
        $label = $dataset['label'];
        $safeId = Str::slug($label); 
        $groupedDatasets[$label] = [
            'id' => $safeId,
            'data' => $dataset
        ];
    }
    $firstKey = array_key_first($groupedDatasets);
@endphp

<div class="row g-4">
    <div class="col-md-12">
        <div class="card shadow-sm border-0">
            <div class="card-header bg-white">
                <h5 class="fw-bold mb-0 text-primary"><i class="fas fa-chart-line me-2"></i> Perbandingan Performa Season Best</h5>
            </div>
            
            <div class="card-body">
                @if(count($groupedDatasets) > 0)
                    <ul class="nav nav-pills nav-secondary mb-3" id="grafikTabs" role="tablist">
                        @foreach($groupedDatasets as $label => $info)
                            <li class="nav-item" role="presentation">
                                <button class="nav-link {{ $loop->first ? 'active' : '' }}" 
                                        id="tab-{{ $info['id'] }}" 
                                        data-bs-toggle="pill" 
                                        data-bs-target="#content-{{ $info['id'] }}" 
                                        type="button" role="tab"
                                        aria-controls="content-{{ $info['id'] }}" 
                                        aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                    <i class="fas fa-running me-2"></i> {{ $label }}
                                </button>
                            </li>
                        @endforeach
                    </ul>

                    <div class="tab-content border p-3 rounded bg-light" id="grafikTabsContent">
                        @foreach($groupedDatasets as $label => $info)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" 
                                 id="content-{{ $info['id'] }}" role="tabpanel" 
                                 aria-labelledby="tab-{{ $info['id'] }}">
                                
                                <div class="bg-white p-3 rounded shadow-sm mb-4">
                                    <div style="height: 400px; width: 100%;">
                                        <canvas id="chart-{{ $info['id'] }}"></canvas>
                                    </div>
                                </div>

                                <div class="bg-white p-3 rounded shadow-sm border-start border-4 border-primary">
                                    <h6 class="fw-bold text-dark mb-3"><i class="fas fa-file-alt me-2 text-primary"></i> Analisis Performa: {{ $label }}</h6>
                                    <div id="analysis-{{ $info['id'] }}" class="row g-3">
                                        <div class="col-12 text-muted small"><i class="fas fa-spinner fa-spin"></i> Memuat analisis...</div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="alert alert-info text-center">
                        <i class="fas fa-info-circle fa-2x mb-3 d-block"></i>
                        Belum ada data hasil lomba untuk ditampilkan grafiknya.
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-white"><h6 class="fw-bold mb-0 text-dark">Distribusi Medali</h6></div>
            <div class="card-body"><canvas id="barChart"></canvas></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-white"><h6 class="fw-bold mb-0 text-dark">Skor WA</h6></div>
            <div class="card-body"><canvas id="radarChart"></canvas></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card shadow-sm border-0 h-100">
            <div class="card-header bg-white"><h6 class="fw-bold mb-0 text-dark">Win Rate</h6></div>
            <div class="card-body d-flex justify-content-center align-items-center">
                <div style="width: 80%"><canvas id="pieChart"></canvas></div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    
    const yearsLabels = @json($years ?? []);
    const groupedData = @json($groupedDatasets); 

    function formatDuration(seconds) {
        if (isNaN(seconds) || seconds === null) return "-";
        let sec = Math.abs(parseFloat(seconds));
        let h = Math.floor(sec / 3600);
        let m = Math.floor((sec % 3600) / 60);
        let s = (sec % 60).toFixed(2);

        let res = "";
        if (h > 0) res += h + ":";
        if (m > 0 || h > 0) res += (m < 10 && h > 0 ? "0" + m : m) + ":";
        res += (s < 10 && (m > 0 || h > 0) ? "0" + s : s);
        return res;
    }

    try {
        const barEl = document.getElementById('barChart');
        if(barEl && yearsLabels.length > 0) {
            new Chart(barEl, { 
                type: 'bar', 
                data: @json($medalsData ?? []), 
                options: { 
                    scales: { 
                        xAxes:[{stacked:true}], 
                        yAxes:[{stacked:true, ticks:{beginAtZero:true, stepSize:1}}] 
                    }, 
                    legend:{position:'bottom'} 
                } 
            });
        }
        
        const radarEl = document.getElementById('radarChart');
        if(radarEl && yearsLabels.length > 0) {
            new Chart(radarEl, { 
                type: 'radar', 
                data: { 
                    labels:yearsLabels, 
                    datasets:[{
                        label:'Max Skor WA', 
                        data:@json($radarData ?? []), 
                        fill:true, 
                        backgroundColor:'rgba(54, 162, 235, 0.2)', 
                        borderColor:'rgb(54, 162, 235)'
                    }] 
                }, 
                options: { scale:{ticks:{beginAtZero:true}}, legend:{display:false} } 
            });
        }
        
        const pieEl = document.getElementById('pieChart');
        if(pieEl) { 
            const wr=[{{ $winRate['Wins']??0 }}, {{ $winRate['Others']??0 }}]; 
            new Chart(pieEl, { 
                type:'doughnut', 
                data:{
                    labels:['Juara 1','Lainnya'], 
                    datasets:[{data:wr, backgroundColor:['#1572e8','#f1f1f1']}]
                }, 
                options:{cutoutPercentage:70, legend:{position:'bottom'}} 
            }); 
        }
    } catch(e) { console.error("Error supporting charts:", e); }


    Object.keys(groupedData).forEach(function(key) {
        let item = groupedData[key];
        let safeId = item.id;
        let rawDataset = item.data;
        let typeStr = String(rawDataset.result_type || '').toLowerCase().trim();
        let isTime = (typeStr !== 'distance' && typeStr !== 'points');
        
        let chartDataPoints = JSON.parse(JSON.stringify(rawDataset.data));
        chartDataPoints.forEach(p => {
            if (p && p.y !== null) {
                let val = parseFloat(p.y);
                if (val === 0) p.y = null;
                else if (isTime) p.y = -1 * Math.abs(val); 
            }
        });

        let ctx = document.getElementById('chart-' + safeId);
        if (ctx) {
            new Chart(ctx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: yearsLabels,
                    datasets: [{
                        label: rawDataset.label,
                        data: chartDataPoints,
                        borderColor: '#36A2EB',
                        backgroundColor: '#36A2EB',
                        fill: false,
                        borderWidth: 3,
                        pointRadius: 5,
                        pointHoverRadius: 7,
                        spanGaps: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                if (tooltipItem.yLabel === null) return null;
                                let rawValue = Math.abs(tooltipItem.yLabel);
                                let displayValue = isTime ? formatDuration(rawValue) : rawValue.toFixed(2) + " m/pts";
                                return ' ' + data.datasets[0].label + ': ' + displayValue;
                            }
                        }
                    },
                    legend: { display: false },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: false,
                                callback: function(val) { 
                                    return isTime ? formatDuration(val) : Math.abs(val); 
                                }
                            },
                            scaleLabel: { display: false } 
                        }],
                        xAxes: [{ gridLines: { display: false } }]
                    }
                }
            });
        }

        generateSingleAnalysis(rawDataset, yearsLabels, safeId);
    });

    function generateSingleAnalysis(dataset, years, containerId) {
        let container = document.getElementById('analysis-' + containerId);
        if (!container) return;

        let typeStr = String(dataset.result_type || '').toLowerCase().trim();
        let isTime = (typeStr !== 'distance' && typeStr !== 'points');
        let unitLabel = isTime ? '' : ' m/pts';

        let validPoints = dataset.data.filter(p => {
            if (!p || p.y === null) return false;
            let val = parseFloat(p.y);
            return !isNaN(val) && val > 0;
        });

        if (validPoints.length > 0) {
            let bestVal = parseFloat(validPoints[0].y);
            let bestYear = validPoints[0].x || years[0];

            validPoints.forEach(p => {
                let currentVal = parseFloat(p.y);
                if (isTime ? (currentVal < bestVal) : (currentVal > bestVal)) {
                    bestVal = currentVal;
                    bestYear = p.x;
                }
            });

            let bestDisplay = isTime ? formatDuration(bestVal) : bestVal + unitLabel;

            let trendText = "Data Awal", trendIcon = "fa-flag text-primary", trendClass = "text-primary";
            if (validPoints.length >= 2) {
                let lastPoint = validPoints[validPoints.length - 1];
                let prevPoint = validPoints[validPoints.length - 2];
                let diff = parseFloat(lastPoint.y) - parseFloat(prevPoint.y);
                let isImproved = isTime ? (diff < 0) : (diff > 0);

                if (Math.abs(diff) < 0.001) {
                    trendText = "Stabil"; trendIcon = "fa-equals"; trendClass = "text-warning";
                } else if (isImproved) {
                    trendText = "MENINGKAT"; trendIcon = "fa-arrow-trend-up"; trendClass = "text-success";
                } else {
                    trendText = "MENURUN"; trendIcon = "fa-arrow-trend-down"; trendClass = "text-danger";
                }
            }

            container.innerHTML = `
                <div class="col-md-6">
                    <div class="border rounded p-3 bg-light h-100">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas fa-trophy text-warning fa-lg me-3"></i>
                            <div>
                                <small class="text-muted d-block">Catatan Terbaik</small>
                                <h5 class="fw-bold mb-0 text-dark">${bestDisplay}</h5>
                                <small class="text-secondary">Musim ${bestYear}</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="border rounded p-3 bg-light h-100">
                        <div class="d-flex align-items-center mb-2">
                            <i class="fas ${trendIcon} ${trendClass} fa-lg me-3"></i>
                            <div>
                                <small class="text-muted d-block">Tren Terakhir</small>
                                <h5 class="fw-bold mb-0 ${trendClass}">${trendText}</h5>
                                <small class="text-secondary">Dibanding musim sebelumnya</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-3">
                    <div class="alert alert-info py-2 px-3 small mb-0 border-0 shadow-sm">
                        <i class="fas fa-info-circle me-1"></i> 
                        Kompetitor ini telah aktif mengikuti nomor <strong>${dataset.label}</strong> selama <strong>${validPoints.length} musim</strong> kompetisi.
                    </div>
                </div>`;
        } else {
            container.innerHTML = '<div class="col-12 text-muted small">Belum ada data valid untuk dianalisis.</div>';
        }
    }
});
</script>