import { useNavigate } from 'react-router-dom';
import type { PlayerInfo } from '../types';
import { computeTotal } from '../lib/standings';
import { leaveGame } from '../lib/leaveGame';

interface Props {
  players: PlayerInfo[];
  standings: number[][][];
}

export default function GameOver({ players, standings }: Props) {
  const navigate = useNavigate();

  const totals = players
    .map((p) => ({ ...p, total: computeTotal(standings, p.order) }))
    .sort((a, b) => b.total - a.total);

  const handleLeave = () => leaveGame(navigate);

  const medals = ['🥇', '🥈', '🥉', ''];

  return (
    <div className="max-w-md mx-auto p-4 pt-12 flex flex-col items-center gap-6 min-h-screen">
      <h1 className="font-serif text-3xl text-gold tracking-wide">Koniec hry</h1>
      <div className="w-full rounded-2xl overflow-hidden bg-header border border-[#142018]">
        {totals.map((p, i) => (
          <div
            key={p.order}
            className="flex items-center justify-between px-5 py-3 border-b border-gold/[.08] last:border-0"
          >
            <div className="flex items-center gap-3">
              <span className="text-2xl w-8">{medals[i]}</span>
              <span className="font-serif text-green-score">{p.name}</span>
            </div>
            <span className={`font-serif text-xl ${i === 0 ? 'text-gold-bright' : 'text-gold'}`}>
              {p.total}
            </span>
          </div>
        ))}
      </div>
      <button
        onClick={handleLeave}
        className="w-full py-3 rounded-xl bg-gold text-table font-serif font-semibold text-lg hover:bg-gold-bright transition-colors"
      >
        Domov
      </button>
    </div>
  );
}