{% include 'views/front/' ~ template ~ '/includes/head.html.twig' %}

<div class="w-full min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
    <div class="max-w-md mx-auto text-center p-8">
        <div class="mb-8">
            <div class="w-24 h-24 mx-auto mb-4 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                <svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 100 19.5 9.75 9.75 0 000-19.5z"></path>
                </svg>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">You're Offline</h1>
            <p class="text-gray-600 dark:text-gray-400 mb-6">
                No internet connection detected. Some features may not be available until you're back online.
            </p>
        </div>

        <div class="space-y-4">
            <button onclick="window.location.reload()" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                Try Again
            </button>
            
            <div class="text-sm text-gray-500 dark:text-gray-400">
                <p>While offline, you can still:</p>
                <ul class="mt-2 space-y-1">
                    <li>• Browse previously viewed content</li>
                    <li>• Access your favorites</li>
                    <li>• View cached videos</li>
                </ul>
            </div>
        </div>

        <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
            <div class="flex items-center justify-center space-x-4">
                <div class="flex items-center text-sm text-gray-500 dark:text-gray-400">
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                    <span>Offline</span>
                </div>
                <button onclick="PWA.checkForUpdates()" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">
                    Check for Updates
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-refresh when connection is restored
window.addEventListener('online', function() {
    window.location.reload();
});

// Update offline indicator
function updateConnectionStatus() {
    const indicator = document.querySelector('.w-2.h-2');
    const statusText = document.querySelector('.w-2.h-2').nextElementSibling;
    
    if (navigator.onLine) {
        indicator.className = 'w-2 h-2 bg-green-500 rounded-full mr-2';
        statusText.textContent = 'Back Online';
        setTimeout(() => {
            window.location.reload();
        }, 1000);
    } else {
        indicator.className = 'w-2 h-2 bg-red-500 rounded-full mr-2';
        statusText.textContent = 'Offline';
    }
}

// Check connection status periodically
setInterval(updateConnectionStatus, 5000);

// Show cached content if available
if ('caches' in window) {
    caches.open('medians-streaming-v1').then(cache => {
        cache.keys().then(requests => {
            if (requests.length > 0) {
                const cachedContent = document.createElement('div');
                cachedContent.className = 'mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg';
                cachedContent.innerHTML = `
                    <h3 class="font-medium text-blue-900 dark:text-blue-100 mb-2">Cached Content Available</h3>
                    <p class="text-sm text-blue-700 dark:text-blue-300 mb-3">You have ${requests.length} cached items available offline.</p>
                    <button onclick="goToHome()" class="text-sm bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded">
                        View Cached Content
                    </button>
                `;
                document.querySelector('.space-y-4').appendChild(cachedContent);
            }
        });
    });
}

function goToHome() {
    window.location.href = '/';
}
</script>

<!-- Include PWA script -->
<script src="/pwa.js"></script>

</body>
</html>