/* Cart drawer + Checkout page */

function CartDrawer({ open, onClose, cart, onUpdate, onRemove, onCheckout }) {
  const total = cart.reduce((s, it) => s + it.price * it.qty, 0);
  return (
    <>
      <div className={`drawer-backdrop ${open ? 'open' : ''}`} onClick={onClose}/>
      <aside className={`drawer ${open ? 'open' : ''}`} aria-hidden={!open}>
        <div className="drawer-head">
          <div>
            <h3 style={{margin:0}}>Tu reserva</h3>
            <div style={{fontSize:12, color:'var(--ink-soft)'}}>{cart.length} {cart.length===1?'pieza':'piezas'}</div>
          </div>
          <button className="icon-btn" onClick={onClose} aria-label="cerrar"><Ic name="x"/></button>
        </div>
        <div className="drawer-body">
          {cart.length === 0 ? (
            <div style={{textAlign:'center', padding:'60px 20px', color:'var(--ink-soft)'}}>
              <Ic name="cart" size={36} color="var(--ink-faint)"/>
              <p style={{marginTop:14}}>Aún no hay piezas en tu reserva.</p>
              <p style={{fontSize:12, marginTop:6}}>Cuando agregues velas, aparecerán aquí.</p>
            </div>
          ) : cart.map(it => {
            const p = PRODUCTS.find(x => x.id === it.id);
            if (!p) return null;
            return (
              <div key={it.key} className="cart-item">
                <div className="thumb">
                  <div className="ph-candle" data-tone={p.tone} style={{width:'100%', height:'100%'}}>
                    <CandleSilhouette kind={kindFor(p)} opacity={0.5}/>
                  </div>
                </div>
                <div>
                  <div className="name">{p.name}</div>
                  <div className="meta">
                    {it.aroma && <>Aroma: {it.aroma}</>}
                    {it.color && <> · Lazo: {it.color}</>}
                  </div>
                  {it.mensaje && <div className="meta" style={{fontStyle:'italic', color:'var(--rose-deep)', marginTop:2}}>"{it.mensaje}"</div>}
                  <div className="qty" style={{marginTop:6}}>
                    <button onClick={() => onUpdate(it.key, Math.max(1, it.qty - 1))}>−</button>
                    <span className="val">{it.qty}</span>
                    <button onClick={() => onUpdate(it.key, it.qty + 1)}>+</button>
                  </div>
                </div>
                <div className="right">
                  <button className="rm" onClick={() => onRemove(it.key)} aria-label="quitar"><Ic name="x" size={14}/></button>
                  <div className="price">{formatCLP(p.price * it.qty)}</div>
                </div>
              </div>
            );
          })}
        </div>
        {cart.length > 0 && (
          <div className="drawer-foot">
            <div style={{display:'flex', justifyContent:'space-between', fontSize:13, color:'var(--ink-soft)'}}>
              <span>Subtotal</span><span>{formatCLP(total)}</span>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', fontSize:11, color:'var(--ink-faint)'}}>
              <span>Despacho</span><span>se cotiza al confirmar</span>
            </div>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginTop:6, paddingTop:10, borderTop:'1px solid var(--line)'}}>
              <span style={{fontFamily:'Playfair Display', fontSize:16}}>Total</span>
              <span style={{fontFamily:'Playfair Display', fontSize:22, color:'var(--rose-deep)'}}>{formatCLP(total)}</span>
            </div>
            <button className="btn btn-primary btn-lg" onClick={onCheckout}>Reservar ahora <Ic name="arrow-r" size={14}/></button>
            <div style={{fontSize:11, color:'var(--ink-faint)', textAlign:'center'}}>Pago final al retirar o despachar · preparación 3-7 días</div>
          </div>
        )}
      </aside>
    </>
  );
}

