// Componente Atómico Memoizado: Radar de Líderes y Cartones en Capilla
const { memo, useMemo } = React;

const Radar = memo(function Radar({
  radarRanking = [],
  realRoomCards = [],
  calledBalls = [],
  activeTab = 'leaders',
  onTabChange,
  onInspectCard
}) {
  const displayedCards = useMemo(() => {
    if (radarRanking && radarRanking.length > 0) {
      return activeTab === 'leaders' ? radarRanking.slice(0, 4) : radarRanking;
    }
    return realRoomCards || [];
  }, [radarRanking, realRoomCards, activeTab]);

  return (
    <div className="cards-container">
      {/* Cabecera del Radar con Selector de Pestañas */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '10px' }}>
        <h3 style={{ fontSize: '1.2rem', fontWeight: '800', display: 'flex', alignItems: 'center', gap: '8px', margin: 0 }}>
          <i className="fa-solid fa-radar" style={{ color: 'var(--accent-gold)' }}></i>
          Radar de Líderes (En Capilla)
        </h3>

        <div style={{ display: 'flex', gap: '6px', alignItems: 'center', flexWrap: 'wrap' }}>
          <button 
            type="button"
            className="btn btn-secondary btn-sm"
            onClick={() => window.downloadCardsPDF && window.downloadCardsPDF(displayedCards, 'Cartones de la Sala')}
            style={{ color: 'var(--accent-gold)', border: '1px solid rgba(245, 158, 11, 0.4)', fontWeight: '700', fontSize: '0.8rem', padding: '6px 12px', display: 'flex', alignItems: 'center', gap: '6px' }}
            title="Descargar todos los cartones de la sala en PDF imprimible"
          >
            <i className="fa-solid fa-file-pdf"></i>
            Descargar PDF ({displayedCards.length})
          </button>

          <button 
            className={`radar-tab-btn ${activeTab === 'leaders' ? 'active' : ''}`}
            onClick={() => onTabChange('leaders')}
          >
            <i className="fa-solid fa-fire" style={{ color: 'var(--accent-gold)' }}></i>
            <span>Top 4</span>
          </button>

          <button 
            className={`radar-tab-btn ${activeTab === 'all' ? 'active' : ''}`}
            onClick={() => onTabChange('all')}
          >
            <i className="fa-solid fa-users"></i>
            <span>Todos ({radarRanking.length || realRoomCards.length})</span>
          </button>
        </div>
      </div>

      {/* Banner Informativo del Radar */}
      <div style={{ background: 'rgba(245, 158, 11, 0.1)', border: '1px solid rgba(245, 158, 11, 0.3)', padding: '8px 14px', borderRadius: 'var(--radius-md)', fontSize: '0.82rem', color: '#fef08a', display: 'flex', alignItems: 'center', gap: '8px' }}>
        <i className="fa-solid fa-bolt" style={{ color: 'var(--accent-gold)' }}></i>
        <span>
          Cálculo Server-Side en PostgreSQL. Los números que le faltan a cada jugador para BINGO están resaltados en <strong>dorado parpadeante</strong>.
        </span>
      </div>

      {/* Lista de Cartones del Radar */}
      {displayedCards.length === 0 ? (
        <div style={{ textAlign: 'center', padding: '30px', color: 'var(--text-dim)' }}>
          No hay cartones cargados en la sala. Cárgalos desde "Admin Pagos".
        </div>
      ) : (
        displayedCards.map((card) => (
          <window.CartonView 
            key={card.id}
            card={card}
            calledBalls={calledBalls}
            isLeaderRadar={true}
            onInspect={onInspectCard}
          />
        ))
      )}
    </div>
  );
});

window.Radar = Radar;