import type { GameView } from '../types'

export function GameOver({ view, onLeave }: { view: GameView; onLeave: () => void }) {
  const winner = view.winnerSeat >= 0 ? view.players[view.winnerSeat] : null
  const youWon = view.winnerSeat === view.youSeat

  return (
    <div className="gameover">
      <div className="gameover-emoji" aria-hidden>
        {winner ? (youWon ? '🎉' : '💀') : '🤝'}
      </div>
      <h1 className="gameover-title">
        {winner ? (youWon ? 'You win!' : `${winner.name} wins!`) : "It's a tie!"}
      </h1>
      <div className="gameover-scores">
        {[...view.players]
          .sort((a, b) => b.trophies - a.trophies)
          .map((p) => (
            <div key={p.id} className={`score-line ${p.seat === view.youSeat ? 'is-you' : ''}`}>
              <span className="score-name">
                {p.name}
                {p.seat === view.youSeat ? ' (you)' : ''}
              </span>
              <span className="score-trophies">
                {'🏆'.repeat(p.trophies) || '—'} <strong>{p.trophies}</strong>
              </span>
            </div>
          ))}
      </div>
      <button className="btn btn-primary btn-big" onClick={onLeave}>
        Back to the den
      </button>
    </div>
  )
}