<script lang="ts">
	import { bibleBooks } from "$lib/types/bible";
	import { getFirstLetter, type Guess } from "$lib/utils/game";

	let {
		guesses,
		correctBookId,
		minimized = false,
	}: { guesses: Guess[]; correctBookId: string; minimized?: boolean } = $props();

	let hasGuesses = $derived(guesses.length > 0);
	let showMinimized = $derived(minimized);
	let expanded = $state(false);

	$effect(() => {
		if (!minimized) expanded = false;
	});

	function getBoxColor(isCorrect: boolean, isAdjacent?: boolean): string {
		if (isCorrect) return "bg-green-500 border-green-600";
		if (isAdjacent) return "bg-yellow-500 border-yellow-600";
		return "bg-red-500 border-red-600";
	}

	function getBookBoxStyle(guess: Guess): string {
		if (guess.book.id === correctBookId) {
			return "background-color: #22c55e; border-color: #16a34a;";
		}
		return "background-color: #ef4444; border-color: #dc2626;";
	}

	function getBoxContent(
		guess: Guess,
		column: "book" | "firstLetter" | "testament" | "section",
	): string {
		switch (column) {
			case "book":
				return guess.book.name;
			case "firstLetter":
				// Check if this is the special Epistles + "1" case
				const correctBook = bibleBooks.find(
					(b) => b.id === correctBookId,
				);
				const correctIsEpistlesWithNumber =
					(correctBook?.section === "Pauline Epistles" ||
						correctBook?.section === "General Epistles") &&
					correctBook.name[0] === "1";
				const guessIsEpistlesWithNumber =
					(guess.book.section === "Pauline Epistles" ||
						guess.book.section === "General Epistles") &&
					guess.book.name[0] === "1";

				if (
					correctIsEpistlesWithNumber &&
					guessIsEpistlesWithNumber &&
					guess.firstLetterMatch
				) {
					const words = [
						"Exactly",
						"Right",
						"Yes",
						"Naturally",
						"Of course",
						"Sure",
					];
					return words[Math.floor(Math.random() * words.length)]; // Special wordplay case
				}
				return getFirstLetter(guess.book.name); // Normal case: show first letter, ignoring numbers
			case "testament":
				return (
					guess.book.testament.charAt(0).toUpperCase() +
					guess.book.testament.slice(1).toLowerCase()
				);
			case "section":
				return guess.book.section;
		}
	}
</script>

