@extends('layouts.exat')
@php
    $self = $self ?? true;
    $cible = $cible ?? auth()->user();
    $action = $self ? route('notifications.preferences.update') : route('utilisateurs.notifications.update', $cible);
    $retour = $self ? route('notifications.index') : route('utilisateurs.edit', $cible);
@endphp
@section('title', $self ? 'Préférences de notification' : 'Notifications de '.$cible->name)
@section('subtitle', $self ? 'Choisissez les canaux, par événement' : 'Réglage par un administrateur')

@section('content')
<div class="mx-auto max-w-3xl space-y-4">
    <div class="flex items-center justify-between">
        <a href="{{ $retour }}" class="inline-flex rounded-lg p-2 text-slate-500 hover:bg-slate-100" aria-label="Retour"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg></a>
        @if($self)
            <div class="flex items-center gap-2">
                <button type="button" id="btn-navigateur" class="inline-flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Autoriser le navigateur</button>
                <button type="button" id="btn-push" class="inline-flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Activer le web push</button>
            </div>
        @endif
    </div>

    @if(!$self)
        <div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
            Vous réglez les préférences de <b>{{ trim($cible->name.' '.($cible->prenom ?? '')) }}</b> ({{ $cible->login }}). Les autorisations « navigateur » et « web push » restent propres à l'appareil de l'utilisateur : il devra les activer lui-même depuis sa session.
        </div>
    @endif

    @if($self)
        <div id="secure-warn" class="hidden rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
            Les canaux <b>Navigateur</b> et <b>Web push</b> nécessitent une connexion sécurisée (HTTPS). Sur HTTP, ils resteront inactifs même si cochés.
        </div>
    @endif

    <form method="POST" action="{{ $action }}">
        @csrf @method('PUT')
        <div class="overflow-hidden rounded-xl bg-white ring-1 ring-slate-200">
            <table class="w-full text-sm">
                <thead><tr class="bg-slate-50 text-left text-xs text-slate-500">
                    <th class="px-4 py-3 font-medium">Événement</th>
                    <th class="px-3 py-3 text-center font-medium">Cloche</th>
                    <th class="px-3 py-3 text-center font-medium">Navigateur</th>
                    <th class="px-3 py-3 text-center font-medium">E-mail</th>
                    <th class="px-3 py-3 text-center font-medium">Web push</th>
                </tr></thead>
                <tbody>
                    @foreach($types as $t)
                        @php $def = ['CLOCHE'=>true,'NAVIGATEUR'=>false,'EMAIL'=>false,'PUSH'=>false]; @endphp
                        <tr class="border-t border-slate-100">
                            <td class="px-4 py-3 text-slate-700">{{ $t->libelle }}</td>
                            @foreach(['CLOCHE','NAVIGATEUR','EMAIL','PUSH'] as $canal)
                                @php $p = $prefs[$t->id.'|'.$canal] ?? null; $on = $p ? $p->active : $def[$canal]; @endphp
                                <td class="px-3 py-3 text-center">
                                    <input type="checkbox" name="pref[{{ $t->id }}][{{ $canal }}]" value="1" @checked($on) class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500">
                                </td>
                            @endforeach
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="mt-4 flex justify-end"><button class="inline-flex h-10 items-center rounded-lg bg-emerald-600 px-4 text-sm font-medium text-white hover:bg-emerald-700">Enregistrer</button></div>
    </form>

    @if($self)
        <p class="text-[11px] text-slate-400">Cocher un canal ne suffit pas pour Navigateur/Web push : cliquez aussi sur les boutons d'autorisation ci-dessus (une fois par appareil). L'e-mail nécessite qu'un serveur d'envoi soit configuré.</p>
    @endif
</div>

