<script lang="ts">
	export let dailyCharacter: any;
	export let selectedCharacters: any[];
	export let isGeckoMoriaWin: boolean = false;
</script>

{#if isGeckoMoriaWin}
	<div class="rounded-3xl border border-slate-700/80 bg-slate-950/80 p-4 shadow-[0_24px_60px_rgba(0,0,0,0.8)] backdrop-blur gecko-moria-effect">
		<div class="text-center">
			<div class="text-3xl mb-2">🌑</div>
			<h2 class="text-xl font-bold text-slate-300 mb-1">Moria vous contrôle...</h2>
			<p class="text-sm text-slate-400">Vous avez succombé à l'ombre en {selectedCharacters.length} {selectedCharacters.length > 1 ? 'tentatives' : 'tentative'} !</p>
			<div class="mt-3">
				{#if dailyCharacter.pictureUrl}
				<a
					href={"https://onepiece.fandom.com/fr/wiki/" + dailyCharacter.url}
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block"
				>
					<img
						src={dailyCharacter.pictureUrl}
						alt={dailyCharacter.name}
						class="w-20 h-20 mx-auto rounded-full border-2 border-slate-600 shadow-lg object-cover hover:border-slate-500 transition-colors cursor-pointer opacity-80"
					/>
				</a>
				{/if}
				<p class="mt-2 text-lg font-bold text-slate-200">{dailyCharacter.name}</p>
			</div>
		</div>
	</div>
{:else}
	<div class="rounded-3xl border border-emerald-500/50 bg-emerald-500/10 p-4 shadow-[0_24px_60px_rgba(16,185,129,0.3)] backdrop-blur">
		<div class="text-center">
			<div class="text-3xl mb-2">🎉</div>
			<h2 class="text-xl font-bold text-emerald-400 mb-1">Félicitations !</h2>
			<p class="text-sm text-emerald-300">Vous avez trouvé le personnage en {selectedCharacters.length} {selectedCharacters.length > 1 ? 'tentatives' : 'tentative'} !</p>
			<div class="mt-3">
				{#if dailyCharacter.pictureUrl}
				<a
					href={"https://onepiece.fandom.com/fr/wiki/" + dailyCharacter.url}
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block"
				>
					<img
						src={dailyCharacter.pictureUrl}
						alt={dailyCharacter.name}
						class="w-20 h-20 mx-auto rounded-full border-2 border-emerald-400 shadow-lg object-cover hover:border-emerald-300 transition-colors cursor-pointer"
					/>
				</a>
				{/if}
				<p class="mt-2 text-lg font-bold text-white">{dailyCharacter.name}</p>
			</div>
		</div>
	</div>
{/if}
