@extends('layouts.app')

@section('title', 'Statistiques')

@section('content')
<div class="space-y-6">

    <h1 class="text-2xl font-bold text-slate-800 flex items-center gap-2">
        <i data-lucide="bar-chart-3" class="w-6 h-6 text-teal-600"></i>
        Statistiques
    </h1>

    {{-- ── Sélecteur de joueur + graphiques ──────────────────────────── --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 space-y-4">

        <div class="flex items-center gap-3">
            <label for="ddlJoueurs" class="text-sm font-medium text-slate-700 shrink-0">Sélection du pronostiqueur :</label>
            <select id="ddlJoueurs"
                class="border border-gray-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500">
                <option value="">— choisir —</option>
                @foreach($utilisateurs as $u)
                <option value="{{ $u->uti_id }}">
                    {{ $u->uti_pseudo ?: $u->uti_prenom.' '.$u->uti_nom }}
                </option>
                @endforeach
            </select>
            <span id="chart-loading" class="hidden text-sm text-slate-400 italic">Chargement…</span>
        </div>

        <div id="charts-wrapper" class="hidden grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div>
                <h2 id="title-joueur" class="text-sm font-semibold text-slate-600 mb-2">Classement et points par journée</h2>
                <canvas id="GraphJoueur" height="160"></canvas>
            </div>
            <div>
                <h2 id="title-evol" class="text-sm font-semibold text-slate-600 mb-2">Évolution des positions</h2>
                <canvas id="GraphEvol" height="160"></canvas>
            </div>
        </div>
        <p id="charts-placeholder" class="text-sm text-slate-400 italic">
            Sélectionnez un joueur pour afficher ses graphiques.
        </p>
    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
(function () {
    const chartUrl  = '{{ route('statistiques.chart') }}';
    let chartJoueur = null;
    let chartEvol   = null;

    function buildChartJoueur(labels, positions, points, filrougeIdx, nom) {
        const ctx = document.getElementById('GraphJoueur').getContext('2d');
        if (chartJoueur) chartJoueur.destroy();

        const ptDataset = {
            label: 'Points',
            data: points,
            type: 'line',
            yAxisID: 'yPts',
            borderColor: '#0d9488',
            backgroundColor: 'rgba(13,148,136,.15)',
            tension: 0.3,
            pointRadius: points.map((_, i) => filrougeIdx.includes(i) ? 8 : 4),
            pointBackgroundColor: points.map((_, i) => filrougeIdx.includes(i) ? '#dc2626' : '#0d9488'),
            pointBorderColor: points.map((_, i) => filrougeIdx.includes(i) ? '#f97316' : '#0d9488'),
            order: 1,
        };
        const posDataset = {
            label: 'Classement',
            data: positions,
            type: 'bar',
            yAxisID: 'yPos',
            backgroundColor: 'rgba(71,114,167,.5)',
            borderColor: '#4572a7',
            borderWidth: 1,
            order: 2,
        };

        const maxPos = Math.max(...positions) + 1;

        chartJoueur = new Chart(ctx, {
            data: { labels, datasets: [ptDataset, posDataset] },
            options: {
                responsive: true,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    title:  { display: true, text: nom, font: { size: 13 } },
                    legend: { position: 'top' },
                    tooltip: {
                        callbacks: {
                            label: ctx => ctx.dataset.label + ': ' + ctx.parsed.y +
                                (ctx.dataset.yAxisID === 'yPos' ? 'ème' : ' pts'),
                        }
                    }
                },
                scales: {
                    yPts: {
                        type: 'linear', position: 'left',
                        min: 0,
                        title: { display: true, text: 'Points' },
                        grid: { color: 'rgba(0,0,0,.05)' },
                    },
                    yPos: {
                        type: 'linear', position: 'right',
                        min: 1, max: maxPos,
                        reverse: true,
                        title: { display: true, text: 'Classement' },
                        grid: { drawOnChartArea: false },
                    },
                }
            }
        });
    }

    function buildChartEvol(labels, evols, nom) {
        const ctx = document.getElementById('GraphEvol').getContext('2d');
        if (chartEvol) chartEvol.destroy();

        chartEvol = new Chart(ctx, {
            type: 'line',
            data: {
                labels,
                datasets: [{
                    label: 'Places gagnées / perdues',
                    data: evols,
                    borderColor: '#0d9488',
                    backgroundColor: evols.map(v => v >= 0 ? 'rgba(13,148,136,.2)' : 'rgba(220,38,38,.2)'),
                    tension: 0.3,
                    fill: true,
                    pointBackgroundColor: evols.map(v => v >= 0 ? '#0d9488' : '#dc2626'),
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title:  { display: true, text: nom, font: { size: 13 } },
                    legend: { position: 'top' },
                    tooltip: {
                        callbacks: {
                            label: ctx => ctx.parsed.y > 0
                                ? '+' + ctx.parsed.y + ' places'
                                : ctx.parsed.y + ' places',
                        }
                    }
                },
                scales: {
                    y: {
                        title: { display: true, text: 'Places' },
                        grid: { color: ctx => ctx.tick.value === 0
                            ? 'rgba(0,0,0,.3)' : 'rgba(0,0,0,.05)' },
                    }
                }
            }
        });
    }

    async function loadPlayer(utiId) {
        document.getElementById('chart-loading').classList.remove('hidden');
        document.getElementById('charts-wrapper').classList.add('hidden');
        document.getElementById('charts-placeholder').classList.add('hidden');

        const res  = await fetch(chartUrl + '?uti_id=' + utiId);
        const data = await res.json();

        document.getElementById('chart-loading').classList.add('hidden');

        const keys = Object.keys(data).map(Number).sort((a, b) => a - b);
        if (!keys.length) {
            document.getElementById('charts-placeholder').textContent = 'Pas de données pour ce joueur.';
            document.getElementById('charts-placeholder').classList.remove('hidden');
            return;
        }

        const labels      = keys.map(k => 'J' + k);
        const positions   = keys.map(k => data[k].position);
        const points      = keys.map(k => data[k].points);
        const evols       = keys.map(k => data[k].evol);
        const filrougeIdx = keys.reduce((acc, k, i) => { if (data[k].filrouge == 1) acc.push(i); return acc; }, []);
        const nom         = data[keys[0]].nom;

        document.getElementById('charts-wrapper').classList.remove('hidden');
        // forcer le display:grid via classe Tailwind (déjà dans la div)
        document.getElementById('charts-wrapper').style.display = 'grid';

        buildChartJoueur(labels, positions, points, filrougeIdx, nom);
        buildChartEvol(labels, evols, nom);
    }

    document.getElementById('ddlJoueurs').addEventListener('change', function () {
        const id = this.value;
        if (id) loadPlayer(id);
        else {
            document.getElementById('charts-wrapper').style.display = 'none';
            document.getElementById('charts-placeholder').classList.remove('hidden');
            document.getElementById('charts-placeholder').textContent = 'Sélectionnez un joueur pour afficher ses graphiques.';
        }
    });
})();
</script>
@endpush