{% extends "base.html" %}

{% block title %}Estado de Red - Mi Aplicación{% endblock %}

{% block content %}
<header class="main-header">
    <h1>Estado de Red</h1>
    <p>Información en tiempo real sobre la conectividad de su dispositivo</p>
</header>

<!-- Panel de estado general -->
<section class="content-box">
    <div class="panel-header">
        <h2>Estado de Conectividad</h2>
        <button id="btn-refresh" class="btn-outline">
            <i class="icon-refresh"></i> Actualizar
        </button>
    </div>
    
    <div class="status-grid">
        <div class="status-card">
            <div class="status-title">Estado de Red</div>
            <div class="status-value {% if network_status == 'connected' %}status-good{% else %}status-bad{% endif %}">
                <span class="status-indicator {% if network_status == 'Conectaada' %}online{% else %}Desconectada{% endif %}"></span>
                {{ network_status|default('Desconectado')|capitalize }}
            </div>
        </div>
        
        <div class="status-card">
            <div class="status-title">Dirección IP</div>
            <div class="status-value">{{ ip_address|default('No asignada') }}</div>
        </div>
        
        <div class="status-card">
            <div class="status-title">Interfaz Activa</div>
            <div class="status-value">{{ active_interface|default('Ninguna') }}</div>
        </div>
        
        <div class="status-card">
            <div class="status-title">Tiempo de Actividad</div>
            <div class="status-value">{{ uptime|default('0 minutos') }}</div>
        </div>
        
        <div class="status-card">
            <div class="status-title">Señal WiFi</div>
            <div class="status-value">
                {% if wifi_signal %}
                <div class="signal-strength signal-{{ wifi_signal_quality }}">
                    <span></span><span></span><span></span><span></span><span></span>
                </div>
                {{ wifi_signal }} dBm
                {% else %}
                No disponible
                {% endif %}
            </div>
        </div>
        
        <div class="status-card">
            <div class="status-title">Puerta de Enlace</div>
            <div class="status-value">{{ gateway_address|default('No configurada') }}</div>
        </div>
    </div>
</section>

<!-- Panel de estadísticas de tráfico -->
<section class="content-box">
    <div class="panel-header">
        <h2>Tráfico de Red</h2>
    </div>
    
    <div class="traffic-stats">
        
        <div class="traffic-row">
            <div class="traffic-label">Paquetes enviados:</div>
            <div class="traffic-value">{{ tx_packets|default('0') }}</div>
            <div class="traffic-label">Paquetes recibidos:</div>
            <div class="traffic-value">{{ rx_packets|default('0') }}</div>
        </div>
        
    </div>
</section>

<!-- Panel de pruebas de conectividad -->
<section class="content-box">
    <div class="panel-header">
        <h2>Pruebas de Conectividad</h2>
    </div>
    
    <div class="connectivity-tests">
        
        <div class="test-card">
            <div class="test-header">
                <h3>Ping DNS (8.8.8.8)</h3>
                <button id="btn-ping-dns" class="btn-sm btn-outline">Probar</button>
            </div>
            <div id="ping-dns-result" class="test-result">Pulse el botón para realizar la prueba.</div>
        </div>
        
        <div class="test-card">
            <div class="test-header">
                <h3>Resolución DNS (google.com)</h3>
                <button id="btn-dns-lookup" class="btn-sm btn-outline">Probar</button>
            </div>
            <div id="dns-lookup-result" class="test-result">Pulse el botón para realizar la prueba.</div>
        </div>
    </div>
</section>
{% endblock %}

{% block extra_js %}
<script>
   // Actualización para usar network-diagnostic-direct

document.getElementById('btn-ping-dns').addEventListener('click', function() {
    const resultDiv = document.getElementById('ping-dns-result');
    resultDiv.innerHTML = '<div class="loading">Probando...</div>';
    
    // Realizar petición AJAX real
    const formData = new FormData();
    formData.append('command', 'ping');
    formData.append('parameter', '8.8.8.8');  // Google DNS
    
    fetch('/network-diagnostic-direct', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const summary = data.summary;
            resultDiv.innerHTML = `
                <div class="test-success">
                    Ping exitoso (${summary.avg_time.toFixed(1)}ms)<br>
                    ${summary.sent} paquetes transmitidos, ${summary.received} recibidos, ${summary.lost_percent.toFixed(0)}% pérdida
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="test-failure">
                    Ping fallido<br>
                    ${data.output || 'Error desconocido'}
                </div>
            `;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `
            <div class="test-failure">
                Error en la prueba<br>
                ${error.message}
            </div>
        `;
    });
});

