// =====================================================================
// SOMOS SETAS — Checkout en página propia (Carrito → Entrega → Pago)
// =====================================================================
// Reemplaza al pop-up "Finalizar pedido". Como el checkout de Tiendanube:
// cada paso es una dirección (#/checkout/entrega, #/checkout/pago), el resumen
// de la compra está siempre a mano y se puede volver a cualquier paso anterior
// —con el stepper, con "Modificar" o con el botón Atrás del navegador— sin
// perder lo que ya se cargó (queda en sessionStorage mientras dure la pestaña).
//
// La cuenta sale de calcularPedido() (precios.js), la misma que rehace el
// servidor antes de cobrar. Los cobros usan las mismas funciones de antes:
// mp-crear-pago (Checkout Pro o tarjeta en la tienda) y addOrder.
// =====================================================================

const CK_STORAGE = "ss_checkout_v1";
const CK_DATOS_VACIOS = {
  email: "", name: "", dni: "", contactType: "whatsapp", contact: "", telefonoEnvio: "",
  calle: "", numero: "", pisoDepto: "", city: "", provincia: "Mendoza", postalCode: "", notes: "",
};

function ckLeer() {
  try { return JSON.parse(sessionStorage.getItem(CK_STORAGE) || "null") || {}; } catch { return {}; }
}
function ckGuardar(v) {
  try { sessionStorage.setItem(CK_STORAGE, JSON.stringify(v)); } catch {}
}

