{% extends "base.html" %}

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

{% block content %}
<header class="main-header">
    <h1>Configuración de Red</h1>
    <p>Configure los parámetros de red para su dispositivo</p>
</header>

<!-- Panel de configuración general de red -->
<section class="content-box">
    <div class="panel-header">
        <h2>Configuración General</h2>
    </div>
    
    <form id="network-config-form" method="POST" action="{{ url_for('save_ip_config_route') }}">
        <input type="hidden" name="form_type" value="network">
        
        <div class="form-row">
            <div class="form-group">
                <label for="network_interface">Interfaz de Red</label>
                <select id="network_interface" name="network_interface">
                    <option value="eth0" {% if network_interface == 'eth0' %}selected{% endif %}>Ethernet (eth0)</option>
                    <option value="wlan0" {% if network_interface == 'wlan0' %}selected{% endif %}>WiFi (wlan0)</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="network_mode">Configuración IP</label>
                <select id="network_mode" name="network_mode">
                    <option value="dhcp" {% if network_mode == 'dhcp' %}selected{% endif %}>DHCP (automático)</option>
                    <option value="static" {% if network_mode == 'static' %}selected{% endif %}>IP Estática</option>
                </select>
            </div>
        </div>
        
        <div id="static-ip-fields" style="display: {% if network_mode == 'static' %}block{% else %}none{% endif %};">
            <div class="form-row">
                <div class="form-group">
                    <label for="ip_address">Dirección IP</label>
                    <input type="text" id="ip_address" name="ip_address" value="{{ ip_address }}" placeholder="192.168.1.100">
                </div>
                
                <div class="form-group">
                    <label for="subnet_mask">Máscara de Subred</label>
                    <input type="text" id="subnet_mask" name="subnet_mask" value="{{ subnet_mask }}" placeholder="255.255.255.0">
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="gateway_address">Puerta de Enlace</label>
                    <input type="text" id="gateway_address" name="gateway_address" value="{{ gateway_address }}" placeholder="192.168.1.1">
                </div>
                
                <div class="form-group">
                    <label for="dns_server">Servidor DNS</label>
                    <input type="text" id="dns_server" name="dns_server" value="{{ dns_server }}" placeholder="8.8.8.8">
                </div>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn-primary">Guardar Configuración General</button>
        </div>
    </form>
</section>

