{{-- Bulle d'assistant conversationnel, JavaScript pur, sans dépendance :
     l'interface doit fonctionner sur toutes les pages, cacheables comprises.
     Les réponses viennent de POST /assistant ; l'historique vit dans le
     sessionStorage du visiteur, jamais en base. --}}
<div id="assistant-sme" class="fixed bottom-5 right-5 z-50 print:hidden">

    {{-- Panneau --}}
    <div data-panneau hidden
         class="absolute bottom-16 right-0 flex h-[28rem] w-[min(24rem,calc(100vw-2.5rem))] flex-col overflow-hidden rounded-2xl border border-line bg-paper shadow-2xl">

        <div class="flex items-center justify-between gap-2 border-b border-line bg-primary px-4 py-3">
            <div class="flex items-center gap-2.5">
                <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/15 text-base" aria-hidden="true">💬</span>
                <div>
                    <div class="text-sm font-bold text-white">Assistant SauverMonEntreprise</div>
                    <div class="text-[11px] text-white/70">Réponse immédiate, fondée sur le site</div>
                </div>
            </div>
            <button type="button" data-fermer aria-label="Fermer l'assistant"
                    class="rounded-md px-2 py-1 text-white/70 hover:bg-white/10 hover:text-white">✕</button>
        </div>

        @php
            // Thèmes d'entrée : le dirigeant qui ouvre l'assistant ne sait pas
            // toujours formuler sa question. Chaque thème est une question déjà
            // écrite, qu'il n'a plus qu'à cliquer.
            $themes = [
                'Je ne peux plus payer' => "Je n'arrive plus à payer mes dettes échues : que dois-je faire et dans quel délai ?",
                'Un créancier me poursuit' => "Un créancier me réclame une somme et menace de saisir : quels sont mes recours ?",
                'Quelle procédure ?' => "Quelle différence entre mandat ad hoc, conciliation, sauvegarde et redressement, et laquelle correspond à ma situation ?",
                'Ma caution' => "Je suis dirigeant et je me suis porté caution des dettes de ma société : que risque mon patrimoine personnel ?",
                'Mes salariés' => "Que deviennent mes salariés et leurs salaires si une procédure est ouverte ?",
                'Les délais' => "Quels sont les délais à ne pas manquer quand une entreprise est en difficulté ?",
                'Après la liquidation' => "Ma société a été liquidée : quelles dettes me suivent et puis-je recréer une activité ?",
            ];
            $tel = (string) config('identite.editeur.telephone');
            $whatsapp = (string) config('identite.editeur.whatsapp');
            $mail = (string) config('identite.editeur.email');
        @endphp

        <div data-fil class="flex-1 space-y-3 overflow-y-auto px-4 py-3">
            <div data-accueil>
                <div class="rounded-lg border border-line bg-surface px-3 py-2.5 text-[13.5px] leading-relaxed text-ink">
                    Bonjour 👋 Décrivez votre situation en quelques mots : je réponds à partir du glossaire,
                    des guides et des textes du Livre&nbsp;VI, et je vous indique la marche à suivre.
                </div>

                {{-- Thèmes : pour qui ne sait pas par quel bout commencer. --}}
                <div class="mt-2.5 flex flex-wrap gap-1.5">
                    @foreach ($themes as $libelle => $question)
                        <button type="button" data-theme="{{ $question }}"
                                class="rounded-full border border-line bg-paper px-3 py-1.5 text-left text-[12.5px] text-ink transition hover:border-rep-blue hover:text-rep-blue">
                            {{ $libelle }}
                        </button>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Contacts humains, sur une seule ligne : l'assistant informe, un
             professionnel décide. WhatsApp en plein pour le repérage immédiat. --}}
        <div class="border-t border-line bg-paper px-2.5 py-2">
            <div class="flex items-stretch gap-1.5">
                @if ($whatsapp !== '')
                    <a href="https://wa.me/{{ preg_replace('/\D/', '', $whatsapp) }}" target="_blank" rel="noopener noreferrer"
                       class="inline-flex flex-1 items-center justify-center gap-1 rounded-md bg-ok px-2 py-2 text-[12px] font-semibold text-white no-underline hover:opacity-90">
                        <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="currentColor"><path d="M12 4a8 8 0 0 0-6.8 12.2L4 21l4.9-1.3A8 8 0 1 0 12 4Zm0 1.6a6.4 6.4 0 1 1-3.3 11.9l-.4-.2-2.1.6.6-2-.3-.4A6.4 6.4 0 0 1 12 5.6Zm-2.2 3c-.2 0-.5.1-.7.4-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.2 5 4.3 2.4.8 2.9.6 3.4.6.6 0 1.8-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.1-.3-.2-.6-.4l-2-1c-.3-.1-.5-.1-.7.1l-.9 1.1c-.2.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5-.9-.8-1.5-1.7-1.7-2-.2-.3 0-.5.1-.6l.5-.6.3-.5c.1-.2 0-.4 0-.5l-.9-2.2c-.2-.5-.5-.5-.7-.5h-.5Z"/></svg>
                        WhatsApp
                    </a>
                @endif
                <a href="mailto:{{ $mail }}?subject=Question%20depuis%20l%27assistant"
                   class="inline-flex flex-1 items-center justify-center gap-1 rounded-md border border-line px-2 py-2 text-[12px] font-semibold text-ink no-underline hover:border-rep-blue hover:text-rep-blue">
                    <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 6h15v12h-15z"/><path d="m4.5 7 7.5 5.5L19.5 7"/></svg>
                    Écrire
                </a>
                @if ($tel !== '')
                    <a href="tel:{{ str_replace(' ', '', $tel) }}"
                       class="inline-flex flex-1 items-center justify-center gap-1 rounded-md border border-line px-2 py-2 text-[12px] font-semibold text-ink no-underline hover:border-rep-blue hover:text-rep-blue">
                        <svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 4h3l1.5 3.5-2 1.5a11 11 0 0 0 5 5l1.5-2L19 13.5v3a1.5 1.5 0 0 1-1.6 1.5A13.5 13.5 0 0 1 5 6.1 1.5 1.5 0 0 1 6.5 4Z"/></svg>
                        Appeler
                    </a>
                @endif
            </div>
            <p class="mt-1 text-center text-[10px] text-muted">
                Réponses indicatives ·
                <a href="{{ route('avocats') }}" class="text-rep-blue no-underline hover:underline">parler à un professionnel →</a>
            </p>
        </div>

        <form data-formulaire class="border-t border-line bg-surface px-3 py-2.5">
            <div class="flex gap-2">
                <label for="assistant-q" class="sr-only">Votre question</label>
                <input type="text" id="assistant-q" maxlength="1000" autocomplete="off"
                       placeholder="Votre question…"
                       class="w-full rounded-md border border-line bg-paper px-3 py-2 text-[13.5px] text-ink focus:border-rep-blue focus:outline-none">
                {{-- Dictée vocale : reconnaissance du navigateur, aucune donnée
                     envoyée à un service tiers par le site. Le bouton reste
                     caché si le navigateur ne sait pas le faire. --}}
                <button type="button" data-micro hidden aria-label="Dicter votre question" title="Dicter votre question"
                        class="rounded-md border border-line px-2.5 py-2 text-muted hover:border-rep-blue hover:text-rep-blue">
                    <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="9.5" y="3.5" width="5" height="10" rx="2.5"/><path d="M6 11a6 6 0 0 0 12 0M12 17v3.5"/>
                    </svg>
                </button>
                <button type="submit" data-envoyer
                        class="rounded-md bg-primary px-3.5 py-2 text-sm font-semibold text-white hover:opacity-90 disabled:opacity-50">→</button>
            </div>
            <div class="mt-1.5 flex items-center justify-between text-[10.5px] text-muted">
                <span>Information générale, pas un conseil juridique. Rien n'est enregistré.</span>
                <button type="button" data-effacer hidden class="hover:text-rep-red">Effacer</button>
            </div>
        </form>
    </div>

    {{-- Bouton flottant --}}
    <button type="button" data-bulle aria-expanded="false" aria-label="Ouvrir l'assistant du site"
            class="lift flex h-14 w-14 items-center justify-center rounded-full border border-line bg-primary text-white shadow-lg">
        <span data-icone class="text-xl leading-none" aria-hidden="true">💬</span>
    </button>

    <script>
        (function () {
            var racine = document.getElementById('assistant-sme');
            var panneau = racine.querySelector('[data-panneau]');
            var bulle = racine.querySelector('[data-bulle]');
            var icone = racine.querySelector('[data-icone]');
            var fil = racine.querySelector('[data-fil]');
            var accueil = racine.querySelector('[data-accueil]');
            var formulaire = racine.querySelector('[data-formulaire]');
            var champ = racine.querySelector('#assistant-q');
            var boutonEnvoyer = racine.querySelector('[data-envoyer]');
            var boutonEffacer = racine.querySelector('[data-effacer]');
            var occupe = false;

            var messages = [];
            try { messages = JSON.parse(sessionStorage.getItem('sme-assistant') || '[]'); } catch (e) {}

            function enregistrer() {
                try { sessionStorage.setItem('sme-assistant', JSON.stringify(messages.slice(-20))); } catch (e) {}
            }

            function bulleMessage(m) {
                var div = document.createElement('div');
                div.className = m.role === 'user'
                    ? 'ml-8 rounded-lg bg-rep-blue/10 px-3 py-2 text-[13.5px] leading-relaxed text-ink'
                    : 'mr-4 rounded-lg border border-line bg-surface px-3 py-2.5 text-[13.5px] leading-relaxed text-ink';
                div.innerHTML = m.html;
                return div;
            }

            function rafraichir() {
                fil.querySelectorAll('[data-message]').forEach(function (el) { el.remove(); });
                accueil.hidden = messages.length > 0;
                boutonEffacer.hidden = messages.length === 0;
                messages.forEach(function (m) {
                    var el = bulleMessage(m);
                    el.setAttribute('data-message', '');
                    fil.appendChild(el);
                });
                fil.scrollTop = fil.scrollHeight;
            }

            function basculer(ouvrir) {
                var visible = typeof ouvrir === 'boolean' ? ouvrir : panneau.hidden;
                panneau.hidden = ! visible;
                bulle.setAttribute('aria-expanded', visible ? 'true' : 'false');
                icone.textContent = visible ? '✕' : '💬';
                if (visible) { rafraichir(); champ.focus(); }
            }

            // Thèmes : un clic pose la question déjà rédigée.
            racine.querySelectorAll('[data-theme]').forEach(function (b) {
                b.addEventListener('click', function () {
                    champ.value = b.getAttribute('data-theme');
                    formulaire.requestSubmit ? formulaire.requestSubmit() : formulaire.dispatchEvent(new Event('submit', { cancelable: true }));
                });
            });

            // Dictée vocale, si le navigateur la propose (Chrome, Edge, Safari).
            var micro = racine.querySelector('[data-micro]');
            var Reco = window.SpeechRecognition || window.webkitSpeechRecognition;
            if (Reco && micro) {
                var reco = new Reco();
                reco.lang = 'fr-FR';
                reco.interimResults = true;
                reco.continuous = false;
                var ecoute = false;
                var socle = '';

                micro.hidden = false;

                function etatMicro(actif) {
                    ecoute = actif;
                    micro.classList.toggle('border-rep-red', actif);
                    micro.classList.toggle('text-rep-red', actif);
                    micro.classList.toggle('animate-pulse', actif);
                    micro.setAttribute('aria-label', actif ? 'Arrêter la dictée' : 'Dicter votre question');
                }

                micro.addEventListener('click', function () {
                    if (ecoute) { reco.stop(); return; }
                    socle = champ.value ? champ.value.trim() + ' ' : '';
                    try { reco.start(); etatMicro(true); } catch (e) {}
                });

                reco.addEventListener('result', function (e) {
                    var texte = '';
                    for (var i = e.resultIndex; i < e.results.length; i++) texte += e.results[i][0].transcript;
                    champ.value = (socle + texte).slice(0, 1000);
                });
                reco.addEventListener('end', function () { etatMicro(false); champ.focus(); });
                reco.addEventListener('error', function () { etatMicro(false); });
            }

            bulle.addEventListener('click', function () { basculer(); });
            racine.querySelector('[data-fermer]').addEventListener('click', function () { basculer(false); });
            document.addEventListener('keydown', function (e) { if (e.key === 'Escape') basculer(false); });
            boutonEffacer.addEventListener('click', function () { messages = []; enregistrer(); rafraichir(); });

            formulaire.addEventListener('submit', function (e) {
                e.preventDefault();
                var question = champ.value.trim();
                if (! question || occupe) return;

                var echappe = question.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                messages.push({ role: 'user', contenu: question, html: echappe });
                champ.value = '';
                occupe = true;
                boutonEnvoyer.disabled = true;
                rafraichir();

                var attente = document.createElement('div');
                attente.className = 'mr-4 rounded-lg border border-line bg-surface px-3 py-2.5 text-[13px] text-muted animate-pulse';
                attente.textContent = "L'assistant consulte les contenus du site…";
                attente.setAttribute('data-message', '');
                fil.appendChild(attente);
                fil.scrollTop = fil.scrollHeight;

                var historique = messages.slice(0, -1).slice(-8).map(function (m) {
                    return { role: m.role, contenu: m.contenu };
                });

                fetch('{{ route('assistant.repondre') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify({ question: question, historique: historique }),
                }).then(function (r) {
                    if (r.status === 429) {
                        return { html: "Un instant : trop de questions d'un coup. Réessayez dans une minute.", reponse: '' };
                    }
                    if (! r.ok) throw new Error('http ' + r.status);
                    return r.json();
                }).then(function (d) {
                    messages.push({ role: 'assistant', contenu: d.reponse || '', html: d.html || d.reponse });
                }).catch(function () {
                    messages.push({ role: 'assistant', contenu: '', html: 'Le service est momentanément indisponible. Vous pouvez utiliser la <a href="/recherche" class="link-blue">recherche du site</a> en attendant.' });
                }).finally(function () {
                    occupe = false;
                    boutonEnvoyer.disabled = false;
                    enregistrer();
                    rafraichir();
                });
            });
        })();
    </script>
</div>