{{-- v1.4 §5.4 — Activation des notifications sur cet appareil. L'abonnement est PAR APPAREIL :
     un collaborateur qui a deux téléphones active ici sur chacun. --}}
<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()"
    class="space-y-3"
>
    <p class="text-sm text-gray-600 dark:text-gray-300">
        Les notifications arrivent sur l'appareil même quand l'application est fermée. Elles
        <strong>doublent</strong> les e-mails, elles ne les remplacent pas : si vous coupez une
        catégorie ci-dessus, vous la coupez partout.
    </p>

    <template x-if="etat === 'actif'">
        <div class="flex flex-wrap items-center gap-3">
            <span class="rounded-full bg-success-100 px-3 py-1 text-xs font-medium text-success-700 dark:bg-success-500/20 dark:text-success-300">
                Activées sur cet appareil
            </span>
            <x-filament::button color="gray" size="sm" x-on:click="desactiver()">
                Désactiver sur cet appareil
            </x-filament::button>
        </div>
    </template>

    <template x-if="etat === 'inactif'">
        <x-filament::button size="sm" icon="heroicon-o-bell-alert" x-on:click="activer()">
            Activer les notifications sur cet appareil
        </x-filament::button>
    </template>

    <template x-if="etat === 'refuse'">
        <p class="text-sm text-danger-600 dark:text-danger-400">
            Les notifications ont été refusées pour ce site dans les réglages du navigateur.
            Réautorisez-les depuis le navigateur, puis rechargez cette page.
        </p>
    </template>

    {{-- v4.16.1 §C — Deux états distincts : « pas encore » (iPhone, app pas installée) et
         « jamais » (navigateur sans push). Les confondre disait « indisponible » à tort. --}}
    <template x-if="etat === 'installer-dabord'">
        <p class="text-sm text-gray-500 dark:text-gray-400">
            Installez d'abord l'application sur votre écran d'accueil depuis Safari (Partager →
            « Sur l'écran d'accueil »), ouvrez-la depuis là, puis activez les notifications.
        </p>
    </template>

    <template x-if="etat === 'non-supporte'">
        <p class="text-sm text-gray-500 dark:text-gray-400">
            Ce navigateur ne prend pas en charge les notifications.
        </p>
    </template>

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