<!-- Panel de configuración WiFi -->
<section class="content-box">
    <div class="panel-header">
        <h2>Configuración WiFi</h2>
    </div>
    
    <form id="wifi-config-form" method="POST" action="{{ url_for('save_network_config_route') }}">
        <input type="hidden" name="form_type" value="wifi">
        <div class="form-group">
            <label for="wifi_scan">Redes WiFi disponibles</label>
            <div class="scan-container">
                <select id="wifi_scan" name="wifi_ssid">
                    <option value="">-- Seleccionar red --</option>
                    {% if wifi_ssid %}
                    <option value="{{ wifi_ssid }}" selected>{{ wifi_ssid }}</option>
                    {% endif %}
                    <!-- Aquí se cargarán las redes escaneadas -->
                </select>
                <button type="button" id="btn-scan" class="btn-secondary">Escanear</button>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="wifi_ssid">Nombre de la red (SSID)</label>
                <input type="text" id="wifi_ssid" name="wifi_ssid" value="{{ wifi_ssid }}" placeholder="Nombre de la red WiFi">
            </div>
            
            <div class="form-group">
                <label for="wifi_password">Contraseña</label>
                <div class="password-field">
                    <input type="password" id="wifi_password" name="wifi_password" placeholder="Contraseña de la red WiFi">
                    <button type="button" class="toggle-password" data-target="wifi_password">
                        <i class="icon-eye"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="wifi_security">Seguridad</label>
                <select id="wifi_security" name="wifi_security">
                    <option value="none" {% if wifi_security == 'none' %}selected{% endif %}>Sin seguridad</option>
                    <option value="wep" {% if wifi_security == 'wep' %}selected{% endif %}>WEP</option>
                    <option value="wpa" {% if wifi_security == 'wpa' %}selected{% endif %}>WPA</option>
                    <option value="wpa2" {% if wifi_security == 'wpa2' %}selected{% endif %}>WPA2</option>
                    <option value="wpa3" {% if wifi_security == 'wpa3' %}selected{% endif %}>WPA3</option>
                </select>
            </div>
            
            <div class="form-group">
                <label for="wifi_country">País</label>
                <select id="wifi_country" name="wifi_country">
                    <option value="US" {% if wifi_country == 'US' %}selected{% endif %}>Estados Unidos</option>
                    <option value="ES" {% if wifi_country == 'ES' %}selected{% endif %}>España</option>
                    <option value="MX" {% if wifi_country == 'MX' %}selected{% endif %}>México</option>
                    <option value="AR" {% if wifi_country == 'AR' %}selected{% endif %}>Argentina</option>
                    <option value="CL" {% if wifi_country == 'CL' %}selected{% endif %}>Chile</option>
                    <option value="CO" {% if wifi_country == 'CO' %}selected{% endif %}>Colombia</option>
                    <!-- Añadir más países según sea necesario -->
                </select>
            </div>
        </div>
        
        <div class="form-row">
            <div class="form-group">
                <label for="wifi_channel">Canal</label>
                <select id="wifi_channel" name="wifi_channel">
                    <option value="auto" {% if wifi_channel == 'auto' %}selected{% endif %}>Auto</option>
                    {% for i in range(1, 14) %}
                    <option value="{{ i }}" {% if wifi_channel == i|string %}selected{% endif %}>{{ i }}</option>
                    {% endfor %}
                </select>
            </div>
            
            <div class="form-group">
                <label for="wifi_hidden">Red oculta</label>
                <div class="toggle-switch">
                    <input type="checkbox" id="wifi_hidden" name="wifi_hidden" {% if wifi_hidden %}checked{% endif %}>
                    <label for="wifi_hidden"></label>
                </div>
            </div>
        </div>
        
        <div class="form-actions">
            <button type="submit" class="btn-primary">Guardar Configuración WiFi</button>
            <button type="button" id="btn-test-wifi" class="btn-secondary">Probar Conexión</button>
        </div>
    </form>
    
    <div id="wifi-status" class="status-panel" style="display: none;">
        <h3>Estado de la Conexión</h3>
        <div id="wifi-status-content"></div>
    </div>
</section>

