/* 06 Checkout */

function Checkout({ go }) {
  const [plan, setPlan] = useState('club');
  const [step, setStep] = useState('plan'); // plan | pay | done
  const [payNotice, setPayNotice] = useState(''); // aviso cuando Stripe no está configurado
  const [payBusy, setPayBusy] = useState(false);

  // Pago REAL con Stripe. Solo funciona si el fundador puso STRIPE_SECRET_KEY en el .env;
  // si no, mostramos el flujo en modo "vista previa" con aviso (nunca prometer un cobro falso).
  async function continueToPay() {
    setPayNotice(''); setPayBusy(true);
    try {
      const r = await window.CruceAPI.Payments.checkout(plan);
      if (r && r.checkout_url) { window.location.href = r.checkout_url; return; }
      setPayNotice('No se pudo iniciar el pago. Inténtalo de nuevo.');
    } catch (e) {
      if (e && e.apiError === 'stripe_no_configurado') {
        setPayNotice('VISTA PREVIA: el pago real se activará cuando el fundador conecte Stripe (falta la clave en el servidor).');
        setStep('pay');
      } else {
        setPayNotice((e && e.message) || 'No se pudo iniciar el pago.');
      }
    } finally { setPayBusy(false); }
  }

  const plans = {
    club: { name:'Cruce Club', price:29, per:'mes', total:29 },
    signature: { name:'Cruce Signature', price:149, per:'trimestre', total:149 },
    club_year: { name:'Cruce Club anual', price:19, per:'mes', total:228, save:'Ahorras 120€' },
  };
  const p = plans[plan];

  if (step === 'done') return <CheckoutSuccess plan={p} go={go}/>;

  return (
    <div className="checkout-page">
      <div className="checkout-top">
        <button className="btn btn-ghost btn-sm" onClick={()=>step === 'plan' ? go('wall') : setStep('plan')}>
          <I.ArrowLeft size={14}/> {step === 'plan' ? 'Al muro' : 'Cambiar plan'}
        </button>
        <div className="sello" style={{fontSize:22}}>Cruce</div>
        <div className="mono" style={{fontSize:11, color:'var(--ink-3)'}}>PAGO SEGURO · SSL</div>
      </div>

      <div className="checkout-body">
        <div className="checkout-left">
          {step === 'plan' && (
            <div>
              <div className="eyebrow"><span className="dot"></span>Elige tu membresía</div>
              <h1 className="serif" style={{fontSize:'clamp(38px, 5vw, 60px)', lineHeight:1.02, letterSpacing:'-0.02em', marginTop:14, marginBottom:14}}>
                Desbloquea el <em style={{color:'var(--red)'}}>chat.</em><br/>Sin compartir tu teléfono.
              </h1>
              <p style={{color:'var(--ink-3)', fontSize:16, maxWidth:520, marginBottom:32}}>
                Todas las membresías incluyen chat cifrado, videollamada dentro de la app y garantía 30 días.
              </p>

              <div className="checkout-plans">
                <PlanRow id="club" p={plans.club} desc="Membresía mensual. Cancela cuando quieras." selected={plan==='club'} onSel={setPlan}/>
                <PlanRow id="club_year" p={plans.club_year} desc="12 meses. Facturado como 228€ hoy." selected={plan==='club_year'} onSel={setPlan} popular/>
                <PlanRow id="signature" p={plans.signature} desc="Trimestral con asesor humano y presentaciones curadas." selected={plan==='signature'} onSel={setPlan}/>
              </div>

              <button className="btn btn-red btn-lg" style={{marginTop:24, width:'100%'}} onClick={continueToPay} disabled={payBusy}>
                {payBusy ? 'Conectando con Stripe…' : <>Continuar al pago · {p.total}€ <I.Arrow size={14}/></>}
              </button>
              {payNotice && step === 'plan' && (
                <div style={{marginTop:12, fontSize:12, color:'var(--red)', background:'#fdecec', border:'1px solid #f5c6c4', borderRadius:10, padding:'10px 14px'}}>{payNotice}</div>
              )}
            </div>
          )}

          {step === 'pay' && (
            <div>
              {payNotice && (
                <div style={{marginBottom:18, fontSize:12, color:'var(--red)', background:'#fdecec', border:'1px solid #f5c6c4', borderRadius:10, padding:'10px 14px'}}>{payNotice}</div>
              )}
              <div className="eyebrow"><span className="dot"></span>Método de pago</div>
              <h1 className="serif" style={{fontSize:'clamp(38px, 4.5vw, 54px)', lineHeight:1.05, letterSpacing:'-0.02em', marginTop:14, marginBottom:24}}>
                Última pantalla.
              </h1>

              <div className="pay-methods">
                <div className="pay-method active"><I.Wallet size={14}/> Tarjeta</div>
                <div className="pay-method">Bizum</div>
                <div className="pay-method">Apple Pay</div>
                <div className="pay-method">PayPal</div>
              </div>

              <div className="pay-card">
                <Field label="Nombre en la tarjeta">
                  <input placeholder="Lucía Martín García"/>
                </Field>
                <Field label="Número de tarjeta">
                  <div className="input-with-ico">
                    <input placeholder="4242 4242 4242 4242"/>
                    <div className="input-brands">
                      <div className="brand-mark">VISA</div>
                      <div className="brand-mark">MC</div>
                    </div>
                  </div>
                </Field>
                <div className="signup-row">
                  <Field label="Caducidad"><input placeholder="MM / AA"/></Field>
                  <Field label="CVC"><input placeholder="•••"/></Field>
                </div>

                <Field label="Correo para el recibo">
                  <input type="email" placeholder="tú@correo.com"/>
                </Field>

                <label className="consent-check" style={{marginTop:4}}>
                  <input type="checkbox" defaultChecked/>
                  <span>Guardo la tarjeta para renovaciones futuras. Puedo eliminarla cuando quiera.</span>
                </label>
              </div>

              <div className="pay-trust">
                <div><I.Lock size={13}/> Cifrado 256-bit</div>
                <div><I.Shield size={13}/> Cumple PSD2 (SCA)</div>
                <div className="mono" style={{color:'var(--ink-4)'}}>PROCESADO POR STRIPE</div>
              </div>

              <button className="btn btn-red btn-lg" style={{marginTop:20, width:'100%'}} onClick={()=>setStep('done')}>
                <I.Lock size={13}/> Pagar {p.total}€ y activar {p.name}
              </button>

              <p style={{fontSize:11, color:'var(--ink-4)', marginTop:14, textAlign:'center'}}>
                Al continuar, aceptas los términos de suscripción. Puedes cancelar cualquier renovación
                desde <em>Ajustes → Membresía</em>.
              </p>
            </div>
          )}
        </div>

        <aside className="checkout-right">
          <div className="checkout-summary card">
            <div className="mono" style={{fontSize:11, letterSpacing:'.1em', color:'var(--ink-3)', padding:'20px 22px 0'}}>RESUMEN</div>
            <div style={{padding:'8px 22px 20px'}}>
              <div className="serif" style={{fontSize:26}}>{p.name}</div>
              <div style={{color:'var(--ink-3)', fontSize:13, marginTop:4}}>{p.price}€ / {p.per}</div>
            </div>
            <div className="checkout-sum-list">
              {[
                'Chat interno cifrado',
                'Videollamada dentro de la app',
                'Matches ilimitados',
                'Prioridad en eventos',
                plan === 'signature' ? 'Asesor personal Cruce' : null,
                plan === 'signature' ? 'Presentaciones 1:1 curadas' : null,
              ].filter(Boolean).map(f => (
                <div key={f} className="checkout-sum-item"><I.Check size={12}/> {f}</div>
              ))}
            </div>
            <div className="checkout-sum-total">
              <div>
                <div style={{fontSize:13, color:'var(--ink-3)'}}>Total hoy</div>
                <div className="serif" style={{fontSize:36, letterSpacing:'-0.02em'}}>{p.total}€</div>
              </div>
              {p.save && <div className="chip red">{p.save}</div>}
            </div>
          </div>

          <div className="checkout-guarantee card-flat" style={{marginTop:14}}>
            <div style={{display:'flex', gap:10, alignItems:'flex-start'}}>
              <I.Shield size={18} style={{color:'var(--sage)', flexShrink:0, marginTop:2}}/>
              <div>
                <div style={{fontWeight:500, fontSize:14}}>Garantía 30 días</div>
                <div style={{fontSize:12, color:'var(--ink-3)', marginTop:4, lineHeight:1.5}}>
                  Si en 30 días no consigues al menos 3 matches con &gt;80% de afinidad, te devolvemos el 100%. Sin preguntas.
                </div>
              </div>
            </div>
          </div>

          <div className="checkout-quote">
            <div style={{fontSize:11, letterSpacing:'.08em', color:'var(--ink-4)', fontFamily:'var(--mono)'}}>TESTIMONIO · MADRID · CRUCE CLUB</div>
            <p className="serif" style={{fontSize:20, lineHeight:1.3, marginTop:10, letterSpacing:'-0.01em'}}>
              "Lo mejor: no dar mi número a un tío que resulta ser gilipollas. Todo pasa dentro. Total tranquilidad."
            </p>
            <div style={{fontSize:12, color:'var(--ink-3)', marginTop:12}}>— Lucía, 27</div>
          </div>
        </aside>
      </div>
    </div>
  );
}

