{{--
    v4.17.1 §C — LA BANNIÈRE D'INSTALLATION : rendre l'installation évidente tant qu'on n'est pas
    installé.

    Sur iPhone, la barre du navigateur en bas et les notifications n'existent que dans
    l'application INSTALLÉE (standalone). Rien à retirer côté code : on le dit, en tête de
    l'accueil, avec les gestes à portée de pouce.

     - affichée SEULEMENT hors standalone (`display-mode: standalone` / `navigator.standalone`) ;
     - « Comment ? » déclenche l'invite native sur Android/Chrome (`beforeinstallprompt`) quand
       elle existe, sinon déroule les gestes iPhone + Android ;
     - la croix mémorise la fermeture PAR APPAREIL (`localStorage`, en try/catch) pour quatorze
       jours — sauf `:rappel="true"` (l'écran Compte), où elle se propose toujours.

    Rendue MASQUÉE (`hidden`) et révélée par le script : sans JavaScript, ou dans l'app installée,
    rien n'apparaît. Le script est délégué, posé une fois par page (`data-navigate-once`).
--}}
@props(['rappel' => false])
<div class="install" hidden data-banniere-installation{{ $rappel ? ' data-rappel' : '' }}>
    <div class="install-ligne">
        <span class="ico" aria-hidden="true"><x-espace-client-app.icone nom="telephone" :taille="19" /></span>
        <span class="tx">
            <span class="tt">Installez l'application</span>
            <span class="mm">Plein écran, sans la barre du navigateur, et les notifications.</span>
        </span>
        <button type="button" class="go" data-installer-comment aria-expanded="false">Comment ?</button>
        @unless ($rappel)
            <button type="button" class="x" data-installer-fermer aria-label="Fermer">
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
        @endunless
    </div>
    <div class="install-etapes" data-installer-etapes hidden>
        <x-espace-client-app.etapes-installation />
    </div>
</div>

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

        var CLE = 'espace-client-installation-fermee';
        var QUATORZE_JOURS = 14 * 24 * 60 * 60 * 1000;
        var invite = null;

        function installee() {
            try {
                return (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches)
                    || window.navigator.standalone === true;
            } catch (e) { return false; }
        }

        function plateforme() {
            var ua = navigator.userAgent || '';
            if (/iPhone|iPad|iPod/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) return 'ios';
            if (/Android/i.test(ua)) return 'android';
            return 'autre';
        }

        function fermeeRecemment() {
            try {
                var quand = parseInt(localStorage.getItem(CLE) || '0', 10);
                return quand > 0 && (Date.now() - quand) < QUATORZE_JOURS;
            } catch (e) { return false; }
        }

        function memoriserLaFermeture() {
            try { localStorage.setItem(CLE, String(Date.now())); } catch (e) {}
        }

        function ordonnerLesEtapes(bloc) {
            var p = plateforme();
            document.documentElement.setAttribute('data-plateforme', p);
            bloc.querySelectorAll('[data-etapes-installation]').forEach(function (etapes) {
                var mienne = etapes.querySelector('[data-plateforme-etape="' + p + '"]');
                if (mienne) { etapes.insertBefore(mienne, etapes.firstChild); mienne.classList.add('mienne'); }
            });
        }

        function afficher() {
            document.querySelectorAll('[data-banniere-installation]').forEach(function (bloc) {
                if (installee()) { bloc.hidden = true; return; }
                if (!bloc.hasAttribute('data-rappel') && fermeeRecemment()) { bloc.hidden = true; return; }
                ordonnerLesEtapes(bloc);
                bloc.hidden = false;
            });
        }

        window.addEventListener('beforeinstallprompt', function (e) {
            e.preventDefault();
            invite = e;
        });

        document.addEventListener('click', function (e) {
            var fermer = e.target.closest('[data-installer-fermer]');
            if (fermer) {
                var bloc = fermer.closest('[data-banniere-installation]');
                memoriserLaFermeture();
                if (bloc) bloc.hidden = true;
                return;
            }

            var comment = e.target.closest('[data-installer-comment]');
            if (comment) {
                var conteneur = comment.closest('[data-banniere-installation]');
                var etapes = conteneur ? conteneur.querySelector('[data-installer-etapes]') : null;

                // Android/Chrome : l'invite native, quand le navigateur l'a proposée.
                if (invite && typeof invite.prompt === 'function') {
                    var courante = invite; invite = null;
                    courante.prompt();
                    if (courante.userChoice && typeof courante.userChoice.then === 'function') {
                        courante.userChoice.then(function () { afficher(); });
                    }
                    return;
                }

                if (etapes) {
                    etapes.hidden = !etapes.hidden;
                    comment.setAttribute('aria-expanded', etapes.hidden ? 'false' : 'true');
                    comment.textContent = etapes.hidden ? 'Comment ?' : 'Masquer';
                }
            }
        });

        // Les gestes écrits ailleurs (l'écran Compte) reçoivent aussi l'ordre de la plateforme.
        document.addEventListener('DOMContentLoaded', function () { afficher(); ordonnerLesEtapes(document); });
        document.addEventListener('livewire:navigated', function () { afficher(); ordonnerLesEtapes(document); });
        if (document.readyState !== 'loading') { afficher(); ordonnerLesEtapes(document); }
        window.matchMedia && window.matchMedia('(display-mode: standalone)').addEventListener && window.matchMedia('(display-mode: standalone)').addEventListener('change', afficher);
    })();
</script>