function CheckoutPage({ store, paso, cartSummary, onVolverCarrito }) {
  const inicial = useMemo(() => ckLeer(), []);
  const [datos, setDatos] = useState(() => ({ ...CK_DATOS_VACIOS, ...(inicial.datos || {}),
    postalCode: inicial.datos?.postalCode || store.shipTo.cp || "",
    // Solo WhatsApp o Email: un dato guardado con otro tipo vuelve a WhatsApp.
    contactType: ["whatsapp", "email"].includes(inicial.datos?.contactType) ? inicial.datos.contactType : "whatsapp" }));
  const [deliveryType, setDeliveryType] = useState(inicial.deliveryType || cartSummary?.deliveryType || "sucursal");
  const [couponCode, setCouponCode] = useState(inicial.couponCode ?? cartSummary?.appliedCode?.code ?? "");
  const [sucursal, setSucursal] = useState(inicial.sucursal || null);
  const [sucursalEstado, setSucursalEstado] = useState("idle");
  const [medioPago, setMedioPago] = useState(inicial.medioPago || "");
  const [resultado, setResultado] = useState(inicial.resultado || null); // pedido ya hecho (transferencia / WhatsApp)
  const [intentoEntrega, setIntentoEntrega] = useState(false);
  const [pagando, setPagando] = useState(false);
  const [errorPago, setErrorPago] = useState("");
  const [publicKey, setPublicKey] = useState(null); // null = sin consultar; "" = no hay
  const [resumenAbierto, setResumenAbierto] = useState(false);
  // Pedido ya guardado para cobrar: se reusa mientras no cambie nada del pedido.
  const pedidoRef = useRef(null);

  useEffect(() => {
    ckGuardar({ datos, deliveryType, couponCode, sucursal, medioPago, resultado });
  }, [datos, deliveryType, couponCode, sucursal, medioPago, resultado]);

  useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [paso]);

  const set = (k) => (e) => setDatos((d) => ({ ...d, [k]: e.target.value }));

  // ---------- La cuenta ----------
  const subtotal = store.cart.reduce((s, i) => s + i.price * i.qty, 0);
  const cuponObj = couponCode ? (store.discountCodes || []).find((c) => c.code.toUpperCase() === couponCode.toUpperCase()) : null;
  const cuponMotivo = couponCode ? motivoCuponInvalido(cuponObj, subtotal) : null;
  const cupon = couponCode && !cuponMotivo ? cuponObj : null;
  const calc = calcularPedido({
    subtotal, clientType: store.clientType, cupon,
    entregaTipo: deliveryType, zonaId: store.shipTo.zona, config: store.config,
  });
  const { envio, tier, tierDiscAmt, couponDiscAmt, isFreeSucursal, isFreeDomicilio, zona, shippingCost, total, belowMin, minPedido } = calc;
  const zonasLista = useZonaPorCP(datos.postalCode, envio.zonas, store.shipTo.zona, (z) => store.setShipping({ zona: z }));

  // ---------- Validación de la entrega ----------
  const contactoEsTelefono = datos.contactType === "whatsapp" || datos.contactType === "telefono";
  const despacha = seDespachaPorAndreani(deliveryType);
  const telefono = contactoEsTelefono ? datos.contact : datos.telefonoEnvio;
  const emailOk = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(datos.email.trim());
  const errores = {};
  if (!emailOk) errores.email = datos.email.trim() ? "Revisá el email." : "Falta el email.";
  if (!datos.name.trim()) errores.name = "Falta el nombre.";
  if (!datos.dni.trim()) errores.dni = "Falta el DNI.";
  if (!datos.contact.trim()) errores.contact = "Falta el dato de contacto.";
  else if (contactoEsTelefono && !telefonoValido(datos.contact)) errores.contact = "Revisá el número: tiene que tener la característica, ej. 261 555-0000.";
  if (despacha && !contactoEsTelefono && !telefonoValido(datos.telefonoEnvio)) errores.telefonoEnvio = "Andreani necesita un teléfono para avisarte.";
  if (!datos.calle.trim()) errores.calle = "Falta la calle.";
  if (!datos.numero.trim()) errores.numero = "Falta el número.";
  if (!datos.city.trim()) errores.city = "Falta la localidad.";
  if (datos.postalCode.trim() && !cpValido(datos.postalCode)) errores.postalCode = "Son 4 números (ej. 5500) o el CP completo (ej. M5500ABC).";
  else if (despacha && !cpValido(datos.postalCode)) errores.postalCode = "Falta el código postal.";
  if (deliveryType === "domicilio" && !isFreeDomicilio && !store.shipTo.zona) errores.zona = "Elegí tu zona para calcular el envío.";
  if (deliveryType === "sucursal" && !sucursal && sucursalEstado !== "error") errores.sucursal = "Elegí la sucursal donde vas a retirar.";
  const entregaOk = Object.keys(errores).length === 0;
  const err = (k) => intentoEntrega && errores[k] ? <span className="field-error">{errores[k]}</span> : null;
  const cls = (k) => intentoEntrega && errores[k] ? "ck-input-error" : "";

  // ---------- Navegación entre pasos ----------
  const irA = (p) => { window.location.hash = "#/checkout/" + p; };
  const continuarAPago = () => {
    setIntentoEntrega(true);
    if (!entregaOk) {
      setTimeout(() => document.querySelector(".ck-input-error, .ck-error-bloque")?.scrollIntoView({ behavior: "smooth", block: "center" }), 30);
      return;
    }
    irA("pago");
  };
  // No se puede estar en Pago sin la entrega completa (por ej. recargando).
  useEffect(() => { if (paso === "pago" && !entregaOk) irA("entrega"); }, [paso]); // eslint-disable-line react-hooks/exhaustive-deps

  // ---------- El pedido ----------
  // En el servidor de pruebas (modo-prueba.js) el cobro va siempre encendido:
  // la configuracion real puede volver a llegar por la actualizacion en vivo
  // del catalogo (Realtime), que no pasa por el modo prueba.
  const mpActivo = !!store.config.mercadoPagoActivo || !!window.__modoPrueba;
  const mediosVisibles = mediosDisponibles(store.config, mpActivo);
  useEffect(() => { if (medioPago && !mediosVisibles.some((m) => m.id === medioPago)) setMedioPago(""); }, [mpActivo, mediosVisibles.map((m) => m.id).join()]); // eslint-disable-line react-hooks/exhaustive-deps

  // Public Key para la tarjeta en la tienda. Sin ella, la tarjeta se paga en Mercado Pago.
  useEffect(() => {
    if (paso !== "pago" || medioPago !== "tarjeta" || publicKey !== null) return;
    window.sb.functions.invoke("mp-crear-pago", { body: { accion: "config" } })
      .then(({ data, error }) => setPublicKey(!error && data?.publicKey ? data.publicKey : ""))
      .catch(() => setPublicKey(""));
  }, [paso, medioPago, publicKey]);

  const contactLabel = { whatsapp: "WhatsApp", telefono: "Teléfono", email: "Email", instagram: "Instagram" }[datos.contactType];
  const domicilio = armarDomicilio(datos);
  const entregaTexto = deliveryType === "local" ? "Retiro en el local"
    : deliveryType === "domicilio" ? `A domicilio${zona && store.shipTo.zona ? ` (${zona.label})` : ""}`
    : sucursal ? `Sucursal Andreani ${window.AndreaniSucursales.texto(sucursal)}` : "Sucursal Andreani (a coordinar)";

  const clientInfo = clientTypeInfo(store.clientType);
  const reg = store.clientReg;
  const mensajeWA = (() => {
    const lines = [
      "*🍄 Pedido — SOMOS SETAS*", "",
      clientInfo ? `*Tipo de cliente:* ${clientInfo.label}` : null,
      isWholesaleClient(store.clientType) && reg
        ? `*Registro ${clientInfo.label}:* ${reg.nombre || "—"} · ${reg.negocio || "—"} · ${reg.telefono || "—"} · ${reg.email || "—"}${reg.localidad ? " · " + reg.localidad : ""}`
        : null,
      `*Cliente:* ${datos.name || "—"}`,
      `*DNI:* ${datos.dni || "—"}`,
      `*Email:* ${datos.email || "—"}`,
      `*Domicilio:* ${domicilio || "—"}`,
      `*Localidad:* ${[datos.city, datos.provincia].filter(Boolean).join(", ") || "—"}`,
      datos.postalCode ? `*Código postal:* ${datos.postalCode}` : null,
      despacha && !contactoEsTelefono && datos.telefonoEnvio ? `*Teléfono para el envío:* ${datos.telefonoEnvio}` : null,
      `*Entrega:* ${entregaTexto}`,
      `*Contacto (${contactLabel}):* ${datos.contact || "—"}`,
      medioPago ? `*Medio de pago:* ${medioLabel(medioPago)}` : null,
      "", "*Productos:*",
      ...store.cart.map((i) => `• ${i.qty}× ${i.productName} — ${i.presLabel}  (${fmtPrice(i.price * i.qty)})`),
      "", `*Subtotal:* ${fmtPrice(subtotal)}`,
    ].filter((l) => l !== null);
    if (tierDiscAmt > 0) lines.push(`*Descuento ${tier.name} (${Math.round(tier.discount * 100)}%):* − ${fmtPrice(tierDiscAmt)}`);
    if (couponDiscAmt > 0) lines.push(`*Cupón ${cupon.code}:* − ${fmtPrice(couponDiscAmt)}`);
    lines.push(`*Envío:* ${shippingCost === 0 ? "Gratis ✓" : `${deliveryType === "domicilio" ? "A domicilio" : "Sucursal Andreani"} — ${fmtPrice(shippingCost)}`}`);
    lines.push(`*TOTAL:* ${fmtPrice(total)}`);
    if (datos.notes.trim()) lines.push("", `*Notas:* ${datos.notes}`);
    lines.push("", "_Pedido generado desde la web somossetas.com.ar_");
    return lines.join("\n");
  })();

  const armarPedido = (extra = {}) => ({
    id: "ORD-" + Date.now().toString(36).toUpperCase() + "-" + Math.random().toString(36).slice(2, 6).toUpperCase(),
    ts: Date.now(),
    name: datos.name.trim(), dni: datos.dni.trim(), email: datos.email.trim(), domicilio, city: datos.city.trim(),
    postalCode: datos.postalCode.trim(),
    calle: datos.calle.trim(), numero: datos.numero.trim(), pisoDepto: datos.pisoDepto.trim(), provincia: datos.provincia,
    telefono: despacha || contactoEsTelefono ? telefono.trim() : "",
    clientType: store.clientType || null,
    clientReg: isWholesaleClient(store.clientType) ? (store.clientReg || null) : null,
    entregaTipo: deliveryType, zonaEnvio: deliveryType === "domicilio" ? zona.label : "", zonaId: store.shipTo.zona || "",
    sucursalAndreani: deliveryType === "sucursal" && sucursal ? window.AndreaniSucursales.paraPedido(sucursal) : null,
    contact: `${contactLabel}: ${datos.contact}`, notes: datos.notes,
    items: store.cart.map((i) => ({ ...i, ...bultoDe(store.products, i.productId, i.presId) })),
    subtotal, tierDiscAmt, tierName: tier.name,
    couponCode: cupon?.code || null, couponDiscAmt,
    shippingCost, total,
    status: "nuevo",
    ...extra,
  });

  // Huella de lo que define el cobro: si la clienta vuelve y cambia algo, es otro pedido.
  const huella = JSON.stringify([datos, deliveryType, sucursal?.id || sucursal?.numero || null, store.shipTo.zona, cupon?.code || "", store.cart.map((i) => [i.productId, i.presId, i.qty]), total, medioPago]);

  const sumarUsoCupon = () => {
    if (!cupon) return;
    window.sb.rpc("increment_coupon_use", { p_code: cupon.code })
      .then(({ error }) => { if (error) console.error("Error incrementando uso de cupón:", error.message); });
  };
  const terminar = (res) => {
    store.clearCart();
    pedidoRef.current = null;
    setResultado(res);
    irA("listo");
  };

  // Guarda el pedido (una sola vez por huella) para cobrarlo.
  const pedidoParaCobrar = async (medio) => {
    if (pedidoRef.current && pedidoRef.current.huella === huella) return pedidoRef.current.pedido;
    const pedido = armarPedido({ pagoMetodo: medio, payments: [], paymentStatus: "pendiente" });
    const { ok } = await store.addOrder(pedido, { avisar: false });
    if (!ok) throw new Error("No pudimos guardar el pedido. Revisá tu conexión y volvé a intentar.");
    pedidoRef.current = { huella, pedido };
    return pedido;
  };
  const leerError = async (error, porDefecto) => {
    try { const j = await error?.context?.json(); if (j?.error) return j.error; } catch {}
    return porDefecto;
  };

  // Checkout de Mercado Pago (efectivo, Mercado Pago, cuotas, y tarjeta sin Public Key).
  const irAMercadoPago = async () => {
    setPagando(true); setErrorPago("");
    try {
      const pedido = await pedidoParaCobrar(medioPago);
      const { data, error } = await window.sb.functions.invoke("mp-crear-pago", { body: { orderId: pedido.id } });
      if (error || !data?.url) throw new Error(await leerError(error, "No pudimos conectar con Mercado Pago. Probá de nuevo o enviá el pedido por WhatsApp."));
      window.MetaPixel?.track("AddPaymentInfo", { ...pixelContenidos(pedido.items), value: pedido.total }, { eventID: pedido.id + "-pago" });
      try { localStorage.setItem("ss_pixel_mp", JSON.stringify({ id: pedido.id, value: pedido.total, ...pixelContenidos(pedido.items) })); } catch {}
      sumarUsoCupon();
      store.clearCart();
      try { sessionStorage.removeItem(CK_STORAGE); } catch {}
      window.location.href = data.url;
    } catch (e) {
      setErrorPago(e.message); setPagando(false);
    }
  };

  // Tarjeta en la tienda: lo llama el formulario de Mercado Pago con el token.
  const pagarTarjeta = async (form) => {
    const pedido = await pedidoParaCobrar("tarjeta");
    const { data, error } = await window.sb.functions.invoke("mp-crear-pago", {
      body: { accion: "tarjeta-pagar", orderId: pedido.id, tarjeta: form },
    });
    if (error) throw new Error(await leerError(error, "No pudimos procesar la tarjeta. Probá de nuevo o elegí otro medio."));
    if (data.estado === "rejected" || data.estado === "cancelled") throw new Error(motivoRechazo(data.detalle));
    const estado = data.estado === "approved" ? "approved" : "in_process";
    try { localStorage.setItem("ss_pixel_mp", JSON.stringify({ id: pedido.id, value: pedido.total, ...pixelContenidos(pedido.items) })); } catch {}
    sumarUsoCupon();
    store.clearCart();
    try { sessionStorage.removeItem(CK_STORAGE); } catch {}
    window.location.href = `${window.location.pathname}?pago=${encodeURIComponent(pedido.id)}&status=${estado}`;
  };

  const pedirConTransferencia = async () => {
    setPagando(true); setErrorPago("");
    const pedido = armarPedido({ pagoMetodo: "transferencia", payments: [], paymentStatus: "pendiente" });
    const { ok } = await store.addOrder(pedido, { avisar: false });
    setPagando(false);
    if (!ok) { setErrorPago("No pudimos guardar el pedido. Revisá tu conexión y volvé a intentar."); return; }
    sumarUsoCupon();
    window.MetaPixel?.identificar({ email: datos.email, telefono: telefono || "" });
    window.MetaPixel?.track("Purchase", { ...pixelContenidos(pedido.items), value: pedido.total }, { eventID: pedido.id });
    terminar({ tipo: "transferencia", id: pedido.id, total: pedido.total, mensaje: mensajeWA });
  };

  // WhatsApp: el botón es un <a href> para que el navegador abra WhatsApp sin
  // que lo bloqueen; el pedido se guarda igual (addOrder usa keepalive).
  const waUrl = `https://wa.me/${store.config.whatsapp}?text=${encodeURIComponent(mensajeWA)}`;
  const enviarPorWhatsApp = () => {
    const pedido = armarPedido({ pagoMetodo: medioPago || "" });
    store.addOrder(pedido);
    sumarUsoCupon();
    window.MetaPixel?.identificar({ email: datos.email, telefono: telefono || "" });
    window.MetaPixel?.track("Purchase", { ...pixelContenidos(pedido.items), value: pedido.total }, { eventID: pedido.id });
    setTimeout(() => terminar({ tipo: "whatsapp", id: pedido.id, total: pedido.total }), 250);
  };

  // ---------- Pantallas ----------
  const pasos = [
    { id: "carrito", label: "Carrito" },
    { id: "entrega", label: "Entrega" },
    { id: "pago", label: "Pago" },
  ];
  const indice = paso === "listo" ? 3 : pasos.findIndex((p) => p.id === paso);
  const irAPaso = (p, i) => {
    if (paso === "listo" || i >= indice) return;
    if (p.id === "carrito") onVolverCarrito(); else irA(p.id);
  };

  const header = (
    <header className="ck-header">
      <a href="#/" className="ck-logo" aria-label="Volver a la tienda"><img src="assets/favicon.png" alt=""/><span>Somos Setas</span></a>
      <a href="#/" className="ck-volver-tienda">Volver a la tienda</a>
    </header>
  );

  if (paso === "listo") {
    if (!resultado) { window.location.hash = "#/"; return null; }
    return (
      <div className="ck-page">
        {header}
        <main className="ck-main ck-main--solo">
          <CheckoutListo store={store} resultado={resultado} onCerrar={() => { setResultado(null); try { sessionStorage.removeItem(CK_STORAGE); } catch {} window.location.hash = "#/"; }}/>
        </main>
      </div>
    );
  }

  if (!store.cart.length) {
    return (
      <div className="ck-page">
        {header}
        <main className="ck-main ck-main--solo">
          <div className="ck-card ck-vacio">
            <h1>Tu carrito está vacío</h1>
            <p>Agregá productos para finalizar la compra.</p>
            <a href="#/catalogo" className="btn-primary">Ir al catálogo</a>
          </div>
        </main>
      </div>
    );
  }

  const resumen = (
    <CheckoutResumen store={store} subtotal={subtotal} calc={calc} cupon={cupon} couponCode={couponCode}
      cuponMotivo={cuponMotivo} onCupon={setCouponCode} deliveryType={deliveryType} paso={paso}/>
  );

  return (
    <div className="ck-page">
      {header}
      <button type="button" className="ck-resumen-toggle" onClick={() => setResumenAbierto((v) => !v)} aria-expanded={resumenAbierto}>
        <span><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" style={{ transform: resumenAbierto ? "rotate(180deg)" : "none", transition: "transform .2s", verticalAlign: "-2px" }}><path d="m6 9 6 6 6-6"/></svg> {resumenAbierto ? "Ocultar" : "Ver"} detalles de mi compra</span>
        <strong>{fmtPrice(total)}</strong>
      </button>
      {resumenAbierto && <div className="ck-resumen-movil">{resumen}</div>}

      <div className="ck-layout">
        <main className="ck-main">
          <ol className="ck-stepper">
            {pasos.map((p, i) => (
              <li key={p.id} className={(i < indice ? "is-hecho" : "") + (i === indice ? " is-actual" : "")}>
                <button type="button" onClick={() => irAPaso(p, i)} disabled={i >= indice}>
                  <span className="ck-step-dot">{i < indice ? "✓" : i + 1}</span>
                  <span className="ck-step-label">{p.label}</span>
                </button>
              </li>
            ))}
          </ol>

          {belowMin && (
            <div className="ck-aviso ck-error-bloque">
              Tu perfil {clientInfo?.label} tiene una compra mínima de <strong>{fmtPrice(minPedido)}</strong>.
              Te faltan {fmtPrice(minPedido - subtotal)}. <button type="button" className="ck-link" onClick={onVolverCarrito}>Volver al carrito</button>
            </div>
          )}

          {paso === "entrega" && (
            <>
              <section className="ck-card">
                <h2>Datos de contacto</h2>
                <div className="field">
                  <label>Email *</label>
                  <input type="email" className={cls("email")} value={datos.email} onChange={set("email")} placeholder="nombre@email.com" autoComplete="email"/>
                  {err("email")}
                </div>
                <div className="field-row">
                  <div className="field">
                    <label>Nombre completo *</label>
                    <input type="text" className={cls("name")} value={datos.name} onChange={set("name")} placeholder="Ej. María González" autoComplete="name"/>
                    {err("name")}
                  </div>
                  <div className="field">
                    <label>DNI *</label>
                    <input type="text" inputMode="numeric" className={cls("dni")} value={datos.dni} onChange={set("dni")} placeholder="Ej. 30.123.456"/>
                    {err("dni")}
                  </div>
                </div>
                <div className="field">
                  <label>¿Por dónde te contactamos? *</label>
                  <div className="ck-chips">
                    {["whatsapp", "email"].map((t) => (
                      <button type="button" key={t} className={"ck-chip" + (datos.contactType === t ? " is-active" : "")}
                        onClick={() => setDatos((d) => ({ ...d, contactType: t }))}>
                        {{ whatsapp: "WhatsApp", telefono: "Teléfono", email: "Email", instagram: "Instagram" }[t]}
                      </button>
                    ))}
                  </div>
                  <input type={datos.contactType === "email" ? "email" : contactoEsTelefono ? "tel" : "text"} className={cls("contact")}
                    value={datos.contact} onChange={set("contact")}
                    placeholder={{ whatsapp: "Ej. +54 261 555-0000", telefono: "Ej. +54 261 555-0000", email: "Ej. nombre@email.com", instagram: "Ej. @usuario" }[datos.contactType]}/>
                  {err("contact")}
                </div>
                {despacha && !contactoEsTelefono && (
                  <div className="field">
                    <label>Teléfono para el envío *</label>
                    <input type="tel" className={cls("telefonoEnvio")} value={datos.telefonoEnvio} onChange={set("telefonoEnvio")} placeholder="Ej. +54 261 555-0000" autoComplete="tel"/>
                    <span className="field-hint">Andreani lo usa para avisarte cuando llega tu pedido.</span>
                    {err("telefonoEnvio")}
                  </div>
                )}
              </section>

              <section className="ck-card">
                <h2>Entrega</h2>
                <div className="ck-opciones" role="radiogroup" aria-label="Tipo de entrega">
                  {[
                    { id: "sucursal", t: "Retiro en sucursal Andreani", d: "Todo el país", p: isFreeSucursal ? "Gratis" : fmtPrice(envio.costoSucursal) },
                    { id: "domicilio", t: "Envío a domicilio", d: "El costo depende de tu zona", p: isFreeDomicilio ? "Gratis" : store.shipTo.zona ? fmtPrice(zona.costo) : "Según zona" },
                    { id: "local", t: "Retiro en el local", d: "Coordinamos el horario por WhatsApp", p: "Gratis" },
                  ].map((o) => (
                    <button type="button" key={o.id} role="radio" aria-checked={deliveryType === o.id}
                      className={"ck-opcion" + (deliveryType === o.id ? " is-active" : "")} onClick={() => setDeliveryType(o.id)}>
                      <span className="medio-radio" aria-hidden="true"></span>
                      <span className="ck-opcion-txt"><span>{o.t}</span><small>{o.d}</small></span>
                      <span className={"ck-opcion-precio" + (o.p === "Gratis" ? " is-gratis" : "")}>{o.p}</span>
                    </button>
                  ))}
                </div>
                {deliveryType === "domicilio" && !isFreeDomicilio && (
                  <div className="field" style={{ marginTop: 16 }}>
                    <label>Zona *</label>
                    <select className={cls("zona")} value={store.shipTo.zona} onChange={(e) => store.setShipping({ zona: e.target.value })}>
                      <option value="">{zonasLista !== envio.zonas ? "Tu CP abarca varias zonas: elegí la tuya" : "Elegí tu localidad"}</option>
                      {zonasLista.map((z) => <option key={z.id} value={z.id}>{z.label} — {fmtPrice(z.costo)}</option>)}
                    </select>
                    {!store.shipTo.zona && <span className="field-hint">Se completa sola con tu código postal.</span>}
                    {err("zona")}
                  </div>
                )}

                <h3 className="ck-subtitulo">{deliveryType === "domicilio" ? "Dirección de entrega" : "Tu domicilio"}</h3>
                <div className="field-row-3 wa-dir">
                  <div className="field">
                    <label>Calle *</label>
                    <input type="text" className={cls("calle")} value={datos.calle} onChange={set("calle")} placeholder="Ej. San Martín" autoComplete="address-line1"/>
                    {err("calle")}
                  </div>
                  <div className="field">
                    <label>Número *</label>
                    <input type="text" inputMode="numeric" className={cls("numero")} value={datos.numero} onChange={set("numero")} placeholder="Ej. 1234"/>
                    {err("numero")}
                  </div>
                  <div className="field">
                    <label>Piso / depto</label>
                    <input type="text" value={datos.pisoDepto} onChange={set("pisoDepto")} placeholder="Ej. 2° B" autoComplete="address-line2"/>
                  </div>
                </div>
                <div className="field-row-3">
                  <div className="field">
                    <label>Localidad *</label>
                    <input type="text" className={cls("city")} value={datos.city} onChange={set("city")} placeholder="Ej. Godoy Cruz" autoComplete="address-level2"/>
                    {err("city")}
                  </div>
                  <div className="field">
                    <label>Provincia *</label>
                    <select value={datos.provincia} onChange={set("provincia")} autoComplete="address-level1">
                      {PROVINCIAS_AR.map((p) => <option key={p} value={p}>{p}</option>)}
                    </select>
                  </div>
                  <div className="field">
                    <label>Código postal {despacha && "*"}</label>
                    <input type="text" className={cls("postalCode")} value={datos.postalCode}
                      onChange={(e) => { set("postalCode")(e); store.setShipping({ cp: e.target.value }); }} placeholder="Ej. 5500" autoComplete="postal-code"/>
                    {err("postalCode")}
                  </div>
                </div>
                {deliveryType === "sucursal" && (
                  <div className={"field" + (intentoEntrega && errores.sucursal ? " ck-error-bloque" : "")}>
                    <label>Sucursal Andreani donde retirás *</label>
                    <SelectorSucursal cp={datos.postalCode} value={sucursal} onChange={setSucursal} onEstado={setSucursalEstado}/>
                    {err("sucursal")}
                  </div>
                )}
                <div className="field" style={{ marginBottom: 0 }}>
                  <label>Notas (opcional)</label>
                  <textarea rows="2" value={datos.notes} onChange={set("notes")} placeholder="Horario de entrega, referencias…"></textarea>
                </div>
              </section>

              <div className="ck-acciones">
                <button type="button" className="ck-link" onClick={onVolverCarrito}>← Volver al carrito</button>
                <button type="button" className="btn-primary ck-continuar" onClick={continuarAPago} disabled={belowMin}>Continuar al pago</button>
              </div>
              {intentoEntrega && !entregaOk && <p className="ck-faltan">Revisá los campos marcados en rojo.</p>}
            </>
          )}

          {paso === "pago" && (
            <>
              <section className="ck-card ck-repaso">
                <div className="ck-repaso-fila">
                  <span className="ck-repaso-titulo">Contacto</span>
                  <span className="ck-repaso-txt">{datos.name} · {datos.email} · {contactLabel}: {datos.contact}</span>
                  <button type="button" className="ck-link" onClick={() => irA("entrega")}>Modificar</button>
                </div>
                <div className="ck-repaso-fila">
                  <span className="ck-repaso-titulo">Entrega</span>
                  <span className="ck-repaso-txt">
                    {entregaTexto} · {shippingCost ? fmtPrice(shippingCost) : "Gratis"}
                    <br/>{[domicilio, datos.city, datos.provincia, datos.postalCode].filter(Boolean).join(", ")}
                  </span>
                  <button type="button" className="ck-link" onClick={() => irA("entrega")}>Modificar</button>
                </div>
              </section>

              <section className="ck-card">
                <h2>Pago</h2>
                {!mediosVisibles.length && <p style={{ margin: 0, color: "var(--ink-3)", fontSize: 14 }}>Coordinamos el pago por WhatsApp: enviá el pedido con el botón de abajo.</p>}
                <div className="medios-pago" role="radiogroup" aria-label="Medio de pago">
                  {mediosVisibles.map((m) => (
                    <React.Fragment key={m.id}>
                      <button type="button" role="radio" aria-checked={medioPago === m.id}
                        className={"medio-opt" + (medioPago === m.id ? " is-active" : "")}
                        onClick={() => { setMedioPago(m.id); setErrorPago(""); }}>
                        <span className="medio-radio" aria-hidden="true"></span>
                        <span className="medio-txt">
                          <span className="medio-label">{m.label}</span>
                          {m.detalle && <span className="medio-detalle">{m.detalle}</span>}
                        </span>
                        <MedioIcono id={m.id}/>
                      </button>
                      {medioPago === m.id && (
                        <div className="ck-medio-panel">
                          <PanelMedio medio={m.id} total={total} publicKey={publicKey} email={datos.email}
                            transferencia={store.config} pagando={pagando}
                            onPagarTarjeta={pagarTarjeta} onIrAMercadoPago={irAMercadoPago} onTransferencia={pedirConTransferencia}/>
                        </div>
                      )}
                    </React.Fragment>
                  ))}
                </div>
                {errorPago && <div className="pago-error" role="alert" style={{ margin: "14px 0 0" }}>{errorPago}</div>}
              </section>

              <div className="ck-acciones">
                <button type="button" className="ck-link" onClick={() => irA("entrega")}>← Volver a la entrega</button>
                <a href={waUrl} target="_blank" rel="noopener noreferrer" className="ck-wa" onClick={enviarPorWhatsApp}>
                  <img src="assets/whatsapp-logo.png" alt=""/> Prefiero enviar el pedido por WhatsApp
                </a>
              </div>
            </>
          )}
        </main>
        <aside className="ck-aside">{resumen}</aside>
      </div>
    </div>
  );
}

