// Componente Atómico Memoizado: Bolillero 3D y Carrusel de Últimas Bolillas
const { memo, useMemo } = React;

const Bolillero = memo(function Bolillero({
  currentBall,
  calledBalls = [],
  viewersCount = 52,
  isSpectator = false,
  size = 130
}) {
  const recentBalls = useMemo(() => {
    return calledBalls.slice(0, 10);
  }, [calledBalls]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '14px', alignItems: 'center', width: '100%' }}>
      {/* Esfera 3D Central */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '10px 0' }}>
        {currentBall ? (
          <div 
            key={currentBall.num}
            className={`bingo-sphere ball-spring-active sphere-range-${currentBall.range || (currentBall.num <= 18 ? 1 : currentBall.num <= 36 ? 2 : currentBall.num <= 54 ? 3 : currentBall.num <= 72 ? 4 : 5)}`}
            style={{ width: `${size}px`, height: `${size}px` }}
          >
            <div className="sphere-inner">
              <span className="sphere-letter">BINGO</span>
              <span className="sphere-number" style={{ fontSize: size > 130 ? '3.2rem' : '2.6rem' }}>
                {currentBall.num}
              </span>
            </div>
          </div>
        ) : (
          <div className="bingo-sphere-placeholder" style={{ width: `${size}px`, height: `${size}px` }}>
            <div style={{ textAlign: 'center' }}>
              <i className="fa-solid fa-play" style={{ fontSize: '1.8rem', color: 'var(--text-dim)', marginBottom: '4px' }}></i>
              <div style={{ fontSize: '0.78rem', color: 'var(--text-muted)', fontWeight: '700' }}>
                {isSpectator ? 'Esperando bolilla...' : 'Listo para iniciar'}
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Carrusel de Últimas Bolillas Extraídas */}
      <div style={{ width: '100%' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
          <span style={{ fontSize: '0.78rem', color: 'var(--text-muted)', textTransform: 'uppercase', fontWeight: '800' }}>
            Últimas Bolillas Cantadas ({calledBalls.length}/90)
          </span>
        </div>

        <div className="recent-balls-list">
          {recentBalls.map((b, idx) => (
            <div key={idx} className={`mini-ball ${idx === 0 ? 'highlight' : ''}`}>
              {b}
            </div>
          ))}
          {recentBalls.length === 0 && (
            <span style={{ fontSize: '0.82rem', color: 'var(--text-dim)' }}>Sin bolillas extraídas aún.</span>
          )}
        </div>
      </div>
    </div>
  );
});

window.Bolillero = Bolillero;