// ============================================
// INICIALIZACIÓN
// ============================================
document.addEventListener('DOMContentLoaded', function() {
  // Actualizar año en el footer
  const yearElement = document.getElementById("year");
  if (yearElement) {
    yearElement.textContent = new Date().getFullYear();
  }

  // Verificar estado inicial de PWA al cargar
  if (detectarPWAInstalada()) {
    isPwaInstalled = true;
  }
  
  // Configurar navegación suave
  setupSmoothNavigation();
  
  // Configurar toggle de contraseña
  setupPasswordToggle();
  
  // Configurar validación de formulario
  setupFormValidation();
  
  // Limpiar campos de login
  limpiarCamposLogin();
  
  // Mostrar mensajes de estado si existen
  mostrarMensajesEstado();
  
  // Inicializar monitoreo de PWA
  monitoreareEstadoInstalacion();
});

// Hacer funciones disponibles globalmente
window.showSection = showSection;
window.mostrarOpciones = mostrarOpciones;
window.instalarPWA = instalarPWA;

// ============================================
// NAVEGACIÓN SUAVE CON INTERSECTION OBSERVER
// ============================================

function setupSmoothNavigation() {
  const navItems = document.querySelectorAll('.nav-item');
  
  // Click en items de navegación → scroll suave
  navItems.forEach(item => {
    item.addEventListener('click', function(e) {
      e.preventDefault();
      
      const targetId = this.getAttribute('data-section');
      const targetSection = document.getElementById(targetId);
      
      if (targetSection) {
        targetSection.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
        updateActiveNav(targetId);
      }
    });
  });
  
  // Intersection Observer para actualizar nav automáticamente al hacer scroll
  setupScrollObserver();
}

// Intersection Observer - detecta automáticamente qué sección está visible
function setupScrollObserver() {
  const sections = document.querySelectorAll('.section');
  
  const observerOptions = {
    root: null,
    rootMargin: '-40% 0px -40% 0px',
    threshold: 0
  };
  
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        updateActiveNav(entry.target.id);
      }
    });
  }, observerOptions);
  
  sections.forEach(section => {
    observer.observe(section);
  });
}

// Actualizar item activo en la navegación
function updateActiveNav(sectionId) {
  document.querySelectorAll('.nav-item').forEach(item => {
    item.classList.remove('active');
  });
  
  const activeItem = document.querySelector(`[data-section="${sectionId}"]`);
  if (activeItem) {
    activeItem.classList.add('active');
  }
}

// showSection: compatibilidad con botones inline en el HTML (ej: onclick="showSection('ingresar')")
function showSection(id) {
  const targetSection = document.getElementById(id);
  if (targetSection) {
    targetSection.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
    updateActiveNav(id);
  }
}

// ============================================
// FUNCIONALIDAD DEL FORMULARIO DE LOGIN
// ============================================

function limpiarCamposLogin() {
  const emailInput = document.getElementById("username");
  const passInput = document.getElementById("password");
  if (emailInput) emailInput.value = "";
  if (passInput) passInput.value = "";
}

function setupPasswordToggle() {
  const passwordInput = document.getElementById("password");
  const toggleIcon = document.getElementById("togglePassword");
  let visible = false;
  
  if (toggleIcon && passwordInput) {
    toggleIcon.addEventListener("click", () => {
      visible = !visible;
      passwordInput.type = visible ? "text" : "password";
      toggleIcon.src = visible ? "iconos/ojo-cerrado.png" : "iconos/ojo-abierto.png";
      toggleIcon.alt = visible ? "Ocultar contraseña" : "Mostrar contraseña";
    });
  }
}

function setupFormValidation() {
  const loginForm = document.querySelector('.login-form');
  
  if (loginForm) {
    loginForm.addEventListener('submit', function(e) {
      const email = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(email)) {
        e.preventDefault();
        Swal.fire({
          icon: 'error',
          title: 'Email inválido',
          text: 'Por favor ingresa un correo electrónico válido',
          confirmButtonText: 'Entendido',
          confirmButtonColor: '#3b82f6',
          width: window.innerWidth <= 768 ? '90%' : '400px'
        });
        return;
      }
      
      if (password.length < 4) {
        e.preventDefault();
        Swal.fire({
          icon: 'warning',
          title: 'Contraseña inválida',
          text: 'Ingrese una contraseña mayor de 4 caracteres',
          confirmButtonText: 'Reintentar',
          confirmButtonColor: '#3b82f6',
          width: window.innerWidth <= 768 ? '90%' : '400px'
        });
        return;
      }
    });
  }
}