// Lo que aparece debajo del medio de pago elegido, como en Tiendanube.
function PanelMedio({ medio, total, publicKey, email, transferencia, pagando, onPagarTarjeta, onIrAMercadoPago, onTransferencia }) {
  if (medio === "transferencia") {
    return (
      <>
        <p>Te mostramos el alias para transferir <strong>{fmtPrice(total)}</strong> al confirmar. El pedido se confirma cuando nos mandás el comprobante por WhatsApp.</p>
        <button type="button" className="btn-primary ck-pagar" disabled={pagando} onClick={onTransferencia}>
          {pagando ? "Guardando…" : "Confirmar pedido"}
        </button>
      </>
    );
  }
  if (medio === "tarjeta") {
    if (publicKey === null) return <p className="tarjeta-cargando">Preparando el pago con tarjeta…</p>;
    if (publicKey) {
      return (
        <>
          <TarjetaMP publicKey={publicKey} total={total} email={email} onPagar={onPagarTarjeta}/>
          <p className="tarjeta-seguro">Los datos de la tarjeta los procesa Mercado Pago de forma segura: Somos Setas no los ve ni los guarda.</p>
        </>
      );
    }
  }
  // Efectivo se paga en la caja de Rapipago o Pago Fácil: Mercado Pago solo
  // emite el cupón con el código. El texto y el botón lo dicen así.
  if (medio === "efectivo") {
    return (
      <>
        <p>
          Pagás <strong>{fmtPrice(total)} en efectivo</strong> en cualquier sucursal de Rapipago o Pago Fácil.
          Al confirmar te damos el cupón con el código de pago para mostrar en la caja.
          Tu pedido se confirma cuando lo pagás.
        </p>
        <button type="button" className="btn-primary ck-pagar" disabled={pagando} onClick={onIrAMercadoPago}>
          {pagando ? "Generando el cupón…" : "Generar cupón de pago en efectivo"}
        </button>
        <p className="tarjeta-seguro">El cupón lo emite Mercado Pago, que procesa los pagos de la tienda.</p>
      </>
    );
  }
  const textos = {
    tarjeta: "Vas a cargar la tarjeta en Mercado Pago y volvés a la tienda al terminar.",
    mercadopago: "Te llevamos a Mercado Pago: pagás con tarjeta de crédito o débito, dinero en cuenta u otros medios, con o sin cuenta.",
    cuotas: "Pagás en cuotas con tu línea de crédito de Mercado Pago, sin tarjeta.",
  };
  return (
    <>
      <p>{textos[medio]}</p>
      <button type="button" className="btn-primary ck-pagar" disabled={pagando} onClick={onIrAMercadoPago}>
        {pagando ? "Conectando con Mercado Pago…" : `Pagar ${fmtPrice(total)} en Mercado Pago`}
      </button>
    </>
  );
}

