// FLUJO DE PAGO — Checkout, Mercado Pago (real), Oxxo Pay (real), Pendiente, Confirmado

window.PaymentFlow = {};

// ── Utilidad compartida ───────────────────────────────────────
function authHeaders() {
  const tok = localStorage.getItem('sd_token');
  return tok
    ? { Authorization: `Bearer ${tok}`, 'Content-Type': 'application/json' }
    : { 'Content-Type': 'application/json' };
}

// ══════════════════════════════════════════════════════════════
//  CHECKOUT — elige método y llama la API
// ══════════════════════════════════════════════════════════════
window.PaymentFlow.Checkout = function Checkout({ navigate, store }) {
  if (!store.session) { navigate('/login'); return null; }

  const PRUEBAS  = store.pruebas || window.SD_SEED.PRUEBAS;
  const items    = store.cart.map(id => PRUEBAS.find(p => p.id === id)).filter(Boolean);
  const subtotal = items.reduce((s, p) => s + (p.precio || p.precio_mxn || 0), 0);
  const descuento = items.length >= 3 ? Math.round(subtotal * 0.15) : 0;
  const total    = subtotal - descuento;

  const [metodo,  setMetodo]  = React.useState('mercadopago');
  const [loading, setLoading] = React.useState(false);
  const [error,   setError]   = React.useState('');

  if (items.length === 0) {
    return (
      <div>
        <window.DashHeader navigate={navigate} store={store} />
        <div className="container" style={{ paddingTop: 60, paddingBottom: 80, textAlign: 'center' }}>
          <div style={{ fontSize: 48 }}>🛒</div>
          <h2 style={{ marginTop: 12 }}>Tu carrito está vacío</h2>
          <p className="muted" style={{ marginTop: 10 }}>Agrega materias desde tu panel.</p>
          <button className="btn btn-primary btn-lg" style={{ marginTop: 22 }} onClick={() => navigate('/dashboard')}>← Volver al panel</button>
        </div>
      </div>
    );
  }

  const procesar = async () => {
    setLoading(true);
    setError('');
    const ids = store.cart;

    try {
      if (metodo === 'mercadopago') {
        const r = await fetch(`${window.API_BASE}/checkout/mercadopago`, {
          method: 'POST',
          headers: authHeaders(),
          body: JSON.stringify({ prueba_ids: ids }),
        });
        const d = await r.json();
        if (!r.ok) { setError(d.error || 'Error al procesar'); setLoading(false); return; }

        if (d.sandbox) {
          // API no configurada con credenciales reales → flujo demo
          navigate('/pago/mercadopago');
        } else {
          // Redirigir al checkout real de Mercado Pago
          // En sandbox usa sandbox_init_point, en producción usa init_point
          const url = d.sandbox_init_point || d.init_point;
          window.location.href = url;
        }

      } else {
        // OXXO: crear pago y mostrar ficha
        const r = await fetch(`${window.API_BASE}/checkout/oxxo`, {
          method: 'POST',
          headers: authHeaders(),
          body: JSON.stringify({ prueba_ids: ids }),
        });
        const d = await r.json();
        if (!r.ok) { setError(d.error || 'Error al procesar'); setLoading(false); return; }

        // Guardar datos del pago en sessionStorage para que la pantalla OXXO los muestre
        sessionStorage.setItem('sd_oxxo_pago', JSON.stringify(d));
        navigate('/pago/oxxo');
      }
    } catch {
      // Sin API (local sin servidor) → demo
      if (metodo === 'mercadopago') navigate('/pago/mercadopago');
      else { sessionStorage.removeItem('sd_oxxo_pago'); navigate('/pago/oxxo'); }
    }
    setLoading(false);
  };

  return (
    <div>
      <window.DashHeader navigate={navigate} store={store} />
      <div className="container container-narrow" style={{ paddingTop: 36, paddingBottom: 80 }}>
        <span className="eyebrow">Checkout</span>
        <h2 style={{ marginTop: 8 }}>Confirma tu compra</h2>

        <div className="checkout-grid" style={{ marginTop: 28 }}>
          <div>
            <div className="card" style={{ marginBottom: 18 }}>
              <h4 style={{ marginBottom: 14 }}>Materias seleccionadas ({items.length})</h4>
              {items.map(p => (
                <div className="cart-item" key={p.id}>
                  <div className="row gap-3">
                    <div style={{ fontSize: 22 }}>{p.icono || '📘'}</div>
                    <div>
                      <div style={{ fontWeight: 600, fontSize: 14 }}>{p.nombre}</div>
                      <div className="muted" style={{ fontSize: 12 }}>Simulador completo · acceso permanente</div>
                    </div>
                  </div>
                  <div className="row gap-3">
                    <span className="mono" style={{ fontWeight: 600 }}>{window.formatPrice(p.precio || p.precio_mxn)}</span>
                    <button className="btn-link btn" style={{ color: 'var(--red)', fontSize: 12 }} onClick={() => store.removeFromCart(p.id)}>✕</button>
                  </div>
                </div>
              ))}
            </div>

            <div className="card">
              <h4 style={{ marginBottom: 14 }}>Método de pago</h4>
              <label className={`pay-option ${metodo === 'mercadopago' ? 'active' : ''}`}>
                <input type="radio" name="m" checked={metodo === 'mercadopago'} onChange={() => setMetodo('mercadopago')} />
                <div className="pay-option-body">
                  <div style={{ fontWeight: 600 }}>Tarjeta, débito o billetera digital</div>
                  <div className="muted" style={{ fontSize: 12 }}>Mercado Pago · acreditación inmediata</div>
                </div>
                <div className="pay-chip">Mercado Pago</div>
              </label>
              <label className={`pay-option ${metodo === 'oxxo' ? 'active' : ''}`}>
                <input type="radio" name="m" checked={metodo === 'oxxo'} onChange={() => setMetodo('oxxo')} />
                <div className="pay-option-body">
                  <div style={{ fontWeight: 600 }}>Pago en efectivo en tienda OXXO</div>
                  <div className="muted" style={{ fontSize: 12 }}>Ficha con referencia · acreditación 1-24h</div>
                </div>
                <div className="pay-chip">Oxxo Pay</div>
              </label>
            </div>
          </div>

          <div>
            <div className="card checkout-summary">
              <h4 style={{ marginBottom: 14 }}>Resumen</h4>
              <div className="sum-row"><span>Subtotal ({items.length} {items.length === 1 ? 'materia' : 'materias'})</span><span className="mono">{window.formatPrice(subtotal)}</span></div>
              {descuento > 0 && <div className="sum-row" style={{ color: 'var(--green)' }}><span>Descuento 3+ materias (15%)</span><span className="mono">-{window.formatPrice(descuento)}</span></div>}
              <div className="sum-row sum-total"><span>Total</span><span className="mono">{window.formatPrice(total)}</span></div>
              {error && <div style={{ color: 'var(--red)', fontSize: 13, marginTop: 10 }}>{error}</div>}
              <button className="btn btn-primary btn-block btn-lg" style={{ marginTop: 18 }} onClick={procesar} disabled={loading}>
                {loading ? 'Procesando…' : `Pagar con ${metodo === 'mercadopago' ? 'Mercado Pago' : 'Oxxo Pay'} →`}
              </button>
              <p className="muted" style={{ fontSize: 12, marginTop: 14, textAlign: 'center', lineHeight: 1.5 }}>
                Pago único. Acceso permanente a las materias compradas.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

// ══════════════════════════════════════════════════════════════
//  MERCADO PAGO — pantalla de transición / demo fallback
//  En producción el usuario ya fue redirigido a MP directamente.
//  Esta pantalla se muestra solo si MP no está configurado (sandbox=true).
// ══════════════════════════════════════════════════════════════
window.PaymentFlow.MercadoPago = function MercadoPago({ navigate, store }) {
  const [paying, setPaying] = React.useState(false);
  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;
  const items   = store.cart.map(id => PRUEBAS.find(p => p.id === id)).filter(Boolean);
  const sub     = items.reduce((s, p) => s + (p.precio || p.precio_mxn || 0), 0);
  const total   = sub - (items.length >= 3 ? Math.round(sub * 0.15) : 0);

  const confirm = () => {
    setPaying(true);
    setTimeout(() => {
      store.grantPremium(store.cart);
      store.clearCart();
      navigate('/pago/confirmado');
    }, 1600);
  };

  return (
    <div className="modal-shell">
      <div className="mp-window">
        <div className="mp-head">
          <div className="row gap-2">
            <span style={{ width: 10, height: 10, background: '#00B1EA', borderRadius: 999 }}></span>
            <strong>Checkout · Mercado Pago (demo)</strong>
          </div>
          <button className="btn btn-link" onClick={() => navigate('/checkout')}>← Cancelar</button>
        </div>
        <div className="mp-body">
          <div style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 6 }}>Total a pagar</div>
          <div style={{ fontFamily: 'Fraunces', fontSize: 42, fontWeight: 600 }}>{window.formatPrice(total)}</div>
          <div className="divider" style={{ margin: '20px 0' }}></div>
          <div className="field">
            <label className="label">Número de tarjeta</label>
            <input className="input mono" defaultValue="4509 9535 6623 3704" />
          </div>
          <div className="row gap-3">
            <div className="field" style={{ flex: 1 }}>
              <label className="label">Vencimiento</label>
              <input className="input mono" defaultValue="11/29" />
            </div>
            <div className="field" style={{ flex: 1 }}>
              <label className="label">CVV</label>
              <input className="input mono" defaultValue="123" />
            </div>
          </div>
          <div className="field">
            <label className="label">Nombre del titular</label>
            <input className="input" defaultValue={store.session?.nombre || ''} />
          </div>
          <button className="btn btn-primary btn-block btn-lg" onClick={confirm} disabled={paying}>
            {paying ? 'Procesando…' : `Pagar ${window.formatPrice(total)}`}
          </button>
          <p className="muted" style={{ fontSize: 11, marginTop: 12, textAlign: 'center' }}>
            Modo demo · configura MP_ACCESS_TOKEN en api/config.php para pagos reales.
          </p>
        </div>
      </div>
    </div>
  );
};

