/* =========================================================
   NOVA X — app.js
   Inicialización general: header, loader, scroll reveal, FAQ,
   newsletter y carga de contenido específico por página.
   ========================================================= */

/* ---------- Scroll reveal (IntersectionObserver) ---------- */
const NovaReveal = (() => {
  let observer;

  function crearObserver() {
    observer = new IntersectionObserver(
      (entradas) => {
        entradas.forEach((entrada) => {
          if (entrada.isIntersecting) {
            entrada.target.classList.add("is-visible");
            observer.unobserve(entrada.target);
          }
        });
      },
      { threshold: 0.15, rootMargin: "0px 0px -40px 0px" }
    );
  }

  function observar(elementos) {
    if (!observer) crearObserver();
    elementos.forEach((el, i) => {
      el.style.setProperty("--stagger-index", i % 8);
      observer.observe(el);
    });
  }

  function init() {
    crearObserver();
    observar(document.querySelectorAll(".reveal, .reveal-scale"));
  }

  return { init, observar };
})();
window.NovaReveal = NovaReveal;

/* ---------- Header: scroll + menú móvil ---------- */
function initHeader() {
  const header = document.querySelector("[data-site-header]");
  const navToggle = document.querySelector("[data-nav-toggle]");
  const nav = document.querySelector("[data-main-nav]");
  const navClose = document.querySelector("[data-nav-close]");
  const navOverlay = document.querySelector("[data-nav-overlay]");

  function onScroll() {
    if (!header) return;
    header.classList.toggle("is-scrolled", window.scrollY > 24);
  }
  onScroll();
  window.addEventListener("scroll", onScroll, { passive: true });

  function abrirMenu() {
    nav?.classList.add("is-open");
    navOverlay?.classList.add("is-open");
    navToggle?.setAttribute("aria-expanded", "true");
    document.body.style.overflow = "hidden";
  }

  function cerrarMenu() {
    nav?.classList.remove("is-open");
    navOverlay?.classList.remove("is-open");
    navToggle?.setAttribute("aria-expanded", "false");
    document.body.style.overflow = "";
  }

  navToggle?.addEventListener("click", () => {
    const abierto = nav?.classList.contains("is-open");
    abierto ? cerrarMenu() : abrirMenu();
  });

  navClose?.addEventListener("click", cerrarMenu);
  navOverlay?.addEventListener("click", cerrarMenu);

  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && nav?.classList.contains("is-open")) cerrarMenu();
  });

  nav?.querySelectorAll("a").forEach((link) => {
    link.addEventListener("click", () => cerrarMenu());
  });

  // Marca el link activo según la página actual
  const paginaActual = window.location.pathname.split("/").pop() || "index.html";
  nav?.querySelectorAll("a[data-nav-link]").forEach((link) => {
    if (link.getAttribute("href")?.split("?")[0] === paginaActual) {
      link.classList.add("is-active");
    }
  });
}

/* ---------- Loader inicial ---------- */
function initLoader() {
  const loader = document.querySelector("#page-loader");
  if (!loader) return;
  window.addEventListener("load", () => {
    setTimeout(() => loader.classList.add("is-hidden"), 400);
  });
}

/* ---------- FAQ accordion ---------- */
function initFAQ() {
  document.querySelectorAll("[data-faq-item]").forEach((item) => {
    const pregunta = item.querySelector(".faq-question");
    const respuesta = item.querySelector(".faq-answer");

    pregunta?.addEventListener("click", () => {
      const abierta = item.classList.contains("is-open");

      document.querySelectorAll("[data-faq-item]").forEach((otro) => {
        otro.classList.remove("is-open");
        otro.querySelector(".faq-answer").style.maxHeight = null;
      });

      if (!abierta) {
        item.classList.add("is-open");
        respuesta.style.maxHeight = respuesta.scrollHeight + "px";
      }
    });
  });
}

/* ---------- Newsletter ---------- */
function initNewsletter() {
  document.querySelectorAll("[data-newsletter-form]").forEach((form) => {
    form.addEventListener("submit", (e) => {
      e.preventDefault();
      const input = form.querySelector("input[type=email]");
      if (input && input.checkValidity() && input.value.trim() !== "") {
        NovaToast.show("¡Gracias por suscribirte a NOVA X!", "✉️");
        form.reset();
      } else {
        NovaToast.show("Ingresa un correo válido", "⚠️");
      }
    });
  });
}

/* ---------- Formulario de contacto ---------- */
function initContacto() {
  const form = document.querySelector("[data-contact-form]");
  if (!form) return;

  form.addEventListener("submit", (e) => {
    e.preventDefault();
    const camposRequeridos = form.querySelectorAll("input[required], textarea[required]");
    let valido = true;

    camposRequeridos.forEach((campo) => {
      const wrapper = campo.closest(".form-field");
      const ok = campo.checkValidity() && campo.value.trim() !== "";
      wrapper?.classList.toggle("has-error", !ok);
      if (!ok) valido = false;
    });

    if (!valido) {
      NovaToast.show("Completa los campos requeridos", "⚠️");
      return;
    }

    NovaToast.show("Mensaje enviado, te responderemos pronto", "✅");
    form.reset();
  });
}