function mostrarMensajesEstado() {
  const params = new URLSearchParams(window.location.search);
  const mensajeDiv = document.getElementById("mensaje");
  
  if (!mensajeDiv) return;
  
  const mensajes = {
    expirado: "Se inició sesión en otro dispositivo",
    error: "Hubo un error de autenticación",
    cerrado: "Sesión cerrada correctamente"
  };
  
  for (const [clave, texto] of Object.entries(mensajes)) {
    if (params.get(clave) === '1') {
      mensajeDiv.textContent = texto;
      mensajeDiv.hidden = false;
      window.history.replaceState({}, document.title, window.location.pathname);
      setTimeout(() => { mensajeDiv.hidden = true; }, 5000);
      break;
    }
  }
}

// ============================================
// FUNCIONALIDAD PWA
// ============================================

let deferredPrompt;
let isPwaInstalled = false;

function detectarPWAInstalada() {
  if (window.matchMedia('(display-mode: standalone)').matches) {
    isPwaInstalled = true;
    return true;
  }
  if (window.navigator.standalone === true) {
    isPwaInstalled = true;
    return true;
  }
  if (document.referrer.includes('android-app://')) {
    isPwaInstalled = true;
    return true;
  }
  return false;
}

async function instalarPWA() {
  if (detectarPWAInstalada()) {
    Swal.fire({
      icon: 'info',
      title: '¡Ya instalado!',
      text: 'El Simulador AscensoFacil ya está instalado en tu dispositivo',
      confirmButtonText: 'Entendido',
      confirmButtonColor: '#3b82f6',
      width: window.innerWidth <= 768 ? '90%' : '400px',
      showClass: { popup: 'animate__animated animate__fadeInDown' }
    });
    return;
  }

  if (!deferredPrompt) {
    mostrarInstruccionesManuales();
    return;
  }

  try {
    await deferredPrompt.prompt();
    const choiceResult = await deferredPrompt.userChoice;
    
    if (choiceResult.outcome === 'accepted') {
      Swal.fire({
        icon: 'success',
        title: '¡Instalación exitosa!',
        text: 'AscensoFacil se ha instalado correctamente en tu dispositivo',
        confirmButtonText: 'Genial',
        confirmButtonColor: '#0aaf3c',
        width: window.innerWidth <= 768 ? '90%' : '400px',
        showClass: { popup: 'animate__animated animate__fadeInUp' }
      });
    } else {
      Swal.fire({
        icon: 'info',
        title: 'Instalación cancelada',
        text: 'Puedes instalar AscensoFacil más tarde desde el menú del navegador',
        confirmButtonText: 'Entendido',
        confirmButtonColor: '#3b82f6',
        width: window.innerWidth <= 768 ? '90%' : '400px'
      });
    }
    deferredPrompt = null;
    
  } catch (error) {
    console.error('Error durante la instalación:', error);
    mostrarInstruccionesManuales();
  }
}

function mostrarInstruccionesManuales() {
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
  const isAndroid = /Android/.test(navigator.userAgent);
  const isChrome = /Chrome/.test(navigator.userAgent);
  const isSafari = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);

  let instrucciones = '';

  if (isIOS && isSafari) {
    instrucciones = `
      <div style="text-align: left; line-height: 1.6;">
        <strong>Para instalar en iOS:</strong><br>
        1. Toca el botón <strong>"Compartir" 📤</strong> en Safari<br>
        2. Desplázate y selecciona <strong>"Añadir a pantalla de inicio"</strong><br>
        3. Toca <strong>"Añadir"</strong> para confirmar
      </div>
    `;
  } else if (isAndroid && isChrome) {
    instrucciones = `
      <div style="text-align: left; line-height: 1.6;">
        <strong>Para instalar en Android:</strong><br>
        1. Toca el menú <strong>"⋮"</strong> en Chrome<br>
        2. Selecciona <strong>"Instalar aplicación"</strong><br>
        3. Toca <strong>"Instalar"</strong> para confirmar
      </div>
    `;
  } else {
    instrucciones = `
      <div style="text-align: left; line-height: 1.6;">
        <strong>Para instalar la aplicación:</strong><br>
        1. Busca el ícono <strong>"Instalar"</strong> en la barra de direcciones<br>
        2. O ve al menú del navegador<br>
        3. Selecciona <strong>"Instalar AscensoFacil"</strong>
      </div>
    `;
  }

  Swal.fire({
    icon: 'info',
    title: '📱 Instrucciones de instalación',
    html: instrucciones,
    confirmButtonText: 'Entendido',
    confirmButtonColor: '#3b82f6',
    width: window.innerWidth <= 768 ? '95%' : '450px',
    showClass: { popup: 'animate__animated animate__fadeInDown' }
  });
}

