<x-layouts.admin title="Tableau de bord — Admin">

    {{-- En-tête de page --}}
    <div class="mb-8 animate-fade-up">
        <p class="mb-1 text-sm font-medium" style="color:var(--color-ink-faint)">Back-office</p>
        <h1 class="text-3xl font-bold sm:text-4xl">
            <span class="text-gradient">Tableau de bord</span>
        </h1>
        <p class="mt-2 text-sm sm:text-base" style="color:var(--color-ink-soft)">
            Vue globale de l'application.
        </p>
    </div>

    {{-- Grille de stats (2 col mobile / 3 col md) --}}
    <section class="stagger mb-10 grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-3" aria-label="Statistiques globales">

        {{-- Utilisateurs inscrits --}}
        <div class="stat card-accent">
            <div class="mb-1 flex items-center gap-2" style="color:var(--color-ink-faint)">
                <x-icon name="users" :size="16" />
                <span class="stat-label">Utilisateurs inscrits</span>
            </div>
            <div class="stat-value text-gradient">{{ number_format($totalUsers, 0, ',', '\u{202F}') }}</div>
        </div>

        {{-- Comptes actifs --}}
        <div class="stat card-accent">
            <div class="mb-1 flex items-center gap-2" style="color:var(--color-success)">
                <x-icon name="badge-check" :size="16" />
                <span class="stat-label" style="color:var(--color-ink-faint)">Comptes actifs</span>
            </div>
            <div class="stat-value" style="color:var(--color-success)">{{ number_format($activeUsers, 0, ',', '\u{202F}') }}</div>
        </div>

        {{-- Réponses aujourd'hui --}}
        <div class="stat card-accent">
            <div class="mb-1 flex items-center gap-2" style="color:var(--color-accent)">
                <x-icon name="trending" :size="16" />
                <span class="stat-label" style="color:var(--color-ink-faint)">Réponses aujourd'hui</span>
            </div>
            <div class="stat-value" style="color:var(--color-accent)">{{ number_format($answersToday, 0, ',', '\u{202F}') }}</div>
        </div>

        {{-- Flashcards --}}
        <div class="stat card-accent">
            <div class="mb-1 flex items-center gap-2" style="color:var(--color-primary-soft)">
                <x-icon name="layers" :size="16" />
                <span class="stat-label" style="color:var(--color-ink-faint)">Flashcards</span>
            </div>
            <div class="stat-value" style="color:var(--color-primary-soft)">{{ number_format($cardsCount, 0, ',', '\u{202F}') }}</div>
        </div>

        {{-- Cours --}}
        <div class="stat card-accent">
            <div class="mb-1 flex items-center gap-2" style="color:var(--color-ink-faint)">
                <x-icon name="graduation" :size="16" />
                <span class="stat-label">Cours</span>
            </div>
            <div class="stat-value">{{ number_format($coursesCount, 0, ',', '\u{202F}') }}</div>
        </div>

        {{-- Réponses totales --}}
        <div class="stat card-accent">
            <div class="mb-1 flex items-center gap-2" style="color:var(--color-gold)">
                <x-icon name="target" :size="16" />
                <span class="stat-label" style="color:var(--color-ink-faint)">Réponses totales</span>
            </div>
            <div class="stat-value text-gold-gradient">{{ number_format($totalProgress, 0, ',', '\u{202F}') }}</div>
        </div>

    </section>

    {{-- Derniers utilisateurs actifs --}}
    <section class="mb-10 animate-fade-up" aria-label="Derniers utilisateurs actifs">

        <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
            <div class="flex items-center gap-2">
                <x-icon name="users" :size="20" style="color:var(--color-primary-soft)" />
                <h2 class="text-xl font-bold sm:text-2xl">Derniers utilisateurs actifs</h2>
            </div>
            <a href="{{ route('admin.users.index') }}"
               class="btn btn-secondary btn-sm"
               aria-label="Voir tous les utilisateurs">
                <x-icon name="list" :size="15" /> Voir tous
            </a>
        </div>

        <div class="card" style="overflow:hidden">
            <div class="overflow-x-auto">
                <table class="table" aria-label="Liste des derniers utilisateurs actifs">
                    <thead>
                        <tr>
                            <th scope="col">Utilisateur</th>
                            <th scope="col">Email</th>
                            <th scope="col">Dernière connexion</th>
                            <th scope="col">Cours</th>
                            <th scope="col">Score global</th>
                            <th scope="col">Statut</th>
                            <th scope="col"><span class="sr-only">Action</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentUsers as $u)
                            @php
                                $pct = ($u->total_answered ?? 0) > 0
                                    ? round(($u->correct_answered ?? 0) / $u->total_answered * 100)
                                    : 0;
                                $initials = implode('', array_map(fn($w) => mb_strtoupper(mb_substr($w, 0, 1)), array_slice(explode(' ', $u->name), 0, 2)));
                            @endphp
                            <tr>
                                {{-- Avatar + Nom --}}
                                <td>
                                    <div class="flex items-center gap-3">
                                        <span class="avatar" aria-hidden="true">{{ $initials }}</span>
                                        <span class="font-medium">{{ $u->name }}</span>
                                    </div>
                                </td>

                                {{-- Email --}}
                                <td style="color:var(--color-ink-soft)">
                                    <span class="text-sm">{{ $u->email }}</span>
                                </td>

                                {{-- Dernière connexion --}}
                                <td>
                                    <span class="inline-flex items-center gap-1.5 text-sm" style="color:var(--color-ink-soft)">
                                        <x-icon name="clock" :size="13" style="color:var(--color-ink-faint)" />
                                        {{ $u->last_login_at?->diffForHumans() ?? 'Jamais' }}
                                    </span>
                                </td>

                                {{-- Cours --}}
                                <td>
                                    <span class="badge badge-muted tabular">
                                        <x-icon name="graduation" :size="12" />
                                        {{ $u->course_stats_count }}
                                    </span>
                                </td>

                                {{-- Score global --}}
                                <td>
                                    <div class="flex min-w-[6rem] flex-col gap-1">
                                        <div class="flex items-center justify-between gap-2">
                                            <x-ui.progress-bar :value="$pct" class="flex-1" />
                                            <span class="w-9 text-right text-xs font-semibold tabular" style="color:var(--color-ink-soft)">{{ $pct }}%</span>
                                        </div>
                                    </div>
                                </td>

                                {{-- Statut --}}
                                <td>
                                    @if ($u->is_active)
                                        <span class="badge badge-success">
                                            <x-icon name="check-circle" :size="12" /> Actif
                                        </span>
                                    @else
                                        <span class="badge badge-danger">
                                            <x-icon name="ban" :size="12" /> Suspendu
                                        </span>
                                    @endif
                                </td>

                                {{-- Action --}}
                                <td>
                                    <a href="{{ route('admin.users.show', $u) }}"
                                       class="inline-flex items-center gap-1 text-sm font-semibold transition-transform hover:translate-x-0.5"
                                       style="color:var(--color-primary-soft)"
                                       aria-label="Voir le détail de {{ $u->name }}">
                                        Détail <x-icon name="arrow-right" :size="14" />
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="py-10 text-center" style="color:var(--color-ink-faint)">
                                    Aucun utilisateur.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </section>

    {{-- Cours disponibles --}}
    <section class="animate-fade-up" aria-label="Cours disponibles">

        <div class="mb-5 flex items-center gap-2">
            <x-icon name="book" :size="20" style="color:var(--color-primary-soft)" />
            <h2 class="text-xl font-bold sm:text-2xl">Cours disponibles</h2>
        </div>

        @if ($courses->isEmpty())
            <p class="text-sm" style="color:var(--color-ink-faint)">Aucun cours pour l'instant.</p>
        @else
            <div class="stagger grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($courses as $course)
                    <div class="card card-hover card-accent card-pad flex flex-col gap-3">
                        <div class="flex items-center gap-3">
                            <span class="chip chip-lg" aria-hidden="true">{{ $course->emoji }}</span>
                            <div class="min-w-0">
                                <h3 class="truncate font-bold">{{ $course->name }}</h3>
                                <p class="mt-0.5 text-xs" style="color:var(--color-ink-faint)">
                                    {{ number_format($course->cards_count, 0, ',', '\u{202F}') }}
                                    {{ $course->cards_count === 1 ? 'carte' : 'cartes' }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

    </section>

</x-layouts.admin>
