{% extends "base.html" %}

{% block title %}Detector de Incidentes ENS - ENS PYME{% endblock %}

{% block content %}
  <h1>🚨 5. Detector de Incidentes ENS (Script 5)</h1>
  
  <p class="intro">
    Detecte y analice incidentes de seguridad en sus sistemas utilizando nuestras herramientas especializadas.
    Descargue el detector apropiado para su entorno y siga las instrucciones.
  </p>

  <div class="download-section">
    <h2>📥 Descargar Scripts de Detección</h2>
    <div class="scripts-grid">
      <div class="script-card">
        <h3>🐧 Detector Unificado (Python)</h3>
        <p>Script multiplataforma para detección avanzada de incidentes.</p>
        <a href="{{ url_for('static', filename='scripts/detector_incidentes.py') }}" 
           class="btn btn-primary" download>
          📥 Descargar detector_unificado.py
        </a>
        <div class="usage-info">
          <strong>Uso:</strong>
          <code>python3 detector_unificado.py</code><br>
          <small>Asegúrese de que Logstash/Beats lea sus logs al JSON.</small>
        </div>
      </div>

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

  <hr>

  <div class="upload-section">
    <h2>📤 Subir archivo de alertas</h2>
    <p>
      Cuando el detector haya acumulado varias alertas en <code>incidentes_alertas.log</code>,
      descargue ese fichero y súbalo aquí para generar un informe formateado:
    </p>

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

  {% if informe_struct %}
    <div class="resultados-section">
      <h2>🔍 Análisis de Incidentes Detectados</h2>
      
      {% for tipo, lista in informe_struct.items() %}
        {% set info = lista[0] %}
        <div class="incidente-block">
          <div class="incidente-header">
            <h3>{{ info.titulo }}</h3>
          </div>
          <p class="incidente-description">{{ info.descripcion }}</p>

          {% if lista %}
            <div class="eventos-list">
              {% for e in lista %}
                <div class="evento-item">
                  <div class="evento-timestamp">
                    <strong>⏰ {{ e.timestamp }}</strong>
                  </div>
                  <div class="evento-mensaje">
                    {{ e.mensaje }}
                  </div>
                  <div class="evento-recomendacion">
                    <strong>💡 Recomendación:</strong><br>
                    {{ e.recomendacion.replace('\n','<br>')|safe }}
                  </div>
                </div>
              {% endfor %}
            </div>
          {% else %}
            <div class="alert alert-success">
              <strong>✅ Sin alertas</strong><br>
              No se registraron alertas de este tipo.
            </div>
          {% endif %}
        </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;
  }
  
  .incidente-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);
  }
  
  .incidente-header {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    padding: 1em 1.5em;
  }
  
  .incidente-header h3 {
    margin: 0;
    color: white;
  }
  
  .incidente-description {
    padding: 1em 1.5em;
    margin: 0;
    background: #f8f9fa;
    font-style: italic;
    border-bottom: 1px solid #dee2e6;
  }
  
  .eventos-list {
    padding: 1.5em;
  }
  
  .evento-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 5px;
    padding: 1em;
    margin-bottom: 1em;
  }
  
  .evento-item:last-child {
    margin-bottom: 0;
  }
  
  .evento-timestamp {
    color: #495057;
    font-size: 0.9em;
    margin-bottom: 0.5em;
  }
  
  .evento-mensaje {
    margin-bottom: 1em;
    font-weight: 500;
  }
  
  .evento-recomendacion {
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 4px;
    padding: 0.75em;
    color: #155724;
  }
  
  @media (max-width: 768px) {
    .scripts-grid {
      grid-template-columns: 1fr;
    }
    
    .upload-form {
      max-width: none;
    }
  }
</style>
{% endblock %}