{{--
    L'écran de lecture (v2.0 §3, §5 et §9).

    Trois publics, un seul écran : qui ne lit pas écoute la consigne en darija ; qui lit vite
    déplie la transcription et saute au quiz ; tout le monde retrouve sa position, même trois
    semaines plus tard.

    L'attribut data-battement-url arme le battement du lecteur : un signal toutes les trente
    secondes, uniquement si la lecture est active ET l'onglet visible. Le client n'envoie que
    sa position — le serveur décide seul de ce qui peut être crédité.
--}}
<x-formation.coquille :entete="$sequence->titre" :retour="route('formation.module', $sequence->module)">

    <div data-battement-url="{{ route('formation.battement', $sequence) }}"
         data-battement-secondes="{{ $battementSecondes }}"
         data-reprise="{{ $reprise }}">

        @if ($sequence->type?->value === 'video')
            @if ($urlLecteur)
                <div class="cadre-video">
                    <iframe src="{{ $urlLecteur }}#t={{ $reprise }}"
                            title="{{ $sequence->titre }}"
                            loading="lazy"
                            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen></iframe>
                </div>

                {{-- Ce que le compteur a réellement retenu, en direct. Volontairement discret :
                     c'est une information de confiance, pas un objectif à atteindre. --}}
                <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-bordure">
                    <div data-jauge-sequence class="h-full rounded-full bg-primaire transition-[inline-size]"
                         style="inline-size: {{ $progression && $progression->secondes_mesurees > 0
                             ? min(100, $progression->secondes_mesurees / max(1, $sequence->plafondSecondes()) * 100)
                             : 0 }}%"></div>
                </div>
            @else
                <div class="carte text-center">
                    <p class="text-base text-encre-doux">{{ __('formation.video_indisponible') }}</p>
                </div>
            @endif
        @elseif ($sequence->type?->value === 'audio' && $audio)
            <audio controls preload="none" src="{{ $audio }}" class="w-full"></audio>
        @elseif ($sequence->type?->value === 'document')
            <a href="{{ route('formation.media', ['type' => 'sequence', 'id' => $sequence->id]) }}"
               class="bouton-secondaire w-full" wire:click="marquerLue">
                {{ __('formation.document_ouvrir') }}
            </a>
        @endif
    </div>

    {{-- La consigne, avec sa voix. Le texte reste visible à côté : qui lit, lit. --}}
    @if (filled($contenu))
        <div class="carte mt-4 flex items-start gap-3">
            <div class="prose min-w-0 flex-1 text-base leading-relaxed">{!! nl2br(e($contenu)) !!}</div>
            <x-formation.ecouter :texte="$contenu" :audio="$audio" />
        </div>
    @elseif ($audio && $sequence->type?->value !== 'audio')
        <div class="mt-4 flex justify-center">
            <x-formation.ecouter :texte="$sequence->titre" :audio="$audio" :etendu="true" />
        </div>
    @endif

    {{-- La voie rapide : transcription dépliable pour qui préfère lire (§3). --}}
    @if (filled($transcription))
        <button type="button" wire:click="basculerTranscription"
                class="bouton-secondaire mt-4 w-full">
            {{ $transcriptionOuverte ? __('formation.transcription_masquer') : __('formation.transcription') }}
        </button>

        @if ($transcriptionOuverte)
            <div class="carte mt-2 max-h-96 overflow-y-auto text-base leading-relaxed">
                {!! nl2br(e($transcription)) !!}
            </div>
        @endif
    @endif

    <p data-sequence-terminee
       @class(['mt-4 rounded-2xl border-2 border-coaching/40 bg-coaching/10 p-3 text-center text-base font-bold', 'hidden' => ! ($progression?->terminee)])>
        ✓ {{ __('formation.termine') }}
    </p>

    <x-slot:action>
        {{-- Un seul bouton : la suite du chemin. Pour une séquence texte ou document, il vaut
             aussi accusé de lecture — la lecture d'un texte ne se mesure pas honnêtement, on
             ne crédite donc aucune heure, on note seulement le passage. --}}
        <a href="{{ $apres['url'] }}" wire:navigate class="bouton-principal"
           @unless ($sequence->type?->estChronometrable()) wire:click="marquerLue" @endunless>
            {{ $apres['libelle'] }}
            <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="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </a>
    </x-slot:action>
</x-formation.coquille>