{{--
    Rendre un livrable (v2.0 §8).

    Trois modes présentés SUR UN PIED D'ÉGALITÉ : la photo d'une feuille manuscrite et
    l'enregistrement vocal ne sont pas des solutions de repli, ce sont les modes principaux
    pour une partie du public. La photo est d'ailleurs proposée en premier.
--}}
<x-formation.coquille :entete="$livrable->titre" :retour="$module ? route('formation.module', $module) : route('formation.accueil')">

    @php
        $audioConsigne = $livrable->{app()->getLocale() === 'ar' ? 'audio_ar_path' : 'audio_fr_path'};
        $audioConsigne = $audioConsigne ? \Illuminate\Support\Facades\Storage::disk('public')->url($audioConsigne) : null;
        $estAccepte = $rendu?->statut === $statutAccepte;
    @endphp

    @if (filled($consigne))
        <div class="carte flex items-start gap-3">
            <p class="min-w-0 flex-1 text-base leading-relaxed">{{ $consigne }}</p>
            <x-formation.ecouter :texte="$consigne" :audio="$audioConsigne" />
        </div>
    @endif

    @if ($livrable->modele_path)
        <a href="{{ route('formation.media', ['type' => 'modele', 'id' => $livrable->id]) }}"
           class="bouton-secondaire mt-3 w-full">{{ __('formation.livrable_modele') }}</a>
    @endif

    {{-- L'état du rendu précédent, s'il existe. --}}
    @if ($rendu)
        <div @class([
            'carte mt-4',
            'border-coaching/50 bg-coaching/10' => $estAccepte,
            'border-terrain/50 bg-terrain/10' => $rendu->statut === $statutReprise,
        ])>
            <p class="text-base font-extrabold">
                @if ($estAccepte)
                    ✓ {{ __('formation.livrable_accepte') }}
                @elseif ($rendu->statut === $statutReprise)
                    {{ __('formation.livrable_reprise') }}
                @else
                    {{ __('formation.livrable_attente') }}
                @endif
            </p>
            @if (filled($rendu->commentaire_formateur))
                <div class="mt-2 flex items-start gap-3">
                    <p class="min-w-0 flex-1 text-base leading-relaxed">{{ $rendu->commentaire_formateur }}</p>
                    <x-formation.ecouter :texte="$rendu->commentaire_formateur" />
                </div>
            @endif
            @if ($rendu->fichier_path)
                <a href="{{ route('formation.media', ['type' => 'rendu', 'id' => $rendu->id]) }}"
                   class="mt-3 inline-flex cible-tactile items-center text-base font-bold text-primaire underline underline-offset-4">
                    {{ $rendu->mode?->label() }}
                </a>
            @endif
        </div>
    @endif

    @if ($envoye)
        <p class="mt-4 rounded-2xl border-2 border-coaching/40 bg-coaching/10 p-4 text-center text-base font-bold">
            {{ __('formation.livrable_envoye') }}
        </p>
    @endif

    @unless ($estAccepte)
        {{-- Le choix du mode : trois grandes tuiles, aucune hiérarchie visuelle entre elles. --}}
        <div class="mt-6 grid grid-cols-3 gap-2">
            @foreach ([
                ['photo', '📷', __('formation.livrable_photo')],
                ['vocal', '🎤', __('formation.livrable_vocal')],
                ['fichier', '📎', __('formation.livrable_deposer')],
            ] as [$cle, $emoji, $libelle])
                <button type="button" wire:click="choisirMode('{{ $cle }}')"
                        @class([
                            'flex min-h-24 flex-col items-center justify-center gap-1 rounded-2xl border-2 p-2 text-center text-xs font-bold leading-tight',
                            'border-primaire bg-primaire/15 text-primaire' => $mode === $cle,
                            'border-bordure bg-surface-haute text-encre' => $mode !== $cle,
                        ])>
                    <span class="text-3xl" aria-hidden="true">{{ $emoji }}</span>
                    <span>{{ $libelle }}</span>
                </button>
            @endforeach
        </div>

        <div class="mt-4" wire:key="mode-{{ $mode }}">
            @if ($mode === 'vocal')
                {{-- Le dictaphone : appuyer, parler, arrêter. Le fichier produit rejoint le même
                     champ que les autres modes — donc la même validation côté serveur. --}}
                <div data-dictaphone class="carte text-center">
                    <p data-dictaphone-chrono class="text-3xl font-extrabold tabular-nums">00:00</p>

                    <button type="button" data-dictaphone-demarrer class="bouton-secondaire mx-auto mt-3">
                        🎤 {{ __('formation.livrable_vocal') }}
                    </button>
                    <button type="button" data-dictaphone-arreter class="bouton-secondaire mx-auto mt-3 hidden border-terrain text-terrain">
                        ⏹ {{ __('formation.enregistrement_arreter') }}
                    </button>

                    <audio data-dictaphone-lecture controls class="mt-3 hidden w-full"></audio>

                    <p data-dictaphone-erreur class="mt-3 hidden text-sm text-terrain">
                        {{ __('formation.voix_indisponible') }}
                    </p>

                    <input type="file" wire:model="fichier" accept="audio/*" class="sr-only">
                </div>
            @else
                <label class="bouton-secondaire w-full cursor-pointer">
                    <span>{{ $mode === 'photo' ? __('formation.livrable_photo') : __('formation.livrable_deposer') }}</span>
                    <input type="file" wire:model="fichier" class="sr-only"
                           @if ($mode === 'photo') accept="image/*" capture="environment" @endif>
                </label>
            @endif

            <div wire:loading wire:target="fichier" class="mt-2 text-center text-sm text-encre-doux">…</div>

            @error('fichier')
                <p class="mt-2 rounded-2xl border-2 border-terrain/50 bg-terrain/10 p-3 text-center text-sm font-bold">{{ $message }}</p>
            @enderror

            @if ($fichier)
                <p class="mt-2 text-center text-sm font-bold text-coaching">✓ {{ $fichier->getClientOriginalName() }}</p>
            @endif
        </div>
    @endunless

    <x-slot:action>
        @if ($estAccepte)
            <a href="{{ $module ? route('formation.module', $module) : route('formation.accueil') }}"
               wire:navigate class="bouton-principal">{{ __('formation.continuer') }}</a>
        @else
            <button type="button" wire:click="envoyer" class="bouton-principal"
                    wire:loading.attr="disabled" @disabled(! $fichier)>
                {{ __('formation.livrable_envoyer') }}
            </button>
        @endif
    </x-slot:action>
</x-formation.coquille>