// Componente Atómico Memoizado: Tablero Matriz 1 a 90 Plegable
const { memo, useMemo } = React;

const Tablero = memo(function Tablero({
  calledBalls = [],
  isOpen = true,
  onToggle,
  onSelectBall = null,
  interactive = false
}) {
  const cells = useMemo(() => {
    return Array.from({ length: 90 }, (_, i) => i + 1);
  }, []);

  if (!isOpen) return null;

  return (
    <div style={{ marginTop: '12px', width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '8px' }}>
        <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', margin: 0, textTransform: 'uppercase', fontWeight: '800' }}>
          Tablero General (1 - 90) {interactive && <span style={{ color: 'var(--accent-teal)', fontSize: '0.72rem', fontWeight: '600', marginLeft: '6px' }}>• Haz clic en un número para cantarlo</span>}
        </h4>
        {onToggle && (
          <button 
            className="btn btn-secondary btn-sm"
            onClick={onToggle}
            style={{ fontSize: '0.72rem', padding: '2px 8px' }}
          >
            <i className="fa-solid fa-xmark"></i> Ocultar
          </button>
        )}
      </div>

      <div className="board-90-matrix">
        {cells.map(num => {
          const isDrawn = calledBalls.includes(num);
          const canClick = interactive && !isDrawn && onSelectBall;
          return (
            <div 
              key={num} 
              className={`matrix-cell ${isDrawn ? 'drawn' : ''} ${canClick ? 'clickable-cell' : ''}`}
              onClick={canClick ? () => onSelectBall(num) : undefined}
              title={isDrawn ? `Bolilla ${num} cantada` : canClick ? `Cantar bolilla ${num}` : `Bolilla ${num}`}
              style={{
                cursor: canClick ? 'pointer' : 'default',
                transition: 'all 0.15s ease'
              }}
            >
              {num}
            </div>
          );
        })}
      </div>
    </div>
  );
});

window.Tablero = Tablero;