/* ---------- Perfil: sesión, datos, tabs y pedidos ---------- */
function renderPedidosPerfil(usuario) {
  const lista = document.querySelector("[data-orders-list]");
  if (!lista) return;

  const pedidos = window.NovaAuth?.obtenerPedidos(usuario.email) || [];

  if (pedidos.length === 0) {
    lista.innerHTML = `
      <div class="empty-state">
        <div class="icon">🧾</div>
        <h3>Aún no tienes pedidos</h3>
        <p>Cuando completes una compra, aparecerá aquí tu historial.</p>
        <a href="productos.html" class="btn btn-primary">Ir a comprar</a>
      </div>`;
    return;
  }

  lista.innerHTML = pedidos
    .map((p) => {
      const fecha = new Date(p.fecha).toLocaleDateString("es-PE", { day: "numeric", month: "short", year: "numeric" });
      return `
      <div style="border:1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-5); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;">
        <div>
          <strong>Pedido ${p.numero}</strong>
          <p style="font-size: var(--fs-xs); color: var(--color-text-muted);">${p.items} producto(s) · ${fecha} · ${NovaUtils.formatoPrecio(p.total)}</p>
        </div>
        <span class="badge badge-mas-vendido">${p.estado || "Confirmado"}</span>
      </div>`;
    })
    .join("");
}

function initPerfil() {
  const tabs = document.querySelectorAll("[data-profile-tab]");
  if (!tabs.length) return;

  const usuario = window.NovaAuth?.usuarioActual();
  if (usuario) {
    const saludo = document.querySelector("[data-user-greeting]");
    if (saludo) saludo.textContent = `Hola, ${usuario.nombre.split(" ")[0]} 👋`;

    const campoNombre = document.querySelector("[data-user-nombre]");
    const campoEmail = document.querySelector("[data-user-email]");
    if (campoNombre) campoNombre.value = usuario.nombre;
    if (campoEmail) campoEmail.value = usuario.email;

    renderPedidosPerfil(usuario);
  }

  document.querySelector("[data-logout]")?.addEventListener("click", () => {
    window.NovaAuth?.cerrarSesion();
    window.location.href = "login.html";
  });

  tabs.forEach((tab) => {
    tab.addEventListener("click", () => {
      tabs.forEach((t) => t.classList.remove("is-active"));
      tab.classList.add("is-active");
      const destino = tab.getAttribute("data-profile-tab");

      document.querySelectorAll("[data-profile-panel]").forEach((panel) => {
        panel.classList.toggle("is-active", panel.getAttribute("data-profile-panel") === destino);
      });
    });
  });
}

/* ---------- Home: categorías + carruseles de producto ---------- */
async function initHome() {
  const catGrid = document.querySelector("[data-categories-grid]");
  if (catGrid) {
    const categorias = await NovaAPI.getCategorias();
    catGrid.innerHTML = categorias
      .map(
        (c) => `
      <a href="productos.html?categoria=${c.id}" class="category-card reveal">
        <span class="category-icon">${c.icono}</span>
        <h3>${c.nombre}</h3>
        <p>${c.descripcion}</p>
      </a>`
      )
      .join("");
    NovaReveal.observar(catGrid.querySelectorAll(".reveal"));
  }

  await NovaProductos.renderCarrusel("[data-bestsellers-grid]", (p) => p.etiquetas.includes("mas-vendido"), 4);
  await NovaProductos.renderCarrusel("[data-offers-grid]", (p) => p.etiquetas.includes("oferta"), 4);
  await NovaProductos.renderCarrusel("[data-new-grid]", (p) => p.etiquetas.includes("nuevo"), 4);
}

/* ---------- Init general ---------- */
document.addEventListener("DOMContentLoaded", () => {
  initLoader();
  initHeader();
  initFAQ();
  initNewsletter();
  initContacto();
  initPerfil();
  NovaDarkMode.init();
  NovaAuth?.init();
  NovaAuthModal?.init();
  NovaToast.show;
  NovaCarrito.init();
  NovaFavoritos.init();
  NovaBuscador.init();
  NovaSlider.init();
  NovaQuickView.init();
  NovaProductos.initCatalogo();
  NovaProductos.initDetalle();
  NovaCheckout.init();

  initHome().then(() => {
    NovaFavoritos.sincronizarBotones();
    NovaReveal.init();
  });

  // Para páginas sin carga async previa, activa el reveal igual
  NovaReveal.init();
});
