<script lang="ts">
  import type { Player } from "$lib/types";

  interface Props {
    scores: Player[];
    isMaster: boolean;
    onRestart?: () => void;
    onQuit?: () => void;
  }

  let { scores = [], isMaster = false, onRestart, onQuit }: Props = $props();

  // Sort players by score (descending)
  const sortedScores = $derived([...scores].sort((a, b) => b.score - a.score));

  const winner = $derived(sortedScores[0]);
</script>

<div class="results-screen">
  <div class="results-container">
    <h1>Game Over!</h1>

    {#if winner}
      <div class="winner" style="background-color: {winner.color}">
        <div class="winner-text">
          Winner: Player {winner.id + 1}
        </div>
        <div class="winner-score">{winner.score} points</div>
      </div>
    {/if}

    <div class="scores">
      <h2>Final Scores</h2>
      <div class="scores-list">
        {#each sortedScores as player, index}
          <div class="score-item">
            <div class="rank">#{index + 1}</div>
            <div class="player-info">
              <div class="player-color-badge" style="background-color: {player.color}"></div>
              <div class="player-name">Player {player.id + 1}</div>
            </div>
            <div class="score">{player.score}</div>
          </div>
        {/each}
      </div>
    </div>

    {#if isMaster}
      <div class="controls">
        <button class="restart-button" onclick={onRestart}>Play Again</button>
        <button class="quit-button" onclick={onQuit}>Quit</button>
      </div>
    {/if}
  </div>
</div>

<style>
  .results-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
  }

  .results-container {
    max-width: 600px;
    width: 90%;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }

  h1 {
    text-align: center;
    color: #333;
    margin-bottom: 2rem;
    font-size: 2.5rem;
  }

  .winner {
    text-align: center;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .winner-text {
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem;
  }

  .winner-score {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .scores {
    margin-bottom: 2rem;
  }

  .scores h2 {
    text-align: center;
    color: #555;
    margin-bottom: 1rem;
  }

  .scores-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .score-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    gap: 1rem;
  }

  .rank {
    font-size: 1.25rem;
    font-weight: bold;
    color: #666;
    min-width: 3rem;
  }

  .player-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .player-color-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }

  .player-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
  }

  .score {
    font-size: 1.5rem;
    font-weight: bold;
    color: #007bff;
    min-width: 4rem;
    text-align: right;
  }

  .controls {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }

  .restart-button,
  .quit-button {
    flex: 1;
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .restart-button {
    background: #28a745;
    color: white;
  }

  .restart-button:hover {
    background: #218838;
  }

  .quit-button {
    background: #dc3545;
    color: white;
  }

  .quit-button:hover {
    background: #c82333;
  }
</style>