<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>