/* =========================================================
   NOVA X — productos.js
   Renderizado de tarjetas de producto, listados, filtros y quick view
   ========================================================= */

const NovaProductos = (() => {
  function tarjetaProducto(p) {
    const imgBase = p.imagenes[0];
    const imgAlt = p.imagenes[1] || p.imagenes[0];
    const esFav = NovaFavoritos.esFavorito(p.id);

    const badges = p.etiquetas
      .map((tag) => {
        const clase = tag === "nuevo" ? "badge-nuevo" : tag === "oferta" ? "badge-oferta" : "badge-mas-vendido";
        const texto = tag === "nuevo" ? "Nuevo" : tag === "oferta" ? "Oferta" : "Más vendido";
        return `<span class="badge ${clase}">${texto}</span>`;
      })
      .join("");

    return `
    <article class="product-card reveal" data-product-id="${p.id}">
      <a href="detalle.html?id=${p.id}" class="product-media">
        <div class="product-badges">${badges}</div>
        <button type="button" class="product-fav ${esFav ? "is-active" : ""}" data-fav-toggle="${p.id}" aria-label="Guardar en favoritos" aria-pressed="${esFav}">
          ${esFav ? "♥" : "♡"}
        </button>
        <img class="img-base" src="${imgBase}" alt="${p.nombre}" loading="lazy">
        <img class="img-alt" src="${imgAlt}" alt="" aria-hidden="true" loading="lazy">
        <span class="product-quickview">
          <button type="button" class="btn btn-ghost btn-sm" data-quickview="${p.id}">Vista rápida</button>
        </span>
      </a>
      <div class="product-info">
        <span class="product-brand">${p.marca}</span>
        <h3 class="product-name"><a href="detalle.html?id=${p.id}">${p.nombre}</a></h3>
        <div class="product-rating">
          <span class="stars">${NovaUtils.generarEstrellas(p.rating)}</span>
          <span>(${p.reseñas})</span>
        </div>
        <div class="product-price-row">
          <span class="product-price">${NovaUtils.formatoPrecio(p.precio)}</span>
          ${p.precioAnterior ? `<span class="product-price-old">${NovaUtils.formatoPrecio(p.precioAnterior)}</span>` : ""}
        </div>
        <button type="button" class="btn btn-primary btn-sm product-add" data-add-cart="${p.id}">Agregar al carrito</button>
      </div>
    </article>`;
  }

  function vincularEventosTarjetas(scope) {
    scope.querySelectorAll("[data-add-cart]").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        const id = btn.getAttribute("data-add-cart");
        NovaCarrito.agregar(id, 1);
        NovaToast.show("Producto agregado al carrito", "🛒");
      });
    });

    scope.querySelectorAll("[data-fav-toggle]").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        const id = btn.getAttribute("data-fav-toggle");
        const activo = NovaFavoritos.alternar(id);
        btn.classList.toggle("is-active", activo);
        btn.innerHTML = activo ? "♥" : "♡";
        NovaToast.show(activo ? "Agregado a favoritos" : "Eliminado de favoritos", activo ? "♥" : "🤍");
      });
    });

    scope.querySelectorAll("[data-quickview]").forEach((btn) => {
      btn.addEventListener("click", (e) => {
        e.preventDefault();
        const id = btn.getAttribute("data-quickview");
        NovaQuickView.abrir(id);
      });
    });

    if (window.NovaReveal) window.NovaReveal.observar(scope.querySelectorAll(".reveal"));
  }

  async function renderCarrusel(selector, filtroFn, limite = 8) {
    const contenedor = document.querySelector(selector);
    if (!contenedor) return;
    const productos = await NovaAPI.getProductos();
    const filtrados = productos.filter(filtroFn).slice(0, limite);
    contenedor.innerHTML = filtrados.map(tarjetaProducto).join("");
    vincularEventosTarjetas(contenedor);
  }

  /* ---------- Página productos.html: catálogo con filtros ---------- */
  async function initCatalogo() {
    const grid = document.querySelector("[data-catalog-grid]");
    if (!grid) return;

    const productos = await NovaAPI.getProductos();
    const categoriaInicial = NovaUtils.getParam("categoria") || "todas";
    const busquedaInicial = NovaUtils.getParam("q") || "";

    const estado = {
      categoria: categoriaInicial,
      orden: "relevancia",
      busqueda: busquedaInicial.toLowerCase(),
    };

    const chips = document.querySelectorAll("[data-filter-chip]");
    const selectOrden = document.querySelector("[data-sort-select]");
    const tituloResultados = document.querySelector("[data-catalog-title]");
    const searchInputPagina = document.querySelector("[data-catalog-search]");

    if (searchInputPagina) searchInputPagina.value = busquedaInicial;

    function aplicarFiltros() {
      let lista = [...productos];

      if (estado.categoria !== "todas") {
        lista = lista.filter((p) => p.categoria === estado.categoria);
      }

      if (estado.busqueda) {
        lista = lista.filter((p) =>
          [p.nombre, p.marca, p.categoria, p.descripcion, ...(p.tags || [])]
            .join(" ")
            .toLowerCase()
            .includes(estado.busqueda)
        );
      }

      switch (estado.orden) {
        case "precio-asc":
          lista.sort((a, b) => a.precio - b.precio);
          break;
        case "precio-desc":
          lista.sort((a, b) => b.precio - a.precio);
          break;
        case "rating":
          lista.sort((a, b) => b.rating - a.rating);
          break;
        case "nuevos":
          lista.sort((a, b) => (b.etiquetas.includes("nuevo") ? 1 : 0) - (a.etiquetas.includes("nuevo") ? 1 : 0));
          break;
        default:
          break;
      }

      if (tituloResultados) {
        tituloResultados.textContent = `${lista.length} producto${lista.length === 1 ? "" : "s"} encontrado${lista.length === 1 ? "" : "s"}`;
      }

      if (lista.length === 0) {
        grid.innerHTML = `
          <div class="empty-state" style="grid-column: 1 / -1;">
            <div class="icon">🔍</div>
            <h3>No encontramos productos</h3>
            <p>Prueba con otra categoría o palabra clave.</p>
          </div>`;
        return;
      }

      grid.innerHTML = lista.map(tarjetaProducto).join("");
      vincularEventosTarjetas(grid);
    }

    chips.forEach((chip) => {
      chip.addEventListener("click", () => {
        chips.forEach((c) => c.classList.remove("is-active"));
        chip.classList.add("is-active");
        estado.categoria = chip.getAttribute("data-filter-chip");
        aplicarFiltros();
      });
      if (chip.getAttribute("data-filter-chip") === estado.categoria) {
        chips.forEach((c) => c.classList.remove("is-active"));
        chip.classList.add("is-active");
      }
    });

    selectOrden?.addEventListener("change", () => {
      estado.orden = selectOrden.value;
      aplicarFiltros();
    });

    searchInputPagina?.addEventListener(
      "input",
      NovaUtils.debounce(() => {
        estado.busqueda = searchInputPagina.value.toLowerCase();
        aplicarFiltros();
      }, 250)
    );

    aplicarFiltros();
  }

  /* ---------- Página detalle.html ---------- */
  async function initDetalle() {
    const contenedor = document.querySelector("[data-product-detail]");
    if (!contenedor) return;

    const id = NovaUtils.getParam("id");
    const producto = await NovaAPI.getProductoPorId(id);

    if (!producto) {
      contenedor.innerHTML = `<div class="empty-state"><div class="icon">😕</div><h3>Producto no encontrado</h3><p>Puede que el enlace sea incorrecto.</p><a href="productos.html" class="btn btn-primary">Volver al catálogo</a></div>`;
      return;
    }

    document.title = `${producto.nombre} · NOVA X`;

    const badges = producto.etiquetas
      .map((tag) => {
        const clase = tag === "nuevo" ? "badge-nuevo" : tag === "oferta" ? "badge-oferta" : "badge-mas-vendido";
        const texto = tag === "nuevo" ? "Nuevo" : tag === "oferta" ? "Oferta" : "Más vendido";
        return `<span class="badge ${clase}">${texto}</span>`;
      })
      .join("");

    contenedor.innerHTML = `
      <div class="detail-gallery">
        <div class="detail-gallery-main">
          <img src="${producto.imagenes[0]}" alt="${producto.nombre}" data-main-image>
        </div>
        <div class="detail-thumbs">
          ${producto.imagenes
            .map(
              (img, i) =>
                `<img src="${img}" alt="Vista ${i + 1} de ${producto.nombre}" class="${i === 0 ? "is-active" : ""}" data-thumb>`
            )
            .join("")}
        </div>
      </div>
      <div class="detail-info">
        <div class="product-badges" style="position: static; margin-bottom: 12px;">${badges}</div>
        <span class="product-brand">${producto.marca}</span>
        <h1 class="fs-display-md" style="font-size: var(--fs-display-md); margin-top: 4px;">${producto.nombre}</h1>
        <div class="product-rating mt-1">
          <span class="stars">${NovaUtils.generarEstrellas(producto.rating)}</span>
          <span>${producto.rating} · ${producto.reseñas} reseñas</span>
        </div>
        <div class="product-price-row mt-2" style="font-size: 1.3rem;">
          <span class="product-price" style="font-size: 1.8rem;">${NovaUtils.formatoPrecio(producto.precio)}</span>
          ${producto.precioAnterior ? `<span class="product-price-old">${NovaUtils.formatoPrecio(producto.precioAnterior)}</span>` : ""}
        </div>
        <p class="mt-2" style="color: var(--color-text-muted);">${producto.descripcion}</p>
        <p class="stock-note">✔ ${producto.stock} unidades disponibles · Envío en 24-48h</p>

        <div class="mt-2" style="display:flex; align-items:center; gap: var(--space-4); flex-wrap: wrap;">
          <div class="qty-selector">
            <button type="button" data-qty-minus aria-label="Disminuir cantidad">−</button>
            <span data-qty-value>1</span>
            <button type="button" data-qty-plus aria-label="Aumentar cantidad">+</button>
          </div>
          <button type="button" class="btn btn-primary" data-add-cart="${producto.id}" data-detail-add>Agregar al carrito</button>
          <button type="button" class="btn btn-outline" data-fav-toggle="${producto.id}">
            ${NovaFavoritos.esFavorito(producto.id) ? "♥ En favoritos" : "♡ Agregar a favoritos"}
          </button>
        </div>

        <div class="tabs">
          <button type="button" class="tab-btn is-active" data-tab="descripcion">Descripción</button>
          <button type="button" class="tab-btn" data-tab="envio">Envío y devoluciones</button>
          <button type="button" class="tab-btn" data-tab="reseñas">Reseñas</button>
        </div>
        <div class="tab-panel is-active" data-tab-panel="descripcion">
          <p>${producto.descripcion} Fabricado bajo estrictos controles de calidad NOVA X, pensado para acompañar tu día a día con estilo y rendimiento.</p>
        </div>
        <div class="tab-panel" data-tab-panel="envio">
          <p>Envío gratis en compras desde S/99. Entrega en Lima Metropolitana en 24-48h y a provincias en 3-5 días hábiles. Devoluciones sin costo dentro de los 15 días posteriores a la compra.</p>
        </div>
        <div class="tab-panel" data-tab-panel="reseñas">
          <p>${producto.reseñas} clientes calificaron este producto con un promedio de ${producto.rating} / 5 estrellas.</p>
        </div>
      </div>`;

    // Galería
    contenedor.querySelectorAll("[data-thumb]").forEach((thumb) => {
      thumb.addEventListener("click", () => {
        contenedor.querySelector("[data-main-image]").src = thumb.src;
        contenedor.querySelectorAll("[data-thumb]").forEach((t) => t.classList.remove("is-active"));
        thumb.classList.add("is-active");
      });
    });

    // Selector de cantidad
    let cantidad = 1;
    const qtyValue = contenedor.querySelector("[data-qty-value]");
    contenedor.querySelector("[data-qty-plus]").addEventListener("click", () => {
      cantidad++;
      qtyValue.textContent = cantidad;
    });
    contenedor.querySelector("[data-qty-minus]").addEventListener("click", () => {
      cantidad = Math.max(1, cantidad - 1);
      qtyValue.textContent = cantidad;
    });

    contenedor.querySelector("[data-detail-add]").addEventListener("click", () => {
      NovaCarrito.agregar(producto.id, cantidad);
      NovaToast.show("Producto agregado al carrito", "🛒");
    });

    contenedor.querySelector("[data-fav-toggle]").addEventListener("click", (e) => {
      const activo = NovaFavoritos.alternar(producto.id);
      e.currentTarget.innerHTML = activo ? "♥ En favoritos" : "♡ Agregar a favoritos";
      NovaToast.show(activo ? "Agregado a favoritos" : "Eliminado de favoritos", activo ? "♥" : "🤍");
    });

    // Tabs
    contenedor.querySelectorAll("[data-tab]").forEach((tabBtn) => {
      tabBtn.addEventListener("click", () => {
        contenedor.querySelectorAll("[data-tab]").forEach((b) => b.classList.remove("is-active"));
        contenedor.querySelectorAll("[data-tab-panel]").forEach((p) => p.classList.remove("is-active"));
        tabBtn.classList.add("is-active");
        contenedor.querySelector(`[data-tab-panel="${tabBtn.getAttribute("data-tab")}"]`).classList.add("is-active");
      });
    });

    // Relacionados
    const relacionadosGrid = document.querySelector("[data-related-grid]");
    if (relacionadosGrid) {
      const relacionados = await NovaAPI.getRelacionados(producto);
      relacionadosGrid.innerHTML = relacionados.map(tarjetaProducto).join("");
      vincularEventosTarjetas(relacionadosGrid);
    }
  }

  return { tarjetaProducto, vincularEventosTarjetas, renderCarrusel, initCatalogo, initDetalle };
})();

