{{--
    v4.17.0 §B2.6 — LE MÊME FIL, habillé pour la fiche Filament (gestion d'espace) : l'agence
    n'est plus muette dans le back-office. Classes Tailwind du thème, aucune feuille à charger.
--}}
<div class="space-y-3" wire:poll.10s="rafraichir">
    <div class="max-h-[28rem] space-y-2 overflow-y-auto rounded-xl border border-gray-200 bg-gray-50 p-3 dark:border-white/10 dark:bg-white/5">
        @forelse ($entrees as $entree)
            @if ($entree['jour'])
                <p class="py-1 text-center text-xs font-medium text-gray-400">{{ $entree['jour'] }}</p>
            @endif

            <div @class(['flex gap-2', 'flex-row-reverse' => $entree['mien'] && $entree['type'] === 'message'])>
                <span class="flex h-7 w-7 flex-none items-center justify-center rounded-full text-[10px] font-bold {{ $entree['cote'] === 'agence' ? 'bg-primary-100 text-primary-700 dark:bg-primary-500/20 dark:text-primary-300' : 'bg-amber-100 text-amber-800 dark:bg-amber-500/20 dark:text-amber-200' }}">{{ $entree['initiales'] }}</span>
                <div @class([
                    'max-w-[85%] rounded-xl px-3 py-2 text-sm shadow-sm',
                    'bg-amber-50 ring-1 ring-amber-200 dark:bg-amber-500/10 dark:ring-amber-500/30' => $entree['demande'],
                    'bg-green-50 ring-1 ring-green-200 dark:bg-green-500/10 dark:ring-green-500/30' => $entree['valide'],
                    'bg-white ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-white/10' => ! $entree['demande'] && ! $entree['valide'],
                ])>
                    @if ($entree['demande'] || $entree['valide'])
                        <span class="mb-1 inline-block rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide {{ $entree['demande'] ? 'bg-amber-200/60 text-amber-900 dark:bg-amber-500/30 dark:text-amber-100' : 'bg-green-200/60 text-green-900 dark:bg-green-500/30 dark:text-green-100' }}">{{ $entree['etiquette'] ?? '' }}</span>
                    @endif
                    @unless ($entree['suite'])
                        <p class="text-xs font-semibold text-gray-700 dark:text-gray-200">{{ $entree['moi'] ? 'Vous' : $entree['nom'] }} <span class="font-normal text-gray-400">· {{ $entree['type'] === 'message' ? $entree['relatif'] : $entree['heure'] }}</span></p>
                    @endunless
                    <p class="whitespace-pre-line text-gray-800 dark:text-gray-100">{{ $entree['texte'] }}</p>
                    @if ($entree['montrer_vu'] ?? false)
                        <p class="mt-1 text-right text-[10px] text-gray-400">Vu</p>
                    @endif
                </div>
            </div>
        @empty
            <p class="py-4 text-center text-sm text-gray-500">Rien n'a encore été échangé ici. Écrivez le premier message : {{ $interlocuteur }} le recevra aussitôt.</p>
        @endforelse
    </div>

    <form wire:submit="envoyer" class="flex items-end gap-2">
        <div class="flex-1">
            @if ($erreur)
                <p class="mb-1 text-xs text-danger-600">{{ $erreur }}</p>
            @endif
            <x-filament::input.wrapper>
                <textarea rows="2" maxlength="{{ $longueurMax }}" wire:model="texte" placeholder="Écrire à {{ $interlocuteur }}…"
                          class="fi-input block w-full border-none bg-transparent px-3 py-1.5 text-base outline-none sm:text-sm"></textarea>
            </x-filament::input.wrapper>
        </div>
        <x-filament::button type="submit" wire:loading.attr="disabled">Envoyer</x-filament::button>
    </form>
</div>