@extends('admin.layouts.app')

@section('title', 'Analytics')

@php
    $sourceLabels = [
        'direct'   => 'Direct (accès direct)',
        'organic'  => 'Recherche (organic)',
        'social'   => 'Réseaux sociaux',
        'referral' => 'Sites référents',
        'internal' => 'Navigation interne',
    ];
    $deviceLabels = ['desktop' => 'Ordinateur', 'mobile' => 'Mobile', 'tablet' => 'Tablette'];
    $maxDay = max(1, collect($series)->max('views'));
    $maxHour = max(1, collect($byHour)->max());
    $deltaBadge = function (?int $d) {
        if ($d === null) return '<span class="d d-flat">— période précédente vide</span>';
        if ($d > 0) return '<span class="d d-up">▲ ' . $d . '% vs période précédente</span>';
        if ($d < 0) return '<span class="d d-down">▼ ' . abs($d) . '% vs période précédente</span>';
        return '<span class="d d-flat">= stable</span>';
    };
@endphp

@section('content')
    <style>
        .an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
        .an-kpi { background: #fff; border: 1px solid var(--ff-line); border-radius: 14px; padding: 20px 22px; }
        .an-kpi .n { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 600; color: var(--ff-ink); line-height: 1; }
        .an-kpi .l { color: var(--ff-muted); font-size: .82rem; margin-top: 6px; }
        .an-kpi .d { font-size: .76rem; margin-top: 5px; font-weight: 600; }
        .d-up { color: #2f6b2a; } .d-down { color: #c0392b; } .d-flat { color: var(--ff-muted); font-weight: 400; }
        .an-split { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: 14px 0 8px; background: #f0ebe1; }
        .an-split .seg-new { background: var(--ff-gold); } .an-split .seg-ret { background: #6c8b6a; }
        .an-legend { display: flex; gap: 18px; font-size: .85rem; color: var(--ff-muted); }
        .an-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
        .an-periods { display: flex; gap: 6px; }
        .an-periods a { padding: .35rem .7rem; border: 1px solid var(--ff-line); border-radius: 7px; font-size: .82rem; color: var(--ff-muted); }
        .an-periods a.on { background: var(--ff-gold); border-color: var(--ff-gold); color: #fff; }
        .an-trend { display: flex; align-items: flex-end; gap: 2px; height: 130px; padding-top: 8px; }
        .an-trend .bar { flex: 1; background: var(--ff-gold); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .8; }
        .an-trend .bar:hover { opacity: 1; }
        .an-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .an-row { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 10px; margin-bottom: 9px; font-size: .88rem; }
        .an-row .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ff-ink); }
        .an-row .track { background: #f0ebe1; border-radius: 6px; height: 10px; overflow: hidden; }
        .an-row .fill { background: var(--ff-gold); height: 100%; border-radius: 6px; }
        .an-row .val { text-align: right; color: var(--ff-muted); font-variant-numeric: tabular-nums; }
        @media (max-width: 820px) { .an-kpis, .an-2col { grid-template-columns: 1fr; } }
    </style>

    <div class="btn-row" style="justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 class="page-title">Analytics</h1>
            <p class="lead">Fréquentation de votre site — visites, provenance et appareils. Les robots sont exclus.</p>
        </div>
        <div class="btn-row" style="align-items: center;">
            <div class="an-periods">
                @foreach ([7 => '7 j', 30 => '30 j', 90 => '90 j', 365 => '1 an'] as $d => $label)
                    <a href="{{ route('admin.analytics', ['days' => $d]) }}" class="{{ $days === $d ? 'on' : '' }}">{{ $label }}</a>
                @endforeach
            </div>
            @if ($totalViews > 0)
                <a class="btn btn-sm" href="{{ route('admin.analytics.export', ['days' => $days]) }}">⤓ Export CSV</a>
            @endif
        </div>
    </div>

    @if ($totalViews === 0)
        <div class="empty" style="margin-top: 20px;">
            Aucune visite enregistrée sur cette période pour l'instant. Les statistiques apparaîtront ici dès que des visiteurs parcourront le site.
        </div>
    @else
        <div class="an-kpis">
            <div class="an-kpi"><div class="n">{{ number_format($totalViews, 0, ',', ' ') }}</div><div class="l">Pages vues</div>{!! $deltaBadge($viewsDelta) !!}</div>
            <div class="an-kpi"><div class="n">{{ number_format($uniqueVisitors, 0, ',', ' ') }}</div><div class="l">Visiteurs uniques</div>{!! $deltaBadge($visitorsDelta) !!}</div>
            <div class="an-kpi"><div class="n">{{ number_format($perVisit, 1, ',', ' ') }}</div><div class="l">Pages par visite</div></div>
            <div class="an-kpi"><div class="n">{{ number_format($perDay, 1, ',', ' ') }}</div><div class="l">Pages vues / jour</div></div>
        </div>

        <div class="card">
            <h2>Tendance</h2>
            <p class="hint">Pages vues par jour sur les {{ $days }} derniers jours.</p>
            <div class="an-trend">
                @foreach ($series as $pt)
                    <div class="bar" style="height: {{ max(2, round($pt['views'] / $maxDay * 100)) }}%;"
                         title="{{ \Illuminate\Support\Carbon::parse($pt['date'])->locale('fr')->translatedFormat('d M') }} — {{ $pt['views'] }} vues"></div>
                @endforeach
            </div>
        </div>

        <div class="an-2col">
            <div class="card">
                <h2>Nouveaux vs récurrents</h2>
                <p class="hint">Visiteurs venus pour la première fois vs déjà connus.</p>
                @php($vTot = max(1, $newVisitors + $returning))
                <div class="an-split">
                    <div class="seg-new" style="width: {{ round($newVisitors / $vTot * 100) }}%;"></div>
                    <div class="seg-ret" style="width: {{ round($returning / $vTot * 100) }}%;"></div>
                </div>
                <div class="an-legend">
                    <span><span class="dot" style="background: var(--ff-gold);"></span>Nouveaux : {{ number_format($newVisitors, 0, ',', ' ') }}</span>
                    <span><span class="dot" style="background: #6c8b6a;"></span>Récurrents : {{ number_format($returning, 0, ',', ' ') }}</span>
                </div>
            </div>

            <div class="card">
                <h2>Heures de pointe</h2>
                <p class="hint">Pages vues selon l'heure de la journée.</p>
                <div class="an-trend" style="height: 90px;">
                    @foreach ($byHour as $h => $c)
                        <div class="bar" style="height: {{ max(2, round($c / $maxHour * 100)) }}%;" title="{{ $h }}h — {{ $c }} vues"></div>
                    @endforeach
                </div>
                <div style="display: flex; justify-content: space-between; font-size: .7rem; color: var(--ff-muted); margin-top: 4px;">
                    <span>0h</span><span>6h</span><span>12h</span><span>18h</span><span>23h</span>
                </div>
            </div>
        </div>

        <div class="an-2col" style="margin-top: 20px;">
            <div class="card">
                <h2>Provenance du trafic</h2>
                <p class="hint">Comment les visiteurs arrivent sur le site.</p>
                @php($maxSrc = max(1, $sources->max()))
                @forelse ($sources as $key => $count)
                    <div class="an-row">
                        <span class="lab">{{ $sourceLabels[$key] ?? ucfirst($key) }}</span>
                        <span class="track"><span class="fill" style="width: {{ round($count / $maxSrc * 100) }}%;"></span></span>
                        <span class="val">{{ number_format($count, 0, ',', ' ') }}</span>
                    </div>
                @empty
                    <p class="hint">—</p>
                @endforelse
            </div>

            <div class="card">
                <h2>Appareils</h2>
                <p class="hint">Ordinateur, mobile ou tablette.</p>
                @php($maxDev = max(1, $devices->max()))
                @foreach ($devices as $key => $count)
                    <div class="an-row">
                        <span class="lab">{{ $deviceLabels[$key] ?? ucfirst($key) }}</span>
                        <span class="track"><span class="fill" style="width: {{ round($count / $maxDev * 100) }}%;"></span></span>
                        <span class="val">{{ number_format($count, 0, ',', ' ') }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="an-2col" style="margin-top: 20px;">
            <div class="card">
                <h2>Pays</h2>
                <p class="hint">D'où viennent les visiteurs.</p>
                @php($maxCtry = max(1, $countries->max()))
                @foreach ($countries as $code => $count)
                    <div class="an-row">
                        <span class="lab">{{ country_label($code) }}</span>
                        <span class="track"><span class="fill" style="width: {{ round($count / $maxCtry * 100) }}%;"></span></span>
                        <span class="val">{{ number_format($count, 0, ',', ' ') }}</span>
                    </div>
                @endforeach
            </div>

            <div class="card">
                <h2>Pages les plus vues</h2>
                <p class="hint">Top 10 des pages.</p>
                @php($maxPg = max(1, $topPages->max()))
                @foreach ($topPages as $path => $count)
                    <div class="an-row">
                        <span class="lab"><a href="{{ $path }}" target="_blank" rel="noopener">{{ $path }}</a></span>
                        <span class="track"><span class="fill" style="width: {{ round($count / $maxPg * 100) }}%;"></span></span>
                        <span class="val">{{ number_format($count, 0, ',', ' ') }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        @if ($referrers->isNotEmpty())
            <div class="card" style="margin-top: 20px;">
                <h2>Sites référents</h2>
                <p class="hint">Les domaines externes qui envoient le plus de visiteurs.</p>
                <table class="tbl">
                    <thead><tr><th>Domaine</th><th style="text-align:right;">Visites</th></tr></thead>
                    <tbody>
                        @foreach ($referrers as $host => $count)
                            <tr><td>{{ $host }}</td><td style="text-align:right;">{{ number_format($count, 0, ',', ' ') }}</td></tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    @endif
@endsection