@extends('layouts.dashboard')

@section('content')
<div class="p-6 bg-white">
    <div class="flex flex-col md:flex-row gap-6">
        <div class="flex-1 bg-brand text-white rounded-lg flex items-center justify-between py-6 px-10 ">
            <div>
                <div class="text-lg font-semibold mb-1">Vues totales du site</div>
                <div class="text-4xl font-bold">{{ $siteViews->sum('count') }} vues</div>
            </div>
            <svg class="w-16 h-16 opacity-30" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                <circle cx="12" cy="12" r="3"/>
            </svg>
        </div>
        <div class="flex-1 bg-brand-dark text-white rounded-lg flex items-center justify-between py-6 px-10 ">
            @php
                $topMoto = $motos->sortByDesc('views_count')->first();
                $topVariant = $topMoto?->variants?->sortBy('position')->first();
            @endphp
            <div class="flex items-center gap-4">
                <div>
                    <div class="mb-1">Moto la plus vue</div>
                    <div class="text-xl font-bold">{{ $topMoto?->title ?? '-' }}</div>
                    <div class="text-4xl font-bold mt-2">{{ $topMoto?->views_count ?? 0 }} vues</div>
                </div>
            </div>
            @if($topVariant)
                <img src="{{ $topVariant->image }}" alt="Photo {{ $topMoto->title }}" class="w-auto h-20">
            @endif
        </div>
    </div>
