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

/**
 * Modal shown when a game is completed.
 * @param {object} props
 * @param {boolean} props.open
 * @param {object} props.game
 * @param {Function} props.onConfirm
 * @param {Function} props.onClose
 * @returns {import('preact').VNode|null}
 */
const 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);
  // Find all winners (could be a tie)
  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={modalStyles['modal'] + ' ' + modalStyles['show']} role="dialog" aria-modal="true" aria-labelledby="completion-modal-title">
      <div className={modalStyles['modal-content']}>
        <div className={modalStyles['modal-header']}>
          <span className={modalStyles['modal-title']} id="completion-modal-title">Spiel beendet</span>
          <button className={modalStyles['close-button']} onClick={onClose} aria-label="Schließen">×</button>
        </div>
        <div className={modalStyles['modal-body']}>
          <div className={styles['final-scores']}>
            {playerNames.map((name, idx) => (
              <div className={styles['final-score']} key={name + idx}>
                <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={modalStyles['modal-footer']}>
          <button className={styles['btn'] + ' ' + styles['btn--warning']} onClick={onConfirm} aria-label="Bestätigen">Bestätigen</button>
          <button className={styles['btn']} onClick={onClose} aria-label="Abbrechen">Abbrechen</button>
        </div>
      </div>
    </div>
  );
};

export default GameCompletionModal;