{{--
    Le quiz sans clavier (v2.0 §3).

    Une question à la fois, en grand. Chaque réponse est une carte entière de 64 px de haut —
    pas une petite case à cocher. Aucun champ de saisie libre, nulle part. Un bouton d'écoute
    sur l'énoncé ET sur chaque option : on peut répondre sans lire une seule ligne.
--}}
<x-formation.coquille :entete="$quiz->titre" :retour="$module ? route('formation.module', $module) : route('formation.accueil')">

    @if ($termine)
        {{-- Le résultat. Jamais de reproche : tentatives illimitées par défaut. --}}
        <div class="carte mt-6 text-center">
            <p class="text-6xl" aria-hidden="true">{{ $reussi ? '🎉' : '💪' }}</p>
            <p class="mt-4 text-2xl font-extrabold">
                {{ $reussi ? __('formation.reussi') : __('formation.echoue') }}
            </p>
            <p class="mt-2 text-lg text-encre-doux">{{ __('formation.votre_score', ['score' => $score]) }}</p>
            @unless ($reussi)
                <p class="mt-1 text-sm text-encre-doux">{{ __('formation.seuil', ['seuil' => $quiz->seuil_reussite]) }}</p>
            @endunless
            <div class="mt-4 flex justify-center">
                <x-formation.ecouter
                    :texte="$reussi ? __('formation.reussi') : __('formation.echoue')"
                    :etendu="true" />
            </div>
        </div>

        <x-slot:action>
            @if ($reussi)
                <a href="{{ $module ? route('formation.module', $module) : route('formation.accueil') }}"
                   wire:navigate class="bouton-principal">{{ __('formation.continuer') }}</a>
            @else
                <button type="button" wire:click="recommencer" class="bouton-principal">
                    {{ __('formation.recommencer') }}
                </button>
            @endif
        </x-slot:action>

    @elseif ($question === null)
        <div class="carte text-center">
            <p class="text-base text-encre-doux">{{ __('formation.aucun_module') }}</p>
        </div>

    @else
        {{-- Le compte des questions, figuré par des points : pas de chronomètre, pas de stress. --}}
        <div class="mb-4 flex items-center justify-center gap-1.5" role="presentation">
            @for ($i = 0; $i < $total; $i++)
                <span @class([
                    'h-2.5 rounded-full',
                    'w-8 bg-primaire' => $i === $index,
                    'w-2.5 bg-coaching' => $i < $index,
                    'w-2.5 bg-bordure' => $i > $index,
                ])></span>
            @endfor
        </div>
        <p class="sr-only">{{ __('formation.question_sur', ['numero' => $index + 1, 'total' => $total]) }}</p>

        @if ($question->image_path)
            <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($question->image_path) }}"
                 alt="" loading="lazy" class="mb-4 h-48 w-full rounded-2xl object-cover">
        @endif

        <div class="mb-2 flex items-start gap-3">
            <h2 class="min-w-0 flex-1 text-xl font-extrabold leading-snug">{{ $question->enonce }}</h2>
            <x-formation.ecouter
                :texte="$question->enonce"
                :audio="($question->{app()->getLocale() === 'ar' ? 'audio_ar_path' : 'audio_fr_path'})
                    ? \Illuminate\Support\Facades\Storage::disk('public')->url($question->{app()->getLocale() === 'ar' ? 'audio_ar_path' : 'audio_fr_path'})
                    : null" />
        </div>

        <p class="mb-4 text-sm text-encre-doux">
            @switch($question->type)
                @case($typeChoixMultiple) {{ __('formation.choisir_reponses') }} @break
                @case($typeAppariement) {{ __('formation.associer') }} @break
                @case($typeRemiseEnOrdre) {{ __('formation.remettre_en_ordre') }} @break
                @default {{ __('formation.choisir_reponse') }}
            @endswitch
        </p>

        @php $reponse = $reponses[$question->id] ?? null; @endphp

        {{-- Remise en ordre : deux flèches larges plutôt qu'un glisser-déposer au pouce. --}}
        @if ($question->type === $typeRemiseEnOrdre)
            @php
                $ordre = is_array($reponse) && $reponse !== [] ? $reponse : $question->options->pluck('id')->all();
                $parId = $question->options->keyBy('id');
            @endphp
            <ul class="space-y-2">
                @foreach ($ordre as $rang => $optionId)
                    @php $option = $parId->get($optionId); @endphp
                    @continue(! $option)
                    <li class="reponse">
                        <span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primaire/15 text-base font-extrabold text-primaire">
                            {{ $rang + 1 }}
                        </span>
                        @if ($option->image_path)
                            <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($option->image_path) }}"
                                 alt="" loading="lazy" class="h-12 w-12 shrink-0 rounded-xl object-cover">
                        @endif
                        <span class="min-w-0 flex-1">{{ $option->texte }}</span>
                        <button type="button" wire:click="deplacer({{ $question->id }}, {{ $option->id }}, -1)"
                                class="cible-tactile grid place-items-center rounded-xl bg-surface" aria-label="↑">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 15l7-7 7 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </button>
                        <button type="button" wire:click="deplacer({{ $question->id }}, {{ $option->id }}, 1)"
                                class="cible-tactile grid place-items-center rounded-xl bg-surface" aria-label="↓">
                            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </button>
                    </li>
                @endforeach
            </ul>

        {{-- Appariement : chaque élément porte ses paires possibles, en gros boutons. --}}
        @elseif ($question->type === $typeAppariement)
            @php $paires = $question->options->pluck('paire_cle')->filter()->unique()->values(); @endphp
            <ul class="space-y-3">
                @foreach ($question->options as $option)
                    <li class="carte">
                        <div class="flex items-center gap-3">
                            @if ($option->image_path)
                                <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($option->image_path) }}"
                                     alt="" loading="lazy" class="h-14 w-14 shrink-0 rounded-xl object-cover">
                            @endif
                            <span class="min-w-0 flex-1 text-base font-bold">{{ $option->texte }}</span>
                            <x-formation.ecouter :texte="$option->texte" />
                        </div>
                        <div class="mt-3 flex flex-wrap gap-2">
                            @foreach ($paires as $paire)
                                <button type="button"
                                        wire:click="apparier({{ $question->id }}, {{ $option->id }}, '{{ addslashes($paire) }}')"
                                        @class([
                                            'cible-tactile rounded-2xl border-2 px-4 text-base font-bold',
                                            'border-primaire bg-primaire/15 text-primaire' => (is_array($reponse) ? ($reponse[$option->id] ?? null) : null) === $paire,
                                            'border-bordure bg-surface' => (is_array($reponse) ? ($reponse[$option->id] ?? null) : null) !== $paire,
                                        ])>{{ $paire }}</button>
                            @endforeach
                        </div>
                    </li>
                @endforeach
            </ul>

        {{-- Choix unique, choix multiple, vrai/faux : la carte entière est la cible. --}}
        @else
            <ul class="space-y-3">
                @foreach ($question->options as $option)
                    @php
                        $choisie = $question->type === $typeChoixMultiple
                            ? in_array($option->id, (array) ($reponse ?? []), true)
                            : (int) $reponse === $option->id;
                        $action = $question->type === $typeChoixMultiple ? 'basculer' : 'choisir';
                    @endphp
                    <li>
                        <button type="button"
                                wire:click="{{ $action }}({{ $question->id }}, {{ $option->id }})"
                                @class(['reponse', 'reponse-choisie' => $choisie])>
                            <span @class([
                                'grid h-8 w-8 shrink-0 place-items-center border-2',
                                'rounded-lg' => $question->type === $typeChoixMultiple,
                                'rounded-full' => $question->type !== $typeChoixMultiple,
                                'border-primaire bg-primaire text-white dark:text-navy' => $choisie,
                                'border-bordure' => ! $choisie,
                            ])>
                                @if ($choisie)
                                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                @endif
                            </span>
                            @if ($option->image_path)
                                <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($option->image_path) }}"
                                     alt="" loading="lazy" class="h-16 w-16 shrink-0 rounded-xl object-cover">
                            @endif
                            <span class="min-w-0 flex-1">{{ $option->texte }}</span>
                        </button>
                    </li>
                @endforeach
            </ul>
        @endif

        <x-slot:action>
            <div class="flex gap-2">
                @if ($index > 0)
                    <button type="button" wire:click="precedente" class="bouton-secondaire shrink-0 px-5"
                            aria-label="{{ __('formation.retour') }}">
                        <svg class="h-6 w-6 rtl:-scale-x-100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M15 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round"/></svg>
                    </button>
                @endif

                @if ($index < $total - 1)
                    <button type="button" wire:click="suivante" class="bouton-principal">
                        {{ __('formation.suivant') }}
                    </button>
                @else
                    <button type="button" wire:click="valider" class="bouton-principal">
                        {{ __('formation.valider') }}
                    </button>
                @endif
            </div>
        </x-slot:action>
    @endif
</x-formation.coquille>