document.getElementById('btn-dns-lookup').addEventListener('click', function() {
    const resultDiv = document.getElementById('dns-lookup-result');
    resultDiv.innerHTML = '<div class="loading">Probando...</div>';
    
    // Realizar petición AJAX real
    const formData = new FormData();
    formData.append('command', 'dns');
    formData.append('parameter', 'google.com');
    
    fetch('/network-diagnostic-direct', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const summary = data.summary;
            resultDiv.innerHTML = `
                <div class="test-success">
                    Resolución exitosa<br>
                    ${summary.hostname} → ${summary.ip_address}
                </div>
            `;
        } else {
            resultDiv.innerHTML = `
                <div class="test-failure">
                    Resolución fallida<br>
                    ${data.output || 'Error desconocido'}
                </div>
            `;
        }
    })
    .catch(error => {
        resultDiv.innerHTML = `
            <div class="test-failure">
                Error en la prueba<br>
                ${error.message}
            </div>
        `;
    });
});
</script>
{% endblock %}

{% block extra_css %}
<style>
    /* Estilos para la página de estado de red */
    .status-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .status-card {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        border: 1px solid #eee;
    }
    
    .status-title {
        font-weight: 500;
        font-size: 0.9rem;
        color: #555;
        margin-bottom: 0.5rem;
    }
    
    .status-value {
        font-size: 1.1rem;
        font-family: monospace;
        display: flex;
        align-items: center;
    }
    
    .status-good {
        color: #28a745;
    }
    
    .status-bad {
        color: #dc3545;
    }
    
    .status-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 8px;
    }
    
    .status-indicator.online {
        background-color: #28a745;
        box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
    }
    
    .status-indicator.offline {
        background-color: #dc3545;
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    }
    
    /* Indicador de fuerza de señal */
    .signal-strength {
        display: flex;
        margin-right: 8px;
        height: 15px;
        align-items: flex-end;
    }
    
    .signal-strength span {
        width: 4px;
        margin-right: 2px;
        background-color: #ccc;
    }
    
    .signal-strength span:nth-child(1) { height: 20%; }
    .signal-strength span:nth-child(2) { height: 40%; }
    .signal-strength span:nth-child(3) { height: 60%; }
    .signal-strength span:nth-child(4) { height: 80%; }
    .signal-strength span:nth-child(5) { height: 100%; }
    
    .signal-excellent span:nth-child(1),
    .signal-excellent span:nth-child(2),
    .signal-excellent span:nth-child(3),
    .signal-excellent span:nth-child(4),
    .signal-excellent span:nth-child(5) {
        background-color: #28a745;
    }
    
    .signal-good span:nth-child(1),
    .signal-good span:nth-child(2),
    .signal-good span:nth-child(3),
    .signal-good span:nth-child(4) {
        background-color: #28a745;
    }
    
    .signal-fair span:nth-child(1),
    .signal-fair span:nth-child(2),
    .signal-fair span:nth-child(3) {
        background-color: #ffc107;
    }
    
    .signal-poor span:nth-child(1),
    .signal-poor span:nth-child(2) {
        background-color: #dc3545;
    }
    
    .signal-bad span:nth-child(1) {
        background-color: #dc3545;
    }
    
    /* Estadísticas de tráfico */
    .traffic-stats {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        border: 1px solid #eee;
    }
    
    .traffic-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin-bottom: 0.5rem;
        padding: 0.5rem;
    }
    
    .traffic-row:nth-child(odd) {
        background-color: rgba(0, 0, 0, 0.03);
    }
    
    .traffic-label {
        font-weight: 500;
        color: #555;
    }
    
    .traffic-value {
        font-family: monospace;
    }
    
    /* Pruebas de conectividad */
    .connectivity-tests {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .test-card {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
        border: 1px solid #eee;
    }
    
    .test-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    
    .test-header h3 {
        margin: 0;
        font-size: 1rem;
    }
    
    .test-result {
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 0.75rem;
        font-family: monospace;
        font-size: 0.9rem;
        min-height: 80px;
    }
    
    .loading {
        color: #6c757d;
        font-style: italic;
    }
    
    .test-success {
        color: #28a745;
    }
    
    .test-failure {
        color: #dc3545;
    }
    
    .btn-sm {
        font-size: 0.875rem;
        padding: 0.25rem 0.5rem;
    }
    
    .btn-outline {
        background-color: transparent;
        border: 1px solid var(--primary-color);
        color: var(--primary-color);
    }
    
    .btn-outline:hover {
        background-color: var(--primary-color);
        color: white;
    }
    
    /* Iconos */
    .icon-refresh {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 5px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6'%3E%3C/path%3E%3Cpath d='M1 20v-6h6'%3E%3C/path%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'%3E%3C/path%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .status-grid, .connectivity-tests {
            grid-template-columns: 1fr;
        }
        
        .traffic-row {
            grid-template-columns: 1fr;
            gap: 0.5rem;
        }
        
        .traffic-value {
            margin-bottom: 0.75rem;
        }
    }
</style>
{% endblock %}