/* =========================================================
   NOVA X — checkout.js
   Resumen de compra, selección de método de pago, validación
   y flujo de autenticación (invitado / login / registro)
   ========================================================= */

const NovaCheckout = (() => {
  const GUEST_FLAG = "novax_checkout_guest";

  /* ---------- Paso de acceso: invitado / login / registro ---------- */
  function mostrarContenidoCheckout() {
    document.querySelector("[data-checkout-gate]")?.classList.add("hidden");
    document.querySelector("[data-checkout-content]")?.classList.remove("hidden");
  }

  function mostrarPuerta() {
    document.querySelector("[data-checkout-gate]")?.classList.remove("hidden");
    document.querySelector("[data-checkout-content]")?.classList.add("hidden");
  }

  function prefillDatosUsuario(usuario) {
    if (!usuario) return;
    const campoNombre = document.querySelector("#ck-nombre");
    const campoEmail = document.querySelector("#ck-email");
    if (campoNombre && !campoNombre.value) campoNombre.value = usuario.nombre;
    if (campoEmail && !campoEmail.value) campoEmail.value = usuario.email;
  }

  function initAuthGate() {
    const gate = document.querySelector("[data-checkout-gate]");
    if (!gate) return;

    const usuario = window.NovaAuth?.usuarioActual();

    if (usuario) {
      mostrarContenidoCheckout();
      prefillDatosUsuario(usuario);
      return;
    }

    if (sessionStorage.getItem(GUEST_FLAG) === "1") {
      mostrarContenidoCheckout();
      return;
    }

    mostrarPuerta();

    document.querySelector("[data-checkout-guest]")?.addEventListener("click", () => {
      sessionStorage.setItem(GUEST_FLAG, "1");
      mostrarContenidoCheckout();
    });

    document.querySelector("[data-checkout-login]")?.addEventListener("click", () => {
      window.NovaAuthModal?.abrir("login", () => {
        mostrarContenidoCheckout();
        prefillDatosUsuario(window.NovaAuth?.usuarioActual());
      });
    });

    document.querySelector("[data-checkout-register]")?.addEventListener("click", () => {
      window.NovaAuthModal?.abrir("registro", () => {
        mostrarContenidoCheckout();
        prefillDatosUsuario(window.NovaAuth?.usuarioActual());
      });
    });
  }

  async function renderResumen() {
    const resumen = document.querySelector("[data-checkout-summary]");
    if (!resumen) return;

    const detallado = await NovaCarrito.obtenerDetallado();
    const totales = await NovaCarrito.calcularTotales();

    if (detallado.length === 0) {
      resumen.innerHTML = `<p style="color: var(--color-text-muted);">Tu carrito está vacío. <a href="productos.html" style="color: var(--color-blue);">Ir a comprar</a></p>`;
      document.querySelector("[data-checkout-form]")?.classList.add("hidden");
      document.querySelector("[data-checkout-gate]")?.classList.add("hidden");
      document.querySelector("[data-checkout-content]")?.classList.remove("hidden");
      return;
    }

    resumen.innerHTML = `
      <div style="display:flex; flex-direction:column; gap: var(--space-3); margin-bottom: var(--space-4);">
        ${detallado
          .map(
            (p) => `
          <div style="display:flex; gap: var(--space-3); align-items:center;">
            <img src="${p.imagenes[0]}" alt="${p.nombre}" style="width:52px; height:52px; border-radius:10px; object-fit:cover;">
            <div style="flex:1;">
              <p style="font-size: var(--fs-small); font-weight:600;">${p.nombre}</p>
              <p style="font-size: var(--fs-xs); color: var(--color-text-muted);">Cant. ${p.cantidad}</p>
            </div>
            <span style="font-size: var(--fs-small); font-weight:600;">${NovaUtils.formatoPrecio(p.precio * p.cantidad)}</span>
          </div>`
          )
          .join("")}
      </div>
      <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>`;
  }

  function initMetodosPago() {
    const opciones = document.querySelectorAll("[data-payment-option]");
    const campoTarjeta = document.querySelector("[data-card-fields]");
    if (!opciones.length) return;

    opciones.forEach((op) => {
      op.addEventListener("click", () => {
        opciones.forEach((o) => o.classList.remove("is-selected"));
        op.classList.add("is-selected");
        const input = document.querySelector("[data-payment-value]");
        if (input) input.value = op.getAttribute("data-payment-option");

        if (campoTarjeta) {
          const esTarjeta = op.getAttribute("data-payment-option") === "tarjeta";
          campoTarjeta.classList.toggle("hidden", !esTarjeta);
          campoTarjeta.querySelectorAll("input").forEach((campo) => {
            campo.required = esTarjeta;
            campo.disabled = !esTarjeta;
            if (!esTarjeta) campo.closest(".form-field")?.classList.remove("has-error");
          });
        }
      });
    });
  }

  function validarCampo(campo) {
    const wrapper = campo.closest(".form-field");
    if (!wrapper) return true;
    const valido = campo.checkValidity() && campo.value.trim() !== "";
    wrapper.classList.toggle("has-error", !valido);
    return valido;
  }

  function initFormulario() {
    const form = document.querySelector("[data-checkout-form]");
    if (!form) return;

    const obtenerCamposRequeridos = () => form.querySelectorAll("input[required]:not(:disabled), select[required]:not(:disabled)");
    let camposRequeridos = obtenerCamposRequeridos();

    camposRequeridos.forEach((campo) => {
      campo.addEventListener("blur", () => validarCampo(campo));
    });

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      let formularioValido = true;
      camposRequeridos = obtenerCamposRequeridos();
      camposRequeridos.forEach((campo) => {
        if (!validarCampo(campo)) formularioValido = false;
      });

      if (!formularioValido) {
        NovaToast.show("Revisa los campos marcados en rojo", "⚠️");
        return;
      }

      const btnSubmit = form.querySelector("[type=submit]");
      const textoOriginal = btnSubmit.textContent;
      btnSubmit.disabled = true;
      btnSubmit.textContent = "Procesando pago...";

      const totales = await NovaCarrito.calcularTotales();
      await new Promise((resolve) => setTimeout(resolve, 1400));

      const detallado = await NovaCarrito.obtenerDetallado();
      let numeroPedido = "NX-" + Math.floor(100000 + Math.random() * 900000);
      try {
        const respuesta = await fetch(`${window.NOVAX_CONFIG?.API_URL || "api"}/pedidos`, {
          method: "POST", credentials: "include", headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            nombre: document.querySelector("#ck-nombre").value,
            email: document.querySelector("#ck-email").value,
            telefono: document.querySelector("#ck-telefono").value,
            ciudad: document.querySelector("#ck-ciudad").value,
            direccion: document.querySelector("#ck-direccion").value,
            referencia: document.querySelector("#ck-referencia").value,
            codigo_postal: document.querySelector("#ck-codigo").value,
            metodo_pago: document.querySelector("[data-payment-value]").value,
            subtotal: totales.subtotal, envio: totales.envio, total: totales.total,
            items: detallado.map(p => ({ dbId: p.dbId || null, nombre: p.nombre, cantidad: p.cantidad, precio: p.precio }))
          })
        });
        const json = await respuesta.json();
        if (!respuesta.ok) throw new Error(json.mensaje || "No se pudo registrar el pedido");
        numeroPedido = json.numero_pedido;
      } catch (error) {
        console.warn("Pedido no guardado en API:", error);
      }
      const confirmacion = document.querySelector("[data-checkout-confirm]");
      const usuario = window.NovaAuth?.usuarioActual();

      if (usuario) {
        window.NovaAuth.guardarPedido(usuario.email, {
          numero: numeroPedido,
          fecha: new Date().toISOString(),
          items: totales.cantidadItems,
          total: totales.total,
          estado: "Confirmado",
        });
      }

      form.classList.add("hidden");
      document.querySelector("[data-checkout-summary-card]")?.classList.add("hidden");

      if (confirmacion) {
        confirmacion.classList.remove("hidden");
        confirmacion.querySelector("[data-order-number]").textContent = numeroPedido;
        confirmacion.querySelector("[data-guest-cta]")?.classList.toggle("hidden", !!usuario);
        confirmacion.querySelector("[data-confirm-profile-link]")?.classList.toggle("hidden", !usuario);
      }

      NovaCarrito.vaciar();
      sessionStorage.removeItem(GUEST_FLAG);
      btnSubmit.disabled = false;
      btnSubmit.textContent = textoOriginal;
    });
  }

  function init() {
    if (!document.querySelector("[data-checkout-form]")) return;
    initAuthGate();
    renderResumen();
    initMetodosPago();
    initFormulario();
  }

  return { init };
})();