function PlanRow({ id, p, desc, selected, onSel, popular }) {
  return (
    <button className={"plan-row " + (selected ? 'active' : '')} onClick={()=>onSel(id)}>
      <div className="plan-row-radio">{selected && <div/>}</div>
      <div style={{flex:1}}>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <span className="serif" style={{fontSize:22}}>{p.name}</span>
          {popular && <span className="chip red" style={{fontSize:10}}>Más elegido</span>}
        </div>
        <div style={{fontSize:13, color:'var(--ink-3)', marginTop:4}}>{desc}</div>
      </div>
      <div style={{textAlign:'right'}}>
        <div className="serif" style={{fontSize:30, letterSpacing:'-0.02em', lineHeight:1}}>{p.price}€</div>
        <div style={{fontSize:11, color:'var(--ink-3)', marginTop:2}}>/ {p.per}</div>
      </div>
    </button>
  );
}

function CheckoutSuccess({ plan, go }) {
  return (
    <div className="checkout-success">
      <div className="cs-inner">
        <div className="cs-check"><I.Check size={40}/></div>
        <div className="eyebrow"><span className="dot"></span>Membresía activa</div>
        <h1 className="serif" style={{fontSize:'clamp(48px, 6vw, 84px)', lineHeight:1.02, letterSpacing:'-0.02em', marginTop:20, marginBottom:20}}>
          Bienvenido a <em style={{color:'var(--red)'}}>Cruce {plan.name.replace('Cruce ','')}.</em>
        </h1>
        <p style={{fontSize:18, color:'var(--ink-3)', maxWidth:520, marginBottom:36, lineHeight:1.55}}>
          Ya puedes escribir a tus matches, hacer videollamada dentro de la app y reservar plaza en los eventos.
          Te hemos enviado el recibo por email.
        </p>
        <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
          <button className="btn btn-red btn-lg" onClick={()=>go('chat')}>
            Ir a mis mensajes <I.Arrow size={14}/>
          </button>
          <button className="btn btn-outline btn-lg" onClick={()=>go('wall')}>
            Volver al muro
          </button>
        </div>
      </div>
    </div>
  );
}

window.Checkout = Checkout;