/* Rotunda — Cart + Checkout Views */

function CartView({ cart, onUpdateQty, onRemove, onNavigate }) {
  const items = cart.map(ci => { const p = findProduct(ci.id); return p ? { ...p, qty: ci.qty } : null; }).filter(Boolean);
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const [discount, setDiscount] = React.useState("");
  const [discountApplied, setDiscountApplied] = React.useState(false);

  if (items.length === 0) {
    return (
      <div className="cart-view cart-empty">
        <h2 className="h-section">Tu carrito.</h2>
        <p className="cart-empty-msg">No hay piezas en tu carrito todavía.</p>
        <button className="btn btn--outline" onClick={() => onNavigate("catalog", "todas")}>Explorar catálogo <span className="btn-arrow">→</span></button>
      </div>
    );
  }

  return (
    <div className="cart-view">
      <h2 className="h-section">Tu <span className="serif-it">carrito.</span></h2>
      <div className="cart-layout">
        <div className="cart-items">
          {items.map(item => {
            const tile = tonalFromColor(item.color);
            return (
              <div key={item.id} className="cart-item">
                <div className="cart-item-img">
                  <ImagePlate id={"cart-" + item.id} tile={tile} placeholder={item.name}></ImagePlate>
                </div>
                <div className="cart-item-info">
                  <div className="cart-item-name">{item.name}</div>
                  <div className="cart-item-color">{item.color} · {item.h} cm</div>
                </div>
                <div className="cart-item-qty">
                  <button onClick={() => onUpdateQty(item.id, item.qty - 1)}>−</button>
                  <span>{item.qty}</span>
                  <button onClick={() => onUpdateQty(item.id, item.qty + 1)}>+</button>
                </div>
                <div className="cart-item-subtotal">{formatPrice(item.price * item.qty)}</div>
                <button className="cart-item-remove" onClick={() => onRemove(item.id)} title="Eliminar">×</button>
              </div>
            );
          })}
        </div>

        <aside className="cart-sidebar">
          <div className="cart-discount">
            <input type="text" placeholder="Código de descuento" value={discount} onChange={(e) => setDiscount(e.target.value)}></input>
            <button className="btn btn--outline btn--sm" onClick={() => { if (discount.trim()) setDiscountApplied(true); }}>Aplicar</button>
          </div>
          {discountApplied && <p className="cart-discount-msg">Código aplicado (demo)</p>}
          <div className="cart-summary">
            <div className="cart-sum-row"><span>Subtotal</span><span>{formatPrice(subtotal)}</span></div>
            <div className="cart-sum-row"><span>Envío</span><span className="cart-muted">Calculado al pagar</span></div>
            <hr></hr>
            <div className="cart-sum-row cart-total"><span>Total</span><span>{formatPrice(subtotal)} MXN</span></div>
          </div>
          <button className="btn btn--solid cart-checkout-btn" onClick={() => onNavigate("checkout")}>Continuar al pago <span className="btn-arrow">→</span></button>
          <button className="cart-continue" onClick={() => onNavigate("catalog", "todas")}>← Seguir comprando</button>
        </aside>
      </div>
    </div>
  );
}