function CheckoutPage({ cart, onNav, onPlaceOrder }) {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    nombre: '', whatsapp: '', email: '',
    delivery: 'retiro',
    direccion: '', comuna: '', region: 'RM',
    fecha: '',
    pago: 'transfer',
    notas: '',
  });
  const total = cart.reduce((s, it) => s + it.price * it.qty, 0);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const canNext1 = form.nombre && form.whatsapp;
  const canNext2 = form.delivery === 'retiro' || (form.delivery === 'rm' && form.direccion && form.comuna) || (form.delivery === 'regiones' && form.direccion && form.comuna && form.region);

  if (cart.length === 0) {
    return (
      <div className="page">
        <div style={{textAlign:'center', padding:'60px 20px'}}>
          <Ic name="cart" size={48} color="var(--ink-faint)"/>
          <h2 style={{marginTop:20}}>Tu reserva está vacía</h2>
          <p style={{color:'var(--ink-soft)', marginTop:8}}>Agrega algunas piezas antes de continuar.</p>
          <button className="btn btn-primary" onClick={() => onNav('shop')} style={{marginTop:20}}>Ver catálogo</button>
        </div>
      </div>
    );
  }

  return (
    <div className="page">
      <button className="btn btn-ghost" onClick={() => onNav('shop')} style={{marginBottom:16, padding:'6px 10px'}}>
        <Ic name="arrow-l" size={14}/> seguir comprando
      </button>

      <div style={{marginBottom:24}}>
        <span className="eyebrow">Reservar</span>
        <h1 style={{margin:'8px 0'}}>Casi listo ♡</h1>
      </div>

      <div className="step-row">
        {['Tus datos','Entrega','Pago'].map((lab, i) => (
          <React.Fragment key={lab}>
            <div className={`step ${step===i+1?'active':''} ${step>i+1?'done':''}`}>
              <div className="num">{step>i+1 ? <Ic name="check" size={14}/> : i+1}</div>
              <span style={{fontSize:13, fontWeight:600}}>{lab}</span>
            </div>
            {i<2 && <div className="step-sep"/>}
          </React.Fragment>
        ))}
      </div>

      <div className="checkout-wrap">
        <div>
          {step === 1 && (
            <div className="fade-up">
              <h3 style={{marginBottom:16}}>Tus datos</h3>
              <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
                <div className="form-group"><label>Nombre</label><input value={form.nombre} onChange={e => set('nombre', e.target.value)} placeholder="Camila Ramírez"/></div>
                <div className="form-group"><label>WhatsApp</label><input value={form.whatsapp} onChange={e => set('whatsapp', e.target.value)} placeholder="+56 9 ..."/></div>
              </div>
              <div className="form-group"><label>Email</label><input type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="tu@email.com"/></div>
              <div className="form-group"><label>Notas del pedido <span style={{fontWeight:400, color:'var(--ink-faint)'}}>(opcional)</span></label><textarea rows={3} value={form.notas} onChange={e => set('notas', e.target.value)} placeholder="Algo especial sobre tu pedido…"/></div>
              <button className="btn btn-primary btn-lg" disabled={!canNext1} onClick={() => setStep(2)} style={{opacity: canNext1?1:0.5}}>Continuar <Ic name="arrow-r" size={14}/></button>
            </div>
          )}

          {step === 2 && (
            <div className="fade-up">
              <h3 style={{marginBottom:16}}>¿Cómo quieres recibirlo?</h3>
              <div className={`delivery-opt ${form.delivery==='retiro'?'active':''}`} onClick={() => set('delivery','retiro')}>
                <div className="radio"/>
                <div style={{flex:1}}>
                  <div className="d-title">Retiro en taller (Santiago)</div>
                  <div className="d-sub">Gratis · coordinamos día y hora por WhatsApp</div>
                </div>
                <strong style={{color:'var(--gold-deep)'}}>Gratis</strong>
              </div>
              <div className={`delivery-opt ${form.delivery==='rm'?'active':''}`} onClick={() => set('delivery','rm')}>
                <div className="radio"/>
                <div style={{flex:1}}>
                  <div className="d-title">Despacho programado · RM</div>
                  <div className="d-sub">Desde $4.000 · entrega en el día acordado</div>
                </div>
                <strong>desde $4.000</strong>
              </div>
              <div className={`delivery-opt ${form.delivery==='regiones'?'active':''}`} onClick={() => set('delivery','regiones')}>
                <div className="radio"/>
                <div style={{flex:1}}>
                  <div className="d-title">Envío a regiones · Starken / Chilexpress</div>
                  <div className="d-sub">Cotización al confirmar · 2-5 días hábiles</div>
                </div>
                <strong>por cotizar</strong>
              </div>

              {form.delivery !== 'retiro' && (
                <div style={{marginTop:20}}>
                  <div className="form-group"><label>Dirección</label><input value={form.direccion} onChange={e => set('direccion', e.target.value)} placeholder="Calle 123, depto 4"/></div>
                  <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
                    <div className="form-group"><label>Comuna</label><input value={form.comuna} onChange={e => set('comuna', e.target.value)} placeholder="Providencia"/></div>
                    {form.delivery==='regiones' && (
                      <div className="form-group"><label>Región</label>
                        <select value={form.region} onChange={e => set('region', e.target.value)}>
                          {['RM','Valparaíso','Biobío','Los Lagos','La Araucanía','Coquimbo','O\'Higgins','Maule','Antofagasta','Los Ríos'].map(r => <option key={r}>{r}</option>)}
                        </select>
                      </div>
                    )}
                  </div>
                </div>
              )}

              <div className="form-group" style={{marginTop:8}}>
                <label>Fecha aproximada de entrega <span style={{fontWeight:400, color:'var(--ink-faint)'}}>(consideramos 3-7 días de preparación)</span></label>
                <input type="date" value={form.fecha} onChange={e => set('fecha', e.target.value)}/>
              </div>

              <div style={{display:'flex', gap:10, marginTop:20}}>
                <button className="btn btn-outline" onClick={() => setStep(1)}><Ic name="arrow-l" size={14}/> Atrás</button>
                <button className="btn btn-primary btn-lg" disabled={!canNext2} onClick={() => setStep(3)} style={{opacity: canNext2?1:0.5}}>Continuar <Ic name="arrow-r" size={14}/></button>
              </div>
            </div>
          )}

          {step === 3 && (
            <div className="fade-up">
              <h3 style={{marginBottom:16}}>¿Cómo prefieres pagar?</h3>
              <div className={`pay-opt ${form.pago==='transfer'?'active':''}`} onClick={() => set('pago','transfer')}>
                <div className="radio"/>
                <div style={{flex:1}}>
                  <div className="p-title">Transferencia bancaria</div>
                  <div className="p-sub">Te enviamos los datos por WhatsApp al confirmar</div>
                </div>
              </div>
              <div className={`pay-opt ${form.pago==='mp'?'active':''}`} onClick={() => set('pago','mp')}>
                <div className="radio"/>
                <div style={{flex:1}}>
                  <div className="p-title">Mercado Pago</div>
                  <div className="p-sub">Tarjeta de crédito, débito o saldo Mercado Pago</div>
                </div>
                <div style={{fontSize:11, padding:'3px 8px', background:'#00B0FF', color:'#fff', borderRadius:4, fontWeight:700}}>MP</div>
              </div>
              <div className={`pay-opt ${form.pago==='flow'?'active':''}`} onClick={() => set('pago','flow')}>
                <div className="radio"/>
                <div style={{flex:1}}>
                  <div className="p-title">Flow</div>
                  <div className="p-sub">Webpay, tarjetas y transferencia online</div>
                </div>
                <div style={{fontSize:11, padding:'3px 8px', background:'#7B2CBF', color:'#fff', borderRadius:4, fontWeight:700}}>Flow</div>
              </div>

              <div style={{marginTop:20, padding:16, background:'var(--rose-pale)', borderRadius:'var(--radius)', fontSize:13, color:'var(--ink)', lineHeight:1.6}}>
                <strong style={{color:'var(--rose-deep)'}}>♡ Importante:</strong> Esta es una reserva. Te contactamos por WhatsApp en menos de 24h para confirmar disponibilidad, tiempos y coordinar el pago final antes de despachar o al retirar.
              </div>

              <div style={{display:'flex', gap:10, marginTop:20}}>
                <button className="btn btn-outline" onClick={() => setStep(2)}><Ic name="arrow-l" size={14}/> Atrás</button>
                <button className="btn btn-primary btn-lg" onClick={onPlaceOrder}>Confirmar reserva <Ic name="check" size={14}/></button>
              </div>
            </div>
          )}
        </div>

        <div>
          <div className="summary-card">
            <h3>Resumen</h3>
            {cart.map(it => {
              const p = PRODUCTS.find(x => x.id === it.id);
              if (!p) return null;
              return (
                <div key={it.key} style={{display:'flex', gap:12, padding:'10px 0', borderBottom:'1px solid var(--line-soft)'}}>
                  <div style={{width:48, height:48, borderRadius:8, overflow:'hidden', flexShrink:0}}>
                    <div className="ph-candle" data-tone={p.tone} style={{width:'100%', height:'100%'}}>
                      <CandleSilhouette kind={kindFor(p)} opacity={0.5}/>
                    </div>
                  </div>
                  <div style={{flex:1, fontSize:13}}>
                    <div style={{fontFamily:'Playfair Display', fontSize:14}}>{p.name}</div>
                    <div style={{color:'var(--ink-soft)', fontSize:11}}>× {it.qty}{it.aroma?` · ${it.aroma}`:''}</div>
                  </div>
                  <div className="price" style={{fontSize:14}}>{formatCLP(p.price * it.qty)}</div>
                </div>
              );
            })}
            <div className="summary-row" style={{marginTop:12}}><span>Subtotal</span><span>{formatCLP(total)}</span></div>
            <div className="summary-row"><span>Despacho</span><span style={{color:'var(--ink-faint)', fontSize:12}}>por cotizar</span></div>
            <div className="summary-row tot"><span>Total</span><span style={{color:'var(--rose-deep)'}}>{formatCLP(total)}</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

function SuccessPage({ onNav, orderId }) {
  return (
    <div className="page">
      <div className="success fade-up">
        <div className="ok-ic"><Ic name="check" size={40}/></div>
        <span className="eyebrow">Reserva recibida</span>
        <h1 style={{marginTop:12}}>¡Gracias!<br/><span className="serif-i" style={{color:'var(--rose-deep)'}}>Te escribimos en breve.</span></h1>
        <p style={{color:'var(--ink-soft)', fontSize:15, margin:'20px 0'}}>
          Tu reserva <strong style={{color:'var(--ink)'}}>#{orderId}</strong> fue recibida. Te contactaremos por WhatsApp en menos de 24h para confirmar los detalles y coordinar el pago.
        </p>
        <div style={{display:'flex', gap:10, justifyContent:'center', flexWrap:'wrap'}}>
          <a className="btn btn-gold" href="#" target="_blank"><Ic name="wa" size={14}/> Abrir WhatsApp</a>
          <button className="btn btn-outline" onClick={() => onNav('home')}>Volver al inicio</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CartDrawer, CheckoutPage, SuccessPage });