// ══════════════════════════════════════════════════════════════
//  OXXO PAY — muestra la referencia real generada por MP
// ══════════════════════════════════════════════════════════════
window.PaymentFlow.Oxxo = function OxxoPay({ navigate, store }) {
  // Leer datos del pago que guardó Checkout en sessionStorage
  const pagoData = React.useMemo(() => {
    try { return JSON.parse(sessionStorage.getItem('sd_oxxo_pago') || '{}'); } catch { return {}; }
  }, []);

  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;
  const items   = store.cart.map(id => PRUEBAS.find(p => p.id === id)).filter(Boolean);
  const sub     = items.reduce((s, p) => s + (p.precio || p.precio_mxn || 0), 0);
  const total   = pagoData.total || (sub - (items.length >= 3 ? Math.round(sub * 0.15) : 0));

  // Referencia real de MP o demo
  const ref = pagoData.referencia
    || React.useMemo(() => '93000' + Math.floor(Math.random() * 1e10).toString().padStart(10, '0'), []);

  const expira = pagoData.expira_en
    ? new Date(pagoData.expira_en).toLocaleDateString('es-MX', { day: 'numeric', month: 'long', year: 'numeric' })
    : null;

  const simularPago = () => {
    store.grantPremium(store.cart);
    store.clearCart();
    sessionStorage.removeItem('sd_oxxo_pago');
    navigate('/pago/confirmado');
  };

  return (
    <div className="modal-shell">
      <div className="oxxo-window">
        <div className="oxxo-head">
          <div className="row gap-2">
            <span className="oxxo-logo">OXXO PAY</span>
            <strong style={{ marginLeft: 8 }}>Ficha de pago</strong>
          </div>
          <button className="btn btn-link" onClick={() => navigate('/checkout')}>← Cancelar</button>
        </div>
        <div className="oxxo-body">
          <div className="oxxo-amount">
            <span>Monto a pagar</span>
            <strong>{window.formatPrice(total)}</strong>
          </div>
          <div className="oxxo-ref">
            <span className="label">Referencia · presenta este número en caja</span>
            {/* Código de barras visual (decorativo) */}
            <div className="oxxo-barcode">
              {Array.from({ length: 60 }).map((_, i) => (
                <span key={i} style={{ width: i % 5 === 0 ? 4 : (i % 3 === 0 ? 2 : 1) }}></span>
              ))}
            </div>
            <div className="mono" style={{ textAlign: 'center', fontSize: 16, fontWeight: 700, letterSpacing: 2, marginTop: 8 }}>
              {ref}
            </div>
            {expira && <div className="muted" style={{ textAlign: 'center', fontSize: 12, marginTop: 6 }}>Vigencia: {expira}</div>}
          </div>
          <ol className="oxxo-steps">
            <li>Acude a cualquier tienda OXXO.</li>
            <li>Indica en caja que harás un pago de OXXO Pay.</li>
            <li>Dicta o muestra la referencia de esta ficha.</li>
            <li>Realiza el pago en efectivo.</li>
            <li>Tu acceso premium se activa automáticamente al acreditarse el pago (1-24h).</li>
          </ol>
          <div className="oxxo-actions">
            {pagoData.barcode_url
              ? <a className="btn btn-ghost btn-block" href={pagoData.barcode_url} target="_blank" rel="noreferrer">Ver ficha completa ↗</a>
              : <button className="btn btn-ghost btn-block" onClick={() => window.print()}>Imprimir ficha</button>
            }
            <button className="btn btn-primary btn-block" onClick={() => navigate('/pago/pendiente')}>Entendido →</button>
          </div>
          {pagoData.sandbox && (
            <button className="btn btn-link" style={{ width: '100%', marginTop: 8, color: 'var(--teal-2)' }} onClick={simularPago}>
              ⚡ Demo: simular acreditación inmediata
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

// ══════════════════════════════════════════════════════════════
//  PENDIENTE — OXXO no acreditado todavía
// ══════════════════════════════════════════════════════════════
window.PaymentFlow.Pendiente = function Pendiente({ navigate, store }) {
  return (
    <div>
      <window.DashHeader navigate={navigate} store={store} />
      <div className="container container-narrow" style={{ paddingTop: 60, paddingBottom: 80, textAlign: 'center' }}>
        <div className="estado-circle estado-pendiente">
          <span className="estado-spin"></span>
        </div>
        <h2 style={{ marginTop: 24 }}>Pago pendiente de acreditación</h2>
        <p className="muted" style={{ marginTop: 12, fontSize: 15, maxWidth: 540, margin: '12px auto 0', lineHeight: 1.6 }}>
          Estamos esperando que OXXO confirme tu pago. Suele tardar entre <strong>1 y 24 horas</strong>.
          En cuanto se acredite recibirás un correo y tu acceso premium se activará solo —
          <strong> no necesitas hacer nada más.</strong>
        </p>
        <div className="card" style={{ maxWidth: 460, margin: '32px auto 0', textAlign: 'left' }}>
          <h4>Mientras tanto puedes:</h4>
          <ul className="feature-list" style={{ marginTop: 12 }}>
            <li>Practicar con los simuladores muestra (gratis)</li>
            <li>Revisar el contenido del examen USICAMM</li>
            <li>Cerrar esta página — recibirás un correo al acreditarse</li>
          </ul>
        </div>
        <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={() => navigate('/dashboard')}>← Volver al panel</button>
      </div>
    </div>
  );
};

// ══════════════════════════════════════════════════════════════
//  CONFIRMADO — pago exitoso (MP redirige aquí con ?payment_id=)
// ══════════════════════════════════════════════════════════════
window.PaymentFlow.Confirmado = function Confirmado({ navigate, store }) {
  // MP agrega ?payment_id=xxx&status=approved al volver al sitio
  const hashQuery = new URLSearchParams(window.location.hash.split('?')[1] || '');
  const mpStatus  = hashQuery.get('status');
  const mpPayId   = hashQuery.get('payment_id');

  // Refrescar premium desde la API una vez llegamos aquí.
  // El webhook de MP ya pudo haberlo acreditado; este fetch lo confirma en el cliente.
  React.useEffect(() => {
    const tok = localStorage.getItem('sd_token');
    if (!tok) return;
    fetch(`${window.API_BASE}/me/accesos`, { headers: { Authorization: `Bearer ${tok}` } })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d?.accesos?.length) store.grantPremium(d.accesos); })
      .catch(() => {});
    store.clearCart();
    sessionStorage.removeItem('sd_oxxo_pago');
  }, []);

  return (
    <div>
      <window.DashHeader navigate={navigate} store={store} />
      <div className="container container-narrow" style={{ paddingTop: 60, paddingBottom: 80, textAlign: 'center' }}>
        <div className="estado-circle estado-confirmado">✓</div>
        <h2 style={{ marginTop: 24 }}>¡Pago confirmado!</h2>
        <p className="muted" style={{ marginTop: 12, fontSize: 15 }}>
          Tu acceso premium ya está activo. Practica las veces que necesites.
        </p>
        {mpPayId && (
          <div className="muted" style={{ marginTop: 8, fontSize: 13 }}>
            Referencia MP: <code className="kbd">{mpPayId}</code>
          </div>
        )}
        <button className="btn btn-primary btn-lg" style={{ marginTop: 28 }} onClick={() => navigate('/dashboard')}>
          Ir a mis simuladores →
        </button>
      </div>
    </div>
  );
};