// Componente Panel de Administración de Comprobantes y Carga Manual de Jugadores
const { useState } = React;

function AdminReceipts() {
  let room = {};
  try {
    if (window.useBingoRoom) {
      room = window.useBingoRoom();
    }
  } catch (e) {}

  const receipts = room.receipts || [];
  const loading = room.loadingDb || false;
  const loadReceipts = room.reloadDatabase || (() => {});
  const isSalesOpen = room.isSalesOpen !== undefined ? room.isSalesOpen : true;
  const toggleSalesStatus = room.toggleSalesStatus || (() => {});

  const [selectedReceipt, setSelectedReceipt] = useState(null);
  const [receiptCards, setReceiptCards] = useState([]);
  const [loadingCards, setLoadingCards] = useState(false);
  const [searchFilter, setSearchFilter] = useState('');
  const [receiptStatusFilter, setReceiptStatusFilter] = useState('all'); // 'all' | 'pending' | 'approved' | 'rejected'
  const [actionLoadingId, setActionLoadingId] = useState(null);
  const [pdfLoadingId, setPdfLoadingId] = useState(null);

  // Estado del Modal de Carga Manual de Jugador
  const [showManualModal, setShowManualModal] = useState(false);
  const [manualForm, setManualForm] = useState({
    name: '',
    phone: '',
    cardsCount: 3,
    operationNumber: '',
    isSubmitting: false,
    message: null
  });

  // Estado de Gestión de Vendedores / Promotores
  const [adminSubTab, setAdminSubTab] = useState('receipts'); // 'receipts' | 'sellers'
  const [sellers, setSellers] = useState([]);
  const [loadingSellers, setLoadingSellers] = useState(false);
  const [showSellerModal, setShowSellerModal] = useState(false);
  const [editingSeller, setEditingSeller] = useState(null);
  const [sellerForm, setSellerForm] = useState({
    nombre: '',
    telefono: '',
    pin: '1234',
    is_active: true,
    notas: ''
  });

  const loadSellers = React.useCallback(async () => {
    setLoadingSellers(true);
    if (window.ReceiptService && window.ReceiptService.getSellersWithStats) {
      const data = await window.ReceiptService.getSellersWithStats();
      setSellers(data || []);
    }
    setLoadingSellers(false);
  }, []);

  React.useEffect(() => {
    loadSellers();
  }, [loadSellers]);

  const handleOpenNewSeller = () => {
    setEditingSeller(null);
    setSellerForm({
      nombre: '',
      telefono: '',
      pin: '1234',
      is_active: true,
      notas: ''
    });
    setShowSellerModal(true);
  };

  const handleEditSeller = (seller) => {
    setEditingSeller(seller);
    setSellerForm({
      nombre: seller.nombre || '',
      telefono: seller.telefono || '',
      pin: seller.pin || '1234',
      is_active: seller.is_active !== false,
      notas: seller.notas || ''
    });
    setShowSellerModal(true);
  };

  const handleSaveSeller = async (e) => {
    e.preventDefault();
    if (!sellerForm.nombre.trim() || !sellerForm.telefono.trim()) {
      alert("Por favor completa el nombre y teléfono del vendedor.");
      return;
    }
    if (window.ReceiptService && window.ReceiptService.saveSeller) {
      const res = await window.ReceiptService.saveSeller({
        id: editingSeller?.id,
        nombre: sellerForm.nombre,
        telefono: sellerForm.telefono,
        pin: sellerForm.pin,
        is_active: sellerForm.is_active,
        notas: sellerForm.notas
      });
      if (res && res.success) {
        setShowSellerModal(false);
        loadSellers();
      } else {
        alert("Error al guardar vendedor: " + (res?.message || 'Error desconocido'));
      }
    }
  };

  const handleToggleSellerStatus = async (seller) => {
    if (window.ReceiptService && window.ReceiptService.saveSeller) {
      await window.ReceiptService.saveSeller({
        id: seller.id,
        nombre: seller.nombre,
        telefono: seller.telefono,
        pin: seller.pin,
        is_active: !seller.is_active,
        notas: seller.notas
      });
      loadSellers();
    }
  };

  const handleDeleteSeller = async (seller) => {
    if (confirm(`¿Estás seguro de eliminar al vendedor "${seller.nombre}"?`)) {
      if (window.ReceiptService && window.ReceiptService.deleteSeller) {
        await window.ReceiptService.deleteSeller(seller.id);
        loadSellers();
      }
    }
  };

  const handleSendSellerWhatsApp = (seller) => {
    const cleanPhone = (seller.telefono || '').replace(/[^0-9]/g, '');
    const phoneWithCountry = cleanPhone.startsWith('54') ? cleanPhone : `549${cleanPhone}`;
    const sellerLoginUrl = window.location.origin + window.location.pathname + '?mode=seller';

    const text = `🎉 ¡Hola ${seller.nombre}! Has sido habilitado como *Vendedor Oficial* de *Lota Familiar La Mami*.\n\n📲 *Ingresa a tu terminal de carga aquí:* ${sellerLoginUrl}\n🔑 *Tu PIN de acceso:* ${seller.pin}\n\nDesde allí podrás registrar a tus compradores, asignarles cartones y enviarles sus números automáticamente. ¡Éxitos con las ventas! 🍀`;

    const url = `https://wa.me/${phoneWithCountry}?text=${encodeURIComponent(text)}`;
    window.open(url, '_blank');
  };

  const handleViewReceiptCards = async (receipt) => {
    setSelectedReceipt(receipt);
    setLoadingCards(true);
    if (window.ReceiptService) {
      const cards = await window.ReceiptService.getCardsByReceiptId(receipt.id);
      setReceiptCards(cards);
    }
    setLoadingCards(false);
  };

  const handleDirectDownloadPdf = async (receipt) => {
    if (!receipt) return;
    setPdfLoadingId(receipt.id);
    try {
      if (window.ReceiptService && window.ReceiptService.getCardsByReceiptId) {
        const cards = await window.ReceiptService.getCardsByReceiptId(receipt.id);
        if (cards && cards.length > 0 && window.downloadCardsPDF) {
          window.downloadCardsPDF(cards, receipt.player_name);
        } else {
          alert("No se encontraron cartones guardados para este comprobante.");
        }
      }
    } catch (e) {
      alert("Error al descargar PDF: " + e.message);
    } finally {
      setPdfLoadingId(null);
    }
  };

  // Exportar todas las ventas filtradas a Excel (.CSV compatible con Excel y Google Sheets)
  const handleExportAdminExcel = () => {
    if (window.exportSalesToExcel) {
      const totalAmt = filteredReceipts.reduce((sum, r) => sum + (parseFloat(r.amount) || 0), 0);
      const totalCds = filteredReceipts.reduce((sum, r) => sum + (parseInt(r.cards_count, 10) || (r.cards ? r.cards.length : 0)), 0);
      const cashAmt = filteredReceipts.filter(r => !r.notes || !r.notes.toLowerCase().includes('transferencia'))
                                      .reduce((sum, r) => sum + (parseFloat(r.amount) || 0), 0);
      const transfAmt = totalAmt - cashAmt;

      window.exportSalesToExcel({
        sellerName: 'Mesa Central (Todas las Ventas Oficiales)',
        sellerPhone: '',
        receipts: filteredReceipts,
        totalAmount: totalAmt,
        cashAmount: cashAmt,
        transferAmount: transfAmt,
        totalCards: totalCds,
        title: `Planilla Maestra de Ventas - ${receiptStatusFilter.toUpperCase()}`
      });
    } else {
      alert("Módulo exportador de Excel no disponible.");
    }
  };

  // Método 1: Aprobar Comprobante y Activar Cartones al instante
  const handleApprove = async (receiptId) => {
    setActionLoadingId(receiptId);
    try {
      if (window.ReceiptService && window.ReceiptService.approveReceipt) {
        const res = await window.ReceiptService.approveReceipt(receiptId);
        if (res && res.success) {
          await loadReceipts();
          if (selectedReceipt && selectedReceipt.id === receiptId) {
            setSelectedReceipt(prev => ({ ...prev, status: 'approved' }));
            // Recargar cartones para ver su estado activo
            const updatedCards = await window.ReceiptService.getCardsByReceiptId(receiptId);
            setReceiptCards(updatedCards);
          }
        } else {
          alert("Error al aprobar comprobante: " + (res?.message || 'Error desconocido'));
        }
      }
    } catch (err) {
      console.error(err);
      alert("Error al aprobar comprobante: " + err.message);
    } finally {
      setActionLoadingId(null);
    }
  };

  // Método 1: Rechazar Comprobante y Mantener Cartones Inactivos
  const handleReject = async (receiptId) => {
    const reason = prompt("Ingresa el motivo del rechazo del comprobante (ej: 'Transferencia no recibida en la cuenta', 'Comprobante adulterado'):", "Comprobante no acreditado en cuenta");
    if (reason === null) return;
    setActionLoadingId(receiptId);
    try {
      if (window.ReceiptService && window.ReceiptService.rejectReceipt) {
        const res = await window.ReceiptService.rejectReceipt(receiptId, reason);
        if (res && res.success) {
          await loadReceipts();
          if (selectedReceipt && selectedReceipt.id === receiptId) {
            setSelectedReceipt(prev => ({ ...prev, status: 'rejected', notes: reason }));
            const updatedCards = await window.ReceiptService.getCardsByReceiptId(receiptId);
            setReceiptCards(updatedCards);
          }
        } else {
          alert("Error al rechazar comprobante: " + (res?.message || 'Error desconocido'));
        }
      }
    } catch (err) {
      console.error(err);
      alert("Error al rechazar comprobante: " + err.message);
    } finally {
      setActionLoadingId(null);
    }
  };

  const handleUpdateStatus = async (receiptId, newStatus) => {
    if (newStatus === 'approved') {
      await handleApprove(receiptId);
    } else if (newStatus === 'rejected') {
      await handleReject(receiptId);
    } else if (window.ReceiptService) {
      await window.ReceiptService.updateReceiptStatus(receiptId, newStatus);
      loadReceipts();
      if (selectedReceipt && selectedReceipt.id === receiptId) {
        setSelectedReceipt(prev => ({ ...prev, status: newStatus }));
      }
    }
  };

  const handleDeleteReceipt = async (receiptId, playerName) => {
    if (confirm(`¿Estás seguro de eliminar el registro y los cartones de "${playerName}" de la base de datos?`)) {
      if (window.ReceiptService) {
        await window.ReceiptService.deleteReceipt(receiptId);
        loadReceipts();
        if (selectedReceipt && selectedReceipt.id === receiptId) {
          setSelectedReceipt(null);
        }
      }
    }
  };

  // Puesta a Cero de Base de Datos para el Evento Real
  const handleClearAllTestData = async () => {
    const confirmation = prompt(
      "⚠️ ATENCIÓN - PUESTA A CERO PARA EL EVENTO REAL:\n\n" +
      "Esta acción eliminará TODOS los comprobantes y cartones de prueba registrados, dejando las ventas y la mesa de juego en $0.\n\n" +
      "(Las vendedoras registradas y sus PINes NO se borrarán).\n\n" +
      "Para confirmar y proceder, escribe la palabra BORRAR:"
    );

    if (confirmation === 'BORRAR' || confirmation === 'borrar') {
      try {
        if (window.ReceiptService && window.ReceiptService.clearAllEventData) {
          const res = await window.ReceiptService.clearAllEventData('1234');
          if (res && res.success) {
            alert("✅ ¡Puesta a cero exitosa! La base de datos quedó en $0 y limpia para recibir ventas reales.");
            if (typeof loadReceipts === 'function') {
              await loadReceipts();
            }
            setSelectedReceipt(null);
            setReceiptCards([]);
          } else {
            alert("Error al limpiar datos: " + (res?.message || 'Error desconocido'));
          }
        }
      } catch (e) {
        alert("Error de conexión: " + e.message);
      }
    }
  };

  // Guardar Jugador Manual
  const handleSaveManualPlayer = async (e) => {
    e.preventDefault();
    if (!manualForm.name.trim()) {
      alert("Ingresa el nombre del jugador.");
      return;
    }
    const count = parseInt(manualForm.cardsCount, 10);
    const amount = count * 1000;
    const bonus = count >= 3 ? 1 : 0; // Máxima promo: 1 cartón de regalo por $3.000 (3+1)
    const totalToGive = count + bonus;

    setManualForm(prev => ({ ...prev, isSubmitting: true, message: "Guardando en Supabase..." }));

    try {
      if (window.ReceiptService) {
        await window.ReceiptService.createManualPlayer({
          playerName: manualForm.name.trim(),
          playerPhone: manualForm.phone.trim() || 'Carga Directa Organizador',
          cardsCount: count,
          amount: amount,
          operationNumber: manualForm.operationNumber || `MANUAL-${Date.now().toString().slice(-4)}`
        });
      }

      setManualForm(prev => ({
        ...prev,
        isSubmitting: false,
        message: `¡Guardado con éxito! Se emitieron ${totalToGive} cartones.`
      }));

      loadReceipts();

      setTimeout(() => {
        setShowManualModal(false);
        setManualForm({
          name: '',
          phone: '',
          cardsCount: 3,
          operationNumber: '',
          isSubmitting: false,
          message: null
        });
      }, 900);
    } catch (err) {
      console.error(err);
      setManualForm(prev => ({
        ...prev,
        isSubmitting: false,
        message: "Error al guardar en Supabase: " + err.message
      }));
    }
  };

  // Métricas
  const totalAmount = receipts.reduce((sum, r) => sum + (parseFloat(r.amount) || 0), 0);
  const totalCards = receipts.reduce((sum, r) => sum + (parseInt(r.cards_count) || 0), 0);
  const pendingCount = receipts.filter(r => r.status === 'pending').length;
  const approvedCount = receipts.filter(r => r.status === 'approved').length;
  const rejectedCount = receipts.filter(r => r.status === 'rejected').length;

  // Filtrado
  const filteredReceipts = receipts.filter(r => {
    if (receiptStatusFilter !== 'all' && r.status !== receiptStatusFilter) {
      return false;
    }
    if (!searchFilter.trim()) return true;
    const query = searchFilter.toLowerCase();
    return (
      r.player_name?.toLowerCase().includes(query) ||
      r.player_phone?.toLowerCase().includes(query) ||
      r.operation_number?.toLowerCase().includes(query) ||
      r.seller_name?.toLowerCase().includes(query)
    );
  });

  const manualBonus = manualForm.cardsCount >= 3 ? 1 : 0; // Máxima promo: 1 cartón de regalo por $3.000 (3+1)
  const manualTotalCards = manualForm.cardsCount + manualBonus;

  return (
    <div>
      {/* Banner Superior */}
      <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-clipboard-check" style={{ color: 'var(--accent-cyan)', marginRight: '10px' }}></i>
              Panel de Registros y Control de Pagos
            </h1>
            <p className="hero-description">
              Todos los registros son <strong>100% reales</strong> y están guardados en tu base de datos Supabase. Los comprobantes públicos quedan como <strong>Pendientes</strong> y no participan del sorteo hasta que los apruebes.
            </p>
          </div>

          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', alignItems: 'center' }}>
            <button 
              className="btn btn-primary"
              onClick={() => setShowManualModal(true)}
              style={{ fontWeight: '800' }}
            >
              <i className="fa-solid fa-user-plus"></i>
              ➕ Cargar Jugador Manualmente
            </button>

            <button className="btn btn-secondary btn-sm" onClick={loadReceipts} title="Refrescar lista desde Supabase">
              <i className={`fa-solid fa-rotate ${loading ? 'fa-spin' : ''}`}></i>
              Actualizar
            </button>

            <button
              type="button"
              className="btn btn-sm"
              onClick={handleClearAllTestData}
              style={{
                background: 'rgba(239, 68, 68, 0.12)',
                color: '#ef4444',
                border: '1.5px solid rgba(239, 68, 68, 0.4)',
                fontWeight: '800',
                fontSize: '0.82rem',
                padding: '6px 14px',
                display: 'flex',
                alignItems: 'center',
                gap: '6px',
                cursor: 'pointer'
              }}
              title="Borrar todos los comprobantes y cartones de prueba para iniciar el evento real en $0"
            >
              <i className="fa-solid fa-broom"></i>
              <span>Poner a Cero</span>
            </button>
          </div>
        </div>
      </div>

      {/* Barra de Estado Oficial de Ventas (Abrir / Cerrar) */}
      <div style={{
        background: isSalesOpen 
          ? 'linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(15, 23, 42, 0.85))' 
          : 'linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(15, 23, 42, 0.85))',
        border: isSalesOpen ? '1.5px solid rgba(16, 185, 129, 0.45)' : '1.5px solid rgba(239, 68, 68, 0.55)',
        borderRadius: 'var(--radius-lg)',
        padding: '12px 18px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        flexWrap: 'wrap',
        gap: '12px',
        marginBottom: '20px'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
          <span style={{
            width: '10px',
            height: '10px',
            borderRadius: '50%',
            backgroundColor: isSalesOpen ? '#10b981' : '#ef4444',
            boxShadow: isSalesOpen ? '0 0 10px #10b981' : '0 0 10px #ef4444',
            flexShrink: 0
          }}></span>
          <div>
            <div style={{ fontSize: '0.88rem', fontWeight: '800', color: '#ffffff' }}>
              Venta Oficial de Cartones: <strong style={{ color: isSalesOpen ? '#34d399' : '#f87171' }}>{isSalesOpen ? 'ABIERTA' : 'CERRADA'}</strong>
            </div>
            <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>
              {isSalesOpen ? 'Las vendedoras y el sistema pueden emitir nuevos cartones.' : 'La venta está pausada. Nadie puede emitir nuevos cartones.'}
            </div>
          </div>
        </div>

        <button
          type="button"
          onClick={() => toggleSalesStatus(!isSalesOpen)}
          className="btn btn-sm"
          style={{
            background: isSalesOpen ? 'linear-gradient(135deg, #ef4444, #dc2626)' : 'linear-gradient(135deg, #10b981, #059669)',
            color: '#ffffff',
            border: 'none',
            borderRadius: 'var(--radius-md)',
            fontWeight: '800',
            padding: '8px 16px',
            fontSize: '0.84rem',
            display: 'inline-flex',
            alignItems: 'center',
            gap: '8px',
            boxShadow: isSalesOpen ? '0 3px 12px rgba(239, 68, 68, 0.3)' : '0 3px 12px rgba(16, 185, 129, 0.3)',
            cursor: 'pointer'
          }}
        >
          <i className={`fa-solid ${isSalesOpen ? 'fa-lock' : 'fa-lock-open'}`}></i>
          <span>{isSalesOpen ? 'Cerrar Venta de Cartones' : 'Abrir / Habilitar Venta'}</span>
        </button>
      </div>

      {/* Tarjetas de Métricas Reales */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginBottom: '24px' }}>
        <div style={{ background: 'var(--bg-surface)', padding: '18px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>TOTAL RECAUDADO</div>
          <div style={{ fontSize: '1.6rem', fontWeight: '900', color: 'var(--accent-green)', fontFamily: 'var(--font-numbers)' }}>
            ${totalAmount.toLocaleString()}
          </div>
        </div>

        <div style={{ background: 'var(--bg-surface)', padding: '18px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>JUGADORES REGISTRADOS</div>
          <div style={{ fontSize: '1.6rem', fontWeight: '900', color: 'var(--accent-cyan)', fontFamily: 'var(--font-numbers)' }}>
            {receipts.length}
          </div>
        </div>

        <div style={{ background: 'var(--bg-surface)', padding: '18px', borderRadius: 'var(--radius-md)', border: pendingCount > 0 ? '1.5px solid var(--accent-gold)' : '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>🟡 PENDIENTES DE REVISIÓN</div>
          <div style={{ fontSize: '1.6rem', fontWeight: '900', color: 'var(--accent-gold)', fontFamily: 'var(--font-numbers)' }}>
            {pendingCount}
          </div>
        </div>

        <div style={{ background: 'var(--bg-surface)', padding: '18px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
          <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '4px' }}>TOTAL CARTONES EMITIDOS</div>
          <div style={{ fontSize: '1.6rem', fontWeight: '900', color: 'var(--accent-gold)', fontFamily: 'var(--font-numbers)' }}>
            {totalCards}
          </div>
        </div>
      </div>

      {/* Selector de Pestañas Administrativas */}
      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
        <button 
          className={`btn ${adminSubTab === 'receipts' ? 'btn-primary' : 'btn-secondary'}`}
          onClick={() => setAdminSubTab('receipts')}
          style={{ fontWeight: '800' }}
        >
          <i className="fa-solid fa-users"></i>
          Jugadores Registrados ({receipts.length})
          {pendingCount > 0 && (
            <span style={{ marginLeft: '6px', background: 'var(--accent-gold)', color: '#000', padding: '1px 6px', borderRadius: '10px', fontSize: '0.72rem', fontWeight: '900' }}>
              {pendingCount} pendientes
            </span>
          )}
        </button>

        <button 
          className={`btn ${adminSubTab === 'sellers' ? 'btn-primary' : 'btn-secondary'}`}
          onClick={() => setAdminSubTab('sellers')}
          style={{ fontWeight: '800', border: adminSubTab === 'sellers' ? '1px solid var(--accent-cyan)' : undefined }}
        >
          <i className="fa-solid fa-user-tag" style={{ color: 'var(--accent-cyan)' }}></i>
          Vendedores y Promotores ({sellers.length})
        </button>
      </div>

      {/* ========================================================
          PESTAÑA 1: JUGADORES Y COMPROBANTES
         ======================================================== */}
      {adminSubTab === 'receipts' && (
        <div className="app-card">
          <div className="card-header" style={{ flexWrap: 'wrap', gap: '12px' }}>
            <div>
              <h3 className="card-title">
                <i className="fa-solid fa-database" style={{ color: 'var(--accent-teal)' }}></i>
                Registros en Base de Datos ({filteredReceipts.length})
              </h3>
            </div>

            {/* Barra de Filtros de Estado y Búsqueda */}
            <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', alignItems: 'center' }}>
              <div style={{ display: 'flex', gap: '6px', background: 'rgba(0,0,0,0.25)', padding: '4px', borderRadius: 'var(--radius-md)' }}>
                <button 
                  type="button"
                  className={`btn btn-sm ${receiptStatusFilter === 'all' ? 'btn-primary' : 'btn-secondary'}`}
                  onClick={() => setReceiptStatusFilter('all')}
                  style={{ fontSize: '0.78rem', padding: '4px 10px' }}
                >
                  Todos ({receipts.length})
                </button>
                <button 
                  type="button"
                  className={`btn btn-sm ${receiptStatusFilter === 'pending' ? 'btn-primary' : 'btn-secondary'}`}
                  onClick={() => setReceiptStatusFilter('pending')}
                  style={{ 
                    fontSize: '0.78rem', 
                    padding: '4px 10px',
                    backgroundColor: receiptStatusFilter === 'pending' ? 'var(--accent-gold)' : undefined,
                    color: receiptStatusFilter === 'pending' ? '#000' : (pendingCount > 0 ? 'var(--accent-gold)' : undefined),
                    border: pendingCount > 0 ? '1px solid var(--accent-gold)' : undefined,
                    fontWeight: pendingCount > 0 ? '800' : 'normal'
                  }}
                >
                  🟡 Pendientes ({pendingCount})
                </button>
                <button 
                  type="button"
                  className={`btn btn-sm ${receiptStatusFilter === 'approved' ? 'btn-primary' : 'btn-secondary'}`}
                  onClick={() => setReceiptStatusFilter('approved')}
                  style={{ fontSize: '0.78rem', padding: '4px 10px' }}
                >
                  ✅ Aprobados ({approvedCount})
                </button>
                <button 
                  type="button"
                  className={`btn btn-sm ${receiptStatusFilter === 'rejected' ? 'btn-primary' : 'btn-secondary'}`}
                  onClick={() => setReceiptStatusFilter('rejected')}
                  style={{ fontSize: '0.78rem', padding: '4px 10px' }}
                >
                  ❌ Rechazados ({rejectedCount})
                </button>
              </div>

              <input 
                type="text"
                placeholder="🔍 Buscar por nombre, tel o ref..."
                className="form-input"
                style={{ fontSize: '0.85rem', padding: '6px 12px', width: '220px' }}
                value={searchFilter}
                onChange={(e) => setSearchFilter(e.target.value)}
              />

              <button
                type="button"
                className="btn btn-secondary btn-sm"
                onClick={handleExportAdminExcel}
                style={{
                  fontSize: '0.82rem',
                  padding: '6px 14px',
                  fontWeight: '800',
                  color: '#10b981',
                  border: '1.5px solid #10b981',
                  background: 'rgba(16, 185, 129, 0.12)',
                  display: 'flex',
                  alignItems: 'center',
                  gap: '6px',
                  cursor: 'pointer'
                }}
                title="Descargar la planilla oficial de todas las ventas registradas en formato Excel (.CSV compatible nativo)"
              >
                <i className="fa-solid fa-file-excel" style={{ fontSize: '0.95rem', color: '#10b981' }}></i>
                <span>Descargar Excel</span>
              </button>
            </div>
          </div>

          {loading ? (
            <div style={{ textAlign: 'center', padding: '30px', color: 'var(--text-muted)' }}>
              <i className="fa-solid fa-circle-notch fa-spin" style={{ fontSize: '1.5rem', marginBottom: '8px' }}></i>
              <div>Consultando base de datos Supabase...</div>
            </div>
          ) : filteredReceipts.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '36px', color: 'var(--text-dim)' }}>
              <i className="fa-solid fa-user-xmark" style={{ fontSize: '2.5rem', marginBottom: '10px', display: 'block', opacity: 0.4 }}></i>
              <div style={{ fontWeight: '700', fontSize: '1.05rem', color: 'var(--text-main)' }}>No hay comprobantes en esta vista.</div>
              <div style={{ fontSize: '0.85rem', marginTop: '6px', color: 'var(--text-muted)' }}>
                {receiptStatusFilter !== 'all' ? 'Prueba seleccionando la pestaña "Todos" o limpiando el buscador.' : 'Usa el botón "➕ Cargar Jugador Manualmente" arriba para registrar jugadores.'}
              </div>
            </div>
          ) : (
            <div style={{ overflowX: 'auto' }}>
              <table className="info-table">
                <thead>
                  <tr>
                    <th>Fecha</th>
                    <th>Jugador</th>
                    <th>Teléfono</th>
                    <th>Monto</th>
                    <th>Cartones</th>
                    <th>Operación / Vendedor</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredReceipts.map((r) => (
                    <tr key={r.id} style={{ background: r.status === 'pending' ? 'rgba(245, 158, 11, 0.05)' : undefined }}>
                      <td style={{ fontSize: '0.8rem', color: 'var(--text-dim)' }}>
                        {new Date(r.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(r.created_at).toLocaleDateString()}
                      </td>
                      <td>
                        <strong>{r.player_name}</strong>
                        {r.image_url && (
                          <span style={{ marginLeft: '6px', fontSize: '0.75rem', color: 'var(--accent-teal)' }} title="Tiene comprobante adjunto">
                            📎
                          </span>
                        )}
                      </td>
                      <td style={{ fontSize: '0.85rem' }}>{r.player_phone || '--'}</td>
                      <td style={{ fontWeight: '800', color: 'var(--accent-green)', fontFamily: 'var(--font-numbers)' }}>
                        ${parseFloat(r.amount).toLocaleString()}
                      </td>
                      <td>
                        <span className="brand-badge" style={{ backgroundColor: r.status === 'pending' ? 'var(--accent-gold)' : 'var(--accent-teal)', color: r.status === 'pending' ? '#000' : '#fff' }}>
                          {r.cards_count} {r.cards_count === 1 ? 'cartón' : 'cartones'}
                        </span>
                      </td>
                      <td>
                        <span className="code-badge" style={{ color: r.seller_name ? 'var(--accent-cyan)' : undefined }}>
                          {r.seller_name ? `👤 ${r.seller_name}` : (r.operation_number || 'Directo')}
                        </span>
                      </td>
                      <td>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
                          <span style={{
                            padding: '3px 8px',
                            borderRadius: 'var(--radius-full)',
                            fontSize: '0.75rem',
                            fontWeight: '700',
                            textAlign: 'center',
                            backgroundColor: r.status === 'approved' ? 'rgba(16, 185, 129, 0.2)' : r.status === 'pending' ? 'rgba(245, 158, 11, 0.2)' : 'rgba(244, 63, 94, 0.2)',
                            color: r.status === 'approved' ? 'var(--accent-green)' : r.status === 'pending' ? 'var(--accent-gold)' : 'var(--accent-rose)',
                            border: `1px solid ${r.status === 'approved' ? 'var(--accent-green)' : r.status === 'pending' ? 'var(--accent-gold)' : 'var(--accent-rose)'}`
                          }}>
                            {r.status === 'approved' ? '✓ Aprobado' : r.status === 'pending' ? '🟡 Pendiente' : '❌ Rechazado'}
                          </span>
                          {r.notes && (
                            <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', maxWidth: '140px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={r.notes}>
                              {r.notes}
                            </span>
                          )}
                        </div>
                      </td>
                      <td>
                        <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
                          {r.status === 'pending' && (
                            <>
                              <button 
                                className="btn btn-sm"
                                style={{ background: 'var(--accent-green)', color: '#000', fontWeight: '800', border: 'none', padding: '4px 10px' }}
                                onClick={() => handleApprove(r.id)}
                                disabled={actionLoadingId === r.id}
                                title="Aprobar pago y activar cartones para el sorteo"
                              >
                                {actionLoadingId === r.id ? <i className="fa-solid fa-spinner fa-spin"></i> : <><i className="fa-solid fa-check"></i> Aprobar</>}
                              </button>
                              <button 
                                className="btn btn-sm btn-secondary"
                                style={{ color: 'var(--accent-rose)', padding: '4px 8px' }}
                                onClick={() => handleReject(r.id)}
                                disabled={actionLoadingId === r.id}
                                title="Rechazar comprobante"
                              >
                                <i className="fa-solid fa-xmark"></i>
                              </button>
                            </>
                          )}

                          {r.status === 'rejected' && (
                            <button 
                              className="btn btn-sm btn-secondary"
                              style={{ color: 'var(--accent-green)', padding: '4px 8px', fontSize: '0.75rem' }}
                              onClick={() => handleApprove(r.id)}
                              disabled={actionLoadingId === r.id}
                              title="Reactivar comprobante como aprobado"
                            >
                              <i className="fa-solid fa-rotate-left"></i> Reaprobar
                            </button>
                          )}

                          <button 
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleViewReceiptCards(r)}
                            title="Ver los cartones 3x9 asignados y detalles"
                          >
                            <i className="fa-solid fa-eye"></i> Cartones
                          </button>

                          <button 
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleDirectDownloadPdf(r)}
                            disabled={pdfLoadingId === r.id}
                            title="Descargar PDF imprimible (A4) de los cartones"
                            style={{ color: 'var(--accent-gold)', border: '1px solid rgba(245, 158, 11, 0.4)', padding: '4px 8px' }}
                          >
                            {pdfLoadingId === r.id ? <i className="fa-solid fa-spinner fa-spin"></i> : <><i className="fa-solid fa-file-pdf"></i> PDF</>}
                          </button>

                          <button 
                            className="btn btn-secondary btn-sm"
                            style={{ color: '#f87171' }}
                            onClick={() => handleDeleteReceipt(r.id, r.player_name)}
                            title="Eliminar registro"
                          >
                            <i className="fa-solid fa-trash"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {/* ========================================================
          PESTAÑA 2: GESTIÓN DE VENDEDORES / PROMOTORES
         ======================================================== */}
      {adminSubTab === 'sellers' && (
        <div className="app-card">
          <div className="card-header" style={{ flexWrap: 'wrap', gap: '10px' }}>
            <div>
              <h3 className="card-title">
                <i className="fa-solid fa-user-tag" style={{ color: 'var(--accent-cyan)' }}></i>
                Vendedores y Promotores Habilitados ({sellers.length})
              </h3>
              <p style={{ margin: '4px 0 0', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
                Los usuarios habilitados aquí pueden ingresar con su teléfono y PIN para registrar nuevos compradores y vender cartones.
              </p>
            </div>

            <div style={{ display: 'flex', gap: '8px' }}>
              <button 
                className="btn btn-primary"
                onClick={handleOpenNewSeller}
                style={{ fontWeight: '800' }}
              >
                <i className="fa-solid fa-plus"></i>
                Habilitar Nuevo Vendedor
              </button>

              <button className="btn btn-secondary btn-sm" onClick={loadSellers} title="Actualizar lista">
                <i className={`fa-solid fa-rotate ${loadingSellers ? 'fa-spin' : ''}`}></i>
              </button>
            </div>
          </div>

          {loadingSellers ? (
            <div style={{ textAlign: 'center', padding: '30px', color: 'var(--text-muted)' }}>
              <i className="fa-solid fa-circle-notch fa-spin" style={{ fontSize: '1.5rem', marginBottom: '8px' }}></i>
              <div>Cargando vendedores...</div>
            </div>
          ) : sellers.length === 0 ? (
            <div style={{ textAlign: 'center', padding: '36px', color: 'var(--text-dim)' }}>
              <i className="fa-solid fa-users-slash" style={{ fontSize: '2.5rem', marginBottom: '10px', display: 'block', opacity: 0.4 }}></i>
              <div style={{ fontWeight: '700', fontSize: '1.05rem', color: 'var(--text-main)' }}>No tienes vendedores dados de alta aún.</div>
              <div style={{ fontSize: '0.85rem', marginTop: '6px', color: 'var(--text-muted)' }}>
                Haz clic en <strong>"Habilitar Nuevo Vendedor"</strong> para autorizar a tus promotores con un PIN de acceso.
              </div>
            </div>
          ) : (
            <div style={{ overflowX: 'auto' }}>
              <table className="info-table">
                <thead>
                  <tr>
                    <th>Vendedor / Promotor</th>
                    <th>WhatsApp / Teléfono</th>
                    <th>PIN Acceso</th>
                    <th>Estado</th>
                    <th>Compradores</th>
                    <th>Cartones Vendidos</th>
                    <th>Total Recaudado</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {sellers.map((s) => (
                    <tr key={s.id}>
                      <td>
                        <strong>{s.nombre}</strong>
                        {s.notas && <div style={{ fontSize: '0.75rem', color: 'var(--text-dim)' }}>{s.notas}</div>}
                      </td>
                      <td style={{ fontSize: '0.85rem', color: 'var(--accent-teal)' }}>{s.telefono}</td>
                      <td>
                        <span className="code-badge" style={{ fontWeight: '900', letterSpacing: '1px' }}>
                          🔑 {s.pin}
                        </span>
                      </td>
                      <td>
                        <span style={{
                          padding: '3px 8px',
                          borderRadius: 'var(--radius-full)',
                          fontSize: '0.75rem',
                          fontWeight: '700',
                          backgroundColor: s.is_active ? 'rgba(16, 185, 129, 0.2)' : 'rgba(244, 63, 94, 0.2)',
                          color: s.is_active ? 'var(--accent-green)' : 'var(--accent-rose)',
                          border: `1px solid ${s.is_active ? 'var(--accent-green)' : 'var(--accent-rose)'}`
                        }}>
                          {s.is_active ? '✓ Activo' : 'Pausado'}
                        </span>
                      </td>
                      <td style={{ fontWeight: '800' }}>{s.total_ventas}</td>
                      <td>
                        <span className="brand-badge" style={{ backgroundColor: 'rgba(6, 182, 212, 0.15)', color: 'var(--accent-cyan)' }}>
                          {s.total_cartones} cartones
                        </span>
                      </td>
                      <td style={{ fontWeight: '800', color: 'var(--accent-green)', fontFamily: 'var(--font-numbers)' }}>
                        ${(parseFloat(s.total_recaudado) || 0).toLocaleString()}
                      </td>
                      <td>
                        <div style={{ display: 'flex', gap: '6px' }}>
                          <button
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleSendSellerWhatsApp(s)}
                            title="Enviar credenciales de acceso por WhatsApp"
                            style={{ color: '#25D366' }}
                          >
                            <i className="fa-brands fa-whatsapp"></i> Credenciales
                          </button>

                          <button 
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleEditSeller(s)}
                            title="Editar datos del vendedor"
                          >
                            <i className="fa-solid fa-pen-to-square"></i>
                          </button>

                          <button 
                            className="btn btn-secondary btn-sm"
                            onClick={() => handleToggleSellerStatus(s)}
                            title={s.is_active ? 'Desactivar vendedor' : 'Activar vendedor'}
                            style={{ color: s.is_active ? '#f59e0b' : 'var(--accent-green)' }}
                          >
                            <i className={`fa-solid ${s.is_active ? 'fa-ban' : 'fa-check'}`}></i>
                          </button>

                          <button 
                            className="btn btn-secondary btn-sm"
                            style={{ color: '#f87171' }}
                            onClick={() => handleDeleteSeller(s)}
                            title="Eliminar vendedor"
                          >
                            <i className="fa-solid fa-trash"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {/* Modal / Formulario Flotante de Carga Manual */}
      {showManualModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0, 0, 0, 0.75)',
          backdropFilter: 'blur(6px)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 9999,
          padding: '20px'
        }}>
          <div className="app-card" style={{ maxWidth: '520px', width: '100%', animation: 'popIn 0.25s ease' }}>
            <div className="card-header">
              <h3 className="card-title">
                <i className="fa-solid fa-user-plus" style={{ color: 'var(--accent-teal)' }}></i>
                Cargar Nuevo Jugador en Supabase
              </h3>
              <button 
                className="btn btn-secondary btn-sm" 
                onClick={() => setShowManualModal(false)}
              >
                <i className="fa-solid fa-xmark"></i>
              </button>
            </div>

            <form onSubmit={handleSaveManualPlayer} style={{ display: 'flex', flexDirection: 'column', gap: '14px', marginTop: '12px' }}>
              <div className="form-group">
                <label className="form-label">Nombre y Apellido del Jugador *</label>
                <input 
                  type="text" 
                  className="form-input"
                  placeholder="Ej: Marcelo Fernández"
                  value={manualForm.name}
                  onChange={(e) => setManualForm(prev => ({ ...prev, name: e.target.value }))}
                  required
                />
              </div>

              <div className="form-group">
                <label className="form-label">WhatsApp o Teléfono (Opcional)</label>
                <input 
                  type="text" 
                  className="form-input"
                  placeholder="Ej: +54 9 11 3322-1144"
                  value={manualForm.phone}
                  onChange={(e) => setManualForm(prev => ({ ...prev, phone: e.target.value }))}
                />
              </div>

              <div className="auth-grid-2">
                <div className="form-group">
                  <label className="form-label">Cartones a Comprar</label>
                  <input 
                    type="number"
                    min="1"
                    max="30"
                    className="form-input"
                    value={manualForm.cardsCount}
                    onChange={(e) => setManualForm(prev => ({ ...prev, cardsCount: Math.max(1, parseInt(e.target.value || '1', 10)) }))}
                    required
                  />
                </div>

                <div className="form-group">
                  <label className="form-label">Monto Abonado ($)</label>
                  <input 
                    type="text"
                    className="form-input"
                    value={`$${(manualForm.cardsCount * 1000).toLocaleString()}`}
                    readOnly
                    style={{ background: 'rgba(0,0,0,0.3)', color: 'var(--accent-gold)', fontWeight: '800' }}
                  />
                </div>
              </div>

              {/* Detalle de Cartones a Emitir */}
              <div style={{ background: 'rgba(16, 185, 129, 0.12)', border: '1px solid rgba(16, 185, 129, 0.3)', padding: '10px 14px', borderRadius: 'var(--radius-md)', fontSize: '0.85rem' }}>
                <div style={{ color: 'var(--accent-green)', fontWeight: '800', marginBottom: '2px' }}>
                  ⚡ Total de cartones que se guardarán en Supabase:
                </div>
                <div>
                  <strong>{manualTotalCards} Cartones Oficiales</strong> ({manualForm.cardsCount} comprados {manualBonus > 0 ? `+ ${manualBonus} de regalo por Promo 3+1` : ''})
                </div>
              </div>

              <div className="form-group">
                <label className="form-label">Detalle / N° de Operación (Opcional)</label>
                <input 
                  type="text" 
                  className="form-input"
                  placeholder="Ej: Efectivo, Transferencia Banco Nación, etc."
                  value={manualForm.operationNumber}
                  onChange={(e) => setManualForm(prev => ({ ...prev, operationNumber: e.target.value }))}
                />
              </div>

              {manualForm.message && (
                <div style={{ textAlign: 'center', fontSize: '0.85rem', color: 'var(--accent-green)', fontWeight: '700' }}>
                  {manualForm.message}
                </div>
              )}

              <div style={{ display: 'flex', gap: '10px', marginTop: '6px' }}>
                <button 
                  type="button" 
                  className="btn btn-secondary" 
                  style={{ flex: 1 }}
                  onClick={() => setShowManualModal(false)}
                >
                  Cancelar
                </button>

                <button 
                  type="submit" 
                  className="btn btn-primary" 
                  style={{ flex: 2, fontWeight: '800' }}
                  disabled={manualForm.isSubmitting}
                >
                  <i className={`fa-solid ${manualForm.isSubmitting ? 'fa-spinner fa-spin' : 'fa-check'}`}></i>
                  {manualForm.isSubmitting ? 'Guardando...' : 'Guardar y Emitir Cartones'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Modal de Habilitación / Edición de Vendedor */}
      {showSellerModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: 'rgba(0, 0, 0, 0.75)',
          backdropFilter: 'blur(6px)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          zIndex: 9999,
          padding: '20px'
        }}>
          <div className="app-card" style={{ maxWidth: '480px', width: '100%', animation: 'popIn 0.25s ease' }}>
            <div className="card-header">
              <h3 className="card-title">
                <i className="fa-solid fa-user-tag" style={{ color: 'var(--accent-cyan)' }}></i>
                {editingSeller ? 'Editar Vendedor / Promotor' : 'Habilitar Nuevo Vendedor'}
              </h3>
              <button 
                className="btn btn-secondary btn-sm" 
                onClick={() => setShowSellerModal(false)}
              >
                <i className="fa-solid fa-xmark"></i>
              </button>
            </div>

            <form onSubmit={handleSaveSeller} style={{ display: 'flex', flexDirection: 'column', gap: '14px', marginTop: '12px' }}>
              <div className="form-group">
                <label className="form-label">Nombre y Apellido del Vendedor *</label>
                <input 
                  type="text" 
                  className="form-input"
                  placeholder="Ej: Laura Benítez"
                  value={sellerForm.nombre}
                  onChange={(e) => setSellerForm({ ...sellerForm, nombre: e.target.value })}
                  required
                />
              </div>

              <div className="form-group">
                <label className="form-label">WhatsApp o Teléfono (Identificador de acceso) *</label>
                <input 
                  type="text" 
                  className="form-input"
                  placeholder="Ej: 3875112233"
                  value={sellerForm.telefono}
                  onChange={(e) => setSellerForm({ ...sellerForm, telefono: e.target.value })}
                  required
                />
              </div>

              <div className="auth-grid-2">
                <div className="form-group">
                  <label className="form-label">PIN Numérico de Acceso *</label>
                  <input 
                    type="text" 
                    className="form-input"
                    placeholder="Ej: 1234"
                    maxLength="8"
                    value={sellerForm.pin}
                    onChange={(e) => setSellerForm({ ...sellerForm, pin: e.target.value.replace(/[^0-9]/g, '') })}
                    required
                    style={{ fontWeight: '900', letterSpacing: '2px', textAlign: 'center' }}
                  />
                </div>

                <div className="form-group" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                  <label className="form-label">Estado de la Cuenta</label>
                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', marginTop: '4px', fontSize: '0.88rem' }}>
                    <input 
                      type="checkbox"
                      checked={sellerForm.is_active}
                      onChange={(e) => setSellerForm({ ...sellerForm, is_active: e.target.checked })}
                    />
                    <span style={{ fontWeight: '700', color: sellerForm.is_active ? 'var(--accent-green)' : 'var(--accent-rose)' }}>
                      {sellerForm.is_active ? 'Habilitado para Cargar' : 'Pausado'}
                    </span>
                  </label>
                </div>
              </div>

              <div className="form-group">
                <label className="form-label">Notas o Zona (Opcional)</label>
                <input 
                  type="text" 
                  className="form-input"
                  placeholder="Ej: Punto de venta Centro / Comisión 15%"
                  value={sellerForm.notas}
                  onChange={(e) => setSellerForm({ ...sellerForm, notas: e.target.value })}
                />
              </div>

              <div style={{ background: 'rgba(6, 182, 212, 0.12)', border: '1px solid rgba(6, 182, 212, 0.3)', padding: '10px 14px', borderRadius: 'var(--radius-md)', fontSize: '0.8rem', color: 'var(--text-muted)' }}>
                💡 <strong>¿Cómo ingresa este usuario?</strong> Puede ingresar desde su teléfono entrando a la web y seleccionando la pestaña <strong>"Vendedores"</strong> con su teléfono y este PIN.
              </div>

              <div style={{ display: 'flex', gap: '10px', marginTop: '6px' }}>
                <button 
                  type="button" 
                  className="btn btn-secondary" 
                  style={{ flex: 1 }}
                  onClick={() => setShowSellerModal(false)}
                >
                  Cancelar
                </button>

                <button 
                  type="submit" 
                  className="btn btn-primary" 
                  style={{ flex: 2, fontWeight: '800' }}
                >
                  <i className="fa-solid fa-check"></i>
                  {editingSeller ? 'Actualizar Vendedor' : 'Guardar y Habilitar'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* Detalle de Cartones del Registro Seleccionado */}
      {/* Detalle de Cartones y Comprobante del Registro Seleccionado */}
      {selectedReceipt && (
        <div style={{ marginTop: '24px' }} className="app-card">
          <div className="card-header" style={{ flexWrap: 'wrap', gap: '10px' }}>
            <div>
              <h3 className="card-title">
                <i className="fa-solid fa-ticket" style={{ color: 'var(--accent-gold)' }}></i>
                Registro de {selectedReceipt.player_name} ({receiptCards.length} cartones)
              </h3>
              <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '2px' }}>
                Teléfono: <strong>{selectedReceipt.player_phone || 'Sin registrar'}</strong> | Ref: <code>{selectedReceipt.operation_number || 'Directo'}</code> | Monto: <strong style={{ color: 'var(--accent-green)' }}>${parseFloat(selectedReceipt.amount || 0).toLocaleString()}</strong>
              </div>
            </div>

            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap', alignItems: 'center' }}>
              <button 
                type="button"
                className="btn btn-secondary btn-sm"
                onClick={() => window.downloadCardsPDF && window.downloadCardsPDF(receiptCards, selectedReceipt.player_name)}
                style={{ color: 'var(--accent-gold)', border: '1px solid rgba(245, 158, 11, 0.4)', fontWeight: '700' }}
              >
                <i className="fa-solid fa-file-pdf"></i> Descargar PDF (A4)
              </button>

              <button type="button" className="btn btn-secondary btn-sm" onClick={() => setSelectedReceipt(null)}>
                <i className="fa-solid fa-xmark"></i> Cerrar Vista
              </button>
            </div>
          </div>

          {/* Banner de Estado y Acciones de Aprobación (Método 1) */}
          {selectedReceipt.status === 'pending' ? (
            <div style={{ background: 'rgba(245, 158, 11, 0.12)', border: '1.5px solid var(--accent-gold)', borderRadius: 'var(--radius-md)', padding: '14px 18px', margin: '14px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
              <div>
                <div style={{ color: 'var(--accent-gold)', fontWeight: '800', fontSize: '1rem', display: 'flex', alignItems: 'center', gap: '6px' }}>
                  <i className="fa-solid fa-clock"></i> 🟡 Comprobante Pendiente de Aprobación
                </div>
                <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '2px' }}>
                  Estos {receiptCards.length} cartones <strong>están inactivos</strong>. No participarán del sorteo ni del radar hasta que confirmes la acreditación bancaria.
                </div>
              </div>

              <div style={{ display: 'flex', gap: '10px' }}>
                <button 
                  className="btn"
                  style={{ background: 'var(--accent-green)', color: '#000', fontWeight: '800', border: 'none', padding: '8px 18px', cursor: 'pointer' }}
                  onClick={() => handleApprove(selectedReceipt.id)}
                  disabled={actionLoadingId === selectedReceipt.id}
                >
                  {actionLoadingId === selectedReceipt.id ? <i className="fa-solid fa-spinner fa-spin"></i> : <><i className="fa-solid fa-check"></i> ✅ Aprobar Pago y Activar</>}
                </button>

                <button 
                  className="btn btn-secondary"
                  style={{ color: 'var(--accent-rose)', padding: '8px 14px' }}
                  onClick={() => handleReject(selectedReceipt.id)}
                  disabled={actionLoadingId === selectedReceipt.id}
                >
                  <i className="fa-solid fa-xmark"></i> Rechazar
                </button>
              </div>
            </div>
          ) : selectedReceipt.status === 'approved' ? (
            <div style={{ background: 'rgba(16, 185, 129, 0.1)', border: '1px solid rgba(16, 185, 129, 0.3)', borderRadius: 'var(--radius-md)', padding: '10px 16px', margin: '14px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
              <div style={{ color: 'var(--accent-green)', fontWeight: '700', fontSize: '0.9rem' }}>
                ✓ Comprobante Aprobado — Los {receiptCards.length} cartones están 100% activos y participan en el sorteo y radar.
              </div>
              <button 
                className="btn btn-secondary btn-sm"
                style={{ color: 'var(--accent-rose)', fontSize: '0.75rem' }}
                onClick={() => handleReject(selectedReceipt.id)}
              >
                Pausar / Rechazar
              </button>
            </div>
          ) : (
            <div style={{ background: 'rgba(244, 63, 94, 0.1)', border: '1px solid rgba(244, 63, 94, 0.3)', borderRadius: 'var(--radius-md)', padding: '10px 16px', margin: '14px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
              <div>
                <div style={{ color: 'var(--accent-rose)', fontWeight: '700', fontSize: '0.9rem' }}>
                  ✕ Comprobante Rechazado — Cartones desactivados (No juegan).
                </div>
                {selectedReceipt.notes && (
                  <div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginTop: '2px' }}>
                    Motivo: <em>{selectedReceipt.notes}</em>
                  </div>
                )}
              </div>
              <button 
                className="btn btn-sm"
                style={{ background: 'var(--accent-green)', color: '#000', fontWeight: '800', fontSize: '0.78rem' }}
                onClick={() => handleApprove(selectedReceipt.id)}
              >
                ✓ Reaprobar
              </button>
            </div>
          )}

          {/* Vista Previa de Imagen de Comprobante si existe */}
          {selectedReceipt.image_url && (
            <div style={{ background: 'rgba(0,0,0,0.25)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: '14px', marginBottom: '16px' }}>
              <div style={{ fontSize: '0.82rem', fontWeight: '700', color: 'var(--text-muted)', marginBottom: '8px', display: 'flex', alignItems: 'center', gap: '6px' }}>
                <i className="fa-solid fa-image" style={{ color: 'var(--accent-cyan)' }}></i>
                Foto / Captura del Comprobante Adjunto:
              </div>
              <a href={selectedReceipt.image_url} target="_blank" rel="noopener noreferrer" title="Clic para abrir en tamaño completo">
                <img 
                  src={selectedReceipt.image_url} 
                  alt="Comprobante" 
                  style={{ maxHeight: '220px', maxWidth: '100%', objectFit: 'contain', borderRadius: 'var(--radius-sm)', border: '1px solid var(--border-subtle)', cursor: 'zoom-in' }} 
                />
              </a>
              <div style={{ fontSize: '0.75rem', color: 'var(--text-dim)', marginTop: '4px' }}>
                Haz clic en la imagen para verla en pantalla completa en otra pestaña.
              </div>
            </div>
          )}

          {loadingCards ? (
            <div style={{ textAlign: 'center', padding: '20px' }}>Cargando cartones desde Supabase...</div>
          ) : receiptCards.length === 0 ? (
            <div style={{ color: 'var(--text-dim)', textAlign: 'center', padding: '20px' }}>No hay cartones asociados.</div>
          ) : (
            <div className="cards-container" style={{ marginTop: '12px' }}>
              {receiptCards.map((card, idx) => {
                const isPromo = card.es_promo || (idx === 3 && receiptCards.length === 4);
                const themeClass = 'card-theme-ruby';
                return (
                <div key={card.id} className={`bingo-card-3x9-wrapper ${themeClass}`} style={{ opacity: card.is_active === false ? 0.75 : 1 }}>
                  <div className="card-header-bar">
                    <span className="card-title-text">Cartón #{idx + 1} ({selectedReceipt.player_name})</span>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
                      {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>
                      )}
                      {card.is_active === false && (
                        <span style={{ fontSize: '0.7rem', padding: '1px 6px', borderRadius: '4px', background: 'rgba(245, 158, 11, 0.2)', color: 'var(--accent-gold)', border: '1px solid var(--accent-gold)', fontWeight: '800' }}>
                          🟡 INACTIVO
                        </span>
                      )}
                      <span className="card-serial-tag">N°: {card.card_code}</span>
                    </div>
                  </div>
                  <div className="teal-bingo-ticket">
                    <div className="ticket-grid-3x9">
                      {card.grid.map((row, rIdx) => (
                        <div key={rIdx} className="ticket-row">
                          {row.map((cellNum, cIdx) => (
                            <div key={cIdx} className={`ticket-cell ${cellNum === null ? 'empty' : ''}`}>
                              {cellNum !== null && <span>{cellNum}</span>}
                            </div>
                          ))}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              );
            })}
            </div>
          )}
        </div>
      )}
    </div>
  );
}

window.AdminReceipts = AdminReceipts;