<script lang="ts">
	import { onMount } from 'svelte';
	import { formatBounty } from '$lib';
	import CharacterSearchInput from '$lib/components/CharacterSearchInput.svelte';
	import GuessHistoryTable from '$lib/components/GuessHistoryTable.svelte';

	export let data;

	let selectedCharacters: any[] = [];
	let currentCharacter: any = null;
	let isLoaded = false;
	let score = 0;
	let columnVisibility: Record<string, boolean> = {};
	const columnDisplayNames: Record<string, string> = {
		status: 'Statut',
		gender: 'Genre',
		affiliations: 'Affiliations',
		devilFruitType: 'Fruit',
		haki: 'Haki',
		bounty: 'Prime',
		height: 'Taille',
		origin: 'Origine',
		arc: 'Arc'
	};

	let wasOriginAvailable = false;
	let wasFruitAvailable = false;
	let wasAffiliationAvailable = false;
	let showOriginUnlock = false;
	let showFruitUnlock = false;
	let showAffiliationUnlock = false;

	// Load from localStorage on mount
	onMount(() => {
		const storedScore = localStorage.getItem('infiniteScore');
		if (storedScore) {
			score = parseInt(storedScore, 10);
		}

		// Load column visibility from localStorage, fallback to server defaults
		const storedColumnVisibility = localStorage.getItem('infiniteColumnVisibility');
		if (storedColumnVisibility) {
			try {
				columnVisibility = JSON.parse(storedColumnVisibility);
			} catch (e) {
				columnVisibility = data.columnVisibility || {};
			}
		} else {
			columnVisibility = data.columnVisibility || {};
		}

		// Load current character ID and history IDs from localStorage
		const storedCharacterId = localStorage.getItem('infiniteCurrentCharacterId');
		const storedHistoryIds = localStorage.getItem('infiniteSelectedCharacterIds');
		
		if (storedCharacterId && storedHistoryIds && characters.length > 0) {
			try {
				const charId = JSON.parse(storedCharacterId);
				const historyIds = JSON.parse(storedHistoryIds);
				
				// Find the character object by ID
				currentCharacter = characters.find((c: any) => c.id === charId);
				
				// Find all character objects by their IDs
				selectedCharacters = historyIds
					.map((id: string) => characters.find((c: any) => c.id === id))
					.filter((c: any) => c !== undefined);
				
				// If character not found, generate a new one
				if (!currentCharacter) {
					generateNewCharacter();
				}
			} catch (e) {
				// If parsing fails, generate a new character
				generateNewCharacter();
			}
		} else {
			generateNewCharacter();
		}

		isLoaded = true;
	});

	// Save score to localStorage whenever it changes
	$: if (isLoaded) {
		localStorage.setItem('infiniteScore', score.toString());
	}

	// Save column visibility to localStorage whenever it changes
	$: if (isLoaded) {
		localStorage.setItem('infiniteColumnVisibility', JSON.stringify(columnVisibility));
	}

	// Save current character ID to localStorage whenever it changes
	$: if (isLoaded && currentCharacter) {
		localStorage.setItem('infiniteCurrentCharacterId', JSON.stringify(currentCharacter.id));
	}

	// Save selected character IDs to localStorage whenever it changes
	$: if (isLoaded) {
		const selectedIds = selectedCharacters.map((c: any) => c.id);
		localStorage.setItem('infiniteSelectedCharacterIds', JSON.stringify(selectedIds));
	}

	$: characters = data.characters || [];
	$: hasWon = currentCharacter && selectedCharacters.some(char => char.id === currentCharacter.id);

	// Hint availability tracking for unlock animations
	$: isOriginAvailable = selectedCharacters.length >= 5;
	$: isFruitAvailable = selectedCharacters.length >= 10;
	$: isAffiliationAvailable = selectedCharacters.length >= 15;

	// Track hint unlocks
	$: if (isLoaded) {
		if (isOriginAvailable && !wasOriginAvailable) {
			showOriginUnlock = true;
			setTimeout(() => (showOriginUnlock = false), 600);
		}
		wasOriginAvailable = isOriginAvailable;

		if (isFruitAvailable && !wasFruitAvailable) {
			showFruitUnlock = true;
			setTimeout(() => (showFruitUnlock = false), 600);
		}
		wasFruitAvailable = isFruitAvailable;

		if (isAffiliationAvailable && !wasAffiliationAvailable) {
			showAffiliationUnlock = true;
			setTimeout(() => (showAffiliationUnlock = false), 600);
		}
		wasAffiliationAvailable = isAffiliationAvailable;
	}

	function generateNewCharacter() {
		if (characters.length === 0) return;
		currentCharacter = characters[Math.floor(Math.random() * characters.length)];
		selectedCharacters = [];
	}

	function handleCharacterSelect(event: CustomEvent) {
		const character = event.detail;
		selectCharacter(character);
	}

	function selectCharacter(character: any) {
		selectedCharacters = [character, ...selectedCharacters];

		// Check if player won
		if (character.id === currentCharacter.id) {
			// Increment score (saved to localStorage via reactive statement)
			score++;
			// Don't auto-generate next character - wait for user to click "Recommencer"
		}
	}

	function nextCharacter() {
		generateNewCharacter();
	}

	function resetScore() {
		score = 0;
		selectedCharacters = [];
		generateNewCharacter();
		// Clear localStorage for current character and history
		localStorage.removeItem('infiniteCurrentCharacterId');
		localStorage.removeItem('infiniteSelectedCharacterIds');
	}

	function toggleColumnVisibility(column: string) {
		columnVisibility[column] = !columnVisibility[column];
		columnVisibility = columnVisibility; // Trigger reactivity
	}
