<x-layouts.app :title="$scopeName">
    @php $ctx = ['courseId' => $course->id, 'chapterId' => $chapter?->id]; @endphp
    <div x-data="openAnswer(@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-5 flex flex-wrap 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-gold">~ <span x-text="results.partial"></span></span>
                <span class="badge badge-danger"><x-icon name="x" :size="13" /> <span x-text="results.incorrect"></span></span>
            </div>

            <div class="card card-pad mb-5 text-center">
                <template x-if="current?.section"><span class="badge badge-primary mb-3" x-text="current.section"></span></template>
                <p class="mb-2 text-sm" style="color:var(--color-ink-faint)">Définis le terme suivant :</p>
                <h2 class="font-display text-2xl font-bold sm:text-3xl" x-text="current?.term"></h2>
            </div>

            <textarea class="field" x-model="answer" :disabled="score !== null" placeholder="Tape ta définition ici…"
                      @keydown.ctrl.enter.prevent="submit()" aria-label="Ta définition"></textarea>
            <p class="field-hint mb-4"><kbd class="font-mono">Ctrl</kbd> + <kbd class="font-mono">Entrée</kbd> pour valider</p>

            <div x-show="score !== null" x-cloak class="animate-fade-up">
                <div class="card card-pad mb-4" :style="`border-color:${verdict?.tone==='success'?'color-mix(in oklab,var(--color-success) 40%,transparent)':verdict?.tone==='gold'?'color-mix(in oklab,var(--color-gold) 40%,transparent)':'color-mix(in oklab,var(--color-danger) 40%,transparent)'}`">
                    <div class="mb-3 flex items-center justify-between">
                        <span class="font-bold" :style="`color:${verdict?.tone==='success'?'var(--color-success)':verdict?.tone==='gold'?'var(--color-gold)':'var(--color-danger)'}`" x-text="verdict?.label"></span>
                        <span class="text-sm tabular" style="color:var(--color-ink-faint)">Score <span x-text="scorePercent"></span>%</span>
                    </div>
                    <p class="mb-1 text-xs" style="color:var(--color-ink-faint)">Définition attendue :</p>
                    <p class="leading-relaxed" style="color:var(--color-ink-soft)" x-text="current?.definition"></p>
                    <template x-if="current?.example">
                        <pre class="mt-3 overflow-x-auto rounded-xl px-4 py-3 text-sm" style="background:rgba(0,0,0,.35);color:var(--color-accent);font-family:var(--font-mono)" x-text="current.example"></pre>
                    </template>
                </div>
            </div>

            <button x-show="score === null" class="btn btn-primary btn-lg btn-block" @click="submit()" :disabled="!answer.trim()">
                <x-icon name="check" :size="18" /> Valider ma réponse
            </button>
            <button x-show="score !== null" x-cloak class="btn btn-primary btn-lg btn-block" @click="next()">
                <span x-text="index + 1 >= total ? 'Voir les résultats' : 'Terme suivant'"></span> <x-icon name="arrow-right" :size="18" />
            </button>
        </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="finalPercent"></span>%</span>
            </div>
            <h2 class="text-2xl font-bold sm:text-3xl">Session terminée ! ✍️</h2>
            <div class="mb-7 mt-4 flex flex-wrap justify-center gap-2.5">
                <span class="badge badge-success">✓ <span x-text="results.correct"></span> correct</span>
                <span class="badge badge-gold">~ <span x-text="results.partial"></span> partiel</span>
                <span class="badge badge-danger">✗ <span x-text="results.incorrect"></span> à revoir</span>
            </div>
            <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>