@if($self)
@push('scripts')
<script>
(function () {
    var csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    var secure = window.isSecureContext;
    if (!secure) document.getElementById('secure-warn')?.classList.remove('hidden');

    var btnNav = document.getElementById('btn-navigateur');
    var btnPush = document.getElementById('btn-push');

    function styleActif(btn, actif) {
        btn.classList.toggle('border-emerald-300', actif);
        btn.classList.toggle('bg-emerald-50', actif);
        btn.classList.toggle('text-emerald-700', actif);
    }

    // ---------- NAVIGATEUR ----------
    // La permission système ne peut pas être révoquée par JS ; on gère un interrupteur local
    // (affichage des toasts) via localStorage, et on explique comment retirer la permission.
    var NAV_KEY = 'exat_nav_toasts';
    function navActif() {
        return ('Notification' in window)
            && Notification.permission === 'granted'
            && localStorage.getItem(NAV_KEY) !== 'off';
    }
    function majNav() {
        if (!btnNav) return;
        var on = navActif();
        btnNav.textContent = on ? 'Désactiver le navigateur' : 'Autoriser le navigateur';
        styleActif(btnNav, on);
    }
    if (btnNav) btnNav.addEventListener('click', async function () {
        if (!('Notification' in window)) { alert('Notifications non supportées par ce navigateur.'); return; }
        if (navActif()) {
            // désactiver l'affichage des toasts (côté app)
            localStorage.setItem(NAV_KEY, 'off');
            alert("Notifications du navigateur désactivées pour cette application.\n\nPour retirer complètement l'autorisation, utilisez les réglages du site dans votre navigateur (cadenas dans la barre d'adresse).");
        } else {
            localStorage.removeItem(NAV_KEY);
            var perm = await Notification.requestPermission();
            if (perm !== 'granted') alert('Autorisation refusée par le navigateur.');
        }
        majNav();
    });
    majNav();

    // ---------- WEB PUSH ----------
    function urlB64ToUint8Array(base64String) {
        var padding = '='.repeat((4 - base64String.length % 4) % 4);
        var base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
        var raw = atob(base64), out = new Uint8Array(raw.length);
        for (var i = 0; i < raw.length; i++) out[i] = raw.charCodeAt(i);
        return out;
    }
    async function pushSub() {
        if (!('serviceWorker' in navigator) || !('PushManager' in window)) return null;
        var reg = await navigator.serviceWorker.getRegistration();
        if (!reg) return null;
        return await reg.pushManager.getSubscription();
    }
    async function majPush() {
        if (!btnPush) return;
        var sub = await pushSub();
        var on = !!sub;
        btnPush.textContent = on ? 'Désactiver le web push' : 'Activer le web push';
        styleActif(btnPush, on);
    }
    if (btnPush) btnPush.addEventListener('click', async function () {
        if (!secure) { alert('Le web push nécessite HTTPS.'); return; }
        if (!('serviceWorker' in navigator) || !('PushManager' in window)) { alert('Web push non supporté.'); return; }
        try {
            var existante = await pushSub();
            if (existante) {
                // Désabonnement : serveur puis navigateur
                await fetch("{{ route('push.desabonner') }}", {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
                    body: JSON.stringify({ endpoint: existante.endpoint })
                });
                await existante.unsubscribe();
                alert('Web push désactivé sur cet appareil.');
                await majPush();
                return;
            }
            var reg = await navigator.serviceWorker.register("{{ asset('sw.js') }}");
            var perm = await Notification.requestPermission();
            if (perm !== 'granted') { alert('Autorisation refusée.'); return; }
            var cle = await fetch("{{ route('push.cle') }}").then(function (r) { return r.text(); });
            if (!cle) { alert('Web push non configuré côté serveur (clés VAPID manquantes).'); return; }
            var sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: urlB64ToUint8Array(cle) });
            var res = await fetch("{{ route('push.abonner') }}", {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf },
                body: JSON.stringify(sub)
            });
            alert(res.ok ? 'Web push activé sur cet appareil.' : "Échec de l'abonnement.");
            await majPush();
        } catch (e) { alert('Erreur web push : ' + e.message); }
    });
    majPush();
})();
</script>
@endpush
@endif
@endsection