{{-- v4.10.0 §B1 — « ACTIVER LES NOTIFICATIONS », dans l'espace du client.

     Le référent reçoit déjà un e-mail à chaque action ; ce bouton lui propose de recevoir la même
     chose sur son téléphone, dans l'application qu'il a installée depuis sa page (v4.9.0). On
     réutilise `window.soclePush` — le script d'abonnement du personnel, monté ici par le panneau
     Client — et donc `public/sw.js` : une seule mécanique, pas une seconde.

     ⚠️ Rien d'intrusif, et c'est une règle, pas une politesse : la permission ne part JAMAIS toute
     seule (les navigateurs la refusent d'office quand elle n'est pas déclenchée par un geste), et
     la carte disparaît dès que les notifications sont actives ou que le navigateur ne sait pas
     faire. Sur iPhone, le push n'existe que dans une application AJOUTÉE À L'ÉCRAN D'ACCUEIL :
     tant que la page est ouverte dans Safari, l'état est « installer d'abord » (v4.16.1 §C) — on
     dit la marche à suivre, plutôt que de laisser un bouton qui ne marche pas. --}}
<div
    x-data="{
        etat: 'chargement',
        message: '',
        async rafraichir() {
            // v4.17.1 §B — La brique push vit en bas de page : pas encore là, on l'attend au lieu
            // de conclure « non supporté » à tort.
            if (!window.soclePush) {
                this.etat = 'chargement';
                window.addEventListener('socle:push-pret', () => this.rafraichir(), { once: true });
                return;
            }
            this.etat = await window.soclePush.etat();
        },
        async activer() {
            this.message = '';
            try {
                await window.soclePush.activer();
                this.message = 'Notifications activées sur cet appareil.';
            } catch (e) {
                this.message = e.message;
            }
            await this.rafraichir();
        },
        async desactiver() {
            this.message = '';
            await window.soclePush.desactiver();
            this.message = 'Notifications désactivées sur cet appareil.';
            await this.rafraichir();
        },
    }"
    x-init="rafraichir()"
    data-notifications-espace
>
    <template x-if="etat === 'inactif'">
        <div class="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-700 dark:border-white/10 dark:bg-gray-900 dark:text-gray-200">
            <span class="min-w-0 flex-1">
                Recevez une notification sur cet appareil à chaque nouveauté — elle
                <strong>double</strong> l'e-mail, elle ne le remplace pas.
            </span>
            <x-filament::button size="sm" icon="heroicon-o-bell-alert" x-on:click="activer()">
                Activer les notifications
            </x-filament::button>
        </div>
    </template>

    <template x-if="etat === 'actif'">
        <div class="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 dark:border-white/10 dark:bg-gray-900 dark:text-gray-400">
            <span class="min-w-0 flex-1">Notifications actives sur cet appareil.</span>
            <x-filament::button size="sm" color="gray" x-on:click="desactiver()">
                Désactiver
            </x-filament::button>
        </div>
    </template>

    <template x-if="etat === 'refuse'">
        <p class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 dark:border-white/10 dark:bg-gray-900 dark:text-gray-400">
            Les notifications ont été refusées pour ce site dans les réglages de votre navigateur.
            Réautorisez-les depuis le navigateur, puis rechargez cette page. Vous continuez de tout
            recevoir par e-mail.
        </p>
    </template>

    {{-- v4.16.1 §C — iPhone dans Safari, application pas encore installée : la marche à suivre. --}}
    <template x-if="etat === 'installer-dabord'">
        <p class="rounded-xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 dark:border-white/10 dark:bg-gray-900 dark:text-gray-400">
            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.
        </p>
    </template>

    <p x-show="message" x-text="message" x-cloak class="mt-2 text-sm text-gray-700 dark:text-gray-200"></p>
</div>