{% extends "base.html" %}

{% block title %}Generador de Políticas ENS - ENS PYME{% endblock %}

{% block content %}
  <h1>📄 3. Generar Políticas de Seguridad (ENS Nivel Alto)</h1>
  
  <p class="intro">
    Genere automáticamente políticas de seguridad personalizadas para su organización,
    cumpliendo con los requisitos del Esquema Nacional de Seguridad.
  </p>

  <form method="post" action="{{ url_for('politicas') }}" class="politicas-form">
    
    <!-- Selector de políticas -->
    <div class="selector-section">
      <h2>🎯 ¿Qué políticas quieres generar?</h2>
      <div class="policies-grid">
        <label class="policy-checkbox">
          <input type="checkbox" name="policies" value="seguridad">
          <span class="checkmark"></span>
          <div class="policy-info">
            <strong>📋 Política de Seguridad (Org.1)</strong>
            <small>Política general de seguridad de la organización</small>
          </div>
        </label>

        <label class="policy-checkbox">
          <input type="checkbox" name="policies" value="normativa">
          <span class="checkmark"></span>
          <div class="policy-info">
            <strong>📜 Normativa de Seguridad (Org.2)</strong>
            <small>Normativa específica de procedimientos</small>
          </div>
        </label>

        <label class="policy-checkbox">
          <input type="checkbox" name="policies" value="auth_externa">
          <span class="checkmark"></span>
          <div class="policy-info">
            <strong>🔐 Autenticación Usuarios Externos (Op.acc.5)</strong>
            <small>Política para accesos externos</small>
          </div>
        </label>

        <label class="policy-checkbox">
          <input type="checkbox" name="policies" value="auth_interna">
          <span class="checkmark"></span>
          <div class="policy-info">
            <strong>👥 Autenticación Usuarios Internos (Op.acc.6)</strong>
            <small>Política para empleados internos</small>
          </div>
        </label>

        <label class="policy-checkbox">
          <input type="checkbox" name="policies" value="criptografia">
          <span class="checkmark"></span>
          <div class="policy-info">
            <strong>🔒 Criptografía (Mp.si.2)</strong>
            <small>Políticas de cifrado y algoritmos</small>
          </div>
        </label>

        <label class="policy-checkbox">
          <input type="checkbox" name="policies" value="backups">
          <span class="checkmark"></span>
          <div class="policy-info">
            <strong>💾 Copias de Seguridad (Mp.info.6)</strong>
            <small>Política de respaldo y recuperación</small>
          </div>
        </label>
      </div>
    </div>

    <!-- Parámetros comunes -->
    <div id="comunes" class="config-section" style="display:block;">
      <h2>🏢 Parámetros comunes</h2>
      <div class="form-grid">
        <div class="form-group">
          <label for="company_name">Nombre de la PYME:</label>
          <input type="text" name="company_name" id="company_name" required 
                 placeholder="Ej: Tecnologías Avanzadas S.L.">
        </div>
        <div class="form-group">
          <label for="security_officer">Responsable de Seguridad:</label>
          <input type="text" name="security_officer" id="security_officer" required 
                 placeholder="Ej: Juan Pérez García">
        </div>
      </div>
    </div>

    <!-- Autenticación Externa -->
    <div id="param_auth_externa" class="config-section hidden">
      <h2>🔐 Parámetros para Autenticación Externa (Op.acc.5)</h2>
      <div class="form-grid">
        <div class="form-group">
          <label for="pwd_length">Longitud mínima de contraseña:</label>
          <input type="number" name="pwd_length" id="pwd_length" min="8" value="12" 
                 placeholder="12">
          <small>Mínimo 8 caracteres, recomendado 12 o más</small>
        </div>
        <div class="form-group">
          <label for="pwd_expiry">Rotación de contraseña (días):</label>
          <input type="number" name="pwd_expiry" id="pwd_expiry" min="30" value="90" 
                 placeholder="90">
          <small>Frecuencia de cambio obligatorio</small>
        </div>
        <div class="form-group">
          <label for="two_factor_method">Método 2FA:</label>
          <select name="two_factor_method" id="two_factor_method">
            <option value="SMS">📱 SMS</option>
            <option value="Authenticator App">📲 Authenticator App</option>
            <option value="Token Físico">🔑 Token Físico</option>
          </select>
          <small>Método de doble factor de autenticación</small>
        </div>
      </div>
    </div>

    <!-- Autenticación Interna -->
    <div id="param_auth_interna" class="config-section hidden">
      <h2>👥 Parámetros para Autenticación Interna (Op.acc.6)</h2>
      <div class="form-grid">
        <div class="form-group">
          <label for="pwd_length_int">Longitud mínima de contraseña interna:</label>
          <input type="number" name="pwd_length_int" id="pwd_length_int" min="8" value="10" 
                 placeholder="10">
          <small>Para usuarios internos</small>
        </div>
        <div class="form-group">
          <label for="pwd_expiry_int">Rotación de contraseña interna (días):</label>
          <input type="number" name="pwd_expiry_int" id="pwd_expiry_int" min="30" value="180" 
                 placeholder="180">
          <small>Política más flexible para internos</small>
        </div>
        <div class="form-group">
          <label for="two_factor_roles_int">Roles internos con 2FA:</label>
          <input type="text" name="two_factor_roles_int" id="two_factor_roles_int" 
                 placeholder="Admin,DBA,Gerente">
          <small>Separados por comas (ej: Admin,DBA)</small>
        </div>
      </div>
    </div>

    <!-- Criptografía -->
    <div id="param_criptografia" class="config-section hidden">
      <h2>🔒 Parámetros para Criptografía (Mp.si.2)</h2>
      <div class="form-grid">
        <div class="form-group">
          <label for="crypto_symmetric">Algoritmo simétrico:</label>
          <select name="crypto_symmetric" id="crypto_symmetric">
            <option value="AES-256">🔐 AES-256</option>
            <option value="ChaCha20">🔒 ChaCha20</option>
          </select>
          <small>Algoritmo de cifrado simétrico</small>
        </div>
        <div class="form-group">
          <label for="crypto_rotation">Rotación de claves (días):</label>
          <input type="number" name="crypto_rotation" id="crypto_rotation" min="30" value="365" 
                 placeholder="365">
          <small>Frecuencia de cambio de claves</small>
        </div>
      </div>
    </div>

    <!-- Copias de Seguridad -->
    <div id="param_backups" class="config-section hidden">
      <h2>💾 Parámetros para Copias de Seguridad (Mp.info.6)</h2>
      <div class="form-grid">
        <div class="form-group">
          <label for="backup_freq">Frecuencia de backup:</label>
          <select name="backup_freq" id="backup_freq">
            <option value="Diaria">📅 Diaria</option>
            <option value="Semanal">📊 Semanal</option>
            <option value="Mensual">📈 Mensual</option>
          </select>
          <small>Frecuencia de las copias automáticas</small>
        </div>
        <div class="form-group">
          <label for="backup_retention">Retención (días):</label>
          <input type="number" name="backup_retention" id="backup_retention" min="1" value="30" 
                 placeholder="30">
          <small>Tiempo de conservación de copias</small>
        </div>
        <div class="form-group">
          <label for="backup_dest">Destino de copia:</label>
          <input type="text" name="backup_dest" id="backup_dest" value="/mnt/nas/backups/" 
                 placeholder="/mnt/nas/backups/">
          <small>Ruta local o URL de almacenamiento</small>
        </div>
      </div>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn btn-success">📄 Generar políticas</button>
      <button type="reset" class="btn btn-secondary">🔄 Limpiar formulario</button>
    </div>
  </form>

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

