import { h } from 'preact';
import { Card } from './ui/Card';
import { Button } from './ui/Button';
import styles from './GameList.module.css';
import type { Game, GameFilter, StandardGame } from '../types/game';

interface GameListProps {
  games: Game[];
  filter: GameFilter;
  setFilter: (filter: GameFilter) => void;
  onShowGameDetail: (gameId: number) => void;
  onDeleteGame: (gameId: number) => void;
}

export default function GameList({ 
  games, 
  filter = 'all', 
  setFilter, 
  onShowGameDetail, 
  onDeleteGame 
}: GameListProps) {
  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).getTime() - new Date(a.createdAt).getTime());

  const getPlayerNames = (game: Game): string => {
    if ('players' in game) {
      return game.players.map(p => p.name).join(' vs ');
    } else {
      const standardGame = game as StandardGame;
      return standardGame.player3
        ? `${standardGame.player1} vs ${standardGame.player2} vs ${standardGame.player3}`
        : `${standardGame.player1} vs ${standardGame.player2}`;
    }
  };

  const getScores = (game: Game): string => {
    if ('players' in game) {
      return game.players.map(p => p.score).join(' - ');
    } else {
      const standardGame = game as StandardGame;
      return standardGame.player3
        ? `${standardGame.score1} - ${standardGame.score2} - ${standardGame.score3}`
        : `${standardGame.score1} - ${standardGame.score2}`;
    }
  };

  const filterButtons = [
    { key: 'all' as const, label: 'Alle', ariaLabel: 'Alle Spiele anzeigen' },
    { key: 'active' as const, label: 'Aktiv', ariaLabel: 'Nur aktive Spiele anzeigen' },
    { key: 'completed' as const, label: 'Abgeschlossen', ariaLabel: 'Nur abgeschlossene Spiele anzeigen' },
  ];

  return (
    <div className={styles['game-list'] + ' ' + styles['games-container']}>
      <div className={styles['filter-buttons']}>
        {filterButtons.map(({ key, label, ariaLabel }) => (
          <Button
            key={key}
            variant={filter === key ? 'primary' : 'secondary'}
            size="small"
            onClick={() => setFilter(key)}
            aria-label={ariaLabel}
          >
            {label}
          </Button>
        ))}
      </div>
      
      {filteredGames.length === 0 ? (
        <div className={styles['empty-state']}>Keine Spiele vorhanden</div>
      ) : (
        filteredGames.map(game => {
          const playerNames = getPlayerNames(game);
          const scores = getScores(game);
          
          return (
            <Card
              key={game.id}
              variant="elevated"
              className={
                styles['game-item'] + ' ' + (game.status === 'completed' ? styles['completed'] : styles['active'])
              }
            >
              <div 
                className={styles['game-info']} 
                onClick={() => onShowGameDetail(game.id)}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    onShowGameDetail(game.id);
                  }
                }}
                role="button" 
                tabIndex={0} 
                aria-label={`Details für Spiel ${playerNames}`}
                aria-describedby={`game-${game.id}-description`}
              >
                <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 id={`game-${game.id}-description`} className="sr-only">
                  {game.gameType} Spiel zwischen {playerNames} mit dem Stand {scores}. 
                  {game.status === 'completed' ? 'Abgeschlossen' : 'Aktiv'}
                </div>
              </div>
              <Button
                variant="danger"
                size="small"
                onClick={() => onDeleteGame(game.id)}
                aria-label={`Spiel löschen: ${playerNames}`}
              >
                🗑
              </Button>
            </Card>
          );
        })
      )}
    </div>
  );
}