/* =========================================================
   NOVA X — carrito.js
   Lógica de carrito con LocalStorage, drawer y página carrito.html
   ========================================================= */

const NovaCarrito = (() => {
  const STORAGE_KEY = "novax_cart";

  function obtener() {
    try {
      return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
    } catch {
      return [];
    }
  }

  function guardar(carrito) {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(carrito));
    actualizarBadge();
  }

  function agregar(id, cantidad = 1) {
    const carrito = obtener();
    const existente = carrito.find((item) => item.id === id);
    if (existente) {
      existente.cantidad += cantidad;
    } else {
      carrito.push({ id, cantidad });
    }
    guardar(carrito);
  }

  function actualizarCantidad(id, cantidad) {
    let carrito = obtener();
    if (cantidad <= 0) {
      carrito = carrito.filter((item) => item.id !== id);
    } else {
      const item = carrito.find((i) => i.id === id);
      if (item) item.cantidad = cantidad;
    }
    guardar(carrito);
  }

  function eliminar(id) {
    const carrito = obtener().filter((item) => item.id !== id);
    guardar(carrito);
  }

  function vaciar() {
    guardar([]);
  }

  function totalItems() {
    return obtener().reduce((acc, item) => acc + item.cantidad, 0);
  }

  async function obtenerDetallado() {
    const carrito = obtener();
    const productos = await NovaAPI.getProductos();
    return carrito
      .map((item) => {
        const producto = productos.find((p) => p.id === item.id);
        return producto ? { ...producto, cantidad: item.cantidad } : null;
      })
      .filter(Boolean);
  }

  async function calcularTotales() {
    const detallado = await obtenerDetallado();
    const subtotal = detallado.reduce((acc, p) => acc + p.precio * p.cantidad, 0);
    const envio = subtotal === 0 || subtotal >= 99 ? 0 : 12.9;
    const total = subtotal + envio;
    return { subtotal, envio, total, cantidadItems: totalItems() };
  }

  function actualizarBadge() {
    const total = totalItems();
    document.querySelectorAll("[data-cart-count]").forEach((el) => {
      el.textContent = total;
      el.classList.toggle("is-visible", total > 0);
    });
  }

  /* ---------- Drawer lateral ---------- */
  async function renderDrawer() {
    const body = document.querySelector("[data-cart-drawer-body]");
    const footer = document.querySelector("[data-cart-drawer-footer]");
    if (!body) return;

    const detallado = await obtenerDetallado();

    if (detallado.length === 0) {
      body.innerHTML = `
        <div class="cart-empty">
          <p>Tu carrito está vacío.</p>
          <a href="productos.html" class="btn btn-primary btn-sm mt-1">Ver productos</a>
        </div>`;
      if (footer) footer.innerHTML = "";
      return;
    }

    body.innerHTML = detallado
      .map(
        (p) => `
      <div class="cart-item" data-cart-item="${p.id}">
        <img src="${p.imagenes[0]}" alt="${p.nombre}">
        <div>
          <p class="cart-item-name">${p.nombre}</p>
          <p class="cart-item-price">${NovaUtils.formatoPrecio(p.precio)}</p>
          <div class="qty-control">
            <button type="button" data-qty-minus aria-label="Disminuir cantidad">−</button>
            <span>${p.cantidad}</span>
            <button type="button" data-qty-plus aria-label="Aumentar cantidad">+</button>
          </div>
        </div>
        <button type="button" class="cart-item-remove" data-remove aria-label="Eliminar ${p.nombre}">✕</button>
      </div>`
      )
      .join("");

    const totales = await calcularTotales();
    if (footer) {
      footer.innerHTML = `
        <div class="summary-row"><span>Subtotal</span><span>${NovaUtils.formatoPrecio(totales.subtotal)}</span></div>
        <div class="summary-row"><span>Envío</span><span>${totales.envio === 0 ? "Gratis" : NovaUtils.formatoPrecio(totales.envio)}</span></div>
        <div class="summary-row total"><span>Total</span><span>${NovaUtils.formatoPrecio(totales.total)}</span></div>
        <a href="checkout.html" class="btn btn-primary btn-block mt-1">Ir a pagar</a>
        <a href="carrito.html" class="btn btn-outline btn-block mt-1">Ver carrito completo</a>`;
    }

    vincularEventosItems(body, renderDrawer);
  }

  /* ---------- Página carrito.html ---------- */
  async function renderPagina() {
    const contenedor = document.querySelector("[data-cart-page-items]");
    const resumen = document.querySelector("[data-cart-page-summary]");
    if (!contenedor) return;

    const detallado = await obtenerDetallado();

    if (detallado.length === 0) {
      contenedor.innerHTML = `
        <div class="empty-state">
          <div class="icon">🛒</div>
          <h3>Tu carrito está vacío</h3>
          <p>Explora nuestro catálogo y encuentra algo que te encante.</p>
          <a href="productos.html" class="btn btn-primary">Ir a comprar</a>
        </div>`;
      if (resumen) resumen.innerHTML = "";
      return;
    }

    contenedor.innerHTML = detallado
      .map(
        (p) => `
      <div class="cart-item" data-cart-item="${p.id}">
        <img src="${p.imagenes[0]}" alt="${p.nombre}">
        <div>
          <p class="cart-item-name">${p.nombre}</p>
          <p class="cart-item-price">${NovaUtils.formatoPrecio(p.precio)} c/u</p>
          <div class="qty-control">
            <button type="button" data-qty-minus aria-label="Disminuir cantidad">−</button>
            <span>${p.cantidad}</span>
            <button type="button" data-qty-plus aria-label="Aumentar cantidad">+</button>
          </div>
        </div>
        <button type="button" class="cart-item-remove" data-remove aria-label="Eliminar ${p.nombre}">✕</button>
      </div>`
      )
      .join("");

    const totales = await calcularTotales();
    if (resumen) {
      resumen.innerHTML = `
        <h3>Resumen del pedido</h3>
        <div class="summary-row mt-1"><span>Subtotal (${totales.cantidadItems} productos)</span><span>${NovaUtils.formatoPrecio(totales.subtotal)}</span></div>
        <div class="summary-row"><span>Envío</span><span>${totales.envio === 0 ? "Gratis" : NovaUtils.formatoPrecio(totales.envio)}</span></div>
        <div class="summary-row total"><span>Total</span><span>${NovaUtils.formatoPrecio(totales.total)}</span></div>
        <a href="checkout.html" class="btn btn-primary btn-block mt-2">Proceder al pago</a>`;
    }

    vincularEventosItems(contenedor, renderPagina);
  }

  function vincularEventosItems(scope, callbackRefrescar) {
    scope.querySelectorAll("[data-cart-item]").forEach((el) => {
      const id = el.getAttribute("data-cart-item");
      const carrito = obtener();
      const item = carrito.find((i) => i.id === id);
      if (!item) return;

      el.querySelector("[data-qty-plus]")?.addEventListener("click", () => {
        actualizarCantidad(id, item.cantidad + 1);
        callbackRefrescar();
      });
      el.querySelector("[data-qty-minus]")?.addEventListener("click", () => {
        actualizarCantidad(id, item.cantidad - 1);
        callbackRefrescar();
      });
      el.querySelector("[data-remove]")?.addEventListener("click", () => {
        eliminar(id);
        NovaToast.show("Producto eliminado del carrito", "🗑️");
        callbackRefrescar();
      });
    });
  }

  function initDrawerToggle() {
    const overlay = document.querySelector("[data-cart-overlay]");
    const drawer = document.querySelector("[data-cart-drawer]");
    const abrirBtns = document.querySelectorAll("[data-open-cart]");
    const cerrarBtns = document.querySelectorAll("[data-close-cart]");

    const abrir = () => {
      renderDrawer();
      overlay?.classList.add("is-open");
      drawer?.classList.add("is-open");
    };
    const cerrar = () => {
      overlay?.classList.remove("is-open");
      drawer?.classList.remove("is-open");
    };

    abrirBtns.forEach((btn) => btn.addEventListener("click", abrir));
    cerrarBtns.forEach((btn) => btn.addEventListener("click", cerrar));
    overlay?.addEventListener("click", cerrar);

    window.novaAbrirCarrito = abrir;
  }

  function init() {
    actualizarBadge();
    initDrawerToggle();
    if (document.querySelector("[data-cart-page-items]")) {
      renderPagina();
    }
  }

  return { agregar, eliminar, vaciar, obtener, obtenerDetallado, calcularTotales, actualizarBadge, renderDrawer, init };
})();