/* ============ CHECKOUT VIEW ============ */
function CheckoutView({ cart, onNavigate }) {
  const items = cart.map(ci => { const p = findProduct(ci.id); return p ? { ...p, qty: ci.qty } : null; }).filter(Boolean);
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const shipping = subtotal > 5000 ? 0 : 450;
  const total = subtotal + shipping;

  const [form, setForm] = React.useState({ name: "", email: "", phone: "", street: "", col: "", city: "", state: "", zip: "", notes: "" });
  const [step, setStep] = React.useState(1);
  const [placed, setPlaced] = React.useState(false);
  const upd = (k, v) => setForm({ ...form, [k]: v });

  const placeOrder = (e) => {
    e.preventDefault();
    setPlaced(true);
    clearCart();
  };

  if (placed) {
    return (
      <div className="checkout-view checkout-done">
        <div className="checkout-success">
          <span className="check-icon">✓</span>
          <h2 className="h-section">Pedido <span className="serif-it">confirmado.</span></h2>
          <p>Recibirás un correo de confirmación en <strong>{form.email}</strong>.</p>
          <p>Te contactaremos por {form.phone ? "WhatsApp" : "correo"} con los detalles de envío en las próximas 24 horas hábiles.</p>
          <button className="btn btn--solid" onClick={() => onNavigate("home")}>Volver al inicio <span className="btn-arrow">→</span></button>
        </div>
      </div>
    );
  }

  return (
    <div className="checkout-view">
      <h2 className="h-section">Finalizar <span className="serif-it">pedido.</span></h2>

      <div className="checkout-layout">
        <form className="checkout-form" onSubmit={placeOrder}>
          {/* Step 1: Contact */}
          <div className="checkout-step">
            <h4 className="checkout-step-title"><span className="step-num">01</span> Contacto</h4>
            <div className="row">
              <div className="field"><label>Nombre completo</label><input type="text" required value={form.name} onChange={(e) => upd("name", e.target.value)}></input></div>
              <div className="field"><label>Correo electrónico</label><input type="email" required value={form.email} onChange={(e) => upd("email", e.target.value)}></input></div>
            </div>
            <div className="row">
              <div className="field"><label>Teléfono / WhatsApp</label><input type="tel" value={form.phone} onChange={(e) => upd("phone", e.target.value)}></input></div>
            </div>
          </div>

          {/* Step 2: Shipping */}
          <div className="checkout-step">
            <h4 className="checkout-step-title"><span className="step-num">02</span> Dirección de envío</h4>
            <div className="field"><label>Calle y número</label><input type="text" required value={form.street} onChange={(e) => upd("street", e.target.value)}></input></div>
            <div className="row">
              <div className="field"><label>Colonia</label><input type="text" value={form.col} onChange={(e) => upd("col", e.target.value)}></input></div>
              <div className="field"><label>Ciudad</label><input type="text" required value={form.city} onChange={(e) => upd("city", e.target.value)}></input></div>
            </div>
            <div className="row">
              <div className="field"><label>Estado</label><input type="text" required value={form.state} onChange={(e) => upd("state", e.target.value)}></input></div>
              <div className="field"><label>C.P.</label><input type="text" required value={form.zip} onChange={(e) => upd("zip", e.target.value)}></input></div>
            </div>
            <div className="field"><label>Notas de entrega (opcional)</label><textarea value={form.notes} onChange={(e) => upd("notes", e.target.value)} placeholder="Instrucciones especiales, horario preferido, etc."></textarea></div>
          </div>

          {/* Step 3: Payment */}
          <div className="checkout-step">
            <h4 className="checkout-step-title"><span className="step-num">03</span> Pago</h4>
            <div className="payment-options">
              <label className="payment-opt active"><input type="radio" name="pay" defaultChecked></input><span className="po-label">Transferencia bancaria (SPEI)</span><span className="po-desc">Te enviaremos los datos por correo. Se confirma en minutos.</span></label>
              <label className="payment-opt"><input type="radio" name="pay"></input><span className="po-label">Depósito en OXXO</span><span className="po-desc">Genera una referencia y paga en cualquier OXXO. Se confirma en 24h.</span></label>
              <label className="payment-opt"><input type="radio" name="pay"></input><span className="po-label">Tarjeta de crédito / débito</span><span className="po-desc">Pago seguro procesado por Stripe.</span></label>
            </div>
          </div>

          <button type="submit" className="btn btn--solid checkout-submit">Confirmar pedido · {formatPrice(total)} <span className="btn-arrow">→</span></button>
        </form>

        {/* Order summary sidebar */}
        <aside className="checkout-summary">
          <h4>Resumen del pedido</h4>
          <div className="cs-items">
            {items.map(item => (
              <div key={item.id} className="cs-item">
                <span className="cs-name">{item.name} <span className="cs-qty">×{item.qty}</span></span>
                <span className="cs-price">{formatPrice(item.price * item.qty)}</span>
              </div>
            ))}
          </div>
          <hr></hr>
          <div className="cs-row"><span>Subtotal</span><span>{formatPrice(subtotal)}</span></div>
          <div className="cs-row"><span>Envío</span><span>{shipping === 0 ? "Gratis" : formatPrice(shipping)}</span></div>
          {shipping === 0 && <p className="cs-free">Envío gratuito en pedidos mayores a $5,000</p>}
          <hr></hr>
          <div className="cs-row cs-total"><span>Total</span><span>{formatPrice(total)} MXN</span></div>
        </aside>
      </div>
    </div>
  );
}

Object.assign(window, { CartView, CheckoutView });