<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#06b6d4">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="mySupport">
    <link rel="manifest" href="/manifest.json">
    <link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">
    <title><?= $title ?? APP_NAME ?></title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        dark: { 800: '#1e293b', 900: '#0f172a' }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .sidebar { transition: all 0.3s ease; }
        .sidebar-link { transition: all 0.2s ease; }
        .sidebar-link:hover { background: rgba(6, 182, 212, 0.1); }
        .sidebar-link.active { 
            background: linear-gradient(90deg, rgba(6, 182, 212, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
            border-left: 3px solid #06b6d4;
            color: #22d3ee;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }
        .stat-card {
            transition: all 0.3s ease;
        }
        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .gradient-border {
            position: relative;
        }
        .gradient-border::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #06b6d4, #10b981);
            border-radius: 8px 8px 0 0;
        }
    </style>
</head>
<body class="bg-slate-100">
    <div class="flex h-screen">
        <!-- Sidebar Dark -->
        <aside class="sidebar w-72 bg-slate-900 flex flex-col shadow-2xl">
            <!-- Logo -->
            <div class="p-6">
                <div class="flex items-center space-x-3">
                    <div class="w-11 h-11 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg shadow-cyan-500/30">
                        <i class="fas fa-headset text-white text-lg"></i>
                    </div>
                    <div>
                        <span class="text-xl font-bold text-white"><?= APP_NAME ?></span>
                        <p class="text-xs text-slate-500">Service Client IA</p>
                    </div>
                </div>
            </div>
            
            <!-- Navigation -->
            <nav class="flex-1 px-4 py-2 overflow-y-auto">
                <p class="px-4 py-2 text-xs font-semibold text-slate-500 uppercase tracking-wider">Menu principal</p>
                
                <?php if ($user['role'] === ROLE_SUPER_ADMIN): ?>
                    <a href="<?= BASE_URL ?>/super-admin" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-th-large text-cyan-400"></i>
                        </div>
                        <span class="font-medium">Dashboard</span>
                    </a>
                    <a href="<?= BASE_URL ?>/super-admin/entreprises" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-building text-emerald-400"></i>
                        </div>
                        <span class="font-medium">Entreprises</span>
                    </a>
                    <a href="<?= BASE_URL ?>/super-admin/statistiques" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-chart-bar text-blue-400"></i>
                        </div>
                        <span class="font-medium">Statistiques</span>
                    </a>
                    <a href="<?= BASE_URL ?>/super-admin/langues" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-language text-purple-400"></i>
                        </div>
                        <span class="font-medium">Langues</span>
                    </a>
                    <a href="<?= BASE_URL ?>/super-admin/abonnements" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-credit-card text-yellow-400"></i>
                        </div>
                        <span class="font-medium">Abonnements</span>
                    </a>
                    
                <?php elseif ($user['role'] === ROLE_ADMIN_ENTREPRISE): ?>
                    <a href="<?= BASE_URL ?>/admin" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-th-large text-cyan-400"></i>
                        </div>
                        <span class="font-medium">Dashboard</span>
                    </a>
                    <a href="<?= BASE_URL ?>/admin/conversations" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-comments text-emerald-400"></i>
                        </div>
                        <span class="font-medium">Conversations</span>
                    </a>
                    <a href="<?= BASE_URL ?>/admin/agents" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-users text-blue-400"></i>
                        </div>
                        <span class="font-medium">Agents</span>
                    </a>
                    
                    <a href="<?= BASE_URL ?>/admin/ia" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-robot text-cyan-400"></i>
                        </div>
                        <span class="font-medium">IA & FAQ</span>
                    </a>
                    
                    <p class="px-4 py-2 mt-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">Analytics</p>
                    
                    <a href="<?= BASE_URL ?>/admin/cx-index" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-heart text-pink-400"></i>
                        </div>
                        <span class="font-medium">CX Index</span>
                    </a>
                    <a href="<?= BASE_URL ?>/admin/statistiques" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-chart-line text-teal-400"></i>
                        </div>
                        <span class="font-medium">Statistiques</span>
                    </a>
                    <a href="<?= BASE_URL ?>/admin/alertes" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-bell text-orange-400"></i>
                        </div>
                        <span class="font-medium">Alertes</span>
                        <?php if (isset($alertCount) && $alertCount > 0): ?>
                        <span class="ml-auto bg-red-500 text-white text-xs px-2 py-0.5 rounded-full"><?= $alertCount ?></span>
                        <?php endif; ?>
                    </a>
                    <a href="<?= BASE_URL ?>/admin/denonciations" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-exclamation-triangle text-red-400"></i>
                        </div>
                        <span class="font-medium">Signalements</span>
                    </a>
                    
                    <p class="px-4 py-2 mt-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">Configuration</p>
                    
                    <a href="<?= BASE_URL ?>/admin/parametres" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-cog text-slate-400"></i>
                        </div>
                        <span class="font-medium">Paramètres</span>
                    </a>
                    <a href="<?= BASE_URL ?>/admin/integration" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-code text-purple-400"></i>
                        </div>
                        <span class="font-medium">Intégration</span>
                    </a>
                    <a href="<?= BASE_URL ?>/admin/qrcodes" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-qrcode text-cyan-400"></i>
                        </div>
                        <span class="font-medium">QR Codes & Liens</span>
                    </a>
                    
                <?php elseif ($user['role'] === ROLE_AGENT): ?>
                    <a href="<?= BASE_URL ?>/agent" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-th-large text-cyan-400"></i>
                        </div>
                        <span class="font-medium">Dashboard</span>
                    </a>
                    <a href="<?= BASE_URL ?>/agent/conversations" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-comments text-emerald-400"></i>
                        </div>
                        <span class="font-medium">Mes conversations</span>
                    </a>
                    <a href="<?= BASE_URL ?>/agent/conversations?type=non-assignees" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-inbox text-yellow-400"></i>
                        </div>
                        <span class="font-medium">Non assignées</span>
                    </a>
                    
                    <p class="px-4 py-2 mt-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">Support</p>
                    
                    <a href="<?= BASE_URL ?>/agent/tickets" class="sidebar-link flex items-center px-4 py-3 text-slate-300 rounded-xl mb-1">
                        <div class="w-9 h-9 bg-slate-800 rounded-lg flex items-center justify-center mr-3">
                            <i class="fas fa-ticket-alt text-orange-400"></i>
                        </div>
                        <span class="font-medium">Tickets</span>
                    </a>
                <?php endif; ?>
            </nav>
            
            <!-- User Profile -->
            <div class="p-4 border-t border-slate-800">
                <?php $user = $user ?? ['name' => '', 'role' => '']; ?>
                <div class="flex items-center p-3 bg-slate-800/50 rounded-xl">
                    <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-full flex items-center justify-center mr-3 shadow-lg">
                        <span class="text-white font-bold text-sm"><?= strtoupper(substr((string)($user['name'] ?? ''), 0, 2)) ?></span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-semibold text-white truncate"><?= htmlspecialchars((string)($user['name'] ?? '')) ?></p>
                        <p class="text-xs text-slate-400"><?= ucfirst(str_replace('_', ' ', (string)($user['role'] ?? ''))) ?></p>
                    </div>
                    <a href="<?= BASE_URL ?>/auth/logout" class="w-9 h-9 bg-slate-700 hover:bg-red-500/20 rounded-lg flex items-center justify-center text-slate-400 hover:text-red-400 transition">
                        <i class="fas fa-sign-out-alt"></i>
                    </a>
                </div>
            </div>
        </aside>
        
        <!-- Main Content -->
        <main class="flex-1 overflow-auto bg-slate-100">
            <!-- Top Bar -->
            <header class="bg-white/80 backdrop-blur-lg border-b border-slate-200 px-8 py-4 sticky top-0 z-40">
                <div class="flex items-center justify-between">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800"><?= $pageTitle ?? 'Tableau de bord' ?></h2>
                        <p class="text-sm text-slate-500 mt-0.5">Bienvenue, <?= htmlspecialchars(explode(' ', (string)($user['name'] ?? ''))[0] ?? '') ?> 👋</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- Search -->
                        <div class="hidden md:flex items-center bg-slate-100 rounded-xl px-4 py-2.5">
                            <i class="fas fa-search text-slate-400 mr-3"></i>
                            <input type="text" placeholder="Rechercher..." class="bg-transparent outline-none text-sm text-slate-600 w-48">
                        </div>
                        
                        <!-- PWA Install Button -->
                        <button id="pwa-install-btn" onclick="installPWA()" class="hidden w-10 h-10 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 rounded-xl flex items-center justify-center transition shadow-lg" title="Installer l'application">
                            <i class="fas fa-download text-white"></i>
                        </button>

                        <!-- Push Notifications Toggle -->
                        <button onclick="requestNotificationPermission()" class="w-10 h-10 bg-slate-100 hover:bg-slate-200 rounded-xl flex items-center justify-center transition" title="Activer les notifications">
                            <i class="fas fa-bell text-slate-500"></i>
                            <span id="notif-badge" class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center hidden">!</span>
                        </button>
                        
                        <!-- Date -->
                        <div class="hidden lg:flex items-center bg-gradient-to-r from-cyan-500 to-emerald-500 text-white px-4 py-2.5 rounded-xl">
                            <i class="fas fa-calendar-alt mr-2"></i>
                            <span class="text-sm font-medium"><?= date('d M Y') ?></span>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- Page Content -->
            <div class="p-8">
                <?php if (isset($_SESSION['flash_success'])): ?>
                    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-200 text-emerald-700 rounded-xl flex items-center">
                        <div class="w-10 h-10 bg-emerald-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-check text-emerald-500"></i>
                        </div>
                        <span><?= $_SESSION['flash_success'] ?></span>
                    </div>
                    <?php unset($_SESSION['flash_success']); ?>
                <?php endif; ?>
                
                <?php if (isset($_SESSION['flash_error'])): ?>
                    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-700 rounded-xl flex items-center">
                        <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-exclamation text-red-500"></i>
                        </div>
                        <span><?= $_SESSION['flash_error'] ?></span>
                    </div>
                    <?php unset($_SESSION['flash_error']); ?>
                <?php endif; ?>
                
                <?= $content ?? '' ?>
            </div>
        </main>
    </div>
    
    <script>
        // Active link highlighting
        const currentPath = window.location.pathname;
        document.querySelectorAll('.sidebar-link').forEach(link => {
            const linkPath = new URL(link.href).pathname;
            if (currentPath === linkPath || currentPath.startsWith(linkPath + '/')) {
                link.classList.add('active');
            }
        });

        // Notifications en temps réel pour les agents
        <?php if ($user['role'] === ROLE_AGENT): ?>
        (function() {
            const BASE_URL = '<?= BASE_URL ?>';
            let notificationSound = null;
            
            function playNotificationSound() {
                if (!notificationSound) {
                    notificationSound = new Audio('data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2teleVsoRIzV0MCgdyYkdL/X1byOZCVKk9PO2aaQVDFEj9bS4LubZj1PlM/S4LindjxPl87R4LindjxPl87R4LindjxPl87R4LindjxPl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4LindjxOl87R4Lindjw=');
                }
                notificationSound.play().catch(() => {});
            }

            function checkNotifications() {
                fetch(BASE_URL + '/agent/api/notifications')
                    .then(res => res.json())
                    .then(data => {
                        if (data.success) {
                            updateNotificationBadges(data.counts);
                            if (data.notifications && data.notifications.length > 0) {
                                showNewNotifications(data.notifications);
                            }
                        }
                    })
                    .catch(err => console.log('Notification check failed'));
            }

            function updateNotificationBadges(counts) {
                // Mettre à jour les badges dans le dashboard si présent
                const liveCountEl = document.getElementById('live-requests-count');
                const ticketCountEl = document.getElementById('tickets-count');
                
                if (liveCountEl) liveCountEl.textContent = counts.live_requests || 0;
                if (ticketCountEl) ticketCountEl.textContent = counts.open_tickets || 0;
            }

            let shownNotifications = new Set();
            
            function showNewNotifications(notifications) {
                notifications.forEach(notif => {
                    if (shownNotifications.has(notif.id)) return;
                    shownNotifications.add(notif.id);
                    
                    if (notif.is_urgent) {
                        playNotificationSound();
                    }
                    
                    // Créer toast notification
                    const toast = document.createElement('div');
                    toast.className = 'fixed bottom-4 right-4 max-w-sm bg-white rounded-xl shadow-2xl border p-4 z-50 transform transition-all duration-300 translate-y-full opacity-0';
                    toast.innerHTML = `
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 ${notif.is_urgent ? 'bg-red-100' : 'bg-cyan-100'} rounded-full flex items-center justify-center flex-shrink-0">
                                <i class="fas ${notif.type === 'live_request' ? 'fa-headset' : 'fa-ticket-alt'} ${notif.is_urgent ? 'text-red-600' : 'text-cyan-600'}"></i>
                            </div>
                            <div class="flex-1">
                                <p class="font-semibold text-gray-800">${notif.titre}</p>
                                <p class="text-sm text-gray-600">${notif.message || ''}</p>
                            </div>
                            <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                    `;
                    document.body.appendChild(toast);
                    
                    setTimeout(() => {
                        toast.classList.remove('translate-y-full', 'opacity-0');
                    }, 100);
                    
                    setTimeout(() => {
                        toast.classList.add('translate-y-full', 'opacity-0');
                        setTimeout(() => toast.remove(), 300);
                    }, 8000);
                });
            }

            // Vérifier les notifications toutes les 10 secondes
            checkNotifications();
            setInterval(checkNotifications, 10000);
        })();
        <?php endif; ?>

        // ==========================================
        // PWA - Installation & Push Notifications
        // ==========================================
        
        // Variables PWA
        let deferredPrompt = null;
        let swRegistration = null;

        // Enregistrement du Service Worker
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', async () => {
                try {
                    swRegistration = await navigator.serviceWorker.register('/sw.js');
                    console.log('Service Worker enregistré:', swRegistration.scope);
                    
                    // Vérifier les mises à jour
                    swRegistration.addEventListener('updatefound', () => {
                        const newWorker = swRegistration.installing;
                        newWorker.addEventListener('statechange', () => {
                            if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                showUpdateBanner();
                            }
                        });
                    });
                } catch (error) {
                    console.error('Erreur Service Worker:', error);
                }
            });
        }

        // Capture de l'événement d'installation
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
            showInstallButton();
        });

        // Afficher le bouton d'installation
        function showInstallButton() {
            const installBtn = document.getElementById('pwa-install-btn');
            if (installBtn) {
                installBtn.classList.remove('hidden');
            }
        }

        // Installer la PWA
        async function installPWA() {
            if (!deferredPrompt) return;
            
            deferredPrompt.prompt();
            const { outcome } = await deferredPrompt.userChoice;
            
            if (outcome === 'accepted') {
                console.log('PWA installée');
            }
            deferredPrompt = null;
            
            const installBtn = document.getElementById('pwa-install-btn');
            if (installBtn) installBtn.classList.add('hidden');
        }

        // Demander la permission pour les notifications
        async function requestNotificationPermission() {
            if (!('Notification' in window)) {
                alert('Les notifications ne sont pas supportées par votre navigateur');
                return false;
            }

            const permission = await Notification.requestPermission();
            if (permission === 'granted') {
                await subscribeToPush();
                return true;
            }
            return false;
        }

        // S'abonner aux notifications push
        async function subscribeToPush() {
            if (!swRegistration) return;

            try {
                const subscription = await swRegistration.pushManager.subscribe({
                    userVisibleOnly: true,
                    applicationServerKey: urlBase64ToUint8Array('<?= defined("VAPID_PUBLIC_KEY") ? VAPID_PUBLIC_KEY : "" ?>')
                });

                // Envoyer la souscription au serveur
                await fetch('/api/push/subscribe', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(subscription)
                });

                console.log('Abonné aux notifications push');
            } catch (error) {
                console.error('Erreur abonnement push:', error);
            }
        }

        // Convertir la clé VAPID
        function urlBase64ToUint8Array(base64String) {
            const padding = '='.repeat((4 - base64String.length % 4) % 4);
            const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
            const rawData = window.atob(base64);
            const outputArray = new Uint8Array(rawData.length);
            for (let i = 0; i < rawData.length; ++i) {
                outputArray[i] = rawData.charCodeAt(i);
            }
            return outputArray;
        }

        // Afficher bannière de mise à jour
        function showUpdateBanner() {
            const banner = document.createElement('div');
            banner.className = 'fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gradient-to-r from-cyan-500 to-emerald-500 text-white p-4 rounded-xl shadow-xl z-50 flex items-center justify-between';
            banner.innerHTML = `
                <div class="flex items-center gap-3">
                    <i class="fas fa-sync-alt text-xl"></i>
                    <span class="font-medium">Nouvelle version disponible</span>
                </div>
                <button onclick="updateApp()" class="px-4 py-2 bg-white/20 hover:bg-white/30 rounded-lg font-medium transition">
                    Mettre à jour
                </button>
            `;
            document.body.appendChild(banner);
        }

        // Mettre à jour l'application
        function updateApp() {
            if (swRegistration && swRegistration.waiting) {
                swRegistration.waiting.postMessage({ type: 'SKIP_WAITING' });
            }
            window.location.reload();
        }

        // Vérifier si l'app est installée
        window.addEventListener('appinstalled', () => {
            console.log('mySupport installé');
            deferredPrompt = null;
        });
    </script>
</body>
</html>
