import { h } from 'preact';
import styles from './GameList.module.css';

/**
 * List of games with filter and delete options.
 * @param {object} props
 * @param {object[]} props.games
 * @param {string} props.filter
 * @param {Function} props.setFilter
 * @param {Function} props.onShowGameDetail
 * @param {Function} props.onDeleteGame
 * @returns {import('preact').VNode}
 */
const GameList = ({ games, filter = 'all', setFilter, onShowGameDetail, onDeleteGame }) => {
  // Filter and sort games
  const filteredGames = games
    .filter(game => {
      if (filter === 'active') return game.status === 'active';
      if (filter === 'completed') return game.status === 'completed';
      return true;
    })
    .sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));

  return (
    <div className={styles['game-list'] + ' ' + styles['games-container']}>
      <div className={styles['filter-buttons']}>
        <button className={styles['filter-button'] + (filter === 'all' ? ' ' + styles['active'] : '')} onClick={() => setFilter('all')} aria-label="Alle Spiele anzeigen">Alle</button>
        <button className={styles['filter-button'] + (filter === 'active' ? ' ' + styles['active'] : '')} onClick={() => setFilter('active')} aria-label="Nur aktive Spiele anzeigen">Aktiv</button>
        <button className={styles['filter-button'] + (filter === 'completed' ? ' ' + styles['active'] : '')} onClick={() => setFilter('completed')} aria-label="Nur abgeschlossene Spiele anzeigen">Abgeschlossen</button>
      </div>
      {filteredGames.length === 0 ? (
        <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
      ) : (
        filteredGames.map(game => {
          const playerNames = game.player3
            ? `${game.player1} vs ${game.player2} vs ${game.player3}`
            : `${game.player1} vs ${game.player2}`;
          const scores = game.player3
            ? `${game.score1} - ${game.score2} - ${game.score3}`
            : `${game.score1} - ${game.score2}`;
          return (
            <div
              className={
                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
              }
              key={game.id}
            >
              <div className={styles['game-info']} onClick={() => onShowGameDetail(game.id)} role="button" tabIndex={0} aria-label={`Details für Spiel ${playerNames}`}>
                <div className={styles['game-type']}>{game.gameType}{game.raceTo ? ` | ${game.raceTo}` : ''}</div>
                <div className={styles['player-names']}>{playerNames}</div>
                <div className={styles['game-scores']}>{scores}</div>
              </div>
              <button className={styles['delete-button']} onClick={() => onDeleteGame(game.id)} aria-label={`Spiel löschen: ${playerNames}`}></button>
            </div>
          );
        })
      )}
    </div>
  );
};

export default GameList;