// 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 total = items.reduce((s, p) => s + (p.precio || p.precio_mxn || 0), 0);

  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 {
          // init_point apunta a producción cuando el token es APP_USR-
          window.location.href = d.init_point;
        }

      } else {
        // OXXO: genera ficha directa con referencia
        let rawText = '';
        try {
          const r = await fetch(`${window.API_BASE}/checkout/oxxo`, {
            method: 'POST',
            headers: authHeaders(),
            body: JSON.stringify({ prueba_ids: ids }),
          });
          rawText = await r.text();
          const d = JSON.parse(rawText);
          if (!r.ok) { setError(d.error || 'Error al procesar'); setLoading(false); return; }
          sessionStorage.setItem('sd_oxxo_pago', JSON.stringify(d));
          store.clearCart();
          navigate('/pago/oxxo');
        } catch (err) {
          // Mostrar el error real para diagnóstico
          setError('Error OXXO: ' + (rawText ? rawText.slice(0, 200) : String(err)));
          setLoading(false);
        }
        return;
      }
    } catch {
      if (metodo === 'mercadopago') navigate('/pago/mercadopago');
    }
    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 }}>Procesos seleccionados ({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 a este proceso</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>{items.length} {items.length === 1 ? 'proceso' : 'procesos'}</span><span className="mono">{window.formatPrice(total)}</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 al proceso comprado.
              </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 — ficha con logo real, barcode JsBarcode y print
// ══════════════════════════════════════════════════════════════
function OxxoLogoSVG({ width = 160 }) {
  const h = Math.round(width * 0.34);
  return (
    <svg width={width} height={h} viewBox="0 0 160 54" xmlns="http://www.w3.org/2000/svg" style={{ display:'block' }}>
      {/* Rectángulo rojo */}
      <rect x="0" y="0" width="78" height="54" rx="5" fill="#CC0000"/>
      {/* Franja amarilla superior */}
      <rect x="0" y="0" width="78" height="9" rx="5" fill="#F5C100"/>
      <rect x="0" y="5" width="78" height="4" fill="#F5C100"/>
      {/* Franja amarilla inferior */}
      <rect x="0" y="45" width="78" height="9" rx="5" fill="#F5C100"/>
      <rect x="0" y="45" width="78" height="4" fill="#F5C100"/>
      {/* OXXO texto */}
      <text x="39" y="37" fontFamily="'Arial Black',Impact,sans-serif" fontSize="24" fontWeight="900"
        fill="white" textAnchor="middle" letterSpacing="2">OXXO</text>
      {/* Separador */}
      <line x1="92" y1="10" x2="92" y2="44" stroke="#CCCCCC" strokeWidth="1.5"/>
      {/* PAY texto */}
      <text x="130" y="40" fontFamily="'Arial Black',Impact,sans-serif" fontSize="30" fontWeight="900"
        fill="#3B5998" textAnchor="middle">PAY</text>
      {/* ® */}
      <text x="155" y="16" fontFamily="Arial,sans-serif" fontSize="10" fill="#3B5998">®</text>
    </svg>
  );
}

window.PaymentFlow.Oxxo = function OxxoPay({ navigate, store }) {
  const BASE = window.API_BASE || '/simuladordocente/api';

  const pagoData = React.useMemo(() => {
    try { return JSON.parse(sessionStorage.getItem('sd_oxxo_pago') || '{}'); } catch { return {}; }
  }, []);

  const PRUEBAS = store.pruebas || window.SD_SEED.PRUEBAS;
  const itemIds = pagoData.prueba_ids || store.cart;
  const items   = itemIds.map(id => PRUEBAS.find(p => p.id === id)).filter(Boolean);
  const total   = pagoData.total || items.reduce((s, p) => s + (p.precio || p.precio_mxn || 0), 0);

  const fallbackRef = React.useMemo(() => '93' + Math.floor(Math.random() * 1e16).toString().padStart(16, '0'), []);

  // Barcode mejorado desde MP (actualización silenciosa en background)
  const [mpBarcode, setMpBarcode] = React.useState(null);

  React.useEffect(() => {
    const pagoId = pagoData.pago_id;
    const tok    = localStorage.getItem('sd_token');
    if (!pagoId || !tok || pagoData.sandbox) return;

    // Pasamos también el barcode_url como fallback para extracción HTML
    const params = new URLSearchParams({ pago_id: pagoId });
    if (pagoData.barcode_url) params.set('barcode_url', pagoData.barcode_url);

    fetch(`${BASE}/me/oxxo-barcode?${params}`, { headers: { Authorization: `Bearer ${tok}` } })
      .then(r => r.ok ? r.json() : null)
      .then(d => { if (d && d.barcode_content) setMpBarcode(d); })
      .catch(() => {});
  }, []);

  // Usa el barcode_content de MP si llegó, si no usa la referencia de sessionStorage
  const ref          = mpBarcode?.referencia     || pagoData.referencia     || fallbackRef;
  const barcodeValue = mpBarcode?.barcode_content || pagoData.barcode_content || ref;
  const barcodeUrl   = mpBarcode?.barcode_url    || pagoData.barcode_url    || null;

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

  const barcodeRef = React.useRef(null);
  React.useEffect(() => {
    if (!barcodeRef.current || !window.JsBarcode || !barcodeValue) return;
    try {
      barcodeRef.current.innerHTML = '';
      JsBarcode(barcodeRef.current, barcodeValue, {
        format: 'CODE128', width: 2.2, height: 68,
        displayValue: false, margin: 0,
        background: '#FFFFFF', lineColor: '#000000',
      });
    } catch {}
  }, [barcodeValue]);

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

  const PASOS = [
    'Acude a cualquier tienda OXXO.',
    'Indica en caja que harás un pago de OXXO Pay.',
    'Muestra o dicta la referencia de esta ficha.',
    'Paga el monto exacto en efectivo.',
    'Tu acceso premium se activa automáticamente al acreditarse el pago (1–48 h).',
  ];

  return (
    <div className="modal-shell oxxo-print-bg">
      <div className="oxxo-window">

        <div className="oxxo-head no-print">
          <OxxoLogoSVG width={140} />
          <button className="btn btn-link" style={{ fontSize: 13 }} onClick={() => navigate('/checkout')}>← Cancelar</button>
        </div>

        <div className="oxxo-body">

          <div className="oxxo-print-header">
            <OxxoLogoSVG width={140} />
            <div style={{ marginLeft: 16 }}>
              <div style={{ fontWeight: 700, fontSize: 14 }}>Ficha de pago</div>
              <div style={{ fontSize: 11, color: '#777' }}>DocentesMX · docentesmx.net</div>
            </div>
          </div>

          <div className="oxxo-amount">
            <span>Monto a pagar</span>
            <strong>{window.formatPrice(total)}</strong>
          </div>

          {/* ── Aviso de correo ── */}
          <div style={{ background: '#EFF6FF', border: '1px solid #BFDBFE', borderRadius: 8,
            padding: '10px 14px', marginBottom: 14, fontSize: 13, color: '#1E40AF', display: 'flex', gap: 8, alignItems: 'flex-start' }}>
            <span style={{ fontSize: 16 }}>📧</span>
            <span>Revisa tu correo — también te llegó tu ficha de pago lista para usar. Si no puedes ver este código, usa el botón de descarga al final.</span>
          </div>

          <div className="oxxo-ref">
            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase',
              letterSpacing: '0.07em', color: 'var(--muted)', marginBottom: 8 }}>
              Referencia · presenta este número en caja
            </div>
            {pagoData.sandbox && (
              <div style={{ background: '#FEF9C3', border: '1px solid #FDE047', borderRadius: 6,
                padding: '8px 12px', marginBottom: 8, fontSize: 12, color: '#713F12', textAlign: 'center' }}>
                ⚠️ <strong>Referencia de prueba</strong> — no funciona en tiendas reales.
              </div>
            )}
            {mpBarcode?.barcode_content ? (
              <>
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                  <svg ref={barcodeRef} />
                </div>
                <div className="mono" style={{ textAlign: 'center', fontSize: 13, fontWeight: 700,
                  letterSpacing: 1, marginTop: 6 }}>
                  {mpBarcode.barcode_content}
                </div>
              </>
            ) : (
              <div style={{ textAlign: 'center', padding: '16px 8px' }}>
                <p style={{ fontSize: 13, color: 'var(--ink-soft)', marginBottom: 12, lineHeight: 1.5 }}>
                  No se pudo cargar el código. Descarga tu ficha oficial de Mercado Pago para pagar en OXXO.
                </p>
                {barcodeUrl && (
                  <a href={barcodeUrl} target="_blank" rel="noreferrer"
                    className="btn btn-primary btn-sm" style={{ display: 'inline-flex', gap: 6 }}>
                    Descargar ficha de pago ↗
                  </a>
                )}
              </div>
            )}
            {expira && (
              <div style={{ textAlign: 'center', fontSize: 12, marginTop: 8,
                padding: '5px 10px', background: '#FEF9C3', borderRadius: 5, color: '#854D0E' }}>
                Válido hasta el <strong>{expira}</strong>
              </div>
            )}
          </div>

          {items.length > 0 && (
            <div className="oxxo-items">
              <div className="oxxo-items-title">Detalle de compra</div>
              {items.map(p => (
                <div key={p.id} className="oxxo-item-row">
                  <span>{p.materiaNombre || p.nombre.replace(/^[^·]+·\s*/, '')} — Simulador completo</span>
                  <span className="mono">${p.precio ?? total}</span>
                </div>
              ))}
            </div>
          )}

          <ol className="oxxo-steps-list">
            {PASOS.map((texto, i) => (
              <li key={i} className="oxxo-step">{texto}</li>
            ))}
          </ol>

          <div className="oxxo-actions no-print">
            {pagoData.barcode_url && (
              <a className="btn btn-ghost" href={pagoData.barcode_url} target="_blank" rel="noreferrer">
                Ficha oficial MP ↗
              </a>
            )}
            <button className="btn btn-ghost" onClick={() => window.print()}>Imprimir ficha</button>
            <button className="btn btn-primary" onClick={() => navigate('/pago/pendiente')}>Entendido →</button>
          </div>

          {pagoData.sandbox && (
            <button className="btn btn-link no-print"
              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 puede poner los params antes del # (search) o dentro del hash — revisamos ambos
  const hashQuery   = new URLSearchParams(window.location.hash.split('?')[1] || '');
  const searchQuery = new URLSearchParams(window.location.search);
  const mpStatus    = hashQuery.get('status')     || searchQuery.get('status');
  const mpPayId     = hashQuery.get('payment_id') || searchQuery.get('payment_id');

  const [verificando, setVerificando] = React.useState(true);

  // El webhook de MP suele llegar antes que el redirect, pero puede haber diferencia de segundos.
  // Intentamos 3 veces con 2 s de intervalo para dar tiempo al webhook.
  React.useEffect(() => {
    store.clearCart();
    sessionStorage.removeItem('sd_oxxo_pago');
    const tok = localStorage.getItem('sd_token');
    if (!tok) { setVerificando(false); return; }

    let intentos = 0;
    const check = () => {
      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);
            setVerificando(false);
          } else if (intentos < 3) {
            intentos++;
            setTimeout(check, 2000);
          } else {
            setVerificando(false);
          }
        })
        .catch(() => setVerificando(false));
    };
    check();
  }, []);

  return (
    <div>
      <window.DashHeader navigate={navigate} store={store} />
      <div className="container container-narrow" style={{ paddingTop: 60, paddingBottom: 80, textAlign: 'center' }}>
        {verificando ? (
          <>
            <div className="estado-circle estado-pendiente">
              <span className="estado-spin"></span>
            </div>
            <h2 style={{ marginTop: 24 }}>Verificando tu pago…</h2>
            <p className="muted" style={{ marginTop: 12, fontSize: 15 }}>
              Estamos confirmando con Mercado Pago. Toma solo unos segundos.
            </p>
          </>
        ) : (
          <>
            <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>
  );
};