import { useNavigate } from "@tanstack/react-router";
import type { LobbyPlayer } from "@lila/shared";
import { ConfettiBurst } from "../ui/ConfettiBurst";

type MultiplayerScoreScreenProps = {
  players: LobbyPlayer[];
  winnerIds: string[];
  currentUserId: string;
  lobbyCode: string;
};

export const MultiplayerScoreScreen = ({
  players,
  winnerIds,
  currentUserId,
  lobbyCode,
}: MultiplayerScoreScreenProps) => {
  const navigate = useNavigate();

  const sortedPlayers = [...players].sort((a, b) => b.score - a.score);

  const isWinner = winnerIds.includes(currentUserId);
  const isTie = winnerIds.length > 1;

  const winnerNames = winnerIds
    .map((id) => players.find((p) => p.userId === id)?.user.name ?? id)
    .join(" and ");

  return (
    <div className="min-h-screen relative flex items-center justify-center p-6">
      <div className="absolute inset-0 -z-10 bg-linear-to-b from-purple-100 to-pink-50" />
      <div className="absolute -top-24 left-1/2 -translate-x-1/2 h-72 w-[46rem] rounded-full bg-(--color-primary) opacity-[0.12] blur-3xl -z-10" />
      <div className="absolute -top-8 left-1/2 -translate-x-1/2 h-72 w-[46rem] rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl -z-10" />

      <div className="w-full max-w-md rounded-3xl border border-(--color-primary-light) bg-white/50 dark:bg-black/10 backdrop-blur shadow-sm p-8 flex flex-col gap-6">
        {isWinner && !isTie && <ConfettiBurst />}
        {/* Result header */}
        <div className="text-center flex flex-col gap-1">
          <div className="inline-flex mx-auto items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-4 py-1 text-xs font-bold tracking-widest uppercase text-(--color-primary)">
            Multiplayer
          </div>
          <h1 className="mt-2 text-2xl font-black tracking-tight text-(--color-text)">
            {isTie ? "It's a tie!" : isWinner ? "You win! 🎉" : "Game over"}
          </h1>
          <p className="text-sm text-(--color-text-muted)">
            {isTie ? `${winnerNames} tied` : `${winnerNames} wins!`}
          </p>
        </div>

        <div className="border-t border-(--color-primary-light) opacity-60" />

        {/* Score list */}
        <div className="flex flex-col gap-2">
          {sortedPlayers.map((player, index) => {
            const isCurrentUser = player.userId === currentUserId;
            const isPlayerWinner = winnerIds.includes(player.userId);
            return (
              <div
                key={player.userId}
                className={`flex items-center justify-between rounded-2xl px-4 py-3 border ${
                  isCurrentUser
                    ? "bg-(--color-surface) border-(--color-primary-light)"
                    : "bg-white/30 dark:bg-black/10 border-(--color-primary-light)"
                }`}
              >
                <div className="flex items-center gap-3">
                  <span className="text-sm font-bold text-(--color-text-muted) w-4">
                    {index + 1}.
                  </span>
                  <span
                    className={`text-sm font-semibold ${
                      isCurrentUser
                        ? "text-(--color-text)"
                        : "text-(--color-text)"
                    }`}
                  >
                    {player.user.name}
                    {isCurrentUser && (
                      <span className="text-xs text-(--color-primary) ml-1">
                        (you)
                      </span>
                    )}
                  </span>
                  {isPlayerWinner && (
                    <span className="text-xs font-medium" aria-label="Winner">
                      👑
                    </span>
                  )}
                </div>
                <span className="text-sm font-black text-(--color-text)">
                  {player.score} pts
                </span>
              </div>
            );
          })}
        </div>

        <div className="border-t border-(--color-primary-light) opacity-60" />

        {/* Actions */}
        <div className="flex flex-col gap-3">
          <button
            className="rounded-2xl bg-(--color-primary) px-4 py-3 text-white font-black hover:bg-(--color-primary-dark) shadow-sm hover:shadow-md transition-all"
            onClick={() => {
              void navigate({
                to: "/multiplayer/lobby/$code",
                params: { code: lobbyCode },
              });
            }}
          >
            Play Again
          </button>
          <button
            className="rounded-2xl bg-white/30 dark:bg-black/10 border border-(--color-primary-light) px-4 py-3 text-(--color-text) font-bold hover:bg-(--color-surface) transition-colors"
            onClick={() => {
              void navigate({ to: "/multiplayer" });
            }}
          >
            Leave
          </button>
        </div>
      </div>
    </div>
  );
};