{#if hasGuesses}
	<div class="space-y-3">
		<!-- Column Headers -->
		<div
			class="flex gap-2 justify-center mb-4 pb-2 border-b border-gray-400 dark:border-gray-600"
		>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				Testament
			</div>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				Section
			</div>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				First Letter
			</div>
			<div
				class="w-1/4 shrink-0 text-center text-sm font-bold text-gray-700 dark:text-gray-300"
			>
				Book
			</div>
		</div>

		{#if showMinimized && !expanded}
			<!-- Minimized view: first guess, divider, last two guesses -->

			<!-- First guess (no animation since post-win) -->
			{@const firstGuess = guesses[0]}
			<div class="flex gap-2 justify-center">
				<!-- Testament Column -->
				<div
					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
						firstGuess.testamentMatch,
					)}"
					style="animation: none; opacity: 1; transform: none;"
				>
					<span class="text-center leading-tight px-1 text-shadow-sm"
						>{getBoxContent(firstGuess, "testament")}</span
					>
				</div>

				<!-- Section Column -->
				<div
					class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
						firstGuess.sectionMatch,
						firstGuess.adjacent,
					)}"
					style="animation: none; opacity: 1; transform: none;"
				>
					<span class="text-center leading-tight px-1 text-shadow-sm"
						>{getBoxContent(firstGuess, "section")}
						{#if firstGuess.adjacent}
							‼️
						{/if}
					</span>
				</div>

				<!-- First Letter Column -->
				<div
					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
						firstGuess.firstLetterMatch,
					)}"
					style="animation: none; opacity: 1; transform: none;"
				>
					<span class="text-center leading-tight px-1 text-shadow-sm"
						>{getBoxContent(firstGuess, "firstLetter")}</span
					>
				</div>

				<!-- Book Column -->
				<div
					class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in"
					style="animation: none; opacity: 1; transform: none; {getBookBoxStyle(firstGuess)}"
				>
					<span class="text-center leading-tight px-1 text-shadow-lg"
						>{getBoxContent(firstGuess, "book")}</span
					>
				</div>
			</div>

			<!-- Expand/collapse divider -->
			<button
				type="button"
				class="w-full flex items-center gap-3 py-1 cursor-pointer group"
				onclick={() => (expanded = true)}
			>
				<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
				<span class="text-xs font-medium text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors whitespace-nowrap select-none">
					expand guesses ▼
				</span>
				<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
			</button>

			<!-- Last two guesses (no animation since post-win) -->
			{#each guesses.slice(-2) as guess (guess.book.id)}
				<div class="flex gap-2 justify-center">
					<!-- Testament Column -->
					<div
						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
							guess.testamentMatch,
						)}"
						style="animation: none; opacity: 1; transform: none;"
					>
						<span class="text-center leading-tight px-1 text-shadow-sm"
							>{getBoxContent(guess, "testament")}</span
						>
					</div>

					<!-- Section Column -->
					<div
						class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
							guess.sectionMatch,
							guess.adjacent,
						)}"
						style="animation: none; opacity: 1; transform: none;"
					>
						<span class="text-center leading-tight px-1 text-shadow-sm"
							>{getBoxContent(guess, "section")}
							{#if guess.adjacent}
								‼️
							{/if}
						</span>
					</div>

					<!-- First Letter Column -->
					<div
						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
							guess.firstLetterMatch,
						)}"
						style="animation: none; opacity: 1; transform: none;"
					>
						<span class="text-center leading-tight px-1 text-shadow-sm"
							>{getBoxContent(guess, "firstLetter")}</span
						>
					</div>

					<!-- Book Column -->
					<div
						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in"
						style="animation: none; opacity: 1; transform: none; {getBookBoxStyle(guess)}"
					>
						<span class="text-center leading-tight px-1 text-shadow-lg"
							>{getBoxContent(guess, "book")}</span
						>
					</div>
				</div>
			{/each}
		{:else}
			<!-- Full view: all guesses -->

			{#each guesses as guess, rowIndex (guess.book.id)}
				<div class="flex gap-2 justify-center">
					<!-- Testament Column -->
					<div
						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
							guess.testamentMatch,
						)}"
						style={showMinimized
							? "animation: none; opacity: 1; transform: none;"
							: `animation-delay: ${rowIndex * 1000 + 0 * 500}ms`}
					>
						<span class="text-center leading-tight px-1 text-shadow-sm"
							>{getBoxContent(guess, "testament")}</span
						>
					</div>

					<!-- Section Column -->
					<div
						class="relative w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
							guess.sectionMatch,
							guess.adjacent,
						)}"
						style={showMinimized
							? "animation: none; opacity: 1; transform: none;"
							: `animation-delay: ${rowIndex * 1000 + 1 * 500}ms`}
					>
						<span class="text-center leading-tight px-1 text-shadow-sm"
							>{getBoxContent(guess, "section")}
							{#if guess.adjacent}
								‼️
							{/if}
						</span>
					</div>

					<!-- First Letter Column -->
					<div
						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-2 border-opacity-80 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-md animate-flip-in {getBoxColor(
							guess.firstLetterMatch,
						)}"
						style={showMinimized
							? "animation: none; opacity: 1; transform: none;"
							: `animation-delay: ${rowIndex * 1000 + 2 * 500}ms`}
					>
						<span class="text-center leading-tight px-1 text-shadow-sm"
							>{getBoxContent(guess, "firstLetter")}</span
						>
					</div>

					<!-- Book Column -->
					<div
						class="w-1/4 shrink-0 h-16 sm:h-20 md:h-24 border-4 rounded-lg flex items-center justify-center text-white font-bold text-base sm:text-lg md:text-xl shadow-lg animate-flip-in"
						style={showMinimized
							? `animation: none; opacity: 1; transform: none; ${getBookBoxStyle(guess)}`
							: `animation-delay: ${rowIndex * 1000 + 3 * 500}ms; ${getBookBoxStyle(guess)}`}
					>
						<span class="text-center leading-tight px-1 text-shadow-lg"
							>{getBoxContent(guess, "book")}</span
						>
					</div>
				</div>
				{#if showMinimized && expanded && rowIndex === 0}
					<!-- Collapse divider shown right below the final (correct) guess -->
					<button
						type="button"
						class="w-full flex items-center gap-3 py-1 cursor-pointer group"
						onclick={() => (expanded = false)}
					>
						<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
						<span class="text-xs font-medium text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200 transition-colors whitespace-nowrap select-none">
							collapse guesses ▲
						</span>
						<div class="flex-1 h-px bg-gray-300 dark:bg-gray-600 group-hover:bg-gray-400 dark:group-hover:bg-gray-500 transition-colors"></div>
					</button>
				{/if}
			{/each}
		{/if}
	</div>
{/if}

<style>
	@keyframes flipIn {
		0% {
			opacity: 0;
			transform: rotateX(-90deg);
		}
		50% {
			transform: rotateX(0deg);
		}
		100% {
			opacity: 1;
			transform: rotateX(0deg);
		}
	}

	.animate-flip-in {
		opacity: 0;
		transform: rotateX(-90deg);
		animation: flipIn 0.6s ease-out forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in {
		animation: fadeIn 0.5s ease-out;
	}
</style>