/* ---------- Vista rápida (Quick View modal) ---------- */
const NovaQuickView = (() => {
  function getModal() {
    return document.querySelector("[data-quickview-modal]");
  }

  async function abrir(id) {
    const modal = getModal();
    if (!modal) return;
    const producto = await NovaAPI.getProductoPorId(id);
    if (!producto) return;

    modal.querySelector("[data-qv-image]").src = producto.imagenes[0];
    modal.querySelector("[data-qv-image]").alt = producto.nombre;
    modal.querySelector("[data-qv-brand]").textContent = producto.marca;
    modal.querySelector("[data-qv-name]").textContent = producto.nombre;
    modal.querySelector("[data-qv-stars]").innerHTML = NovaUtils.generarEstrellas(producto.rating);
    modal.querySelector("[data-qv-reviews]").textContent = `(${producto.reseñas} reseñas)`;
    modal.querySelector("[data-qv-price]").textContent = NovaUtils.formatoPrecio(producto.precio);
    modal.querySelector("[data-qv-desc]").textContent = producto.descripcion;

    const oldPriceEl = modal.querySelector("[data-qv-price-old]");
    if (producto.precioAnterior) {
      oldPriceEl.textContent = NovaUtils.formatoPrecio(producto.precioAnterior);
      oldPriceEl.style.display = "inline";
    } else {
      oldPriceEl.style.display = "none";
    }

    const addBtn = modal.querySelector("[data-qv-add]");
    addBtn.onclick = () => {
      NovaCarrito.agregar(producto.id, 1);
      NovaToast.show("Producto agregado al carrito", "🛒");
    };

    const linkBtn = modal.querySelector("[data-qv-link]");
    linkBtn.href = `detalle.html?id=${producto.id}`;

    modal.classList.add("is-open");
    document.body.style.overflow = "hidden";
  }

  function cerrar() {
    const modal = getModal();
    modal?.classList.remove("is-open");
    document.body.style.overflow = "";
  }

  function init() {
    const modal = getModal();
    if (!modal) return;
    modal.querySelector("[data-qv-close]")?.addEventListener("click", cerrar);
    modal.querySelector(".modal-backdrop")?.addEventListener("click", cerrar);
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape") cerrar();
    });
  }

  return { abrir, cerrar, init };
})();