</script>

<svelte:head>
	<title>OnePieceDle - Mode Infini</title>
	<style>
		@keyframes shadow-pulse {
			0% {
				text-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(50, 50, 50, 0.8);
				opacity: 1;
			}
			50% {
				text-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 100px rgba(30, 30, 30, 1),
					inset 0 0 50px rgba(0, 0, 0, 0.7);
				opacity: 0.9;
			}
			100% {
				text-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(50, 50, 50, 0.8);
				opacity: 1;
			}
		}
		.gecko-moria-effect {
			animation: shadow-pulse 1.5s ease-in-out infinite;
		}
	</style>
</svelte:head>

<main
	class="relative min-h-screen overflow-hidden bg-slate-950 text-slate-100"
>
	<div class="absolute inset-0 bg-gradient-to-br from-slate-950/85 via-slate-900/60 to-slate-950/80"></div>
	<div
		class="absolute inset-0 mix-blend-screen opacity-20 bg-[radial-gradient(circle_at_top,rgba(255,215,84,0.35),transparent_55%)]"
	></div>

	<div class="relative mx-auto flex min-h-screen w-full max-w-6xl flex-col px-6 py-8 sm:py-10">
		<header class="flex flex-col items-start gap-6 w-full">
			<div class="flex w-full items-center justify-between gap-4">
				<div>
					<h1 class="text-3xl font-black uppercase tracking-[0.25em] text-amber-50 sm:text-5xl">
						Mode Infini
					</h1>
					<p class="mt-2 text-2xl font-bold text-amber-300">Score: {score}</p>
				</div>
				{#if score > 0}
					<button
						class="rounded-full border border-amber-200/40 bg-transparent px-5 py-3 text-sm font-semibold text-amber-100 transition hover:border-amber-200 hover:text-amber-50"
						onclick={resetScore}
					>
						Réinitialiser
					</button>
				{/if}
			</div>
			<p class="max-w-2xl text-base text-slate-200 sm:text-lg">
				Devine des personnages à l'infini ! Chaque indice se débloque après un certain nombre de
				tentatives. Bonne chance !
			</p>
		</header>

		<section class="mt-10 grid gap-6">
			{#if currentCharacter}
				{#if hasWon}
					<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">Bien joué !</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 currentCharacter.pictureUrl}
									<a
										href={'https://onepiece.fandom.com/fr/wiki/' + currentCharacter.url}
										target="_blank"
										rel="noopener noreferrer"
										class="inline-block"
									>
										<img
											src={currentCharacter.pictureUrl}
											alt={currentCharacter.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">{currentCharacter.name}</p>
							</div>
							<button
								type="button"
								onclick={nextCharacter}
								class="mt-4 rounded-full bg-emerald-500 px-6 py-2 text-sm font-semibold text-white transition hover:bg-emerald-600"
							>
								Recommencer
							</button>
						</div>
					</div>
				{:else}
					<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={() => (showOriginUnlock = !showOriginUnlock)}
							>
								<p class="text-sm font-medium text-amber-100">Origine</p>
								{#if showOriginUnlock}
									<p class="mt-2 text-xs text-white font-semibold">
										{currentCharacter.origin || 'Inconnue'}
									</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)} essais avant déblocage
									</p>
								{:else}
									<p class="mt-2 text-xs text-slate-400">Indice disponible !</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={() => (showFruitUnlock = !showFruitUnlock)}
							>
								<p class="text-sm font-medium text-amber-100">Fruit du démon</p>
								{#if showFruitUnlock}
									<p class="mt-2 text-xs text-white font-semibold">
										{currentCharacter.devilFruitName || 'Aucun'}
									</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)} essais avant déblocage
									</p>
								{:else}
									<p class="mt-2 text-xs text-slate-400">Indice disponible !</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={() => (showAffiliationUnlock = !showAffiliationUnlock)}
							>
								<p class="text-sm font-medium text-amber-100">Affiliation</p>
								{#if showAffiliationUnlock}
									{@const affiliations = typeof currentCharacter.affiliations === 'string'
										? currentCharacter.affiliations.includes('[')
											? JSON.parse(currentCharacter.affiliations)
											: currentCharacter.affiliations
													.split(',')
													.map((a: string) => a.trim())
										: currentCharacter.affiliations}
									<p class="mt-2 text-xs text-white font-semibold">
										{Array.isArray(affiliations) ? affiliations[0] : affiliations || 'Inconnue'}
									</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)} essais avant déblocage
									</p>
								{:else}
									<p class="mt-2 text-xs text-slate-400">Indice disponible !</p>
								{/if}
							</button>
						</div>
					</div>
					<CharacterSearchInput
						{characters}
						{selectedCharacters}
						on:select={handleCharacterSelect}
					/>
				{/if}
			{:else}
				<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">
					<p class="text-center text-slate-300">Chargement du personnage...</p>
				</div>
			{/if}
		</section>

		{#if currentCharacter}
			<GuessHistoryTable
				{selectedCharacters}
				dailyCharacter={currentCharacter}
				{columnVisibility}
			/>

			<!-- Column Visibility Toggle -->
			<section class="mt-6">
				<div class="rounded-2xl border border-white/10 bg-white/5 p-3 sm:p-4 backdrop-blur">
					<div class="mb-3 flex items-center justify-between gap-3">
						<h3 class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-200">Colonnes</h3>
						<p class="text-xs text-slate-400">
							{Object.values(columnVisibility).filter(Boolean).length}/{Object.keys(columnVisibility).length}
						</p>
					</div>
					<div class="flex flex-wrap gap-2">
						{#each Object.entries(columnVisibility) as [column, isVisible] (column)}
							<button
								type="button"
								onclick={() => toggleColumnVisibility(column)}
								class="rounded-full border px-2.5 py-1 text-xs font-medium transition-colors {isVisible
									? 'border-amber-300/50 bg-amber-300/10 text-amber-100 hover:bg-amber-300/20'
									: 'border-white/20 bg-slate-900/40 text-slate-400 hover:bg-slate-900/60'}"
							>
								{columnDisplayNames[column] || column.replace(/([A-Z])/g, ' $1').trim()}
							</button>
						{/each}
					</div>
				</div>
			</section>
		{/if}
	</div>
</main>

<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);
		}
	}
	:global(.hint-unlocking) {
		animation: hint-unlock 0.6s ease-out;
	}
</style>