function CheckoutResumen({ store, subtotal, calc, cupon, couponCode, cuponMotivo, onCupon, deliveryType, paso }) {
  const [abierto, setAbierto] = useState(false);
  const [codigo, setCodigo] = useState("");
  const { tier, tierDiscAmt, couponDiscAmt, shippingCost, total } = calc;
  const aplicar = () => { const c = codigo.trim().toUpperCase(); if (!c) return; onCupon(c); setCodigo(""); };
  return (
    <div className="ck-resumen">
      <ul className="ck-items">
        {store.cart.map((i) => {
          const img = i.productImage || store.products.find((p) => p.id === i.productId)?.image || "";
          return (
            <li key={i.productId + i.presId}>
              <span className="ck-item-img">{img && <img src={img} alt=""/>}<span className="ck-item-qty">{i.qty}</span></span>
              <span className="ck-item-txt"><span>{i.productName}</span><small>{i.presLabel}</small></span>
              <span className="mono">{fmtPrice(i.price * i.qty)}</span>
            </li>
          );
        })}
      </ul>
      <div className="ck-cupon">
        {couponCode ? (
          <div className="ck-cupon-aplicado">
            <span>Cupón <strong>{couponCode}</strong>{cuponMotivo ? <em> — {cuponMotivo}</em> : null}</span>
            <button type="button" className="ck-link" onClick={() => onCupon("")}>Quitar</button>
          </div>
        ) : abierto ? (
          <div className="ck-cupon-fila">
            <input type="text" value={codigo} onChange={(e) => setCodigo(e.target.value.toUpperCase())}
              onKeyDown={(e) => e.key === "Enter" && aplicar()} placeholder="Código de descuento" autoFocus/>
            <button type="button" className="btn-ghost" onClick={aplicar}>Aplicar</button>
          </div>
        ) : (
          <button type="button" className="ck-link" onClick={() => setAbierto(true)}>Agregar cupón de descuento</button>
        )}
      </div>
      <div className="ck-totales">
        <div><span>Subtotal</span><span className="mono">{fmtPrice(subtotal)}</span></div>
        {tierDiscAmt > 0 && <div className="is-desc"><span>Descuento {tier.name} ({Math.round(tier.discount * 100)}%)</span><span className="mono">− {fmtPrice(tierDiscAmt)}</span></div>}
        {couponDiscAmt > 0 && <div className="is-desc"><span>Cupón {cupon.code}</span><span className="mono">− {fmtPrice(couponDiscAmt)}</span></div>}
        <div><span>Envío{deliveryType === "local" ? " (retiro en local)" : ""}</span><span className="mono">{shippingCost ? fmtPrice(shippingCost) : "Gratis"}</span></div>
        <div className="ck-total"><span>Total</span><span className="mono">{fmtPrice(total)}</span></div>
      </div>
    </div>
  );
}

