import { useParty } from "#/hooks/use-party";

export function Results() {
	const { party, members } = useParty();
	if (!party?.data) return null;

	const leaderboard = members
		.map((member) => ({
			member,
			score: party.data.scores[member.userId] ?? 0,
		}))
		.sort(
			(a, b) =>
				b.score - a.score ||
				Number(a.member.joinedAt) - Number(b.member.joinedAt),
		);

	return (
		<div className="space-y-4">
			<h2 className="text-2xl font-semibold text-foreground">Leaderboard</h2>
			<div className="space-y-2">
				{leaderboard.length === 0 ? (
					<p className="text-sm text-muted-foreground">No scores yet.</p>
				) : (
					leaderboard.map(({ member, score }, index) => (
						<div
							key={member.id}
							className="flex items-center justify-between rounded-xl border border-foreground/10 bg-card px-4 py-3"
						>
							<div>
								<p className="font-medium text-foreground">
									{index + 1}. {member.user?.name ?? "Unknown player"}
								</p>
							</div>
							<p className="text-sm text-muted-foreground">{score} points</p>
						</div>
					))
				)}
			</div>
		</div>
	);
}