<x-layouts.app :title="$scopeName">
    @php $ctx = ['courseId' => $course->id, 'chapterId' => $chapter?->id]; @endphp
    <div x-data="flashcards(@js($deck), @js($ctx))" x-cloak class="mx-auto max-w-2xl">

        {{-- ============ PLAYING ============ --}}
        <div x-show="!done">
            <div class="glass mb-6 flex items-center gap-3 rounded-2xl border p-2.5" style="border-color:var(--color-line)">
                <a href="{{ route('courses.show', $course) }}" class="btn btn-ghost btn-sm"><x-icon name="x" :size="16" /> Quitter</a>
                <div class="progress-track flex-1"><div class="progress-fill" :style="`width:${progress}%`"></div></div>
                <span class="shrink-0 text-sm tabular" style="color:var(--color-ink-faint)"><span x-text="index + 1"></span>/<span x-text="total"></span></span>
            </div>

            <div class="mb-1 text-center text-xs font-medium" style="color:var(--color-ink-faint)">
                <x-icon name="book" :size="13" class="inline" /> Flashcards · {{ $scopeName }}
            </div>
            <div class="mb-5 flex items-center justify-center gap-3">
                <span class="badge badge-success"><x-icon name="check" :size="13" /> <span x-text="results.correct"></span></span>
                <span class="badge badge-danger"><x-icon name="x" :size="13" /> <span x-text="results.incorrect"></span></span>
            </div>

            <div class="flip-scene mx-auto w-full cursor-pointer" style="height:clamp(280px,44vh,400px)"
                 @click="flip()" role="button" tabindex="0" :aria-pressed="flipped" @keydown.space.prevent="flip()">
                <div class="flip-card" :class="{ 'is-flipped': flipped }">
                    <div class="flip-face flip-front">
                        <span class="mb-3 text-xs font-semibold uppercase tracking-widest" style="color:var(--color-ink-faint)">Terme</span>
                        <p class="font-display text-2xl font-bold sm:text-3xl" x-text="current?.term"></p>
                        <template x-if="current?.section">
                            <span class="badge badge-muted mt-4" x-text="current.section"></span>
                        </template>
                        <span class="absolute inset-x-0 bottom-5 text-xs" style="color:var(--color-ink-faint)">Espace ou clic pour retourner</span>
                    </div>
                    <div class="flip-face flip-back">
                        <span class="mb-3 text-xs font-semibold uppercase tracking-widest" style="color:var(--color-primary-soft)">Définition</span>
                        <p class="text-lg leading-relaxed" x-text="current?.definition"></p>
                        <template x-if="current?.example">
                            <pre class="mt-4 max-w-full overflow-x-auto rounded-xl px-4 py-3 text-left text-sm" style="background:rgba(0,0,0,.35);color:var(--color-accent);font-family:var(--font-mono)" x-text="current.example"></pre>
                        </template>
                        <span class="absolute inset-x-0 bottom-5 text-xs" style="color:var(--color-ink-faint)">→ Je savais · ← À revoir</span>
                    </div>
                </div>
            </div>

            <div class="mt-7 flex justify-center gap-3">
                <button class="btn btn-danger btn-lg" style="min-width:150px" @click="answer('incorrect')" :disabled="!flipped || answered || saving">
                    <x-icon name="x" :size="18" /> À revoir
                </button>
                <button class="btn btn-success btn-lg" style="min-width:150px" @click="answer('correct')" :disabled="!flipped || answered || saving">
                    <x-icon name="check" :size="18" /> Je savais
                </button>
            </div>
            <p class="mt-4 text-center text-xs" style="color:var(--color-ink-faint)"
               x-text="flipped ? 'Raccourcis : J = je savais · F = à revoir' : 'Retourne la carte avant d’évaluer ta réponse'"></p>
        </div>

        {{-- ============ DONE ============ --}}
        <div x-show="done" x-cloak class="mx-auto max-w-md py-8 text-center animate-fade-up">
            <div class="mx-auto mb-6 grid place-items-center rounded-full" style="width:128px;height:128px;border:4px solid var(--color-primary);background:color-mix(in oklab,var(--color-primary) 12%,transparent);box-shadow:0 0 55px -10px var(--color-primary)">
                <span class="font-display text-4xl font-extrabold"><span x-text="percent"></span>%</span>
            </div>
            <h2 class="text-2xl font-bold sm:text-3xl">Session terminée ! 🎉</h2>
            <p class="mb-7 mt-2" style="color:var(--color-ink-soft)"><span x-text="results.correct"></span> connues · <span x-text="results.incorrect"></span> à revoir</p>
            <div class="flex flex-wrap justify-center gap-3">
                <button class="btn btn-primary btn-lg" @click="restart()"><x-icon name="rotate" :size="18" /> Recommencer</button>
                <a href="{{ route('courses.show', $course) }}" class="btn btn-secondary btn-lg"><x-icon name="arrow-left" :size="18" /> Retour au cours</a>
            </div>
        </div>
    </div>
</x-layouts.app>
