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

export default function GameCompletionModal({ open, game, onConfirm, onClose }) {
  if (!open || !game) return null;
  const playerNames = [game.player1, game.player2, game.player3].filter(Boolean);
  const scores = [game.score1, game.score2, game.score3].filter((_, i) => playerNames[i]);
  const maxScore = Math.max(...scores);
  const winners = playerNames.filter((name, idx) => scores[idx] === maxScore);
  const winnerText = winners.length > 1
    ? `Unentschieden zwischen ${winners.join(' und ')}`
    : `${winners[0]} hat gewonnen!`;
  return (
    <div id="game-completion-modal" className="modal show">
      <div className={styles['modal-content']}>
        <div className={styles['modal-header']}>
          <span className={styles['modal-title']}>Spiel beendet</span>
          <button className={styles['close-button']} onClick={onClose}>×</button>
        </div>
        <div className={styles['modal-body']}>
          <div className={styles['final-scores']}>
            {playerNames.map((name, idx) => (
              <div className={styles['final-score']} key={name}>
                <span className={styles['player-name']}>{name}</span>
                <span className={styles['score']}>{scores[idx]}</span>
              </div>
            ))}
          </div>
          <div className={styles['winner-announcement']}><h3>{winnerText}</h3></div>
        </div>
        <div className={styles['modal-footer']}>
          <button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm}>Bestätigen</button>
          <button className={styles['btn']} onClick={onClose}>Abbrechen</button>
        </div>
      </div>
    </div>
  );
}