<script lang="ts">
	import { t } from '$lib/i18n';

	type TriedCharacter = {
		id: string;
		name: string;
		pictureUrl: string | null;
	};

	type FriendTodayResult = {
		userId: string;
		name: string;
		image: string | null;
		tryCount: number;
		triedCharacters: TriedCharacter[];
	};

	export let friendsTodayResults: FriendTodayResult[] = [];
</script>

{#if friendsTodayResults.length > 0}
	<section class="mt-6 rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
		<p class="text-xs font-semibold uppercase tracking-[0.28em] text-amber-100 text-center">{$t.game.daily.friendsToday}</p>
		<div class="mt-4 space-y-2">
			{#each friendsTodayResults as friendResult (friendResult.userId)}
				<div class="rounded-lg border border-white/10 bg-slate-950/50 px-4 py-3">
					<div class="flex items-center justify-between gap-4">
						<div class="flex items-center gap-3">
							{#if friendResult.image}
								<img
									src={friendResult.image}
									alt={friendResult.name}
									class="h-8 w-8 rounded-full border border-white/20 object-cover"
								/>
							{:else}
								<div class="flex h-8 w-8 items-center justify-center rounded-full bg-amber-300/20 text-xs font-semibold text-amber-100">
									{friendResult.name?.charAt(0).toUpperCase() || 'U'}
								</div>
							{/if}
							<p class="text-sm font-semibold text-slate-100">{friendResult.name}</p>
						</div>
						<p class="text-sm text-amber-300">
							{friendResult.tryCount} {friendResult.tryCount > 1 ? $t.game.daily.friendTryPlural : $t.game.daily.friendTrySingular}
						</p>
					</div>
					<div class="mt-3 border-t border-white/10 pt-2">
						<p class="text-[11px] font-semibold uppercase tracking-[0.2em] text-amber-100">
							{$t.game.daily.friendsTriedCharacters}
						</p>
						{#if friendResult.triedCharacters && friendResult.triedCharacters.length > 0}
							<div class="mt-2 flex flex-wrap gap-2">
								{#each friendResult.triedCharacters as triedCharacter (triedCharacter.id)}
									<span class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-2.5 py-1 text-xs text-slate-200">
										{#if triedCharacter.pictureUrl}
											<img
												src={triedCharacter.pictureUrl}
												alt={triedCharacter.name}
												class="h-4 w-4 rounded-full object-cover"
											/>
										{/if}
										{triedCharacter.name}
									</span>
								{/each}
							</div>
						{:else}
							<p class="mt-1 text-xs text-slate-500">{$t.game.daily.friendsNoTriedCharacters}</p>
						{/if}
					</div>
				</div>
			{/each}
		</div>
	</section>
{/if}
