document.addEventListener('DOMContentLoaded', function() {
  // Al cargar la página, establecer 10 autores por defecto
  const numeroAutoresSelect = document.getElementById('numeroAutores');
  if (numeroAutoresSelect) {
    numeroAutoresSelect.value = '10';
    
    // Asegurarse de que los 10 autores estén presentes en el DOM
    let autoresContainer = document.getElementById('autoresContainer');
    
    // Comprobamos si ya existen autores del 4-10, si no, los creamos
    for (let i = 4; i <= 10; i++) {
      if (!document.querySelector(`.autor-card[data-autor="${i}"]`)) {
        createAuthorSection(i);
      }
    }
    
    // Mostramos todos los autores (1-10)
    document.querySelectorAll('.autor-card').forEach(function(card) {
      card.style.display = 'block';
    });
    
    // Prevenir que se regeneren/eliminen autores al navegar entre secciones
    const originalGenerateAuthorSections = window.generateAuthorSections;
    if (typeof originalGenerateAuthorSections === 'function') {
      window.generateAuthorSections = function() {
        // Mostrar u ocultar autores según la selección, pero nunca eliminarlos
        const numAutores = parseInt(numeroAutoresSelect.value);
        document.querySelectorAll('.autor-card').forEach(function(card) {
          const autorNum = parseInt(card.getAttribute('data-autor'));
          card.style.display = autorNum <= numAutores ? 'block' : 'none';
        });
      };
    }
    
    // Añadir evento para el cambio en número de autores
    numeroAutoresSelect.addEventListener('change', function() {
      const numAutores = parseInt(this.value);
      
      // Mostrar u ocultar tarjetas de autor según la selección
      document.querySelectorAll('.autor-card').forEach(function(card) {
        const autorNum = parseInt(card.getAttribute('data-autor'));
        card.style.display = autorNum <= numAutores ? 'block' : 'none';
      });
    });
  }
  
  // Función para crear una sección de autor
  function createAuthorSection(authorNumber) {
    const authorContainer = document.getElementById('autoresContainer');
    
    const authorSection = document.createElement('div');
    authorSection.className = 'autor-card';
    authorSection.dataset.autor = authorNumber;
    authorSection.innerHTML = `
      <div class="autor-heading">
        <div class="autor-number">${authorNumber}</div>
        <h3 class="autor-title">Autor #${authorNumber}</h3>
      </div>
      
      <div class="form-group">
        <label class="form-label required">Información personal</label>
        <div class="autor-inputs-row">
          <select class="form-select" name="titulo_autor${authorNumber}" required>
            <option value="">Prefijo</option>
            <option value="Dr.">Dr.</option>
            <option value="Dra.">Dra.</option>
            <option value="Sr.">Sr.</option>
            <option value="Sra.">Sra.</option>
            <option value="Srta.">Srta.</option>
            <option value="Ph.D.">Ph.D.</option>
            <option value="Enf.">Enf.</option>
            <option value="MSc.">MSc.</option>
          </select>
          <input type="text" class="form-control" name="autor${authorNumber}" placeholder="Nombre" required>
          <input type="text" class="form-control" name="apellido_autor${authorNumber}" placeholder="Apellido" required>
        </div>
        <div class="invalid-feedback">
          <i class="fas fa-exclamation-circle me-1"></i> Por favor complete todos los campos
        </div>
      </div>
      
      <div class="form-group">
        <label for="emailAutor${authorNumber}" class="form-label required">E-mail</label>
        <input type="email" class="form-control" id="emailAutor${authorNumber}" name="email_autor${authorNumber}" placeholder="ejemplo@ejemplo.com" required>
        <div class="invalid-feedback">
          <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese un correo electrónico válido
        </div>
      </div>
      
      <div class="form-group">
        <label for="instAutor${authorNumber}" class="form-label required">Institución</label>
        <input type="text" class="form-control" id="instAutor${authorNumber}" name="inst_autor${authorNumber}" placeholder="Nombre de la institución" required>
        <div class="invalid-feedback">
          <i class="fas fa-exclamation-circle me-1"></i> Por favor ingrese la institución
        </div>
      </div>
    `;
    
    authorContainer.appendChild(authorSection);
  }
});