{{--
    La notion, d'un bout à l'autre (v2.1 §1 et §2).

    Quatre temps, jamais deux à la fois. Le passage de vidéo, la question de compréhension, les
    questions de projet, puis ce que tout cela vient d'écrire.

    ⚠️ Les deux familles de questions ne se ressemblent pas, et c'est voulu jusque dans la couleur :
    la compréhension est violette, comme le reste de la formation ; le projet est corail, avec sa
    propre phrase d'ouverture. Un bénéficiaire qui cherche « la bonne réponse » à une question de
    projet invente ce qu'il croit qu'on attend — et ce mensonge poli finit dans son Business Plan.
--}}
<x-formation.coquille :entete="$notion->titre" :retour="route('formation.module', $notion->module)">

    {{-- ------------------------------------------------------- 1. Le passage --}}
    @if ($etape === 'video')
        @if (filled($notion->bilingue('intention')))
            <div class="carte mb-4 flex items-start gap-3">
                <p class="min-w-0 flex-1 text-base leading-relaxed">{{ $notion->bilingue('intention') }}</p>
                <x-formation.ecouter :texte="$notion->bilingue('intention')" />
            </div>
        @endif

        @if ($urlLecteur)
            <div class="cadre-video">
                <iframe src="{{ $urlLecteur }}#t={{ $notion->debut_secondes }},{{ $notion->fin_secondes }}"
                        title="{{ $notion->titre }}"
                        loading="lazy"
                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen></iframe>
            </div>
            @if ($notion->dureeSecondes() > 0)
                <p class="mt-2 text-center text-sm text-encre-doux">
                    {{ __('formation.passage_duree', ['minutes' => ceil($notion->dureeSecondes() / 60)]) }}
                </p>
            @endif
        @else
            <div class="carte text-center">
                <p class="text-base text-encre-doux">{{ __('formation.video_indisponible') }}</p>
            </div>
        @endif

        @if (filled($notion->bilingue('transcription')))
            <details class="carte mt-4">
                <summary class="cible-tactile flex items-center text-base font-bold">{{ __('formation.transcription') }}</summary>
                <div class="mt-2 max-h-96 overflow-y-auto text-base leading-relaxed">
                    {!! nl2br(e($notion->bilingue('transcription'))) !!}
                </div>
            </details>
        @endif

        <x-slot:action>
            <button type="button" wire:click="jaiCompris" class="bouton-principal">
                {{ __('formation.jai_compris') }}
            </button>
        </x-slot:action>
    @endif

    {{-- ------------------------------------------ 2. La question de compréhension --}}
    @if ($etape === 'comprehension' && $comprehension)
        <p class="mb-2 text-sm font-bold uppercase tracking-wide text-primaire">
            {{ __('formation.on_verifie') }}
        </p>

        <div class="carte flex items-start gap-3">
            <p class="min-w-0 flex-1 text-lg font-bold leading-relaxed">{{ $comprehension->enonce }}</p>
            <x-formation.ecouter :texte="$comprehension->enonce" />
        </div>

        <div class="mt-4 space-y-3">
            @foreach ($comprehension->options as $option)
                <button type="button"
                        wire:click="repondreComprehension({{ $option->id }})"
                        @disabled($comprehensionCorrigee)
                        @class([
                            'reponse',
                            'reponse-choisie' => $optionChoisie === $option->id && ! $comprehensionCorrigee,
                            'border-coaching bg-coaching/15' => $comprehensionCorrigee && $option->est_correcte,
                            'border-corail bg-corail/15' => $comprehensionCorrigee && $optionChoisie === $option->id && ! $option->est_correcte,
                        ])>
                    <span class="min-w-0 flex-1">{{ $option->texte }}</span>
                    @if ($comprehensionCorrigee && $option->est_correcte)
                        <span aria-hidden="true">✓</span>
                    @endif
                </button>
            @endforeach
        </div>

        {{-- Rater renvoie AU PASSAGE, jamais à un texte d'explication (§1). --}}
        @if ($comprehensionCorrigee && ! $comprehensionReussie)
            <div class="carte mt-4 border-2 border-corail/50 bg-corail/10">
                <p class="text-base font-bold">{{ __('formation.pas_encore') }}</p>
                <p class="mt-1 text-base leading-relaxed">{{ __('formation.on_revoit_le_passage') }}</p>
            </div>
        @endif

        <x-slot:action>
            @if (! $comprehensionCorrigee)
                <button type="button" wire:click="validerComprehension" @disabled($optionChoisie === null)
                        class="bouton-principal">
                    {{ __('formation.valider') }}
                </button>
            @elseif ($comprehensionReussie)
                <button type="button" wire:click="passerAuProjet" class="bouton-principal">
                    {{ __('formation.continuer') }}
                </button>
            @else
                <button type="button" wire:click="revoirLePassage" class="bouton-principal">
                    {{ __('formation.revoir_le_passage') }}
                </button>
            @endif
        </x-slot:action>
    @endif

    {{-- --------------------------------------------- 3. Les questions de projet --}}
    @if ($etape === 'projet' && $miseEnForme)
        @include('livewire.formation.partials.mise-en-forme')
    @elseif ($etape === 'projet' && $question)
        @include('livewire.formation.partials.question-projet')
    @endif

    {{-- ------------------------------------------------------- 4. Le dossier --}}
    @if ($etape === 'dossier')
        @include('livewire.formation.partials.notion-dossier')
    @endif

</x-formation.coquille>