// Componente Bingo Bot para recepción de comprobantes y entrega instantánea de cartones
const { useState, useEffect } = React;

function ReceiptBot({ onCardsAssigned, initialCustomCards = [] }) {
  const [step, setStep] = useState(1); // 1: Formulario/Upload, 2: Procesando, 3: Cartones Entregados
  const [playerName, setPlayerName] = useState('');
  const [playerPhone, setPlayerPhone] = useState('');
  const [amount, setAmount] = useState(() => {
    if (initialCustomCards && initialCustomCards.length > 0) {
      const free = Math.floor(initialCustomCards.length / 4);
      return String((initialCustomCards.length - free) * 1000);
    }
    return '2000';
  });
  const [operationNumber, setOperationNumber] = useState('');
  const [imagePreview, setImagePreview] = useState(null);
  const [issuedCards, setIssuedCards] = useState([]);
  const [createdReceipt, setCreatedReceipt] = useState(null);
  const [loading, setLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState(null);

  const [customCards, setCustomCards] = useState(() => initialCustomCards || []);
  const [showSelectorModal, setShowSelectorModal] = useState(false);
  const [showPdfModal, setShowPdfModal] = useState(false);

  // Cartones en Vista Previa
  const [previewBotCards, setPreviewBotCards] = useState([]);

  useEffect(() => {
    if (initialCustomCards && initialCustomCards.length > 0) {
      setCustomCards(initialCustomCards);
      const free = Math.floor(initialCustomCards.length / 4);
      setAmount(String((initialCustomCards.length - free) * 1000));
    }
  }, [initialCustomCards]);

  const cardsFromAmount = Math.max(1, Math.floor((parseFloat(amount) || 0) / 1000));
  const botBonusCards = cardsFromAmount >= 3 ? 1 : 0; // Máxima promo: 1 gratis por $3.000 (3+1)
  const botTotalCards = cardsFromAmount + botBonusCards;

  // Sincronizar cartones en vista previa
  useEffect(() => {
    const helper = (idx) => {
      if (window.generateCard3x9) return window.generateCard3x9(idx, 15);
      return {
        id: 'CR-' + Math.floor(10000 + Math.random() * 90000),
        title: `Cartón #${idx}`,
        grid: [[1, null, 25, null, 42, null, 68, null, 81], [null, 14, null, 33, null, 55, null, 77, 90], [7, null, 29, null, 48, null, 69, 79, null]],
        allNumbers: [1, 7, 14, 25, 29, 33, 42, 48, 55, 68, 69, 77, 79, 81, 90]
      };
    };

    if (customCards && customCards.length > 0) {
      const list = [...customCards];
      while (list.length < botTotalCards) {
        const bonusIdx = list.length + 1;
        const bonusCard = helper(bonusIdx);
        bonusCard.es_promo = true;
        bonusCard.title = `Cartón #${bonusIdx} (🎁 PROMO 3+1 REGALO)`;
        list.push(bonusCard);
      }
      setPreviewBotCards(list);
    } else {
      const list = [];
      for (let i = 1; i <= botTotalCards; i++) {
        const c = helper(i);
        if (i > cardsFromAmount) {
          c.es_promo = true;
          c.title = `Cartón #${i} (🎁 PROMO 3+1 REGALO)`;
        }
        list.push(c);
      }
      setPreviewBotCards(list);
    }
  }, [amount, customCards, botTotalCards, cardsFromAmount]);

  const handleRegenerateBotPreview = () => {
    if (customCards && customCards.length > 0) {
      setCustomCards([]);
    }
    const helper = (idx) => {
      if (window.generateCard3x9) return window.generateCard3x9(idx, 15);
      return {
        id: 'CR-' + Math.floor(10000 + Math.random() * 90000),
        title: `Cartón #${idx}`,
        grid: [[1, null, 25, null, 42, null, 68, null, 81], [null, 14, null, 33, null, 55, null, 77, 90], [7, null, 29, null, 48, null, 69, 79, null]],
        allNumbers: [1, 7, 14, 25, 29, 33, 42, 48, 55, 68, 69, 77, 79, 81, 90]
      };
    };
    const list = [];
    for (let i = 1; i <= botTotalCards; i++) {
      const c = helper(i);
      if (i > cardsFromAmount) {
        c.es_promo = true;
        c.title = `Cartón #${i} (🎁 PROMO 3+1 REGALO)`;
      }
      list.push(c);
    }
    setPreviewBotCards(list);
  };

  // Manejar subida de imagen de comprobante
  const handleImageChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImagePreview(reader.result);
      };
      reader.readAsDataURL(file);
    }
  };

  // Cargar comprobante de ejemplo rápido
  const loadDemoVoucher = () => {
    setPlayerName('Carlos Rodríguez');
    setPlayerPhone('+54 9 11 5544-3322');
    setAmount('3000');
    setOperationNumber(`MP-${Math.floor(10000000 + Math.random() * 90000000)}`);
    setImagePreview('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=400&q=80');
  };

  // Procesar comprobante con el Bot
  const handleProcessReceipt = async (e) => {
    e.preventDefault();
    if (!playerName.trim()) {
      alert("Por favor ingresa tu nombre de jugador.");
      return;
    }
    const numAmount = parseFloat(amount);
    if (!numAmount || numAmount < 1000) {
      alert("El monto mínimo para comprar un cartón es de $1.000.");
      return;
    }

    setLoading(true);
    setErrorMsg(null);
    setStep(2);

    try {
      // Llamar al servicio de Supabase
      const result = await window.ReceiptService.processReceiptAndAssignCards({
        playerName: playerName.trim(),
        playerPhone: playerPhone.trim() || 'Sin teléfono',
        amount: numAmount,
        operationNumber: operationNumber || `OP-${Date.now().toString().slice(-6)}`,
        imageUrl: imagePreview || null,
        notes: customCards.length > 0 ? `Cartones elegidos manualmente por el usuario (${customCards.length})` : 'Comprobante recibido y validado por Bingo Bot',
        customCards: customCards
      });

      if (result.success) {
        setIssuedCards(result.cards);
        setCreatedReceipt(result.receipt);
        setStep(3);
      }
    } catch (err) {
      console.error(err);
      setErrorMsg("Ocurrió un problema guardando el comprobante en Supabase: " + err.message);
      setStep(1);
    } finally {
      setLoading(false);
    }
  };

  // Ir directamente al juego con los cartones generados
  const handleGoToGame = () => {
    if (onCardsAssigned && issuedCards.length > 0) {
      onCardsAssigned(issuedCards);
    }
  };

  const calculatedCards = Math.max(1, Math.floor((parseFloat(amount) || 0) / 1000));

  return (
    <div>
      {/* Banner */}
      <div className="hero-banner">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '16px' }}>
          <div>
            <h1 className="hero-title">
              <i className="fa-solid fa-robot" style={{ color: 'var(--accent-gold)', marginRight: '10px' }}></i>
              Bingo Bot: Emisión Automática por Comprobante
            </h1>
            <p className="hero-description">
              Sube tu comprobante de transferencia bancaria o Mercado Pago. El bot validará el monto transferido ($1.000 por cartón) y te asignará tus <strong>cartones oficiales 3x9</strong> guardados en Supabase listos para jugar.
            </p>
          </div>

          <button className="btn btn-secondary btn-sm" onClick={loadDemoVoucher}>
            <i className="fa-solid fa-wand-magic-sparkles"></i>
            Cargar Datos de Ejemplo
          </button>
        </div>
      </div>

      <div style={{ maxWidth: '840px', margin: '0 auto' }}>
        {/* PASO 1: Formulario de Subida y Datos */}
        {step === 1 && (
          <div className="app-card">
            <div className="card-header">
              <h2 className="card-title">
                <i className="fa-solid fa-receipt" style={{ color: 'var(--accent-teal)' }}></i>
                Enviar Comprobante de Pago
              </h2>
              <span className="brand-badge" style={{ backgroundColor: 'var(--accent-green)', color: '#fff' }}>
                $1.000 = 1 Cartón
              </span>
            </div>

            {errorMsg && (
              <div style={{ padding: '12px 16px', borderRadius: 'var(--radius-md)', background: 'rgba(244, 63, 94, 0.2)', border: '1px solid var(--accent-rose)', color: '#fca5a5', marginBottom: '16px', fontSize: '0.88rem' }}>
                <i className="fa-solid fa-circle-exclamation" style={{ marginRight: '6px' }}></i>
                {errorMsg}
              </div>
            )}

            <form onSubmit={handleProcessReceipt}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '16px' }}>
                <div>
                  <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: '600', color: 'var(--text-muted)', marginBottom: '6px' }}>
                    Nombre del Jugador *
                  </label>
                  <input
                    type="text"
                    required
                    placeholder="Ej: Juan Pérez"
                    value={playerName}
                    onChange={(e) => setPlayerName(e.target.value)}
                    style={{ width: '100%', padding: '10px 14px', borderRadius: 'var(--radius-md)', background: 'var(--bg-app)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', fontSize: '0.92rem' }}
                  />
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: '600', color: 'var(--text-muted)', marginBottom: '6px' }}>
                    WhatsApp / Teléfono (opcional)
                  </label>
                  <input
                    type="text"
                    placeholder="Ej: +54 9 11 1234-5678"
                    value={playerPhone}
                    onChange={(e) => setPlayerPhone(e.target.value)}
                    style={{ width: '100%', padding: '10px 14px', borderRadius: 'var(--radius-md)', background: 'var(--bg-app)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', fontSize: '0.92rem' }}
                  />
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px', marginBottom: '20px' }}>
                <div>
                  <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: '600', color: 'var(--text-muted)', marginBottom: '6px' }}>
                    Monto Transferido ($) *
                  </label>
                  <input
                    type="number"
                    min="1000"
                    step="1000"
                    required
                    value={amount}
                    onChange={(e) => setAmount(e.target.value)}
                    style={{ width: '100%', padding: '10px 14px', borderRadius: 'var(--radius-md)', background: 'var(--bg-app)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', fontSize: '0.92rem', fontWeight: '700' }}
                  />
                  <div style={{ fontSize: '0.78rem', color: 'var(--accent-gold)', marginTop: '4px' }}>
                    <i className="fa-solid fa-ticket"></i> Equivale a <strong>{calculatedCards} cartón(es)</strong>
                  </div>
                </div>

                <div>
                  <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: '600', color: 'var(--text-muted)', marginBottom: '6px' }}>
                    N° de Operación / Transferencia (opcional)
                  </label>
                  <input
                    type="text"
                    placeholder="Ej: 8492049182"
                    value={operationNumber}
                    onChange={(e) => setOperationNumber(e.target.value)}
                    style={{ width: '100%', padding: '10px 14px', borderRadius: 'var(--radius-md)', background: 'var(--bg-app)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', fontSize: '0.92rem' }}
                  />
                </div>
              </div>

              {/* Opción de Elegir Cartones del Catálogo */}
              <div style={{
                marginBottom: '20px',
                padding: '14px 18px',
                borderRadius: 'var(--radius-lg)',
                background: 'linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(15, 23, 42, 0.85))',
                border: customCards.length > 0 ? '1.5px solid #10b981' : '1.5px solid rgba(245, 158, 11, 0.45)',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                flexWrap: 'wrap',
                gap: '12px',
                boxShadow: '0 4px 16px rgba(0,0,0,0.25)'
              }}>
                <div>
                  <div style={{ fontSize: '0.94rem', fontWeight: '800', color: '#ffffff', display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <i className="fa-solid fa-layer-group" style={{ color: 'var(--accent-gold)' }}></i>
                    {customCards.length > 0 ? `✓ ${customCards.length} Cartones elegidos del catálogo` : '¿Quieres explorar cartones o buscar tus números de la suerte?'}
                  </div>
                  <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)', display: 'block', marginTop: '2px' }}>
                    {customCards.length > 0 ? 'Tus cartones seleccionados están listos para ser asignados a tu nombre.' : 'Explora la cuadrícula 3x9 oficial y elige tus números uno por uno con la Promo 3+1.'}
                  </span>
                </div>

                <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                  {customCards.length > 0 && (
                    <button
                      type="button"
                      className="btn btn-secondary btn-sm"
                      onClick={() => setCustomCards([])}
                      style={{ fontSize: '0.78rem', padding: '6px 10px', color: '#f87171' }}
                      title="Borrar selección personalizada y usar aleatorios"
                    >
                      <i className="fa-solid fa-rotate-left"></i> Restablecer
                    </button>
                  )}
                  <button
                    type="button"
                    className="btn btn-sm"
                    onClick={() => setShowSelectorModal(true)}
                    style={{
                      fontWeight: '800',
                      padding: '8px 16px',
                      fontSize: '0.85rem',
                      background: 'linear-gradient(135deg, #f59e0b, #d97706)',
                      color: '#111827',
                      border: 'none',
                      borderRadius: 'var(--radius-md)',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '6px',
                      boxShadow: '0 2px 8px rgba(245, 158, 11, 0.35)',
                      cursor: 'pointer'
                    }}
                  >
                    <i className="fa-solid fa-table-cells"></i>
                    <span>{customCards.length > 0 ? 'Modificar Selección' : '🗂️ Abrir Catálogo (Elegir Números)'}</span>
                  </button>
                </div>
              </div>

              {/* ========================================================
                  VISTA PREVIA COMPLETA DE CARTONES A RECIBIR EN BOT
                 ======================================================== */}
              <div style={{ marginBottom: '20px', background: 'rgba(15, 23, 42, 0.85)', border: '1.5px solid rgba(0, 229, 255, 0.35)', borderRadius: 'var(--radius-md)', padding: '14px' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px', marginBottom: '12px' }}>
                  <div>
                    <div style={{ fontSize: '0.98rem', fontWeight: '900', color: 'var(--text-main)', display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <i className="fa-solid fa-eye" style={{ color: 'var(--accent-gold)' }}></i>
                      Vista Previa de tus {previewBotCards.length} Cartones a Recibir
                    </div>
                    <span style={{ fontSize: '0.76rem', color: 'var(--text-muted)' }}>
                      Revisa los números oficiales asignados por el bot antes de enviar el comprobante.
                    </span>
                  </div>

                  <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
                    <button 
                      type="button" 
                      className="btn btn-secondary btn-sm"
                      onClick={handleRegenerateBotPreview}
                      style={{ fontSize: '0.78rem', padding: '5px 10px', display: 'flex', alignItems: 'center', gap: '5px' }}
                      title="Generar nuevas combinaciones de números"
                    >
                      <i className="fa-solid fa-shuffle"></i>
                      <span>Barajar Otros</span>
                    </button>

                    <button 
                      type="button" 
                      className="btn btn-secondary btn-sm"
                      onClick={() => setShowSelectorModal(true)}
                      style={{ fontSize: '0.78rem', padding: '5px 10px', color: 'var(--accent-cyan)', display: 'flex', alignItems: 'center', gap: '5px' }}
                    >
                      <i className="fa-solid fa-hand-pointer"></i>
                      <span>Elegir del Catálogo</span>
                    </button>

                    <button 
                      type="button" 
                      className="btn btn-secondary btn-sm"
                      onClick={() => window.downloadCardsPDF && window.downloadCardsPDF(previewBotCards, playerName || 'Vista Previa')}
                      style={{ fontSize: '0.78rem', padding: '5px 10px', color: 'var(--accent-gold)', border: '1px solid rgba(245, 158, 11, 0.4)', display: 'flex', alignItems: 'center', gap: '5px' }}
                      title="Descargar PDF de prueba de estos cartones"
                    >
                      <i className="fa-solid fa-file-pdf"></i>
                      <span>PDF</span>
                    </button>
                  </div>
                </div>

                {/* Contenedor desplazable de cartones 3x9 */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', maxHeight: '400px', overflowY: 'auto', paddingRight: '4px' }}>
                  {previewBotCards.map((card, idx) => {
                    const isPromo = card.es_promo || (idx === 3 && previewBotCards.length === 4);
                    const themeClass = 'card-theme-ruby';
                    return (
                    <div 
                      key={card.id || idx} 
                      className={`bingo-card-3x9-wrapper ${themeClass}`}
                    >
                      <div className="card-header-bar">
                        <div className="card-header-info">
                          <span className="card-title-text" style={{ fontWeight: '800' }}>
                            {isPromo ? `🎁 Cartón #${idx + 1} (PROMO 3+1 REGALO)` : (card.title || `Cartón Oficial #${idx + 1}`)}
                          </span>
                          <span className="card-serial-tag">{card.id || `CR-${10000 + idx + 1}`}</span>
                        </div>

                        <span className="brand-badge" style={{ backgroundColor: isPromo ? 'var(--accent-gold)' : 'var(--accent-teal)', color: isPromo ? '#111' : '#fff', fontWeight: '800' }}>
                          {isPromo ? '🎁 REGALO GRATIS' : `● CARTÓN ${idx + 1}`}
                        </span>
                      </div>

                      <div className="teal-bingo-ticket">
                        <div className="ticket-col-headers">
                          {['1-9','10-19','20-29','30-39','40-49','50-59','60-69','70-79','80-90'].map((col, cIdx) => (
                            <div key={cIdx} className="ticket-col-header-item">{col}</div>
                          ))}
                        </div>

                        <div className="ticket-grid-3x9">
                          {(card.grid || []).map((row, rIdx) => (
                            <div key={rIdx} className="ticket-row">
                              {row.map((cellNum, cIdx) => {
                                if (cellNum === null || cellNum === undefined) {
                                  return (
                                    <div key={cIdx} className="ticket-cell empty">
                                      {rIdx === 2 && cIdx === 7 && (
                                        <span className="watermark-text">Lota Familiar La Mami</span>
                                      )}
                                    </div>
                                  );
                                }
                                return (
                                  <div key={cIdx} className="ticket-cell">
                                    <span>{cellNum}</span>
                                  </div>
                                );
                              })}
                            </div>
                          ))}
                        </div>
                      </div>

                      <div className="ticket-status-footer" style={{ marginTop: '8px', paddingTop: '6px', fontSize: '0.75rem' }}>
                        <span style={{ color: 'var(--text-muted)' }}>15 números oficiales • 5 por fila</span>
                        <span style={{ color: card.es_promo ? 'var(--accent-gold)' : 'var(--accent-cyan)', fontWeight: '700' }}>
                          {card.es_promo ? '🎁 Cartón Bonificado 100% Gratis' : 'Listo para asignar a tu nombre'}
                        </span>
                      </div>
                    </div>
                  );
                })}
                </div>
              </div>

              {/* Subida de Imagen del Comprobante */}
              <div style={{ marginBottom: '24px' }}>
                <label style={{ display: 'block', fontSize: '0.85rem', fontWeight: '600', color: 'var(--text-muted)', marginBottom: '6px' }}>
                  Foto o Captura del Comprobante
                </label>
                <div style={{ border: '2px dashed var(--border-active)', borderRadius: 'var(--radius-md)', padding: '20px', textAlign: 'center', background: 'rgba(15, 23, 42, 0.5)' }}>
                  {imagePreview ? (
                    <div>
                      <img 
                        src={imagePreview} 
                        alt="Comprobante" 
                        style={{ maxHeight: '180px', borderRadius: 'var(--radius-sm)', objectFit: 'contain', marginBottom: '10px', boxShadow: 'var(--shadow-md)' }} 
                      />
                      <div>
                        <button type="button" className="btn btn-secondary btn-sm" onClick={() => setImagePreview(null)}>
                          <i className="fa-solid fa-trash"></i> Cambiar Imagen
                        </button>
                      </div>
                    </div>
                  ) : (
                    <div>
                      <i className="fa-solid fa-cloud-arrow-up" style={{ fontSize: '2.4rem', color: 'var(--accent-teal)', marginBottom: '8px', display: 'block' }}></i>
                      <div style={{ fontSize: '0.9rem', marginBottom: '8px' }}>Arrastra tu comprobante aquí o selecciona el archivo</div>
                      <input 
                        type="file" 
                        accept="image/*"
                        onChange={handleImageChange}
                        id="receipt-file-input"
                        style={{ display: 'none' }}
                      />
                      <label htmlFor="receipt-file-input" className="btn btn-secondary btn-sm" style={{ cursor: 'pointer' }}>
                        <i className="fa-solid fa-image"></i> Seleccionar Imagen
                      </label>
                    </div>
                  )}
                </div>
              </div>

              <button 
                type="submit" 
                className="btn btn-primary" 
                style={{ width: '100%', padding: '14px', fontSize: '1rem' }}
                disabled={loading}
              >
                <i className="fa-solid fa-paper-plane"></i>
                Enviar Comprobante y Obtener {calculatedCards} Cartón(es)
              </button>
            </form>
          </div>
        )}

        {/* PASO 2: Procesando / Simulando Bot */}
        {step === 2 && (
          <div className="app-card" style={{ textAlign: 'center', padding: '48px 24px' }}>
            <i className="fa-solid fa-robot fa-bounce" style={{ fontSize: '3.5rem', color: 'var(--accent-gold)', marginBottom: '16px' }}></i>
            <h2 style={{ fontSize: '1.4rem', marginBottom: '8px' }}>Bingo Bot Procesando Comprobante...</h2>
            <p style={{ color: 'var(--text-muted)', maxWidth: '460px', margin: '0 auto 20px', fontSize: '0.9rem' }}>
              Validando monto de ${amount}, registrando transacción en Supabase y generando tus {calculatedCards} cartones 3x9 con la regla de 1 número por columna...
            </p>
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <span className="status-dot online" style={{ width: '12px', height: '12px' }}></span>
            </div>
          </div>
        )}

        {/* PASO 3: Cartones Entregados */}
        {step === 3 && (
          <div>
            <div className="app-card" style={{ marginBottom: '24px', borderLeft: createdReceipt?.status === 'pending' ? '4px solid var(--accent-gold)' : '4px solid var(--accent-green)' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <i className={`fa-solid ${createdReceipt?.status === 'pending' ? 'fa-clock' : 'fa-circle-check'}`} style={{ color: createdReceipt?.status === 'pending' ? 'var(--accent-gold)' : 'var(--accent-green)', fontSize: '1.4rem' }}></i>
                    <h2 style={{ fontSize: '1.25rem', fontWeight: '800' }}>
                      {createdReceipt?.status === 'pending' ? '¡Comprobante Recibido (Pendiente de Verificación)!' : '¡Comprobante Aprobado con Éxito!'}
                    </h2>
                  </div>
                  <p style={{ color: 'var(--text-muted)', fontSize: '0.88rem', marginTop: '4px' }}>
                    Jugador: <strong>{playerName}</strong> | Monto: <strong>${amount}</strong> | Cartones emitidos: <strong>{issuedCards.length}</strong>
                  </p>
                  {createdReceipt?.status === 'pending' && (
                    <div style={{ fontSize: '0.82rem', color: 'var(--accent-gold)', marginTop: '4px', fontWeight: '700' }}>
                      🟡 Tus cartones están guardados en Supabase. El organizador verificará el pago antes del sorteo para activarlos en el radar y habilitar los premios.
                    </div>
                  )}
                  <div style={{ fontSize: '0.75rem', color: 'var(--text-dim)', marginTop: '2px' }}>
                    ID Comprobante Supabase: <span className="code-badge">{createdReceipt?.id}</span> | Ref: <code>{createdReceipt?.operation_number || operationNumber}</code>
                  </div>
                </div>

                <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                  <button 
                    type="button"
                    className="btn btn-secondary"
                    onClick={() => {
                      setShowPdfModal(true);
                      if (window.downloadCardsPDF) window.downloadCardsPDF(issuedCards, playerName);
                    }}
                    style={{ fontWeight: '800', border: '1px solid var(--accent-gold)', color: 'var(--accent-gold)', display: 'flex', alignItems: 'center', gap: '6px' }}
                  >
                    <i className="fa-solid fa-file-pdf"></i>
                    Descargar en PDF (A4)
                  </button>

                  <button type="button" className="btn btn-success" onClick={handleGoToGame}>
                    <i className="fa-solid fa-play"></i>
                    Ir a la Sala en Vivo
                  </button>

                  <button type="button" className="btn btn-secondary btn-sm" onClick={() => setStep(1)}>
                    <i className="fa-solid fa-plus"></i>
                    Nuevo Comprobante
                  </button>
                </div>
              </div>
            </div>

            {/* Listado de Cartones Generados */}
            <h3 style={{ fontSize: '1.15rem', fontWeight: '800', marginBottom: '14px', display: 'flex', alignItems: 'center', gap: '8px' }}>
              <i className="fa-solid fa-ticket" style={{ color: 'var(--accent-cyan)' }}></i>
              Tus Cartones Oficiales Emitidos
            </h3>

            <div className="cards-container">
              {issuedCards.map((card, idx) => {
                const isPromo = card.es_promo || (idx === 3 && issuedCards.length === 4);
                const themeClass = 'card-theme-ruby';
                return (
                <div key={card.id} className={`bingo-card-3x9-wrapper ${themeClass}`} style={{ opacity: createdReceipt?.status === 'pending' ? 0.88 : 1 }}>
                  <div className="card-header-bar">
                    <div className="card-header-info">
                      <span className="card-title-text">{card.title}</span>
                      <span className="card-serial-tag">{card.id}</span>
                      {isPromo && (
                        <span className="brand-badge" style={{ backgroundColor: 'rgba(245, 158, 11, 0.25)', color: '#f59e0b', border: '1px solid #f59e0b', fontWeight: '900', fontSize: '0.72rem', padding: '2px 8px' }}>
                          🎁 PROMO 3+1 REGALO
                        </span>
                      )}
                    </div>
                    <span className="brand-badge" style={{ backgroundColor: createdReceipt?.status === 'pending' ? 'var(--accent-gold)' : 'var(--accent-green)', color: createdReceipt?.status === 'pending' ? '#000' : '#fff', fontWeight: '800' }}>
                      {createdReceipt?.status === 'pending' ? '🟡 PENDIENTE DE REVISIÓN' : '● ACTIVO Y VERIFICADO'}
                    </span>
                  </div>

                  <div className="teal-bingo-ticket">
                    <div className="ticket-col-headers">
                      {['1-9','10-19','20-29','30-39','40-49','50-59','60-69','70-79','80-90'].map((col, cIdx) => (
                        <div key={cIdx} className="ticket-col-header-item">{col}</div>
                      ))}
                    </div>

                    <div className="ticket-grid-3x9">
                      {(card.grid || []).map((row, rIdx) => (
                        <div key={rIdx} className="ticket-row">
                          {row.map((cellNum, cIdx) => {
                            if (cellNum === null || cellNum === undefined) {
                              return (
                                <div key={cIdx} className="ticket-cell empty">
                                  {rIdx === 2 && cIdx === 7 && (
                                    <span className="watermark-text">Lota Familiar La Mami</span>
                                  )}
                                </div>
                              );
                            }
                            return (
                              <div key={cIdx} className="ticket-cell">
                                <span>{cellNum}</span>
                              </div>
                            );
                          })}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              );
            })}
            </div>
          </div>
        )}
      </div>

      {/* Modal Interactivo de Selección de Cartones */}
      {showSelectorModal && (
        <window.CardSelectorModal 
          isOpen={showSelectorModal}
          onClose={() => setShowSelectorModal(false)}
          onConfirmSelection={(data) => {
            if (data && data.cards) {
              setCustomCards(data.cards);
              setAmount(String(data.totalPrice));
              if (data.playerName && !playerName) setPlayerName(data.playerName);
              if (data.playerPhone && !playerPhone) setPlayerPhone(data.playerPhone);
            }
          }}
          initialSelectedCards={customCards}
        />
      )}

      {/* Modal de Descarga y Vista Previa de Cartones en PDF */}
      {showPdfModal && window.CardsPdfModal && (
        <window.CardsPdfModal 
          isOpen={showPdfModal}
          onClose={() => setShowPdfModal(false)}
          cards={issuedCards}
          playerName={playerName}
        />
      )}
    </div>
  );
}

window.ReceiptBot = ReceiptBot;