{{-- v4.17.0 §A2.8 — LE COMPTE, écran `data-screen="compte"` de la maquette. Le bloc des
     notifications est le MÊME script que le client (`window.soclePush`), avec « installer d'abord » sur iPhone. --}}
<x-studio.coquille :espace="$espace" :espaces="$espaces" :badges="$badges" :onglet="$onglet" :titre="$titre" :contexte="$contexte">
    <section class="screen">
        <h1 class="h1">Mon compte</h1>
        <p class="sub">Vos réglages sur cet appareil.</p>

        <div class="acct">
            <div class="av" aria-hidden="true">{{ \App\Support\EspaceClient\AppClient::initiales(auth()->user()->name) }}</div>
            <div><div class="nm">{{ auth()->user()->name }}</div><div class="rl">{{ $role }} · {{ $nombre }} espace{{ $nombre > 1 ? 's' : '' }}</div></div>
        </div>

        <div class="opt" data-push>
            <span class="oic"><x-espace-client-app.icone nom="bulle" :taille="17" /></span>
            <div class="ob"><div class="on">Notifications</div><div class="om">Décisions, demandes, réunions, messages — sur cet appareil</div></div>
            <div class="oact">
                <span class="oetat" data-push-etat>…</span>
                <button type="button" class="btn primary petit hide" data-push-activer>Activer</button>
                <button type="button" class="btn mod petit hide" data-push-desactiver>Se désabonner</button>
            </div>
            <p class="onote" data-push-note>Elles <b>doublent</b> la cloche et l'e-mail. Sur iPhone, elles n'existent qu'une fois l'application <b>ajoutée à l'écran d'accueil</b>.</p>
        </div>

        {{-- v4.17.1 §C — Le rappel d'installation, toujours proposé ici hors de l'app installée. --}}
        <x-espace-client-app.banniere-installation :rappel="true" />
        <div class="opt" data-installer>
            <span class="oic"><x-espace-client-app.icone nom="telephone" :taille="17" /></span>
            <div class="ob"><div class="on">Installer l'app</div><div class="om">Sur l'écran d'accueil : plein écran, et les notifications</div></div>
            <div class="oact"><button type="button" class="btn primary petit hide" data-installer-bouton>Installer</button></div>
            {{-- v4.17.1 §D — iPhone ET Android, toujours écrits ; la plateforme détectée en premier. --}}
            <x-espace-client-app.etapes-installation />
        </div>

        <div class="opt">
            <span class="oic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg></span>
            <div class="ob"><div class="on">Mode sombre</div><div class="om">Suit le réglage de l'appareil, sauf choix contraire</div></div>
            <button type="button" class="toggle" role="switch" aria-checked="false" aria-label="Mode sombre" data-bascule-theme data-toggle-theme></button>
        </div>

        @if ($lienBackOffice)
            <a class="opt" href="{{ $lienBackOffice }}" target="_blank" rel="noopener">
                <span class="oic"><x-espace-client-app.icone nom="grille" :taille="17" /></span>
                <div class="ob"><div class="on">Le back-office complet</div><div class="om">Quantités, identité visuelle, équipe, envois…</div></div>
                <span class="chev"><x-espace-client-app.icone nom="externe" :taille="18" /></span>
            </a>
        @endif

        <form method="POST" action="{{ route('studio.deconnexion') }}">
            @csrf
            <button type="submit" class="linkbtn">Se déconnecter</button>
        </form>
    </section>

    {{-- v4.17.3 §B2 — L'INITIALISATION QUI SURVIT À LA NAVIGATION : le jumeau exact de l'écran
         Compte du client. Le script s'exécute UNE fois (`data-navigate-once` + drapeau), les
         gestes sont délégués au document, et l'état de l'écran est repeint sur
         `livewire:navigated` — un écouteur posé sur un bouton de ce rendu-là serait mort au
         retour sur l'écran. --}}
    <script data-navigate-once>
        (function () {
            if (window.__studioCompteInitialise) return;
            window.__studioCompteInitialise = true;

            var mots = { actif: 'Activées', inactif: 'Désactivées', refuse: 'Refusées', 'installer-dabord': 'Après installation', 'non-supporte': 'Indisponibles ici', chargement: '…' };
            var notes = {
                'installer-dabord': 'Installez d\'abord l\'application sur votre écran d\'accueil (Partager, puis « Sur l\'écran d\'accueil »), ouvrez-la depuis là, puis activez les notifications.',
                refuse: 'Les notifications ont été refusées pour ce site dans les réglages de votre navigateur. Réautorisez-les puis rechargez cette page.',
                'non-supporte': 'Ce navigateur ne prend pas en charge les notifications.',
            };

            // `beforeinstallprompt` arrive UNE fois, souvent avant l'ouverture de cet écran : on le
            // retient à la racine du script, jamais dans un rendu.
            var invite = null;

            function bloc() { return document.querySelector('[data-push]'); }
            function montrer(b, v) { if (b) b.classList.toggle('hide', !v); }
            function boutonDInstallation() {
                var installer = document.querySelector('[data-installer]');
                return installer ? installer.querySelector('[data-installer-bouton]') : null;
            }
            function ecrireLaNote(texte) {
                var note = bloc() ? bloc().querySelector('[data-push-note]') : null;
                if (note) note.textContent = texte;
            }

            async function rafraichir() {
                var pousse = bloc();
                if (!pousse) return;
                var etat = pousse.querySelector('[data-push-etat]');
                var note = pousse.querySelector('[data-push-note]');
                if (!etat) return;

                // v4.17.1 §B — La brique pas encore là ? On attend qu'elle se dise prête, on ne
                // conclut JAMAIS « non supporté » sur une absence transitoire.
                if (!window.soclePush) {
                    etat.textContent = mots.chargement;
                    window.addEventListener('socle:push-pret', rafraichir, { once: true });
                    return;
                }
                var valeur = await window.soclePush.etat();
                etat.textContent = mots[valeur] || valeur;
                etat.classList.toggle('actif', valeur === 'actif');
                montrer(pousse.querySelector('[data-push-activer]'), valeur === 'inactif');
                montrer(pousse.querySelector('[data-push-desactiver]'), valeur === 'actif');
                if (note && notes[valeur]) note.textContent = notes[valeur];
            }

            function sombre() {
                var racine = document.documentElement;
                return racine.getAttribute('data-theme') === 'dark' || (!racine.getAttribute('data-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
            }

            function accorderLaBascule() {
                var bascule = document.querySelector('[data-toggle-theme]');
                if (bascule) bascule.setAttribute('aria-checked', sombre() ? 'true' : 'false');
            }

            document.addEventListener('click', async function (e) {
                if (e.target.closest('[data-bascule-theme]')) setTimeout(accorderLaBascule, 0);

                if (e.target.closest('[data-push-activer]')) {
                    try { await window.soclePush.activer(); ecrireLaNote('Notifications activées sur cet appareil.'); }
                    catch (erreur) { ecrireLaNote(erreur.message); }
                    await rafraichir();
                    return;
                }

                if (e.target.closest('[data-push-desactiver]')) {
                    await window.soclePush.desactiver();
                    ecrireLaNote('Notifications désactivées sur cet appareil.');
                    await rafraichir();
                    return;
                }

                if (e.target.closest('[data-installer-bouton]')) {
                    if (!invite) return;
                    invite.prompt();
                    await invite.userChoice;
                    invite = null;
                    montrer(boutonDInstallation(), false);
                }
            });

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

            function initialiser() {
                if (invite) montrer(boutonDInstallation(), true);
                accorderLaBascule();
                rafraichir();
            }

            document.addEventListener('DOMContentLoaded', initialiser);
            document.addEventListener('livewire:navigated', initialiser);
            if (document.readyState !== 'loading') initialiser();
        })();
    </script>
</x-studio.coquille>