</div>
<div class="p-6 bg-white mt-10">
    <div>
        <h2 class="text-xl font-semibold mb-4 text-zinc-900">Statistiques du site</h2>
        <div class="flex flex-col lg:flex-row gap-6">
            <div class="bg-white p-6 rounded-lg  flex-1">
                <canvas id="siteViewsChart" height="100"></canvas>
            </div>
            <div class="bg-zinc-100 rounded-lg  p-6 w-full lg:w-64 flex flex-col justify-between">
                <div class="mb-4">
                    <div class="text-sm font-semibold text-zinc-600 mb-1">Vues aujourd'hui</div>
                    <div class="text-2xl font-bold text-brand-dark">
                        {{ $siteViews->where('date', now()->format('Y-m-d'))->first()?->count ?? 0 }}
                    </div>
                </div>
                <div class="mb-4">
                    <div class="text-sm font-semibold text-zinc-600 mb-1">Vues cette semaine</div>
                    <div class="text-2xl font-bold text-brand-dark">
                        {{ $siteViews->whereBetween('date', [now()->startOfWeek()->format('Y-m-d'), now()->endOfWeek()->format('Y-m-d')])->sum('count') }}
                    </div>
                </div>
                <div class="mb-4">
                    <div class="text-sm font-semibold text-zinc-600 mb-1">Moyenne/jour</div>
                    <div class="text-2xl font-bold text-brand-dark">
                        {{ round($siteViews->avg('count')) }}
                    </div>
                </div>
                <div>
                    <div class="text-sm font-semibold text-zinc-600 mb-1">Jour record</div>
                    <div class="text-2xl font-bold text-brand-dark">
                        {{ $siteViews->sortByDesc('count')->first()?->count ?? 0 }}
                    </div>
                    <div class="text-xs text-zinc-500">
                        {{ $siteViews->sortByDesc('count')->first()?->date ?? '-' }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="p-6 bg-white mt-10">
    <h2 class="text-xl font-semibold mb-4 text-zinc-900">Statistiques des motos</h2>
    <div class="bg-zinc-100 p-6 rounded-lg flex flex-col">
        <canvas id="allMotosChart" height="120"></canvas>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const siteLabels = @json($siteViews->pluck('date'));
    const siteData = @json($siteViews->pluck('count'));
    new Chart(document.getElementById('siteViewsChart'), {
        type: 'line',
        data: {
            labels: siteLabels,
            datasets: [{
                label: 'Vues du site',
                data: siteData,
                borderColor: '#22223b',
                backgroundColor: 'rgba(34,34,59,0.08)',
                fill: true,
                tension: 0.3
            }]
        },
        options: {
            scales: { y: { beginAtZero: true } },
            interaction: {
                mode: 'nearest',
                intersect: false
            }
        }
    });

    // Tableau de couleurs fixes
    const fixedColors = [
        '#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231',
        '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe',
        '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000',
        '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'
    ];

    // Prepare data for all motos in one chart
    const allMotoLabels = @json($motoStats[$motos->first()->id]->pluck('date'));
    const allMotoDatasets = [];
    const motoImages = {};
    let motoIndex = 0;
    @foreach($motos as $moto)
        @php
            $mainVariant = $moto->variants->sortBy('position')->first();
            $stats = $motoStats[$moto->id]->keyBy('date');
        @endphp
        const color{{ $moto->id }} = fixedColors[motoIndex % fixedColors.length];
        // Remplir les jours manquants par zéro
        let motoData{{ $moto->id }} = allMotoLabels.map(date => {
            const val = @json($stats)[date];
            return val ? val.count : 0;
        });
        // Si toutes les valeurs sont nulles ou zéro, on force une ligne plate
        if (motoData{{ $moto->id }}.every(v => v == null || v === 0)) {
            motoData{{ $moto->id }} = Array(allMotoLabels.length).fill(0);
        }
        allMotoDatasets.push({
            label: '{{ $moto->title }}',
            data: motoData{{ $moto->id }},
            borderColor: color{{ $moto->id }},
            backgroundColor: color{{ $moto->id }} + '22',
            fill: false,
            tension: 0.3,
            borderWidth: 3,
            pointRadius: 0,
            spanGaps: true,
            motoId: {{ $moto->id }}
        });
        motoImages[{{ $moto->id }}] = '{{ $mainVariant ? $mainVariant->image : '' }}';
        motoIndex++;
    @endforeach

    // Find global max value for scaling
    let allMotoMax = Math.max(
        0,
        ...allMotoDatasets.flatMap(ds => ds.data)
    );
    let yScaleOptions;
    if (allMotoMax === 0) {
        yScaleOptions = { min: 0, max: 5 };
    } else if (allMotoMax <= 10) {
        yScaleOptions = { min: 0, max: 10 };
    } else {
        yScaleOptions = { beginAtZero: true };
    }

    // Custom legend plugin with images
    const motoLegendPlugin = {
        id: 'motoLegendPlugin',
        afterUpdate(chart) {
            // Remove previous legend if exists
            const oldLegend = document.getElementById('customMotoLegend');
            if (oldLegend) oldLegend.remove();

            // Create legend container
            const legend = document.createElement('div');
            legend.id = 'customMotoLegend';
            legend.className = 'flex flex-wrap gap-4 mt-6';
            chart.canvas.parentNode.appendChild(legend);

            chart.data.datasets.forEach((dataset, i) => {
                const item = document.createElement('div');
                item.className = 'flex items-center gap-2 cursor-pointer select-none';
                item.style.opacity = chart.isDatasetVisible(i) ? '1' : '0.5';

                // Color dot
                const dot = document.createElement('span');
                dot.className = 'inline-block w-4 h-4 rounded-full';
                dot.style.background = dataset.borderColor;
                item.appendChild(dot);

                // Moto image
                if (motoImages[dataset.motoId]) {
                    const img = document.createElement('img');
                    img.src = motoImages[dataset.motoId];
                    img.alt = dataset.label;
                    img.className = 'w-8 h-8 object-contain rounded';
                    img.style.width = '32px';
                    img.style.height = '32px';
                    img.style.border = 'none';
                    item.appendChild(img);
                }

                // Moto label
                const label = document.createElement('span');
                label.className = 'text-sm text-zinc-900 font-semibold';
                label.textContent = dataset.label;
                item.appendChild(label);

                // Toggle visibility on click
                item.onclick = () => {
                    chart.setDatasetVisibility(i, !chart.isDatasetVisible(i));
                    chart.update();
                };

                legend.appendChild(item);
            });
        }
    };

    new Chart(document.getElementById('allMotosChart'), {
        type: 'line',
        data: {
            labels: allMotoLabels,
            datasets: allMotoDatasets
        },
        options: {
            scales: {
                y: yScaleOptions
            },
            interaction: {
                mode: 'nearest',
                intersect: false
            },
            plugins: {
                legend: { display: false }
            }
        },
        plugins: [motoLegendPlugin]
    });
</script>
@endsection