{{--
    v4.17.0 §B2 — LE FIL DE DISCUSSION, habillage de l'app (client et Studio).

    Le fil est rendu par le serveur ; le JavaScript nu ne fait que trois choses — faire grandir la
    zone de texte, envoyer sur Entrée (ordinateur), et poser tout de suite la bulle du message
    qu'on vient d'envoyer (optimiste) avant que le serveur la confirme. `wire:poll.10s` ne touche
    que CE composant : jamais la page entière.
--}}
<div class="fil" data-fil data-cote="{{ $cote }}" wire:poll.10s="rafraichir">
    <p class="slabel">Conversation</p>

    <div class="fil-liste" data-fil-liste>
        @forelse ($entrees as $entree)
            @if ($entree['jour'])
                <div class="daysep">{{ $entree['jour'] }}</div>
            @endif

            @if ($entree['type'] === 'evenement')
                <div class="remark {{ $entree['mien'] ? 'mien' : '' }}" wire:key="ev-{{ $loop->index }}">
                    <span class="rav {{ $entree['cote'] === 'agence' ? 'a' : 'c' }}" aria-hidden="true">{{ $entree['initiales'] }}</span>
                    <span class="rb {{ $entree['demande'] ? 'dem' : '' }} {{ $entree['valide'] ? 'ok' : '' }}">
                        @if ($entree['demande'] || $entree['valide'])
                            <span class="rtag">{{ $entree['etiquette'] ?? ($entree['demande'] ? 'Modification demandée' : 'Validé') }}</span>
                        @endif
                        <span class="who">{{ $entree['moi'] ? 'Vous' : $entree['nom'] }} <span>· {{ $entree['heure'] }}</span></span>
                        <span class="tx">{{ $entree['texte'] }}</span>
                    </span>
                </div>
            @else
                <div class="remark msg {{ $entree['mien'] ? 'mien' : '' }} {{ $entree['suite'] ? 'suite' : '' }}" wire:key="msg-{{ $entree['id'] }}">
                    <span class="rav {{ $entree['cote'] === 'agence' ? 'a' : 'c' }}" aria-hidden="true">{{ $entree['initiales'] }}</span>
                    <span class="rb">
                        @unless ($entree['suite'])
                            <span class="who">{{ $entree['moi'] ? 'Vous' : $entree['nom'] }} <span>· {{ $entree['relatif'] }}</span></span>
                        @endunless
                        <span class="tx">{{ $entree['texte'] }}</span>
                        @if ($entree['montrer_vu'] ?? false)
                            <span class="vu">Vu</span>
                        @endif
                    </span>
                </div>
            @endif
        @empty
            <div class="vide" data-fil-vide>Rien n'a encore été échangé ici. Écrivez le premier message : {{ $interlocuteur }} le recevra aussitôt.</div>
        @endforelse
    </div>

    {{-- LE COMPOSEUR : toujours visible, collé au-dessus de la barre du bas au téléphone. --}}
    <form class="composeur" wire:submit="envoyer" data-fil-composeur>
        @if ($erreur)
            <div class="alerte mauvais" role="alert">{{ $erreur }}</div>
        @endif
        <div class="composeur-ligne">
            <label class="hide" for="fil-texte-{{ $sujetType }}-{{ $sujetId }}">Votre message</label>
            <textarea id="fil-texte-{{ $sujetType }}-{{ $sujetId }}" rows="1" maxlength="{{ $longueurMax }}" wire:model="texte"
                      placeholder="Écrire à {{ $interlocuteur }}…" data-fil-texte></textarea>
            <button type="submit" class="iconsend" aria-label="Envoyer" data-fil-envoyer disabled>
                <x-espace-client-app.icone nom="envoyer" :taille="18" />
            </button>
        </div>
        <p class="help" data-fil-aide>Entrée pour envoyer · Maj+Entrée pour un retour à la ligne</p>
    </form>

    <script data-navigate-once>
        (function () {
            if (window.__filInitialise) return;
            window.__filInitialise = true;

            function bureau() { return window.matchMedia('(min-width: 1024px)').matches; }

            function ajuster(zone) {
                zone.style.height = 'auto';
                zone.style.height = Math.min(zone.scrollHeight, 180) + 'px';
                var bouton = zone.closest('[data-fil-composeur]').querySelector('[data-fil-envoyer]');
                if (bouton) bouton.disabled = zone.value.trim() === '';
            }

            function versLeBas(fil) {
                var liste = fil.querySelector('[data-fil-liste]');
                if (liste) liste.scrollTop = liste.scrollHeight;
                var dernier = liste ? liste.lastElementChild : null;
                if (dernier && typeof dernier.scrollIntoView === 'function') dernier.scrollIntoView({ block: 'nearest' });
            }

            function echapper(texte) {
                return texte.replace(/[&<>"']/g, function (c) { return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]; });
            }

            // La bulle OPTIMISTE : posée tout de suite, remplacée par le rendu du serveur.
            function poserLaBulle(fil, texte) {
                var liste = fil.querySelector('[data-fil-liste]');
                if (!liste) return;
                var vide = liste.querySelector('[data-fil-vide]');
                if (vide) vide.remove();
                var bulle = document.createElement('div');
                bulle.className = 'remark msg mien optimiste';
                bulle.innerHTML = '<span class="rav ' + (fil.dataset.cote === 'agence' ? 'a' : 'c') + '" aria-hidden="true">…</span>'
                    + '<span class="rb"><span class="who">Vous <span>· envoi…</span></span><span class="tx">' + echapper(texte) + '</span></span>';
                liste.appendChild(bulle);
                versLeBas(fil);
            }

            document.addEventListener('input', function (e) {
                if (e.target.matches('[data-fil-texte]')) ajuster(e.target);
            });

            document.addEventListener('keydown', function (e) {
                if (!e.target.matches('[data-fil-texte]')) return;
                if (e.key === 'Enter' && !e.shiftKey && bureau()) {
                    e.preventDefault();
                    var formulaire = e.target.closest('[data-fil-composeur]');
                    if (formulaire && e.target.value.trim() !== '') formulaire.requestSubmit();
                }
            });

            document.addEventListener('submit', function (e) {
                var formulaire = e.target.closest('[data-fil-composeur]');
                if (!formulaire) return;
                var zone = formulaire.querySelector('[data-fil-texte]');
                var fil = formulaire.closest('[data-fil]');
                if (zone && fil && zone.value.trim() !== '') {
                    poserLaBulle(fil, zone.value.trim());
                    // Le composant reçoit le texte par wire:model ; on vide l'écran tout de suite.
                    setTimeout(function () { zone.value = ''; ajuster(zone); zone.focus(); }, 0);
                }
            });

            function initialiser() {
                document.querySelectorAll('[data-fil]').forEach(function (fil) {
                    var zone = fil.querySelector('[data-fil-texte]');
                    if (zone) ajuster(zone);
                    var aide = fil.querySelector('[data-fil-aide]');
                    if (aide) aide.hidden = !bureau();
                    versLeBas(fil);
                });
            }

            document.addEventListener('DOMContentLoaded', initialiser);
            document.addEventListener('livewire:navigated', initialiser);
            if (document.readyState !== 'loading') initialiser();

            // Après chaque envoi confirmé par le serveur : on descend au dernier message.
            document.addEventListener('fil-envoye', function () {
                document.querySelectorAll('[data-fil]').forEach(versLeBas);
            });
            if (window.Livewire && typeof window.Livewire.on === 'function') {
                window.Livewire.on('fil-envoye', function () { document.querySelectorAll('[data-fil]').forEach(versLeBas); });
            } else {
                document.addEventListener('livewire:init', function () {
                    window.Livewire.on('fil-envoye', function () { document.querySelectorAll('[data-fil]').forEach(versLeBas); });
                });
            }
        })();
    </script>
</div>