{% extends "base.html" %}

{% block title %}Simulador de Ataques ENS - ENS PYME{% endblock %}

{% block content %}
  <h1>⚔️ 6. Simulador de Ataques ENS (Script 6)</h1>
  
  <p class="intro">
    Simule ataques controlados para evaluar la resistencia de su infraestructura de seguridad.
    Descargue las herramientas necesarias y siga las instrucciones para un análisis completo.
  </p>

  <div class="download-section">
    <h2>📥 Descargar Herramientas de Simulación</h2>
    <div class="scripts-grid">
      <div class="script-card">
        <h3>⚔️ Simulador de Ataques</h3>
        <p>Herramienta principal para ejecutar simulaciones de ataque controladas.</p>
        <a href="{{ url_for('static', filename='scripts/simulador_ataques.py') }}" 
           class="btn btn-primary" download>
          📥 Descargar simulador_ataques.py
        </a>
        <div class="usage-info">
          <strong>Uso:</strong>
          <code>sudo python3 simulador_ataques.py &lt;IP&gt; [opciones]</code><br>
          <small>Requiere Scapy y permisos de administrador.</small>
        </div>
      </div>

      <div class="script-card">
        <h3>📚 Manual de Usuario</h3>
        <p>Instrucciones detalladas, instalación, ejemplos y buenas prácticas.</p>
        <a href="{{ url_for('static', filename='scripts/README_SIMULADOR.md') }}" 
           class="btn btn-success" download>
          📖 Descargar README completo
        </a>
        <div class="usage-info">
          <small>Incluye configuración, ejemplos de uso y medidas de seguridad.</small>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="upload-section">
    <h2>📤 Paso 2: Subir informe JSON del simulador</h2>
    <p>
      Cuando el simulador haya generado <code>informe_simulador.json</code>, descárguelo y súbalo aquí para
      obtener un diagnóstico visual automático:
    </p>

    <form method="post" action="{{ url_for('simulador_ataques') }}" enctype="multipart/form-data" class="upload-form">
      <label for="jsonfile">Archivo JSON de informe (informe_simulador.json):</label>
      <input type="file" name="jsonfile" id="jsonfile" accept=".json" required>
      <button type="submit" class="btn btn-warning">🔍 Subir y analizar</button>
    </form>
  </div>

  {% if resultado_simulador %}
    <div class="resultados-section">
      <h2>📊 Análisis de Resultados de Simulación</h2>
      
      {% for clave, info in resultado_simulador.items() %}
        <div class="resultado-block">
          <div class="resultado-header">
            <h3>{{ info.titulo }}</h3>
          </div>
          
          <div class="resultado-content">
            <p class="resultado-description">{{ info.descripcion }}</p>

            <div class="resultado-valor">
              <strong>📈 Resultado:</strong>
              <span class="valor-destacado">
                {% if clave in ['tcp_abiertos', 'udp_abiertos'] %}
                  {{ info.dato }}
                {% elif clave == 'ftp_anonimo' %}
                  {% if info.dato %}
                    <span class="estado-peligro">✅ Sí</span>
                  {% else %}
                    <span class="estado-seguro">❌ No</span>
                  {% endif %}
                {% elif clave == 'telnet_banner' %}
                  {% if info.dato %}
                    <span class="estado-peligro">"{{ info.dato }}"</span>
                  {% else %}
                    <span class="estado-seguro">No detectado</span>
                  {% endif %}
                {% else %}
                  {{ info.dato }}
                {% endif %}
              </span>
            </div>

            {% if info.recomendacion and info.recomendacion.strip() %}
            <div class="resultado-recomendacion">
              <strong>💡 Recomendación:</strong><br>
              {{ info.recomendacion }}
            </div>
            {% endif %}
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}

  <div class="nav-links">
    <a href="{{ url_for('index') }}" class="btn btn-secondary">🏠 Volver al menú principal</a>
  </div>
{% endblock %}

{% block extra_css %}
<style>
  .scripts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5em;
    margin: 1.5em 0;
  }
  
  .script-card {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5em;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .script-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-color: #0066cc;
  }
  
  .script-card h3 {
    margin-top: 0;
    color: #2c3e50;
    font-size: 1.2em;
  }
  
  .script-card p {
    color: #666;
    margin-bottom: 1em;
  }
  
  .usage-info {
    margin-top: 1em;
    padding: 1em;
    background: #f8f9fa;
    border-radius: 5px;
    border-left: 4px solid #0066cc;
  }
  
  .upload-section {
    background: #f8f9fa;
    padding: 2em;
    border-radius: 8px;
    margin: 2em 0;
  }
  
  .upload-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 500px;
  }
  
  .resultados-section {
    margin-top: 2em;
  }
  
  .resultado-block {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 2em;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .resultado-header {
    background: linear-gradient(135deg, #6f42c1, #5a2d91);
    color: white;
    padding: 1em 1.5em;
  }
  
  .resultado-header h3 {
    margin: 0;
    color: white;
  }
  
  .resultado-content {
    padding: 1.5em;
  }
  
  .resultado-description {
    margin: 0 0 1em 0;
    color: #495057;
    font-style: italic;
  }
  
  .resultado-valor {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 1em;
    margin-bottom: 1em;
  }
  
  .valor-destacado {
    font-size: 1.1em;
    font-weight: bold;
    margin-left: 0.5em;
  }
  
  .estado-peligro {
    color: #dc3545;
    background: #f8d7da;
    padding: 0.25em 0.5em;
    border-radius: 3px;
    border: 1px solid #f5c6cb;
  }
  
  .estado-seguro {
    color: #155724;
    background: #d4edda;
    padding: 0.25em 0.5em;
    border-radius: 3px;
    border: 1px solid #c3e6cb;
  }
  
  .resultado-recomendacion {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    border-radius: 5px;
    padding: 1em;
    color: #0c5460;
  }
  
  @media (max-width: 768px) {
    .scripts-grid {
      grid-template-columns: 1fr;
    }
    
    .upload-form {
      max-width: none;
    }
    
    .resultado-valor {
      font-size: 0.9em;
    }
  }
</style>
{% endblock %}