window.addEventListener('beforeinstallprompt', (e) => {
  console.log('PWA: beforeinstallprompt event fired');
  e.preventDefault();
  deferredPrompt = e;
});

window.addEventListener('appinstalled', (e) => {
  console.log('PWA: App instalada exitosamente');
  isPwaInstalled = true;
  deferredPrompt = null;
  
  setTimeout(() => {
    Swal.fire({
      icon: 'success',
      title: '¡AscensoFacil Instalado!',
      text: 'La aplicación ya está disponible en tu pantalla de inicio',
      confirmButtonText: 'Perfecto',
      confirmButtonColor: '#0aaf3c',
      width: window.innerWidth <= 768 ? '90%' : '400px',
      showClass: { popup: 'animate__animated animate__bounceIn' }
    });
  }, 1000);
});

// Registrar Service Worker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', async () => {
    try {
      const registration = await navigator.serviceWorker.register('./sw.js');
      console.log('Service Worker registrado exitosamente:', registration.scope);
      
      registration.addEventListener('updatefound', () => {
        const newWorker = registration.installing;
        newWorker.addEventListener('statechange', () => {
          if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
            mostrarNotificacionActualizacion(registration);
          }
        });
      });
      
    } catch (error) {
      console.error('Error al registrar Service Worker:', error);
    }
  });
}

function mostrarNotificacionActualizacion(registration) {
  Swal.fire({
    icon: 'info',
    title: 'Actualización disponible',
    text: 'Hay una nueva versión de AscensoFacil disponible',
    showCancelButton: true,
    confirmButtonText: 'Actualizar ahora',
    cancelButtonText: 'Más tarde',
    confirmButtonColor: '#10b981',
    cancelButtonColor: '#6b7280'
  }).then((result) => {
    if (result.isConfirmed) {
      const newWorker = registration.waiting;
      if (newWorker) {
        newWorker.postMessage({ type: 'SKIP_WAITING' });
        window.location.reload();
      }
    }
  });
}

function monitoreareEstadoInstalacion() {
  const estaInstalada = detectarPWAInstalada();
  if (estaInstalada) {
    isPwaInstalled = true;
  }
}

// ============================================
// FUNCIÓN PARA SWEETALERT - CORREO
// ============================================

function mostrarOpciones() {
  Swal.fire({
    title: '¿Cómo deseas enviar el correo?',
    text: 'Selecciona tu opción preferida',
    icon: 'question',
    showCancelButton: true,
    confirmButtonText: '<i class="fab fa-google"></i> Abrir Gmail',
    cancelButtonText: '<i class="fas fa-envelope"></i> Cliente de correo',
    confirmButtonColor: '#4285f4',
    cancelButtonColor: '#6c757d',
    reverseButtons: true,
    width: window.innerWidth <= 768 ? '90%' : '400px'
  }).then((result) => {
    if (result.isConfirmed) {
      const gmail_url = 'https://mail.google.com/mail/?view=cm&to=siapol.soporte@gmail.com&su=Solicito%20información%20AscensoFacil&body=Estoy%20interesado,%20deseo%20más%20información%20del%20Simulador';
      window.open(gmail_url, '_blank');
    } else if (result.dismiss === Swal.DismissReason.cancel) {
      window.location.href = 'mailto:siapol.soporte@gmail.com?subject=Solicito información AscensoFacil&body=Estoy interesado, deseo más información del Simulador';
    }
  });
}