{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
    // Mostrar/ocultar campos de IP estática
    const networkModeSelect = document.getElementById('network_mode');
    if (networkModeSelect) {
        networkModeSelect.addEventListener('change', function() {
            const staticFields = document.getElementById('static-ip-fields');
            if (staticFields) {
                if (this.value === 'static') {
                    staticFields.style.display = 'block';
                } else {
                    staticFields.style.display = 'none';
                }
            }
        });
    }
    
    // Mostrar/ocultar contraseñas
    const toggleButtons = document.querySelectorAll('.toggle-password');
    if (toggleButtons.length > 0) {
        toggleButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetId = this.getAttribute('data-target');
                const passwordField = document.getElementById(targetId);
                
                if (passwordField) {
                    if (passwordField.type === 'password') {
                        passwordField.type = 'text';
                        this.innerHTML = '<i class="icon-eye-off"></i>';
                    } else {
                        passwordField.type = 'password';
                        this.innerHTML = '<i class="icon-eye"></i>';
                    }
                }
            });
        });
    }
    
    // Función auxiliar para mostrar mensajes
    function showNetworkMessage(type, message) {
        // Verificar si existe un contenedor para mensajes, si no, crearlo
        let messageContainer = document.getElementById('network-messages');
        const wifiConfigForm = document.getElementById('wifi-config-form');
        
        if (!messageContainer && wifiConfigForm) {
            messageContainer = document.createElement('div');
            messageContainer.id = 'network-messages';
            messageContainer.style.marginTop = '10px';
            const firstFormGroup = wifiConfigForm.querySelector('.form-group');
            if (firstFormGroup && firstFormGroup.nextSibling) {
                wifiConfigForm.insertBefore(
                    messageContainer, 
                    firstFormGroup.nextSibling
                );
            } else if (wifiConfigForm) {
                wifiConfigForm.appendChild(messageContainer);
            }
        }
        
        if (messageContainer) {
            // Crear el mensaje
            const messageElement = document.createElement('div');
            messageElement.className = `alert alert-${type === 'error' ? 'danger' : type === 'warning' ? 'warning' : 'success'}`;
            messageElement.textContent = message;
            
            // Limpiar mensajes anteriores y mostrar el nuevo
            messageContainer.innerHTML = '';
            messageContainer.appendChild(messageElement);
            
            // Auto-ocultar después de un tiempo
            setTimeout(() => {
                messageElement.style.opacity = '0';
                messageElement.style.transition = 'opacity 0.5s';
                setTimeout(() => {
                    if (messageContainer.contains(messageElement)) {
                        messageContainer.removeChild(messageElement);
                    }
                }, 500);
            }, 5000);
        }
    }
    
    // Escaneo de redes WiFi
    const btnScan = document.getElementById('btn-scan');
    if (btnScan) {
        btnScan.addEventListener('click', function() {
            const button = this;
            const select = document.getElementById('wifi_scan');
            
            if (!select) return;
            
            // Deshabilitar botón y mostrar estado
            button.disabled = true;
            button.textContent = 'Escaneando...';
            
            // Crear una opción de "escaneando..." mientras se ejecuta
            while (select.options.length > 1) {
                select.remove(1);
            }
            
            const scanningOption = document.createElement('option');
            scanningOption.value = "";
            scanningOption.textContent = "Escaneando redes...";
            select.appendChild(scanningOption);
            
            // Realizar petición AJAX a la API con un timeout para evitar esperas infinitas
            const controller = new AbortController();
            const timeoutId = setTimeout(() => controller.abort(), 15000); // 15 segundos timeout
            
            fetch('/scan-wifi', { 
                signal: controller.signal,
                headers: { 
                    'Cache-Control': 'no-cache',
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => {

                if (response.redirected && response.url.includes('login')) {
                    window.location.href = '/login?expired=true';
                    throw new Error('Sesión expirada');
                }
                clearTimeout(timeoutId);
                
                // Verificar el tipo de contenido antes de intentar parsear como JSON
                const contentType = response.headers.get('content-type');
                if (!contentType || !contentType.includes('application/json')) {
                    // Si no es JSON, leer como texto para mostrar el error
                    return response.text().then(text => {
                        console.error('Respuesta no es JSON:', text);
                        throw new Error('La respuesta del servidor no es JSON válido');
                    });
                }
                
                if (!response.ok) {
                    throw new Error(`Error HTTP: ${response.status}`);
                }
                
                return response.json();
            })
            .then(data => {
                console.log('Respuesta del escaneo:', data); // Para depuración
                
                // Limpiar opciones existentes excepto la primera
                while (select.options.length > 1) {
                    select.remove(1);
                }
                
                if (data.success && data.networks && data.networks.length > 0) {
                    // Añadir redes escaneadas
                    data.networks.forEach(net => {
                        const option = document.createElement('option');
                        option.value = net.ssid;
                        
                        // Crear formato de texto según la calidad de señal
                        let signalStrength = '';
                        if (net.signal > -55) {
                            signalStrength = '(Excelente)';
                        } else if (net.signal > -70) {
                            signalStrength = '(Buena)';
                        } else if (net.signal > -85) {
                            signalStrength = '(Regular)';
                        } else {
                            signalStrength = '(Débil)';
                        }
                        
                        option.textContent = `${net.ssid} - ${net.security} ${signalStrength}`;
                        select.appendChild(option);
                    });
                    
                    // Mostrar un mensaje en la página
                    showNetworkMessage('success', `Se encontraron ${data.networks.length} redes WiFi`);
                } else {
                    // Si no hay redes o el escaneo falló pero se enviaron datos simulados
                    if (data.networks && data.networks.length > 0) {
                        data.networks.forEach(net => {
                            const option = document.createElement('option');
                            option.value = net.ssid;
                            option.textContent = `${net.ssid} - ${net.security} (Simulado)`;
                            select.appendChild(option);
                        });
                        showNetworkMessage('warning', 'Mostrando redes simuladas. El escaneo real no está disponible.');
                    } else {
                        // No hay redes en absoluto
                        const option = document.createElement('option');
                        option.value = "";
                        option.textContent = "No se encontraron redes";
                        select.appendChild(option);
                        showNetworkMessage('error', 'No se encontraron redes WiFi');
                    }
                }
            })
            .catch(error => {
                console.error('Error:', error);
                
                if (select) {
                    // Limpiar opciones existentes excepto la primera
                    while (select.options.length > 1) {
                        select.remove(1);
                    }
                    
                    // Añadir opción de error
                    const option = document.createElement('option');
                    option.value = "";
                    option.textContent = "Error al escanear redes";
                    select.appendChild(option);
                }
                
                // Mostrar mensaje de error en la página
                showNetworkMessage('error', `Error al escanear redes: ${error.message}`);
            })
            .finally(() => {
                // Restaurar el botón
                if (button) {
                    button.disabled = false;
                    button.textContent = 'Escanear';
                }
            });
        });
    }
    
    // Seleccionar red WiFi del listado
    const wifiScan = document.getElementById('wifi_scan');
    if (wifiScan) {
        wifiScan.addEventListener('change', function() {
            const wifiSsid = document.getElementById('wifi_ssid');
            if (this.value && wifiSsid) {
                wifiSsid.value = this.value;
            }
        });
    }
    
    // Simular prueba de conexión WiFi
    const btnTestWifi = document.getElementById('btn-test-wifi');
    if (btnTestWifi) {
        btnTestWifi.addEventListener('click', function(e) {
            e.preventDefault();
            
            const ssid = document.getElementById('wifi_ssid');
            const password = document.getElementById('wifi_password');
            const statusPanel = document.getElementById('wifi-status');
            const statusContent = document.getElementById('wifi-status-content');
            
            if (!ssid || !password || !statusPanel || !statusContent) return;
            
            if (!ssid.value) {
                alert('Por favor ingrese el nombre de la red WiFi');
                return;
            }
            
            this.disabled = true;
            this.textContent = 'Probando...';
            
            statusPanel.style.display = 'block';
            statusContent.innerHTML = '<p>Intentando conectar a la red ' + ssid.value + '...</p>';
            
            // Realizar petición AJAX real
            fetch('/test-wifi-connection', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `wifi_ssid=${encodeURIComponent(ssid.value)}&wifi_password=${encodeURIComponent(password.value)}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    statusContent.innerHTML = `
                        <p class="success-message">Conexión exitosa a la red ${ssid.value}</p>
                        <div class="connection-details">
                            <p><strong>IP asignada:</strong> ${data.details.ip}</p>
                            <p><strong>Calidad de señal:</strong> ${data.details.signal}</p>
                            <p><strong>Velocidad:</strong> ${data.details.speed}</p>
                        </div>
                    `;
                } else {
                    statusContent.innerHTML = `
                        <p class="error-message">Error al conectar a la red ${ssid.value}</p>
                        <div class="connection-details">
                            <p><strong>Motivo:</strong> ${data.details.reason}</p>
                            <p><strong>Sugerencia:</strong> ${data.details.suggestion}</p>
                        </div>
                    `;
                }
            })
            .catch(error => {
                statusContent.innerHTML = `
                    <p class="error-message">Error al probar la conexión</p>
                    <div class="connection-details">
                        <p><strong>Error:</strong> ${error.message}</p>
                    </div>
                `;
            })
            .finally(() => {
                if (this) {
                    this.disabled = false;
                    this.textContent = 'Probar Conexión';
                }
            });
        });
    }
    
    // Función para configurar event listeners de forma segura
    function setupButtonListener(id, eventType, callback) {
        const element = document.getElementById(id);
        if (element) {
            element.addEventListener(eventType, callback);
        }
    }
    
});
</script>
{% endblock %}

{% block extra_css %}
<style>
    /* Estilos para la página de configuración de red */
    .form-inline {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .form-inline input,
    .form-inline select {
        flex: 1;
    }
    
    .scan-container {
        display: flex;
        gap: 0.5rem;
    }
    
    .scan-container select {
        flex: 1;
    }
    
    .form-actions {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    
    .btn-primary {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 0.6rem 1.2rem;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        transition: background-color 0.2s;
    }
    
    .btn-primary:hover {
        background-color: #0069d9;
    }
    
    .btn-secondary {
        background-color: #6c757d;
        color: white;
        border: none;
        padding: 0.6rem 1.2rem;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        font-size: 1rem;
        transition: background-color 0.2s;
    }
    
    .btn-secondary:hover {
        background-color: #5a6268;
    }
    
    .status-panel {
        margin-top: 1.5rem;
        padding: 1rem;
        border: 1px solid #ddd;
        border-radius: 4px;
        background-color: #f8f9fa;
    }
    
    .success-message {
        color: #28a745;
        font-weight: 500;
    }
    
    .error-message {
        color: #dc3545;
        font-weight: 500;
    }
    
    .warning-message {
        color: #ffc107;
        font-weight: 500;
    }
    
    .connection-details {
        margin-top: 0.5rem;
        padding: 0.5rem;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
    }
    
    .diagnostic-tools {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .tool-card {
        background-color: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 1rem;
    }
    
    .tool-card h3 {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 1.1rem;
    }
    
    .tool-result {
        margin-top: 1rem;
        max-height: 200px;
        overflow-y: auto;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        padding: 0.5rem;
        font-family: monospace;
        font-size: 0.9rem;
    }
    
    .summary-panel {
        margin-top: 0.5rem;
        padding: 0.5rem;
        background-color: #f0f8ff;
        border: 1px solid #b8daff;
        border-radius: 4px;
    }
    
    /* Toggle switch para opciones booleanas */
    .toggle-switch {
        position: relative;
        display: inline-block;
    }
    
    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    
    .toggle-switch label {
        display: block;
        width: 48px;
        height: 24px;
        border-radius: 12px;
        background-color: #ccc;
        cursor: pointer;
        transition: background-color 0.2s;
        position: relative;
    }
    
    .toggle-switch label::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: white;
        transition: left 0.2s;
    }
    
    .toggle-switch input:checked + label {
        background-color: var(--primary-color, #007bff);
    }
    
    .toggle-switch input:checked + label::after {
        left: 26px;
    }
    
    /* Estilos para mensajes de alerta */
    .alert {
        padding: 0.75rem 1.25rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 0.25rem;
    }
    
    .alert-success {
        color: #155724;
        background-color: #d4edda;
        border-color: #c3e6cb;
    }
    
    .alert-warning {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }
    
    .alert-danger {
        color: #721c24;
        background-color: #f8d7da;
        border-color: #f5c6cb;
    }
    
    /* Estilos para el contenedor de mensajes */
    #network-messages {
        transition: all 0.3s ease;
    }
    
    /* Estilo para la página de restarting */
    .restart-content {
        text-align: center;
        padding: 3rem 1rem;
    }
    
    .spinner {
        border: 4px solid rgba(0, 123, 255, 0.3);
        border-radius: 50%;
        border-top: 4px solid #007bff;
        width: 50px;
        height: 50px;
        margin: 2rem auto;
        animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    
    .countdown {
        font-size: 3rem;
        font-weight: bold;
        margin: 1rem 0;
    }
    
    .password-field {
        position: relative;
        display: flex;
    }
    
    .password-field input {
        flex: 1;
    }
    
    .password-field button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #6c757d;
    }
</style>
{% endblock %}