<script lang="ts">
	import { cn } from '$lib';
	import type { PageData } from './$types';

	export let data: PageData;

	$: players = data.leaderboard;

	const SCORE_COLORS = ['text-yellow-400', 'text-gray-400', 'text-orange-400'];
</script>

<section class="flex h-full w-full flex-col gap-4">
	<header class="sticky flex items-center justify-between">
		<div class="flex flex-col">
			<h2 class="text-xl font-semibold">Tableau des scores</h2>
			<p class="text-muted">Suivez la progression des élèves en direct</p>
		</div>
	</header>
	<!-- <Separator /> -->
	<main class="flex flex-col justify-between gap-4 pb-4">
		<!-- {data && <Podium score={scores} />} -->
		<!-- {data && data.end_date && (
          <Timer class="flex justify-end" targetDate={new Date(data.end_date)} />
        )} -->
		<ul class="flex flex-col gap-2">
			{#each players as player}
				<!-- {@const players = group.players.sort((a, b) => b.score - a.score)} -->
				<!-- {@const last = players[players.length - 1]} -->
				<li class="flex justify-between gap-2">
					<div class="flex items-center gap-4">
						<span
							class={cn('font-semibold text-highlight-secondary', SCORE_COLORS[player.rank - 1])}
						>
							{player.rank}
						</span>
						<div class="flex items-center gap-2">
							<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
								<span class="text-lg">{player.pseudo}</span>
								<span class="text-sm text-highlight-secondary">
									<!-- {#if players.length > 1}
										{#each players as player}
											{player.pseudo || 'Anonyme'}{#if player !== last}, {/if}
											{' '}
										{/each}
									{:else}
										{player.players[0].pseudo}
									{/if} -->
								</span>
							</div>
						</div>
					</div>
					<div class="flex items-center gap-4">
						<div class="flex flex-col">
							<span class="text-sm font-semibold">Completion(s)</span>
							<span class="text-lg text-highlight-secondary">{player.completions}</span>
							<!-- <span class="text-sm font-semibold"
								>Essai{group.players.reduce((a, b) => a + b.tries, 0) || 0 ? 's' : ''}</span
							>
							<span class="text-lg text-highlight-secondary"
								>{group.players.reduce((a, b) => a + b.tries, 0) || 0}</span
							> -->
						</div>
						<div class="flex flex-col">
							<span class="text-sm font-semibold">Score</span>
							<span class="text-lg text-highlight-secondary">{player.score}</span>
							<!-- <span class="text-lg text-highlight-secondary">
								{group.players.reduce((a, b) => a + b.score, 0)}
							</span> -->
						</div>
					</div>
				</li>
			{/each}
		</ul>
	</main>
</section>
