// Componente: Selector Interactivo de Cartones Favoritos (Card Picker)
const { useState, useMemo, useEffect, useCallback } = React;

function CardSelectorModal({
  isOpen = false,
  onClose,
  onConfirmSelection,
  initialSelectedCards = [],
  availableCatalog = null
}) {
  if (!isOpen) return null;

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

  const [selectedCards, setSelectedCards] = useState(() => initialSelectedCards || []);
  const [luckyNumberFilter, setLuckyNumberFilter] = useState('');
  const [playerName, setPlayerName] = useState('');
  const [playerPhone, setPlayerPhone] = useState('');
  const [hideSoldCards, setHideSoldCards] = useState(() => {
    try {
      const urlParams = new URLSearchParams(window.location.search);
      return urlParams.get('hide_sold') === '1' || urlParams.get('hide_sold') === 'true';
    } catch (e) {
      return false;
    }
  });
  const [catalogSeriesOffset, setCatalogSeriesOffset] = useState(0);

  // Mapa reactivo de cartones vendidos en tiempo real
  const soldCardsMap = useMemo(() => {
    const map = {};
    (room.realRoomCards || []).forEach(c => {
      const code = c.id || c.card_code;
      if (code) {
        const pName = c.playerName || c.player_name || (Array.isArray(c.usuarios) ? c.usuarios[0]?.nombre : c.usuarios?.nombre) || 'Comprador';
        const info = {
          code,
          playerName: pName,
          playerPhone: c.playerPhone || c.player_phone || '',
          sellerName: c.sellerName || c.seller_name || '',
          esPromo: c.esPromo || c.es_promo
        };
        map[code] = info;
        map[code.toLowerCase()] = info;
        map[code.toUpperCase()] = info;
      }
    });
    return map;
  }, [room.realRoomCards]);

  // Generador de tanda de cartones para el catálogo con serie determinista oficial
  const generateBatch = useCallback((total = 40, offset = 0) => {
    const pool = [];
    const seenCodes = new Set();
    for (let i = 1; i <= total; i++) {
      const idx = i + offset;
      if (window.generateSingleCard3x9) {
        const c = window.generateSingleCard3x9(idx);
        pool.push({
          id: c.card_code,
          card_code: c.card_code,
          title: `Cartón #${idx}`,
          grid: c.grid,
          numbers: c.numbers,
          allNumbers: c.allNumbers || c.numbers
        });
        seenCodes.add(c.card_code);
      } else if (window.generateCard3x9) {
        const c = window.generateCard3x9(idx, 15);
        pool.push(c);
        seenCodes.add(c.id || c.card_code);
      }
    }

    // Incorporar cualquier cartón ya vendido en la sala para visibilizar su bloqueo
    (room.realRoomCards || []).forEach(sc => {
      const code = sc.id || sc.card_code;
      if (code && !seenCodes.has(code)) {
        const pName = sc.playerName || sc.player_name || (Array.isArray(sc.usuarios) ? sc.usuarios[0]?.nombre : sc.usuarios?.nombre) || '';
        pool.push({
          id: code,
          card_code: code,
          title: sc.title || (pName ? `Cartón de ${pName}` : `Cartón ${code}`),
          playerName: pName,
          grid: sc.grid,
          numbers: sc.allNumbers || sc.numbers || (sc.grid ? sc.grid.flat().filter(n => n !== null && n !== undefined) : []),
          allNumbers: sc.allNumbers || sc.numbers || (sc.grid ? sc.grid.flat().filter(n => n !== null && n !== undefined) : [])
        });
        seenCodes.add(code);
      }
    });

    return pool;
  }, [room.realRoomCards]);

  // Catálogo base de cartones pregenerados
  const [catalogPool, setCatalogPool] = useState(() => {
    if (availableCatalog && availableCatalog.length > 0) {
      return availableCatalog;
    }
    return generateBatch(40, 0);
  });

  useEffect(() => {
    if (!availableCatalog) {
      setCatalogPool(generateBatch(40, catalogSeriesOffset));
    }
  }, [generateBatch, catalogSeriesOffset, availableCatalog]);

  const handleRefreshCatalog = () => {
    setCatalogSeriesOffset(prev => prev + 40);
  };

  // Contadores en vivo de Disponibles y Vendidos
  const { availableCount, soldCount } = useMemo(() => {
    let sold = 0;
    let available = 0;
    catalogPool.forEach(c => {
      const code = c.id || c.card_code;
      if (soldCardsMap[code]) sold++;
      else available++;
    });
    return { availableCount: available, soldCount: sold };
  }, [catalogPool, soldCardsMap]);

  // Deselección reactiva en tiempo real si un cartón es comprado concurrentemente
  useEffect(() => {
    if (selectedCards.length === 0) return;
    const evicted = [];
    const remaining = selectedCards.filter(c => {
      const code = c.id || c.card_code;
      const soldInfo = soldCardsMap[code];
      if (soldInfo) {
        evicted.push({ code, by: soldInfo.playerName });
        return false;
      }
      return true;
    });

    if (evicted.length > 0) {
      setSelectedCards(remaining);
      const details = evicted.map(e => `${e.code} (vendido a ${e.by})`).join(', ');
      alert(`⚠️ AVISO EN TIEMPO REAL:\nEl/Los siguiente(s) cartón(es) acaban de ser vendidos y fueron retirados de tu selección:\n• ${details}`);
    }
  }, [soldCardsMap]);

  // Números activos de búsqueda
  const activeFilterNums = useMemo(() => {
    if (!luckyNumberFilter.trim()) return [];
    return luckyNumberFilter
      .split(/[\s,.-]+/)
      .map(n => parseInt(n.trim(), 10))
      .filter(n => !isNaN(n) && n >= 1 && n <= 90);
  }, [luckyNumberFilter]);

  // Filtrado por código, comprador, números de la suerte y estado de venta
  const filteredCatalog = useMemo(() => {
    const rawSearch = luckyNumberFilter.trim().toLowerCase();
    return catalogPool.filter(c => {
      const code = (c.id || c.card_code || '').toLowerCase();
      const isSold = Boolean(soldCardsMap[c.id] || soldCardsMap[c.card_code]);
      const soldInfo = soldCardsMap[c.id] || soldCardsMap[c.card_code];
      if (hideSoldCards && isSold) return false;

      if (!rawSearch) return true;

      // 1. Búsqueda directa por código de cartón (ej: "CR-10001" o "10001")
      if (code.includes(rawSearch) || (c.title && c.title.toLowerCase().includes(rawSearch))) {
        return true;
      }

      // 2. Búsqueda por nombre del comprador si ya está vendido (ej: "Sandra", "Alvaro")
      if (c.playerName && c.playerName.toLowerCase().includes(rawSearch)) {
        return true;
      }
      if (soldInfo && soldInfo.playerName && soldInfo.playerName.toLowerCase().includes(rawSearch)) {
        return true;
      }

      // 3. Búsqueda por números de la suerte (1 a 90)
      if (activeFilterNums.length > 0) {
        const allNums = c.allNumbers || (c.grid ? c.grid.flat().filter(n => n !== null && n !== undefined) : []);
        return activeFilterNums.every(fn => allNums.includes(fn));
      }

      return false;
    });
  }, [catalogPool, soldCardsMap, hideSoldCards, luckyNumberFilter, activeFilterNums]);

  // Manejo de Selección con Bloqueo de Cartones Vendidos
  const toggleSelectCard = useCallback((card, e) => {
    if (e && e.preventDefault) e.preventDefault();
    if (e && e.stopPropagation) e.stopPropagation();

    const code = card.id || card.card_code;
    const soldInfo = soldCardsMap[code];
    if (soldInfo) {
      alert(`🔒 CARTÓN BLOQUEADO: El cartón ${code} ya fue vendido a "${soldInfo.playerName}". No puede ser seleccionado.`);
      return;
    }

    setSelectedCards(prev => {
      const isAlready = prev.some(c => (c.id === card.id || c.card_code === card.id || c.id === card.card_code));
      if (isAlready) {
        return prev.filter(c => !(c.id === card.id || c.card_code === card.id || c.id === card.card_code));
      } else {
        if (prev.length >= 20) {
          alert("Puedes seleccionar un máximo de 20 cartones.");
          return prev;
        }
        return [...prev, card];
      }
    });
  }, [soldCardsMap]);

  // Cálculo de Promoción: La máxima promo es 3+1 (4 cartones x $3.000)
  const count = selectedCards.length;
  const isExactThree = count === 3;
  const isFourOrMore = count >= 4;
  const bonusCardsToAward = isExactThree ? 1 : 0;
  const payableCount = isExactThree ? 3 : (isFourOrMore ? count - 1 : count);
  const totalPrice = payableCount * 1000;
  const totalCardsToReceive = isExactThree ? 4 : count;

  const handleConfirm = () => {
    if (selectedCards.length === 0) {
      alert("Por favor selecciona al menos 1 cartón para continuar.");
      return;
    }
    if (onConfirmSelection) {
      onConfirmSelection({
        cards: selectedCards,
        playerName,
        playerPhone,
        totalPrice,
        payableCount,
        totalCardsToReceive,
        bonusCount: bonusCardsToAward
      });
    }
    if (onClose) onClose();
  };

  return (
    <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0, 0, 0, 0.88)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 999999, padding: '16px' }}>
      <div className="app-card" style={{ maxWidth: '960px', width: '100%', maxHeight: '92vh', display: 'flex', flexDirection: 'column', animation: 'popIn 0.3s ease', overflow: 'hidden', border: '1.5px solid var(--accent-gold)' }}>
        
        {/* Cabecera del Selector */}
        <div className="card-header" style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-subtle)', background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95))' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <i className="fa-solid fa-layer-group" style={{ color: 'var(--accent-gold)', fontSize: '1.3rem' }}></i>
              <h3 className="card-title" style={{ margin: 0, fontSize: '1.25rem', fontWeight: '900' }}>
                Catálogo Oficial de Cartones
              </h3>
            </div>
            <span style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>
              Explora las cuadrículas 3x9 o busca por tus números favoritos para que el cliente elija a su gusto.
            </span>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
            {selectedCards.length > 0 && (
              <button 
                type="button"
                className="btn btn-secondary btn-sm"
                onClick={() => setSelectedCards([])}
                style={{ fontSize: '0.78rem', color: '#f87171', border: '1px solid rgba(248, 113, 113, 0.4)', display: 'flex', alignItems: 'center', gap: '6px' }}
                title="Deseleccionar todos los cartones y empezar de cero"
              >
                <i className="fa-solid fa-trash-can"></i>
                <span>Limpiar ({selectedCards.length})</span>
              </button>
            )}

            <button 
              type="button"
              className="btn btn-secondary btn-sm"
              onClick={handleRefreshCatalog}
              title="Generar nuevas combinaciones de números en el catálogo"
              style={{ fontSize: '0.78rem', display: 'flex', alignItems: 'center', gap: '6px' }}
            >
              <i className="fa-solid fa-arrows-rotate"></i>
              <span>Nuevos Números</span>
            </button>

            <button type="button" className="btn btn-secondary btn-sm" onClick={onClose}>
              <i className="fa-solid fa-xmark"></i>
            </button>
          </div>
        </div>

        {/* Barra de Filtro por Números de la Suerte y Cartones Vendidos */}
        <div style={{ padding: '12px 20px', background: 'rgba(0, 0, 0, 0.35)', borderBottom: '1px solid var(--border-subtle)', display: 'flex', gap: '14px', alignItems: 'center', flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: '240px', position: 'relative' }}>
            <i className="fa-solid fa-magnifying-glass" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--accent-gold)' }}></i>
            <input 
              type="text"
              className="input-field"
              placeholder="Buscar por números (ej: 7, 18, 25)..."
              value={luckyNumberFilter}
              onChange={(e) => setLuckyNumberFilter(e.target.value)}
              style={{ width: '100%', paddingLeft: '38px', fontSize: '0.9rem' }}
            />
          </div>

          {/* Toggle para ocultar cartones vendidos */}
          <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer', margin: 0, fontSize: '0.84rem', color: '#ffffff', userSelect: 'none' }}>
            <input
              type="checkbox"
              checked={hideSoldCards}
              onChange={(e) => setHideSoldCards(e.target.checked)}
              style={{ width: '17px', height: '17px', accentColor: '#ef4444', cursor: 'pointer' }}
            />
            <span style={{ fontWeight: '700' }}>
              🔒 Ocultar vendidos
            </span>
          </label>

          <div style={{ display: 'flex', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
            <span style={{ fontSize: '0.82rem', color: '#e2e8f0' }}>
              Disponibles: <strong style={{ color: '#10b981' }}>{availableCount}</strong> | 
              Vendidos: <strong style={{ color: '#ef4444' }}>{soldCount}</strong>
            </span>

            {luckyNumberFilter && (
              <button 
                type="button"
                className="btn btn-secondary btn-sm"
                onClick={() => setLuckyNumberFilter('')}
                style={{ fontSize: '0.75rem', padding: '4px 8px' }}
              >
                Limpiar búsqueda
              </button>
            )}

            {count > 0 && (
              <span className="brand-badge" style={{ backgroundColor: 'rgba(16, 185, 129, 0.2)', color: 'var(--accent-green)', border: '1px solid var(--accent-green)', fontWeight: '800' }}>
                ✓ {count} {count === 1 ? 'Seleccionado' : 'Seleccionados'}
              </span>
            )}
          </div>
        </div>

        {/* Catálogo de Cartones Completos (Grid desplazable) */}
        <div style={{ flex: 1, overflowY: 'auto', padding: '16px 20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))', gap: '16px', background: 'var(--bg-app)' }}>
          {filteredCatalog.length === 0 ? (
            <div style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px 20px', color: 'var(--text-muted)' }}>
              <i className="fa-solid fa-filter-circle-xmark" style={{ fontSize: '2.5rem', color: 'var(--text-dim)', marginBottom: '12px' }}></i>
              <h4 style={{ color: 'var(--text-main)', margin: '0 0 6px' }}>No hay cartones con esa combinación de números</h4>
              <p style={{ fontSize: '0.85rem', margin: '0 0 16px' }}>Prueba con menos números o renueva el catálogo para generar nuevas combinaciones.</p>
              <button type="button" className="btn btn-primary btn-sm" onClick={handleRefreshCatalog}>
                <i className="fa-solid fa-arrows-rotate"></i> Generar Nuevos Cartones
              </button>
            </div>
          ) : (
            filteredCatalog.map((card, idx) => {
              const code = card.id || card.card_code;
              const isSold = Boolean(soldCardsMap[code]);
              const soldInfo = soldCardsMap[code];
              const isSelected = !isSold && selectedCards.some(c => (c.id === card.id || c.card_code === card.id || c.id === card.card_code));
              const themeClass = 'card-theme-ruby';

              return (
                <div 
                  key={card.id || idx}
                  onClick={() => toggleSelectCard(card)}
                  className={`bingo-card-3x9-wrapper ${themeClass} ${isSelected ? 'is-selected-card' : ''} ${isSold ? 'is-sold-card' : ''}`}
                  style={{
                    cursor: isSold ? 'not-allowed' : 'pointer',
                    transition: 'all 0.2s ease',
                    position: 'relative',
                    opacity: isSold ? 0.62 : 1,
                    filter: isSold ? 'grayscale(45%)' : undefined,
                    border: isSelected 
                      ? '2.5px solid #10b981' 
                      : (isSold ? '1.5px solid rgba(239, 68, 68, 0.45)' : undefined),
                    boxShadow: isSelected 
                      ? '0 0 25px rgba(16, 185, 129, 0.45)' 
                      : (isSold ? 'none' : undefined),
                    background: isSold ? 'rgba(15, 23, 42, 0.85)' : undefined
                  }}
                  title={isSold ? `🔒 Cartón VENDIDO a ${soldInfo?.playerName || 'Comprador'}` : `Clic para seleccionar ${code}`}
                >
                  {/* Cabecera del Cartón en Catálogo */}
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      <i className={`fa-solid ${isSold ? 'fa-lock' : 'fa-ticket'}`} style={{ color: isSold ? '#ef4444' : (isSelected ? '#10b981' : 'var(--tag-color, #fb7185)') }}></i>
                      <div>
                        <span style={{ fontSize: '0.95rem', fontWeight: '800', color: isSold ? '#f87171' : (isSelected ? '#10b981' : '#ffffff'), display: 'block', lineHeight: 1.2 }}>
                          {card.title || `Cartón #${idx + 1}`}
                        </span>
                        <span style={{ fontSize: '0.72rem', color: isSold ? '#fca5a5' : 'var(--text-dim)', fontFamily: 'monospace' }}>
                          N°: {code}
                        </span>
                      </div>
                    </div>

                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                      {isSold ? (
                        <span className="brand-badge" style={{ backgroundColor: 'rgba(239, 68, 68, 0.25)', color: '#ef4444', border: '1px solid #ef4444', fontWeight: '900', fontSize: '0.74rem', padding: '3px 9px', display: 'flex', alignItems: 'center', gap: '5px' }}>
                          <i className="fa-solid fa-lock"></i> VENDIDO
                        </span>
                      ) : isSelected ? (
                        <span className="brand-badge" style={{ backgroundColor: 'rgba(16, 185, 129, 0.25)', color: '#10b981', border: '1px solid #10b981', fontWeight: '900', fontSize: '0.72rem', padding: '2px 8px' }}>
                          ✓ ELEGIDO
                        </span>
                      ) : (
                        <span style={{ fontSize: '0.85rem', fontWeight: '800', color: 'var(--accent-gold)' }}>
                          $1.000
                        </span>
                      )}

                      {!isSold && (
                        <div style={{
                          width: '26px',
                          height: '26px',
                          borderRadius: '50%',
                          background: isSelected ? '#10b981' : 'rgba(255, 255, 255, 0.08)',
                          border: isSelected ? 'none' : '1px solid var(--border-subtle)',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          color: isSelected ? '#fff' : 'transparent',
                          fontSize: '0.8rem',
                          fontWeight: '900'
                        }}>
                          <i className="fa-solid fa-check"></i>
                        </div>
                      )}
                    </div>
                  </div>

                  {/* Cuadrícula Física 3x9 Completa Oficial */}
                  <div className="teal-bingo-ticket" style={{ padding: '6px' }}>
                    <div className="ticket-col-headers">
                      {['1-9','10-19','20-29','30-39','40-49','50-59','60-69','70-79','80-90'].map((lbl, cIdx) => (
                        <div key={cIdx} className="ticket-col-header-item">{lbl}</div>
                      ))}
                    </div>

                    <div className="ticket-grid-3x9">
                      {(card.grid || []).map((row, rIdx) => (
                        <div key={rIdx} className="ticket-row">
                          {row.map((cellNum, cIdx) => {
                            const isLucky = cellNum !== null && activeFilterNums.includes(cellNum);
                            return cellNum !== null && cellNum !== undefined ? (
                              <div 
                                key={cIdx} 
                                className={`ticket-cell ${isLucky ? 'lucky-match' : ''}`} 
                                style={{ minHeight: '30px', fontSize: '0.92rem' }}
                              >
                                <span>{cellNum}</span>
                              </div>
                            ) : (
                              <div key={cIdx} className="ticket-cell empty" style={{ minHeight: '30px' }}>
                                {rIdx === 2 && cIdx === 7 && (
                                  <span className="watermark-text">Lota Familiar La Mami</span>
                                )}
                              </div>
                            );
                          })}
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Pie de Selección */}
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '8px', paddingTop: '6px', borderTop: '1px solid rgba(255, 255, 255, 0.06)' }}>
                    {isSold ? (
                      <span style={{ fontSize: '0.74rem', color: '#f87171', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '5px' }}>
                        <i className="fa-solid fa-user-check"></i> Vendido a: <strong>{soldInfo?.playerName || 'Comprador'}</strong>
                      </span>
                    ) : (
                      <span style={{ fontSize: '0.74rem', color: isSelected ? '#10b981' : 'var(--text-muted)', fontWeight: '700' }}>
                        {isSelected ? '✓ Cartón seleccionado para la compra' : 'Clic para seleccionar este cartón'}
                      </span>
                    )}

                    <span style={{ fontSize: '0.72rem', color: 'var(--text-dim)' }}>
                      15 números oficiales
                    </span>
                  </div>
                </div>
              );
            })
          )}
        </div>

        {/* Barra Inferior: Resumen de Selección Uno por Uno & Confirmación */}
        <div style={{ padding: '16px 20px', background: 'linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.98))', borderTop: '1px solid var(--border-subtle)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '12px' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', flexWrap: 'wrap' }}>
              <span style={{ fontSize: '1.05rem', fontWeight: '900', color: '#ffffff' }}>
                {count} {count === 1 ? 'Cartón seleccionado' : 'Cartones seleccionados'}
              </span>

              {count === 0 && (
                <span style={{ fontSize: '0.82rem', color: 'var(--text-muted)' }}>
                  (Toca los cartones para elegirlos uno por uno)
                </span>
              )}

              {count === 3 && (
                <span className="brand-badge" style={{ backgroundColor: 'rgba(245, 158, 11, 0.25)', color: '#fbbf24', border: '1px solid #fbbf24', fontWeight: '800' }}>
                  💡 ¡Elige 1 cartón más GRATIS por la Promo 3+1!
                </span>
              )}

              {count >= 4 && (
                <span className="brand-badge" style={{ backgroundColor: 'var(--accent-gold)', color: '#111', fontWeight: '900' }}>
                  🎁 ¡PROMO 3+1 APLICADA! (1 Cartón de Regalo)
                </span>
              )}
            </div>

            <div style={{ fontSize: '1.25rem', fontWeight: '900', color: count > 0 ? 'var(--accent-green)' : 'var(--text-dim)', fontFamily: 'var(--font-numbers)', marginTop: '2px' }}>
              {count === 0 ? 'Total a pagar: $0 (Sin cartones elegidos)' : `Total a pagar: $${totalPrice.toLocaleString('es-AR')} ${count >= 4 ? '(Ahorras $1.000)' : ''}`}
            </div>
          </div>

          <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap', alignItems: 'center' }}>
            {count > 0 && (
              <button 
                type="button" 
                className="btn btn-secondary"
                onClick={() => window.downloadCardsPDF && window.downloadCardsPDF(selectedCards, 'Cartones Seleccionados')}
                style={{ color: 'var(--accent-gold)', border: '1px solid rgba(245, 158, 11, 0.4)', fontWeight: '700' }}
                title="Descargar PDF de los cartones seleccionados"
              >
                <i className="fa-solid fa-file-pdf"></i>
                Descargar PDF ({count})
              </button>
            )}

            <button type="button" className="btn btn-secondary" onClick={onClose} style={{ padding: '9px 18px' }}>
              Cerrar
            </button>

            <button 
              type="button"
              className="btn btn-primary"
              onClick={handleConfirm}
              disabled={count === 0}
              style={{
                padding: '10px 24px',
                fontWeight: '900',
                display: 'flex',
                alignItems: 'center',
                gap: '8px',
                opacity: count === 0 ? 0.45 : 1,
                cursor: count === 0 ? 'not-allowed' : 'pointer'
              }}
            >
              <i className="fa-solid fa-check"></i>
              Confirmar Selección ({count})
            </button>
          </div>
        </div>

      </div>
    </div>
  );
}

window.CardSelectorModal = CardSelectorModal;