<x-layouts.app :title="$course->name">
    <a href="{{ route('dashboard') }}" class="mb-5 inline-flex items-center gap-1.5 text-sm transition hover:gap-2.5" style="color:var(--color-ink-faint)">
        <x-icon name="arrow-left" :size="16" /> Tous les cours
    </a>

    {{-- Course header --}}
    <section class="mb-8 flex flex-wrap items-start justify-between gap-5 animate-fade-up">
        <div class="flex min-w-0 items-start gap-4">
            <span class="chip-lg chip shrink-0" style="width:4rem;height:4rem;font-size:2.2rem">{{ $course->emoji }}</span>
            <div class="min-w-0">
                <h1 class="text-2xl font-bold sm:text-3xl">{{ $course->name }}</h1>
                <p class="mt-1.5 max-w-xl text-sm" style="color:var(--color-ink-soft)">{{ $course->description }}</p>
                <div class="mt-3 flex flex-wrap items-center gap-2">
                    <span class="badge badge-muted"><x-icon name="layers" :size="13" /> {{ $totalCards }} cartes</span>
                    <span class="badge badge-muted"><x-icon name="list" :size="13" /> {{ $course->chapters->count() }} chapitres</span>
                    @if ($courseStat && $courseStat->streak > 0)
                        <span class="badge badge-gold"><x-icon name="flame" :size="13" /> Série {{ $courseStat->streak }}j</span>
                    @endif
                </div>
            </div>
        </div>
        @if ($courseStat && $courseStat->total_answered > 0)
            <div class="flex items-center gap-3 rounded-2xl px-4 py-3" style="background:color-mix(in oklab,#fff 3%,transparent);border:1px solid var(--color-line)">
                <x-ui.ring :value="$coursePercent" :size="58" :stroke="6" />
                <div class="text-sm">
                    <p class="font-semibold">Maîtrise</p>
                    <p style="color:var(--color-ink-faint)">{{ $courseStat->correct_answered }}/{{ $courseStat->total_answered }} réussies</p>
                </div>
            </div>
        @endif
    </section>

    {{-- Whole-course hero --}}
    <section class="card card-pad relative mb-10 overflow-hidden animate-fade-up"
             style="border-color:color-mix(in oklab,var(--color-primary) 30%,transparent)">
        <div class="pointer-events-none absolute -right-16 -top-16 h-48 w-48 rounded-full opacity-30 blur-3xl" style="background:radial-gradient(circle,var(--color-primary),transparent 70%)"></div>
        <div class="relative">
            <div class="mb-1 flex items-center gap-2">
                <span class="badge badge-primary"><x-icon name="sparkles" :size="13" /> Recommandé</span>
            </div>
            <h2 class="text-xl font-bold sm:text-2xl">Réviser le cours complet</h2>
            <p class="mb-5 mt-1 text-sm" style="color:var(--color-ink-soft)">
                Toutes les notions des {{ $course->chapters->count() }} chapitres mélangées, doublons retirés. Choisis ton mode :
            </p>
            <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
                @foreach ([['flashcards','book','Flashcards','Retourne et mémorise'],['qcm','target','QCM','4 réponses possibles'],['open','pen','Réponse libre','Rédige de mémoire'],['infinite','infinity','Mode infini','Jusqu’à tout maîtriser']] as [$m,$icon,$t,$d])
                    <a href="{{ route('study.play', [$course, 'all', $m]) }}" class="mode-tile">
                        <span class="grid h-11 w-11 place-items-center rounded-xl text-white" style="background-image:linear-gradient(135deg,var(--color-primary-strong),var(--color-accent-strong))">
                            <x-icon :name="$icon" :size="20" :stroke="2" />
                        </span>
                        <div>
                            <p class="font-bold">{{ $t }}</p>
                            <p class="text-xs" style="color:var(--color-ink-faint)">{{ $d }}</p>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Chapters --}}
    <section>
        <div class="mb-5 flex items-center gap-2">
            <x-icon name="list" :size="20" style="color:var(--color-primary-soft)" />
            <h2 class="text-xl font-bold sm:text-2xl">Réviser par chapitre</h2>
        </div>

        <div class="stagger grid gap-4 lg:grid-cols-2">
            @foreach ($course->chapters as $chapter)
                @php
                    $st = $chapterStats[$chapter->id] ?? null;
                    $total = (int) ($st->total ?? 0);
                    $correct = (int) ($st->correct ?? 0);
                    $pct = $total > 0 ? (int) round($correct / $total * 100) : 0;
                @endphp
                <div class="card card-pad flex flex-col gap-4">
                    <div class="flex items-start gap-3.5">
                        <span class="chip shrink-0">{{ $chapter->emoji }}</span>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-3">
                                <h3 class="font-bold leading-snug">{{ $chapter->name }}</h3>
                                @if ($total > 0)
                                    <span class="shrink-0 text-sm font-bold tabular" style="color:{{ $pct >= 75 ? 'var(--color-success)' : ($pct >= 50 ? 'var(--color-warning)' : 'var(--color-danger)') }}">{{ $pct }}%</span>
                                @endif
                            </div>
                            <p class="mt-0.5 text-xs" style="color:var(--color-ink-faint)">{{ $chapter->cards_count }} cartes</p>
                            @if ($total > 0)
                                <div class="mt-2"><x-ui.progress-bar :value="$pct" /></div>
                            @endif
                        </div>
                    </div>
                    <x-mode-actions :course="$course" :scope="$chapter->slug" class="mt-auto" />
                </div>
            @endforeach
        </div>
    </section>
</x-layouts.app>