{% block extra_css %}
<style>
  .politicas-form {
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .selector-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2em;
    margin: 2em 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .policies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
    margin-top: 1.5em;
  }
  
  .policy-checkbox {
    display: flex !important;
    align-items: center;
    padding: 1em;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    margin: 0 !important;
  }
  
  /* Sobrescribir estilos del base.html para los checkboxes */
  .policies-grid label.policy-checkbox {
    display: flex !important;
    margin-bottom: 0 !important;
  }
  
  .policy-checkbox:hover {
    border-color: #0066cc;
    background: #f8f9fa;
  }
  
  .policy-checkbox input[type="checkbox"] {
    width: auto !important;
    max-width: auto !important;
    margin-right: 1em !important;
    margin-bottom: 0 !important;
    transform: scale(1.2);
    padding: 0 !important;
  }
  
  .policy-checkbox:has(input:checked) {
    border-color: #28a745;
    background: #d4edda;
  }
  
  .policy-info strong {
    display: block;
    color: #2c3e50;
    margin-bottom: 0.25em;
  }
  
  .policy-info small {
    color: #6c757d;
    font-style: italic;
  }
  
  .config-section {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 2em;
    margin: 1.5em 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .config-section.hidden {
    display: none;
  }
  
  .config-section h2 {
    margin-top: 0;
    color: #2c3e50;
    border-bottom: 2px solid #0066cc;
    padding-bottom: 0.5em;
  }
  
  .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5em;
    margin-top: 1.5em;
  }
  
  .form-group {
    display: flex;
    flex-direction: column;
  }
  
  .form-group label {
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 0.5em;
  }
  
  .form-group input,
  .form-group select {
    padding: 0.75em;
    border: 2px solid #e9ecef;
    border-radius: 5px;
    font-size: 1em;
    transition: border-color 0.3s ease;
    width: 100% !important;
    max-width: none !important;
  }
  
  /* Específico para inputs numéricos */
  .form-group input[type="number"] {
    width: 100% !important;
    max-width: 200px !important;
  }
  
  .form-group input:focus,
  .form-group select:focus {
    border-color: #0066cc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
  }
  
  .form-group small {
    color: #6c757d;
    font-size: 0.875em;
    margin-top: 0.25em;
  }
  
  .form-actions {
    text-align: center;
    padding: 2em;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 2em;
  }
  
  .checkmark {
    position: relative;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 3px;
    margin-right: 1em;
    border: 2px solid #ddd;
    transition: all 0.3s ease;
  }
  
  .policy-checkbox input:checked ~ .checkmark {
    background-color: #28a745;
    border-color: #28a745;
  }
  
  .policy-checkbox input:checked ~ .checkmark:after {
    content: "";
    position: absolute;
    display: block;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  @media (max-width: 768px) {
    .policies-grid {
      grid-template-columns: 1fr;
    }
    
    .form-grid {
      grid-template-columns: 1fr;
    }
    
    .policy-checkbox {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }
    
    .policy-checkbox input[type="checkbox"] {
      margin-bottom: 0.5em;
    }
  }
</style>

<script>
// Esperar a que el DOM esté completamente cargado
document.addEventListener('DOMContentLoaded', function() {
  // Mostrar/ocultar secciones en función de los checkboxes marcados
  const sections = {
    'auth_externa': '#param_auth_externa',
    'auth_interna': '#param_auth_interna', 
    'criptografia': '#param_criptografia',
    'backups': '#param_backups'
  };

  function updateSections() {
    // Oculta todos los bloques específicos añadiendo la clase 'hidden'
    Object.values(sections).forEach(sel => {
      const element = document.querySelector(sel);
      if (element) {
        element.classList.add('hidden');
      }
    });
    
    // Para cada checkbox marcado, muestra su bloque correspondiente removiendo la clase 'hidden'
    document.querySelectorAll('input[name="policies"]:checked').forEach(cb2 => {
      const sel = sections[cb2.value];
      if (sel) {
        const element = document.querySelector(sel);
        if (element) {
          element.classList.remove('hidden');
        }
      }
    });
  }

  // Añadir event listeners a todos los checkboxes
  document.querySelectorAll('input[name="policies"]').forEach(cb => {
    cb.addEventListener('change', updateSections);
  });
  
  // Ejecutar una vez al cargar para asegurar estado inicial correcto
  updateSections();
});
</script>
{% endblock %}