<script lang="ts">
	import type { CharacterWithRelations } from "$lib/server/daily-character";
	import { language, t } from '$lib/i18n';

	export let selectedCharacter: CharacterWithRelations;
	export let selectedCharacters: CharacterWithRelations[];
	export let isGeckoMoriaWin: boolean = false;

	$: isFrench = $language === 'fr';

	function getDisplayName(character: CharacterWithRelations): string {
		if (isFrench && typeof character.frName === 'string' && character.frName.length > 0) {
			return character.frName;
		}

		return character.name;
	}

	function getWikiUrl(character: CharacterWithRelations): string {
		if (isFrench && typeof character.frUrl === 'string' && character.frUrl.length > 0) {
			return character.frUrl;
		}

		return character.url || '';
	}

	function getWikiBaseUrl(): string {
		return isFrench ? 'https://onepiece.fandom.com/fr/wiki/' : 'https://onepiece.fandom.com/wiki/';
	}

	const pickMessage = (messages: readonly string[]) => messages[Math.floor(Math.random() * messages.length)];

	const getAttemptMessage = (attempts: number): string => {
		if (attempts <= 0) return '';
		const oneTryMessages = $t.game.components.winPanel.oneTryMessages;
		const twoTryMessages = $t.game.components.winPanel.twoTryMessages;
		const tenPlusMessages = $t.game.components.winPanel.tenPlusMessages;
		const fivePlusMessages = $t.game.components.winPanel.fivePlusMessages;
		const defaultMessages = $t.game.components.winPanel.defaultMessages;
		if (attempts === 1) {
			return pickMessage(oneTryMessages);
		}
		if (attempts === 2) {
			return pickMessage(twoTryMessages);
		}
		if (attempts >= 10) {
			return pickMessage(tenPlusMessages).replace('${attempts}', String(attempts));
		}
		if (attempts >= 5) {
			return pickMessage(fivePlusMessages).replace('${attempts}', String(attempts));
		}

		return pickMessage(defaultMessages);
	};

	$: attempts = selectedCharacters.length;
	$: attemptMessage = getAttemptMessage(attempts);
	$: attemptWord = selectedCharacters.length > 1
		? $t.game.components.winPanel.attemptPlural
		: $t.game.components.winPanel.attemptSingular;
</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">{$t.game.components.winPanel.moriaTitle}</h2>
			<p class="text-sm text-slate-400">{$t.game.components.winPanel.moriaPrefix} {selectedCharacters.length} {attemptWord} !</p>
			<p class="text-xs text-slate-300 mt-1">{attemptMessage}</p>
			<div class="mt-3">
				{#if selectedCharacter.pictureUrl}
				<a
					href={getWikiBaseUrl() + getWikiUrl(selectedCharacter)}
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block"
				>
					<img
						src={selectedCharacter.pictureUrl}
						alt={getDisplayName(selectedCharacter)}
						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">{getDisplayName(selectedCharacter)}</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">{$t.game.components.winPanel.winTitle}</h2>
			<p class="text-sm text-emerald-300">{$t.game.components.winPanel.winPrefix} {selectedCharacters.length} {attemptWord} !</p>
			<p class="text-xs text-emerald-200 mt-1">{attemptMessage}</p>
			<div class="mt-3">
				{#if selectedCharacter.pictureUrl}
				<a
					href={getWikiBaseUrl() + getWikiUrl(selectedCharacter)}
					target="_blank"
					rel="noopener noreferrer"
					class="inline-block"
				>
					<img
						src={selectedCharacter.pictureUrl}
						alt={getDisplayName(selectedCharacter)}
						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">{getDisplayName(selectedCharacter)}</p>
			</div>
		</div>
	</div>
{/if}
