{#
   _pwa_install_banner.html.twig
   Bannière d'installation PWA — style NUM-ECARD
   
   À inclure dans baseModel.html.twig juste avant </body> :
   {% include 'partials/_pwa_install_banner.html.twig' %}
#}

<!-- ── BANNIÈRE INSTALLATION PWA ── -->
<div id="pwa-banner" style="display:none;" role="complementary" aria-label="Installer l'application">
    <div id="pwa-banner-inner" style="bottom: 54px;">
        <div id="pwa-banner-icon">⚡</div>
        <div id="pwa-banner-text">
            <strong>Installer NUM-ECARD</strong>
            <span>Accès rapide depuis votre écran d'accueil</span>
        </div>
        <button id="pwa-install-btn" aria-label="Installer">Installer</button>
        <button id="pwa-dismiss-btn" aria-label="Fermer">✕</button>
    </div>
</div>

<!-- ── HINT iOS (Safari ne supporte pas beforeinstallprompt) ── -->
<div id="pwa-ios-hint" style="display:none;" role="complementary">
    <div id="pwa-banner-inner">
        <div id="pwa-banner-icon">📲</div>
        <div id="pwa-banner-text">
            <strong>Installer NUM-ECARD</strong>
            <span>Appuyez sur <strong>⎙</strong> puis <em>« Sur l'écran d'accueil »</em></span>
        </div>
        <button id="pwa-ios-dismiss-btn" aria-label="Fermer">✕</button>
    </div>
</div>

<style>
    /* ── Bannière commune ── */
    #pwa-banner,
    #pwa-ios-hint {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 99990;
        padding: calc(env(safe-area-inset-top) + 8px) 16px 8px;
        animation: pwaBannerDown 0.35s cubic-bezier(0.28, 0.11, 0.32, 1) forwards;
    }

    @keyframes pwaBannerDown {
        from { transform: translateY(-100%); opacity: 0; }
        to   { transform: translateY(0);     opacity: 1; }
    }

    #pwa-banner-inner {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-radius: 0 0 16px 16px;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.12);
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        max-width: 600px;
        margin: 0 auto;
    }

    #pwa-banner-icon {
        font-size: 28px;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3);
    }

    #pwa-banner-text {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    #pwa-banner-text strong {
        font-size: 14px;
        font-weight: 600;
        color: #1d1d1f;
        letter-spacing: -0.01em;
    }

    #pwa-banner-text span {
        font-size: 12px;
        color: #6e6e73;
        line-height: 1.4;
    }

    #pwa-install-btn {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        border: none;
        padding: 10px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
        transition: opacity 0.2s;
        flex-shrink: 0;
    }

    #pwa-install-btn:hover { opacity: 0.9; }

    #pwa-dismiss-btn,
    #pwa-ios-dismiss-btn {
        background: none;
        border: none;
        color: #86868b;
        font-size: 18px;
        cursor: pointer;
        padding: 4px 8px;
        flex-shrink: 0;
        line-height: 1;
        transition: color 0.2s;
    }

    #pwa-dismiss-btn:hover,
    #pwa-ios-dismiss-btn:hover { color: #1d1d1f; }

    /* Espace en haut si la bannière est visible */
    body.pwa-banner-visible {
        padding-top: 80px;
    }
</style>

<script>
(function () {
    'use strict';

    const STORAGE_KEY  = 'numecard_pwa_dismissed';
    const DISMISS_DAYS = 7; // Réafficher après 7 jours

    // ── Vérifier si déjà refusé récemment ──────────────────────────────
    function wasDismissed() {
        try {
            const ts = localStorage.getItem(STORAGE_KEY);
            if (!ts) return false;
            const days = (Date.now() - parseInt(ts)) / 86400000;
            return days < DISMISS_DAYS;
        } catch { return false; }
    }

    function saveDismissed() {
        try { localStorage.setItem(STORAGE_KEY, Date.now().toString()); } catch {}
    }

    // ── Détecter iOS ────────────────────────────────────────────────────
    function isIOS() {
        return /iphone|ipad|ipod/i.test(navigator.userAgent) ||
               (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
    }

    function isInStandaloneMode() {
        return window.matchMedia('(display-mode: standalone)').matches ||
               window.navigator.standalone === true;
    }

    // ── Enregistrer le Service Worker ───────────────────────────────────
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js', { scope: '/' })
                .then(reg => console.log('[SW] Enregistré:', reg.scope))
                .catch(err => console.warn('[SW] Erreur:', err));
        });
    }

    // ── Ne pas afficher si déjà installée ou refusée ────────────────────
    if (isInStandaloneMode() || wasDismissed()) return;

    const banner    = document.getElementById('pwa-banner');
    const iosHint   = document.getElementById('pwa-ios-hint');
    const installBtn = document.getElementById('pwa-install-btn');
    const dismissBtn = document.getElementById('pwa-dismiss-btn');
    const iosDismiss = document.getElementById('pwa-ios-dismiss-btn');

    // ── Android/Chrome : beforeinstallprompt ───────────────────────────
    let deferredPrompt = null;

    window.addEventListener('beforeinstallprompt', e => {
        // Sur les pages /carte/*, laisser le navigateur gérer nativement
        if (window.location.pathname.startsWith('/carte/')) return;
        
        e.preventDefault();
        deferredPrompt = e;

        // Attendre 3 secondes avant d'afficher
        setTimeout(() => {
            if (wasDismissed()) return;
            banner.style.display = 'block';
            document.body.classList.add('pwa-banner-visible');
        }, 3000);
    });

    if (installBtn) {
        installBtn.addEventListener('click', async () => {
            if (!deferredPrompt) return;
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            deferredPrompt = null;
            banner.style.display = 'none';
            document.body.classList.remove('pwa-banner-visible');
            if (outcome === 'accepted') {
                console.log('[PWA] Installée ✓');
            }
        });
    }

    if (dismissBtn) {
        dismissBtn.addEventListener('click', () => {
            banner.style.display = 'none';
            document.body.classList.remove('pwa-banner-visible');
            saveDismissed();
        });
    }

    // ── iOS Safari : hint manuel ────────────────────────────────────────
    if (isIOS() && !isInStandaloneMode()) {
        setTimeout(() => {
            if (wasDismissed()) return;
            if (iosHint) {
                iosHint.style.display = 'block';
                document.body.classList.add('pwa-banner-visible');
            }
        }, 4000);
    }

    if (iosDismiss) {
        iosDismiss.addEventListener('click', () => {
            iosHint.style.display = 'none';
            document.body.classList.remove('pwa-banner-visible');
            saveDismissed();
        });
    }

    // ── Masquer si déjà installée ───────────────────────────────────────
    window.addEventListener('appinstalled', () => {
        banner.style.display = 'none';
        iosHint.style.display = 'none';
        document.body.classList.remove('pwa-banner-visible');
        console.log('[PWA] Installée via événement appinstalled');
    });

})();
</script>