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

	export let dailyCharacter: CharacterWithRelations;
	export let selectedCharacters: CharacterWithRelations[];
	export let showOriginUnlock: boolean = false;
	export let showFruitUnlock: boolean = false;
	export let showAffiliationUnlock: boolean = false;
	
	let showHintOrigin = false;
	let showHintFruit = false;
	let showHintAffiliation = false;
	
	// Hint availability - indices are available after a certain number of guesses
	$: isOriginAvailable = selectedCharacters.length >= 5;
	$: isFruitAvailable = selectedCharacters.length >= 10;
	$: isAffiliationAvailable = selectedCharacters.length >= 15;
	$: isFrench = $language === 'fr';

	function getDisplayOrigin(character: CharacterWithRelations): string | null {
		if (isFrench && typeof character.frOrigin === 'string' && character.frOrigin.length > 0) {
			return character.frOrigin;
		}

		return character.origin;
	}
</script>

<svelte:head>
	<style>
		@keyframes hint-unlock {
			0% {
				box-shadow: 0 0 0 rgba(251, 146, 60, 0);
			}
			50% {
				box-shadow: 0 0 20px rgba(251, 146, 60, 0.8);
			}
			100% {
				box-shadow: 0 0 0 rgba(251, 146, 60, 0);
			}
		}
		.hint-unlocking {
			animation: hint-unlock 0.6s ease-out;
		}
	</style>
</svelte:head>

<div class="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_24px_60px_rgba(0,0,0,0.45)] backdrop-blur">
	<div class="grid gap-3 sm:grid-cols-3">
		<button 
			type="button"
			class="rounded-2xl border border-white/10 px-3 py-3 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-900/80 transition-colors {isOriginAvailable ? 'bg-slate-950/60' : 'bg-slate-950/30 opacity-50 cursor-not-allowed hover:bg-slate-950/30'} {showOriginUnlock ? 'hint-unlocking' : ''}"
			disabled={!isOriginAvailable}
			onclick={() => showHintOrigin = !showHintOrigin}
		>
			<p class="text-sm font-medium text-amber-100">{$t.game.components.hints.origin}</p>
			{#if showHintOrigin}
				<p class="mt-2 text-xs text-white font-semibold">{getDisplayOrigin(dailyCharacter) || $t.game.components.hints.unknown}</p>
			{:else if Math.max(0, 5 - selectedCharacters.length) > 0}
				<p class="mt-2 text-xs text-slate-400">{Math.max(0, 5 - selectedCharacters.length)} {$t.game.components.hints.beforeUnlock}</p>
			{:else}
				<p class="mt-2 text-xs text-slate-400">{$t.game.components.hints.available}</p>
			{/if}
		</button>
		<button 
			type="button"
			class="rounded-2xl border border-white/10 px-3 py-3 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-900/80 transition-colors {isFruitAvailable ? 'bg-slate-950/60' : 'bg-slate-950/30 opacity-50 cursor-not-allowed hover:bg-slate-950/30'} {showFruitUnlock ? 'hint-unlocking' : ''}"
			disabled={!isFruitAvailable}
			onclick={() => showHintFruit = !showHintFruit}
		>
			<p class="text-sm font-medium text-amber-100">{$t.game.components.hints.devilFruit}</p>
			{#if showHintFruit}
			<p class="mt-2 text-xs text-white font-semibold">{dailyCharacter.devilFruitName || $t.game.components.hints.none}</p>
			{:else if Math.max(0, 10 - selectedCharacters.length) > 0}
				<p class="mt-2 text-xs text-slate-400">{Math.max(0, 10 - selectedCharacters.length)} {$t.game.components.hints.beforeUnlock}</p>
			{:else}
				<p class="mt-2 text-xs text-slate-400">{$t.game.components.hints.available}</p>
			{/if}
		</button>
		<button 
			type="button"
			class="rounded-2xl border border-white/10 px-3 py-3 flex flex-col items-center justify-center cursor-pointer hover:bg-slate-900/80 transition-colors {isAffiliationAvailable ? 'bg-slate-950/60' : 'bg-slate-950/30 opacity-50 cursor-not-allowed hover:bg-slate-950/30'} {showAffiliationUnlock ? 'hint-unlocking' : ''}"
			disabled={!isAffiliationAvailable}
			onclick={() => showHintAffiliation = !showHintAffiliation}
		>
			<p class="text-sm font-medium text-amber-100">{$t.game.components.hints.affiliation}</p>
			{#if showHintAffiliation}
				<p class="mt-2 text-xs text-white font-semibold">{isFrench && dailyCharacter.frAffiliation ? dailyCharacter.frAffiliation : dailyCharacter.affiliation || $t.game.components.hints.unknown}</p>
			{:else if Math.max(0, 15 - selectedCharacters.length) > 0}
				<p class="mt-2 text-xs text-slate-400">{Math.max(0, 15 - selectedCharacters.length)} {$t.game.components.hints.beforeUnlock}</p>
			{:else}
				<p class="mt-2 text-xs text-slate-400">{$t.game.components.hints.available}</p>
			{/if}
		</button>
	</div>
</div>
