@extends('admin.layout')

@section('title', 'Statistiques d\'engagement')

@section('content')
<div class="page-header">
    <h1>Statistiques d'engagement</h1>
    <p class="subtitle">Taux de conversion, rétention et tendances sur 14 jours.</p>
</div>

<div class="stat-row" style="margin-bottom: 1.75rem">
    <div class="stat-box">
        <strong>{{ $engagement['match_rate'] }}%</strong>
        <span>Taux de match</span>
    </div>
    <div class="stat-box">
        <strong>{{ $engagement['message_rate'] }}%</strong>
        <span>Utilisateurs ayant messagé</span>
    </div>
    <div class="stat-box">
        <strong>{{ $engagement['avg_likes_per_user'] }}</strong>
        <span>Likes moy. / utilisateur</span>
    </div>
    <div class="stat-box">
        <strong>{{ $engagement['retention_7d'] }}%</strong>
        <span>Rétention J+7 (cohorte)</span>
    </div>
</div>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem">
    <div class="admin-card">
        <div class="admin-card-head"><h2>Inscriptions</h2></div>
        <div class="admin-card-body">
            @include('admin.partials.chart', ['series' => $registrations, 'max' => $maxReg])
        </div>
    </div>
    <div class="admin-card">
        <div class="admin-card-head"><h2>Utilisateurs actifs</h2></div>
        <div class="admin-card-body">
            @include('admin.partials.chart', ['series' => $activeUsers, 'max' => $maxActive])
        </div>
    </div>
    <div class="admin-card">
        <div class="admin-card-head"><h2>Messages</h2></div>
        <div class="admin-card-body">
            @include('admin.partials.chart', ['series' => $messages, 'max' => $maxMsg])
        </div>
    </div>
    <div class="admin-card">
        <div class="admin-card-head"><h2>Matchs</h2></div>
        <div class="admin-card-body">
            @include('admin.partials.chart', ['series' => $matches, 'max' => $maxMatch])
        </div>
    </div>
</div>
@endsection