{% extends 'base.html' %}

{% block title %}Reiniciando Dispositivo{% endblock %}

{% block content %}
<div class="restart-content">
    <h1>Reiniciando Gateway LoRaWan</h1>
    
    <div class="alert alert-info">
        <p>{{ session.get('restart_message', 'El dispositivo se está reiniciando. Por favor, espere...') }}</p>
    </div>
    
    <div class="spinner"></div>
    
    <p>El dispositivo estará disponible nuevamente en aproximadamente 60 segundos.</p>
    
    <div class="countdown" id="countdown">60</div>
    
    <button id="reload-btn" class="btn-primary" disabled>Recargar Página</button>
</div>

<script>
    // Contador regresivo
    let seconds = 60;
    const countdownElement = document.getElementById('countdown');
    const reloadButton = document.getElementById('reload-btn');
    
    const countdown = setInterval(() => {
        seconds--;
        countdownElement.textContent = seconds;
        
        if (seconds <= 0) {
            clearInterval(countdown);
            reloadButton.disabled = false;
            
            // Intentar reconectar automáticamente después de la cuenta regresiva
            checkConnection();
        }
    }, 1000);
    
    // Función para verificar la conexión
    function checkConnection() {
        const checkInterval = setInterval(() => {
            fetch(window.location.origin + '/network-stats', { 
                method: 'GET',
                headers: { 'Cache-Control': 'no-cache' }
            })
            .then(response => {
                if (response.ok) {
                    clearInterval(checkInterval);
                    window.location.href = '/';
                }
            })
            .catch(error => {
                console.log('Todavía no está disponible, reintentando...');
            });
        }, 2000);
    }
    
    // Controlador para el botón de recarga
    reloadButton.addEventListener('click', () => {
        window.location.href = '/';
    });
</script>
{% endblock %}

{% block extra_css %}
<style>
    .restart-content {
        text-align: center;
        padding: 3rem 1rem;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .alert-info {
        color: #0c5460;
        background-color: #d1ecf1;
        border-color: #bee5eb;
        padding: 1rem;
        border-radius: 4px;
        margin: 1.5rem 0;
    }
    
    .spinner {
        border: 4px solid rgba(0, 123, 255, 0.3);
        border-radius: 50%;
        border-top: 4px solid #007bff;
        width: 60px;
        height: 60px;
        margin: 2rem auto;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .countdown {
        font-size: 4rem;
        font-weight: bold;
        margin: 1.5rem 0;
        color: #007bff;
    }
    
    .btn-primary {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        font-size: 1.1rem;
        transition: background-color 0.2s;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
    }
    
    .btn-primary:disabled {
        background-color: #6c757d;
        cursor: not-allowed;
    }
</style>
{% endblock %}