@extends('admin.layouts.app')

@section('title', 'Comportement')

@php($maxMs = max(1, $sections->max('avg_ms') ?? 1))

@section('content')
    <style>
        .bh-scroll { display: flex; gap: 18px; align-items: stretch; }
        .bh-strip { width: 120px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--ff-line); }
        .bh-band { height: 34px; display: flex; align-items: center; justify-content: center; font-size: .76rem; font-weight: 600; color: #4a3f2a; }
        .bh-legend { font-size: .82rem; color: var(--ff-muted); }
        .bh-row { display: grid; grid-template-columns: 1fr 150px 84px; align-items: center; gap: 12px; margin-bottom: 9px; font-size: .9rem; }
        .bh-row .lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bh-track { background: #f0ebe1; border-radius: 6px; height: 12px; overflow: hidden; }
        .bh-fill { background: var(--ff-gold); height: 100%; border-radius: 6px; }
        .bh-val { text-align: right; color: var(--ff-muted); font-variant-numeric: tabular-nums; }
    </style>

    <div class="btn-row" style="justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 class="page-title">Comportement</h1>
            <p class="lead">Ce qui retient l'attention : profondeur de lecture (scroll) et sections les plus regardées. Sans cookie, robots exclus.</p>
        </div>
        <form method="GET" action="{{ route('admin.behavior') }}">
            <select name="path" onchange="this.form.submit()" style="padding: .5rem .6rem; border: 1px solid rgba(35,33,30,.2); border-radius: 8px; font: inherit; font-size: .85rem;">
                @foreach ($options as $o)
                    <option value="{{ $o['path'] }}" @selected($o['path'] === $path)>{{ $o['title'] }} ({{ $o['path'] }})</option>
                @endforeach
            </select>
        </form>
    </div>

    @if ($count === 0)
        <div class="empty">
            Aucune donnée de comportement pour cette page pour l'instant. Les mesures s'accumulent au fil des visites réelles (elles démarrent après la mise en ligne).
        </div>
    @else
        <p class="hint" style="margin-top: -6px;">{{ $count }} session(s) analysée(s) · profondeur de lecture moyenne : <strong>{{ $avgDepth }}%</strong></p>

        <div class="card">
            <h2>Carte de défilement (scroll)</h2>
            <p class="hint">Part des visiteurs qui voient chaque zone de la page, du haut (toujours vu) vers le bas.</p>
            <div class="bh-scroll">
                <div class="bh-strip">
                    @foreach ([10,20,30,40,50,60,70,80,90,100] as $b)
                        @php($pct = $retention[$b] ?? 0)
                        <div class="bh-band" style="background: rgba(176,141,87,{{ max(0.06, $pct / 100) }});">{{ $pct }}%</div>
                    @endforeach
                </div>
                <div class="bh-legend" style="display: flex; flex-direction: column; justify-content: space-between; padding: 4px 0;">
                    <span>↑ Haut de page — vu par {{ $retention[10] ?? 0 }}% des visiteurs</span>
                    <span>Milieu — {{ $retention[50] ?? 0 }}% atteignent la moitié de la page</span>
                    <span>↓ Bas de page — seulement {{ $retention[100] ?? 0 }}% vont jusqu'en bas</span>
                </div>
            </div>
        </div>

        <div class="card">
            <h2>Attention par section</h2>
            <p class="hint">Temps moyen pendant lequel chaque section reste visible à l'écran (et clics).</p>
            @forelse ($sections as $s)
                <div class="bh-row">
                    <span class="lab" title="{{ $s['label'] }}">{{ $s['label'] }}</span>
                    <span class="bh-track"><span class="bh-fill" style="width: {{ max(3, round($s['avg_ms'] / $maxMs * 100)) }}%;"></span></span>
                    <span class="bh-val">{{ number_format($s['avg_ms'] / 1000, 1, ',', ' ') }}s{{ $s['clicks'] ? ' · ' . $s['clicks'] . ' clic' . ($s['clicks'] > 1 ? 's' : '') : '' }}</span>
                </div>
            @empty
                <p class="hint">Pas encore de données de section.</p>
            @endforelse
        </div>
    @endif
@endsection