import React from 'react';

function GamePoolModal({ games, onClose }) {
  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white dark:bg-gray-800 rounded-lg max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
        <div className="flex justify-between items-center p-4 sm:p-6 border-b dark:border-gray-700">
          <div>
            <h2 className="text-xl sm:text-2xl font-bold dark:text-gray-100">Available Game Pool</h2>
            <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
              {games.length} {games.length === 1 ? 'game' : 'games'} match your filters
            </p>
          </div>
          <button
            onClick={onClose}
            className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-2xl"
          >
            ×
          </button>
        </div>
        
        <div className="overflow-y-auto p-4 sm:p-6">
          {games.length === 0 ? (
            <p className="text-gray-500 dark:text-gray-400 text-center py-8">
              No games match your current filters. Try adjusting the filters or enabling more games.
            </p>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {games.map((game) => {
                // Determine border color based on favor bias
                const getBorderStyle = () => {
                  if (game.favor_bias === 1) {
                    return 'border-green-300 dark:border-green-700 bg-green-50 dark:bg-green-900/10';
                  }
                  if (game.favor_bias === -1) {
                    return 'border-red-300 dark:border-red-700 bg-red-50 dark:bg-red-900/10';
                  }
                  return 'border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700';
                };
                
                return (
                <div
                  key={game.id}
                  className={`border rounded-lg p-3 sm:p-4 ${getBorderStyle()}`}
                >
                  <div className="flex items-start justify-between gap-2 mb-1">
                    <h3 className="font-semibold text-sm sm:text-base dark:text-gray-100 flex-1">
                      {game.title}
                    </h3>
                    {/* Show favor indicator */}
                    {game.favor_bias === 1 && (
                      <span className="text-xs font-semibold bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-0.5 rounded whitespace-nowrap">
                        Favored
                      </span>
                    )}
                    {game.favor_bias === -1 && (
                      <span className="text-xs font-semibold bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200 px-2 py-0.5 rounded whitespace-nowrap">
                        Disfavored
                      </span>
                    )}
                  </div>
                  <p className="text-xs text-gray-600 dark:text-gray-400 mb-2">
                    {game.pack_name}
                  </p>
                  <div className="flex flex-wrap gap-2 text-xs">
                    <span className="bg-indigo-100 dark:bg-indigo-900 text-indigo-800 dark:text-indigo-200 px-2 py-1 rounded">
                      {game.min_players}-{game.max_players} players
                    </span>
                    {game.game_type && (
                      <span className="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 px-2 py-1 rounded">
                        {game.game_type}
                      </span>
                    )}
                    {game.play_count > 0 && (
                      <span className="bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 px-2 py-1 rounded">
                        {game.play_count} plays
                      </span>
                    )}
                  </div>
                </div>
                );
              })}
            </div>
          )}
        </div>
        
        <div className="border-t dark:border-gray-700 p-4 sm:p-6">
          <button
            onClick={onClose}
            className="w-full bg-indigo-600 dark:bg-indigo-700 text-white py-2 sm:py-3 rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
}

export default GamePoolModal;