@extends('layouts.app')

@section('title', 'Nettoyer le cache')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gray-100 py-12 px-4">
    <div class="max-w-md w-full bg-white rounded-lg shadow-lg p-8">
        <h1 class="text-2xl font-bold text-gray-900 mb-6 text-center">🧹 Nettoyer le cache</h1>
        
        <div id="status" class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg hidden">
            <p id="status-message" class="text-blue-800"></p>
        </div>

        <button id="clear-btn" class="w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700 transition mb-3 font-medium">
            Vider le cache navigateur
        </button>

        <button id="clear-server-btn" class="w-full bg-green-600 text-white px-4 py-3 rounded-lg hover:bg-green-700 transition mb-3 font-medium">
            Vider le cache serveur
        </button>

        <button id="clear-all-btn" class="w-full bg-red-600 text-white px-4 py-3 rounded-lg hover:bg-red-700 transition font-medium">
            Tout vider (navigateur + serveur)
        </button>

        <div class="mt-6 p-4 bg-gray-50 rounded-lg text-sm text-gray-600 space-y-2">
            <p><strong>Cache navigateur:</strong> Stockage local, cookies, IndexedDB, Service Worker</p>
            <p><strong>Cache serveur:</strong> Laravel route, config, view, cache</p>
        </div>

        <a href="/" class="block text-center mt-6 text-blue-600 hover:text-blue-800 font-medium">← Retour à l'accueil</a>
    </div>
</div>

<script>
    const statusDiv = document.getElementById('status');
    const statusMessage = document.getElementById('status-message');

    function showStatus(message, type = 'info') {
        statusDiv.className = 'mb-6 p-4 rounded-lg border';
        if (type === 'success') {
            statusDiv.className += ' bg-green-50 border-green-200';
            statusMessage.className = 'text-green-800';
        } else if (type === 'error') {
            statusDiv.className += ' bg-red-50 border-red-200';
            statusMessage.className = 'text-red-800';
        } else {
            statusDiv.className += ' bg-blue-50 border-blue-200';
            statusMessage.className = 'text-blue-800';
        }
        statusMessage.textContent = message;
        statusDiv.classList.remove('hidden');
    }

    // Clear browser cache
    document.getElementById('clear-btn').addEventListener('click', async () => {
        showStatus('Nettoyage en cours...');
        
        try {
            // Clear service workers
            if ('serviceWorker' in navigator) {
                const registrations = await navigator.serviceWorker.getRegistrations();
                for (const registration of registrations) {
                    await registration.unregister();
                }
            }

            // Clear caches
            if ('caches' in window) {
                const cacheNames = await caches.keys();
                for (const cacheName of cacheNames) {
                    await caches.delete(cacheName);
                }
            }

            // Clear localStorage and sessionStorage
            localStorage.clear();
            sessionStorage.clear();

            // Clear cookies
            document.cookie.split(";").forEach((c) => {
                document.cookie = c.replace(/^ +/, "").replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`);
            });

            showStatus('✓ Cache navigateur vidé avec succès! Recharge en cours...', 'success');
            
            setTimeout(() => {
                window.location.reload();
            }, 1500);
        } catch (error) {
            showStatus('✗ Erreur: ' + error.message, 'error');
        }
    });

    // Clear server cache
    document.getElementById('clear-server-btn').addEventListener('click', async () => {
        showStatus('Nettoyage serveur en cours...');
        
        try {
            const response = await fetch('/clear-caches');
            const data = await response.json();
            
            if (data.status === 'success') {
                showStatus('✓ Cache serveur vidé! Recharge en cours...', 'success');
                setTimeout(() => window.location.reload(), 1500);
            } else {
                showStatus('✗ Erreur: ' + data.error, 'error');
            }
        } catch (error) {
            showStatus('✗ Erreur réseau: ' + error.message, 'error');
        }
    });

    // Clear all caches
    document.getElementById('clear-all-btn').addEventListener('click', async () => {
        showStatus('Nettoyage complet en cours...');
        
        try {
            // Clear browser cache first
            if ('serviceWorker' in navigator) {
                const registrations = await navigator.serviceWorker.getRegistrations();
                for (const registration of registrations) {
                    await registration.unregister();
                }
            }

            if ('caches' in window) {
                const cacheNames = await caches.keys();
                for (const cacheName of cacheNames) {
                    await caches.delete(cacheName);
                }
            }

            localStorage.clear();
            sessionStorage.clear();

            // Then clear server cache
            const response = await fetch('/clear-caches');
            const data = await response.json();
            
            showStatus('✓ Tous les caches vidés! Recharge en cours...', 'success');
            setTimeout(() => window.location.reload(), 2000);
        } catch (error) {
            showStatus('✗ Erreur: ' + error.message, 'error');
        }
    });
</script>
@endsection

APPLE_CLIENT_ID=...
APPLE_CLIENT_SECRET=...
GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...