function CheckoutListo({ store, resultado, onCerrar }) {
  const copiar = (v) => { try { navigator.clipboard.writeText(v); } catch {} };
  if (resultado.tipo === "whatsapp") {
    return (
      <div className="ck-card ck-listo">
        <span className="ck-listo-ico">✓</span>
        <h1>¡Pedido enviado!</h1>
        <p>Abrimos WhatsApp con tu pedido <span className="mono">{resultado.id}</span>. Si no se abrió, escribinos y lo coordinamos.</p>
        <div className="ck-acciones">
          <a className="ck-wa" href={`https://wa.me/${store.config.whatsapp}`} target="_blank" rel="noopener noreferrer"><img src="assets/whatsapp-logo.png" alt=""/> Abrir WhatsApp</a>
          <button type="button" className="btn-primary" onClick={onCerrar}>Seguir en la tienda</button>
        </div>
      </div>
    );
  }
  const t = { alias: store.config.transferAlias || (window.__modoPrueba ? "ALIAS.DE.EJEMPLO" : "SOMOS.SETAS"), cbu: store.config.transferCbu || "", titular: store.config.transferTitular || "", banco: store.config.transferBanco || "" };
  const waComprobante = `https://wa.me/${store.config.whatsapp}?text=${encodeURIComponent(
    `${resultado.mensaje || ""}\n\n*Pago por transferencia* — pedido ${resultado.id}. Te adjunto el comprobante.`)}`;
  return (
    <div className="ck-card ck-listo">
      <span className="ck-listo-ico">✓</span>
      <h1>¡Pedido recibido!</h1>
      <p>Para confirmarlo, transferí el total y mandanos el comprobante por WhatsApp.</p>
      <div className="transf-datos">
        <div className="transf-fila transf-total"><span>Total a transferir</span><strong>{fmtPrice(resultado.total)}</strong></div>
        <div className="transf-fila"><span>Alias</span><strong className="mono">{t.alias}</strong>
          <button type="button" className="transf-copiar" onClick={() => copiar(t.alias)}>Copiar</button></div>
        {t.cbu && <div className="transf-fila"><span>CBU / CVU</span><strong className="mono">{t.cbu}</strong>
          <button type="button" className="transf-copiar" onClick={() => copiar(t.cbu)}>Copiar</button></div>}
        {t.titular && <div className="transf-fila"><span>Titular</span><strong>{t.titular}</strong></div>}
        {t.banco && <div className="transf-fila"><span>Banco</span><strong>{t.banco}</strong></div>}
        <div className="transf-fila"><span>Pedido</span><strong className="mono">{resultado.id}</strong></div>
      </div>
      <div className="ck-acciones">
        <button type="button" className="ck-link" onClick={onCerrar}>Seguir en la tienda</button>
        <a href={waComprobante} target="_blank" rel="noopener noreferrer" className="ck-wa"><img src="assets/whatsapp-logo.png" alt=""/> Enviar comprobante</a>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutPage });