{{--
    v4.16.0 §E — L'ONGLET COMPTE, écran `data-screen="compte"` de la maquette validée.

    ⚠️ Le JavaScript de cet écran est volontairement du JAVASCRIPT NU : il n'y a ni Alpine ni
    Tailwind sur cette façade, et l'abonnement lui-même vient de `window.soclePush`, le script du
    socle déjà monté par le gabarit. Rien n'est réécrit ici : on appelle, on affiche l'état.

    ⚠️ Aucune permission n'est demandée sans un geste : les navigateurs refusent d'office une
    demande qui ne part pas d'un clic, et un site qui la réclame à l'ouverture se fait bloquer
    pour de bon.
--}}
<x-espace-client-app.coquille :dashboard="$dashboard" :acces="$acces" :espaces="$espaces" :a-valider="$aValider" :non-lus="$nonLus" onglet="compte">
    <section class="screen">
        <h1 class="h1">Mon compte</h1>
        <p class="sub">Vos préférences et votre contact.</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">{{ $acces?->titreAffiche() }}{{ $dashboard ? ' · '.$dashboard->nomCourtDuClient() : '' }}</div>
            </div>
        </div>

        {{-- 1. LES NOTIFICATIONS ------------------------------------------------------------ --}}
        <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">Être prévenu sur cet appareil à chaque nouveauté</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> l'e-mail, elles ne le remplacent pas. Sur iPhone, les
                notifications n'existent qu'une fois l'application <b>ajoutée à l'écran d'accueil</b>
                (voir juste dessous).
            </p>
        </div>

        {{-- 2. INSTALLER L'APPLICATION -------------------------------------------------------- --}}
        {{-- v4.17.1 §C — Le rappel : sur Compte, la bannière se propose TOUJOURS hors de l'app
             installée, même fermée ailleurs. --}}
        <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'application</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 tous les deux ; la plateforme
                 détectée passe en premier (script de la bannière), l'autre n'est jamais cachée.
                 Sur Android/Chrome, le bouton « Installer » ci-dessus déclenche l'invite native
                 quand le navigateur la propose. --}}
            <x-espace-client-app.etapes-installation />
        </div>

        {{-- 3. QUI VOUS RÉPOND ---------------------------------------------------------------- --}}
        @if ($contact)
            <div class="opt">
                <span class="oic"><x-espace-client-app.icone nom="crayon" :taille="17" /></span>
                <div class="ob">
                    <div class="on">Qui vous répond</div>
                    <div class="om">{{ $contact['agence'] }}{{ $contact['email'] ? ' · '.$contact['email'] : '' }}</div>
                </div>
                @if ($contact['email'])
                    <div class="oact">
                        <a class="btn mod petit" href="mailto:{{ $contact['email'] }}">Écrire</a>
                    </div>
                @endif

                @if ($contact['gestionnaires']->isNotEmpty() || $contact['whatsapp'] || $contact['signature'])
                    <div class="onote">
                        @foreach ($contact['gestionnaires'] as $gestionnaire)
                            {{ $gestionnaire['nom'] }} — {{ $gestionnaire['role'] }}<br>
                        @endforeach

                        @if ($contact['whatsapp'])
                            Ligne du projet : {{ $contact['whatsapp'] }}<br>
                        @endif

                        @if ($contact['signature'])
                            {{-- La signature est composée par l'exploitant dans les réglages de
                                 l'espace : c'est le même bloc que celui du bas des e-mails. --}}
                            <span class="signature">{!! $contact['signature'] !!}</span>
                        @endif
                    </div>
                @endif
            </div>
        @endif

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

    {{-- v4.17.3 §B2 — L'INITIALISATION QUI SURVIT À LA NAVIGATION.

         Depuis que les onglets naviguent côté client (`wire:navigate`), ce script est exécuté UNE
         fois (`data-navigate-once`) mais l'écran, lui, va et vient. Un écouteur posé sur un bouton
         de CE rendu-là serait mort au retour sur l'écran, et un script réexécuté en poserait un de
         plus à chaque passage. D'où la règle, ici comme dans le fil et la bannière : les gestes
         sont DÉLÉGUÉS au document (qui survit), et l'état de l'écran est repeint sur
         `livewire:navigated`. --}}
    <script data-navigate-once>
        (function () {
            if (window.__socleCompteInitialise) return;
            window.__socleCompteInitialise = true;

            // v4.16.1 §C — La carte des états. `installer-dabord` est NEUF, et distinct de
            // `non-supporte` : sur iPhone dans Safari, le push n'existe pas ENCORE — il existera dès
            // que l'application sera sur l'écran d'accueil. Le dire, c'est donner la marche à suivre ;
            // « Indisponibles ici » disait le contraire de la vérité.
            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. Vous continuez de tout recevoir par e-mail.',
                refuse: 'Les notifications ont été refusées pour ce site dans les '
                    + 'réglages de votre navigateur. Réautorisez-les puis rechargez cette page. '
                    + 'Vous continuez de tout recevoir par e-mail.',
                'non-supporte': 'Ce navigateur ne prend pas en charge les notifications. '
                    + 'Vous continuez de tout recevoir par e-mail.',
            };

            // `beforeinstallprompt` n'existe que sur Android/Chrome, et il arrive UNE fois, souvent
            // avant que l'écran Compte soit ouvert : on le retient à la racine du script, pas dans
            // un rendu.
            var invite = null;

            function bloc() { return document.querySelector('[data-push]'); }

            function montrer(bouton, visible) {
                if (bouton) bouton.classList.toggle('hide', !visible);
            }

            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 ecrireLaNote(texte) {
                var note = bloc() ? bloc().querySelector('[data-push-note]') : null;
                if (note) note.textContent = texte;
            }

            function boutonDInstallation() {
                var installer = document.querySelector('[data-installer]');
                return installer ? installer.querySelector('[data-installer-bouton]') : null;
            }

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

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

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

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

            function initialiser() {
                // Le bouton n'apparaît que là où il fonctionne — c'est-à-dire là où le navigateur
                // nous a donné l'invite. Les gestes, eux, sont TOUJOURS écrits pour les deux
                // plateformes (v4.17.1 §D).
                if (invite) montrer(boutonDInstallation(), true);
                rafraichir();
            }

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