// CHECKOUT — Artesanías Chepe

const Checkout = ({ items, onChangeQty, onRemove, onNav }) => {
  const [step, setStep] = useState(1); // 1: datos, 2: envío, 3: pago, 4: confirmado
  const [data, setData] = useState({
    name: "", email: "", phone: "",
    address: "", city: "", state: "Yucatán", zip: "",
    shipping: "standard",
    payment: "card", card: "",
  });

  const subtotal = items.reduce((a, it) => a + it.price * it.qty, 0);
  const shippingCost = subtotal > 5000 ? 0 : (data.shipping === "express" ? 380 : 220);
  const total = subtotal + shippingCost;

  const upd = (k, v) => setData(d => ({ ...d, [k]: v }));

  if (items.length === 0 && step < 4) {
    return (
      <div className="page container" style={{ padding: 40, textAlign: "center" }} data-screen-label="04 Checkout vacío">
        <div className="ph" style={{ width: 100, height: 100, borderRadius: 999, margin: "0 auto 20px" }}></div>
        <h2 className="display" style={{ fontSize: 36, margin: 0 }}>Tu bolsa está vacía</h2>
        <p style={{ color: "var(--ink-60)", marginTop: 10 }}>Pero hay piezas esperándote en el catálogo.</p>
        <button className="btn btn-primary" style={{ marginTop: 20 }} onClick={() => onNav("catalog")}>
          Ir al catálogo <Icon name="arrow" size={16} />
        </button>
      </div>
    );
  }

  if (step === 4) {
    return (
      <div className="page" data-screen-label="04 Checkout · confirmado">
        <div style={{ padding: "30px 24px 0", textAlign: "center" }}>
          <div style={{
            width: 80, height: 80, borderRadius: 999, background: "var(--ink)", color: "var(--bone)",
            display: "grid", placeItems: "center", margin: "0 auto",
            animation: "popIn .5s cubic-bezier(.2,1.4,.4,1) both",
          }}>
            <Icon name="check" size={36} stroke={2} />
          </div>
          <style>{`@keyframes popIn { from { transform: scale(.4); opacity: 0;} to { transform: scale(1); opacity:1;} }`}</style>
          <div className="eyebrow" style={{ marginTop: 24 }}>Orden #CHP-{Math.floor(Math.random() * 90000 + 10000)}</div>
          <h1 className="display" style={{ fontSize: 44, margin: "10px 0 8px" }}>
            Gracias, <span className="italic" style={{ color: "var(--clay)" }}>{data.name.split(" ")[0] || "amig@"}</span>.
          </h1>
          <p style={{ color: "var(--ink-80)", fontSize: 15, lineHeight: 1.5, maxWidth: 320, margin: "0 auto" }}>
            Tu pedido entró al taller. Te enviamos confirmación a <strong>{data.email || "tu correo"}</strong> y te avisamos por WhatsApp cuando salga de Mérida.
          </p>
        </div>

        <div className="container" style={{ paddingTop: 30 }}>
          <div className="card hair" style={{ padding: 18, borderRadius: 16 }}>
            {items.map(it => (
              <div key={it.lineId} style={{ display: "flex", gap: 12, padding: "10px 0", borderBottom: "1px solid var(--hair)" }}>
                <div className={"ph " + (it.placeholderClass || "")} style={{ width: 56, height: 64, borderRadius: 8, fontSize: 7 }}></div>
                <div style={{ flex: 1 }}>
                  <div className="serif" style={{ fontSize: 16 }}>{it.name}</div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--ink-60)", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 2 }}>×{it.qty} · {it.finish}</div>
                </div>
                <div className="mono" style={{ fontSize: 13 }}>{formatMXN(it.price * it.qty)}</div>
              </div>
            ))}
            <div style={{ display: "flex", justifyContent: "space-between", marginTop: 10 }}>
              <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Total</span>
              <span className="display" style={{ fontSize: 24 }}>{formatMXN(total)}</span>
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 22 }}>
            <button className="btn btn-primary btn-block" onClick={() => onNav("contact")}>
              <Icon name="wa" size={16} /> Hablar por WhatsApp
            </button>
            <button className="btn btn-ghost btn-block" onClick={() => onNav("catalog")}>
              Seguir comprando
            </button>
          </div>
        </div>

        <Footer onNav={onNav} />
      </div>
    );
  }

  return (
    <div className="page" data-screen-label="04 Checkout">
      <div className="container" style={{ paddingTop: 6, paddingBottom: 12 }}>
        <button onClick={() => step > 1 ? setStep(step - 1) : onNav("catalog")} className="mono"
          style={{ fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-60)", display: "inline-flex", alignItems: "center", gap: 6 }}>
          <Icon name="arrow-l" size={14} /> Atrás
        </button>
      </div>

      <div className="container">
        <div className="eyebrow">Paso {step} de 3</div>
        <h1 className="display" style={{ fontSize: 40, margin: "6px 0 4px" }}>
          {step === 1 && <React.Fragment>Tus <span className="italic" style={{ color: "var(--clay)" }}>datos</span></React.Fragment>}
          {step === 2 && <React.Fragment>Dirección de <span className="italic" style={{ color: "var(--clay)" }}>envío</span></React.Fragment>}
          {step === 3 && <React.Fragment>Forma de <span className="italic" style={{ color: "var(--clay)" }}>pago</span></React.Fragment>}
        </h1>
      </div>

      {/* Progress */}
      <div className="container" style={{ paddingTop: 16 }}>
        <div style={{ display: "flex", gap: 6 }}>
          {[1,2,3].map(s => (
            <div key={s} style={{
              flex: 1, height: 4, borderRadius: 999,
              background: s <= step ? "var(--clay)" : "var(--hair-strong)",
              transition: "background .3s ease",
            }}></div>
          ))}
        </div>
      </div>

      <div className="container" style={{ paddingTop: 24, paddingBottom: 30 }}>
        {step === 1 && (
          <div className="stack-4 fade-up">
            <div className="field"><label>Nombre completo</label>
              <input value={data.name} onChange={e => upd("name", e.target.value)} placeholder="Mariana Vargas" />
            </div>
            <div className="field"><label>Correo</label>
              <input type="email" value={data.email} onChange={e => upd("email", e.target.value)} placeholder="tu@correo.mx" />
            </div>
            <div className="field"><label>Teléfono (WhatsApp)</label>
              <input value={data.phone} onChange={e => upd("phone", e.target.value)} placeholder="999 123 4567" />
            </div>
          </div>
        )}
        {step === 2 && (
          <div className="stack-4 fade-up">
            <div className="field"><label>Calle y número</label>
              <input value={data.address} onChange={e => upd("address", e.target.value)} placeholder="Calle 60 No. 410" />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr", gap: 10 }}>
              <div className="field"><label>Ciudad</label>
                <input value={data.city} onChange={e => upd("city", e.target.value)} placeholder="Mérida" />
              </div>
              <div className="field"><label>CP</label>
                <input value={data.zip} onChange={e => upd("zip", e.target.value)} placeholder="97000" />
              </div>
            </div>
            <div className="field"><label>Estado</label>
              <select value={data.state} onChange={e => upd("state", e.target.value)}>
                <option>Yucatán</option><option>Quintana Roo</option><option>Campeche</option>
                <option>CDMX</option><option>Jalisco</option><option>Nuevo León</option><option>Otro</option>
              </select>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Tipo de envío</div>
              <div className="stack-2">
                {[
                  { id: "standard", t: "Estándar", s: "5–9 días", c: subtotal > 5000 ? 0 : 220 },
                  { id: "express",  t: "Exprés",   s: "2–4 días", c: 380 },
                ].map(o => (
                  <button key={o.id} onClick={() => upd("shipping", o.id)} style={{
                    width: "100%", textAlign: "left", padding: 16, borderRadius: 14,
                    border: "1px solid " + (data.shipping === o.id ? "var(--ink)" : "var(--hair-strong)"),
                    background: data.shipping === o.id ? "var(--paper)" : "transparent",
                    display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10,
                  }}>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{o.t}</div>
                      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.12em", color: "var(--ink-60)", textTransform: "uppercase", marginTop: 2 }}>{o.s}</div>
                    </div>
                    <span className="mono" style={{ fontSize: 13 }}>{o.c === 0 ? "Gratis" : formatMXN(o.c)}</span>
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}
        {step === 3 && (
          <div className="stack-4 fade-up">
            <div className="stack-2">
              {[
                { id: "card", t: "Tarjeta de crédito o débito" },
                { id: "oxxo", t: "OXXO Pay" },
                { id: "transfer", t: "Transferencia (SPEI)" },
              ].map(o => (
                <button key={o.id} onClick={() => upd("payment", o.id)} style={{
                  width: "100%", textAlign: "left", padding: 16, borderRadius: 14,
                  border: "1px solid " + (data.payment === o.id ? "var(--ink)" : "var(--hair-strong)"),
                  background: data.payment === o.id ? "var(--paper)" : "transparent",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                }}>
                  <span style={{ fontWeight: 500, fontSize: 14 }}>{o.t}</span>
                  <span style={{
                    width: 18, height: 18, borderRadius: 999,
                    border: "2px solid " + (data.payment === o.id ? "var(--ink)" : "var(--hair-strong)"),
                    background: data.payment === o.id ? "var(--ink)" : "transparent",
                  }}></span>
                </button>
              ))}
            </div>
            {data.payment === "card" && (
              <div className="stack-4">
                <div className="field"><label>Número de tarjeta</label>
                  <input value={data.card} onChange={e => upd("card", e.target.value)} placeholder="4242 4242 4242 4242" />
                </div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  <div className="field"><label>Vence</label><input placeholder="MM/AA" /></div>
                  <div className="field"><label>CVV</label><input placeholder="123" /></div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* Resumen */}
        <div className="card hair" style={{ padding: 16, borderRadius: 14, marginTop: 24 }}>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Resumen ({items.length})</div>
          <div className="stack-2">
            {items.map(it => (
              <div key={it.lineId} style={{ display: "flex", justifyContent: "space-between", fontSize: 13 }}>
                <span>{it.name} <span style={{ color: "var(--ink-60)" }}>×{it.qty}</span></span>
                <span className="mono">{formatMXN(it.price * it.qty)}</span>
              </div>
            ))}
          </div>
          <div className="divider" style={{ margin: "12px 0" }}></div>
          <div className="stack-2">
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13 }}>
              <span style={{ color: "var(--ink-60)" }}>Subtotal</span>
              <span className="mono">{formatMXN(subtotal)}</span>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13 }}>
              <span style={{ color: "var(--ink-60)" }}>Envío</span>
              <span className="mono">{shippingCost === 0 ? "Gratis" : formatMXN(shippingCost)}</span>
            </div>
          </div>
          <div className="divider" style={{ margin: "12px 0" }}></div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ink-60)" }}>Total</span>
            <span className="display" style={{ fontSize: 26 }}>{formatMXN(total)}</span>
          </div>
        </div>

        <button className="btn btn-primary btn-block" style={{ marginTop: 20, height: 54 }}
          onClick={() => setStep(step + 1)}>
          {step < 3 ? "Continuar" : "Pagar " + formatMXN(total)} <Icon name="arrow" size={16} />
        </button>
        <p className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "var(--ink-60)", textAlign: "center", marginTop: 12 }}>
          Pago seguro · Cifrado SSL · Datos protegidos
        </p>
      </div>
    </div>
  );
};

window.Checkout = Checkout;