<script lang="ts">
	import { onMount } from "svelte";

	interface ImposterData {
		verses: string[];
		refs: string[];
		imposterIndex: number;
	}

	let data: ImposterData | null = $state(null);
	let clicked: boolean[] = $state([]);
	let gameOver = $state(false);
	let loading = $state(true);
	let error: string | null = $state(null);

	async function loadGame() {
		try {
			const res = await fetch("/api/imposter");
			if (!res.ok) {
				throw new Error(`HTTP ${res.status}: ${res.statusText}`);
			}
			data = (await res.json()) as ImposterData;
			clicked = new Array(data.verses.length).fill(false);
			gameOver = false;
		} catch (e) {
			error = e instanceof Error ? e.message : "Unknown error";
		} finally {
			loading = false;
		}
	}

	function handleClick(index: number) {
		if (gameOver || !data || clicked[index]) return;
		clicked[index] = true;
		if (index !== data.imposterIndex) {
			clicked[data.imposterIndex] = true;
		}
		gameOver = true;
	}

	function newGame() {
		loading = true;
		error = null;
		data = null;
		loadGame();
	}

	onMount(loadGame);

	function formatVerse(verse: string): string {
		let formatted = verse;

		// Handle unbalanced opening/closing punctuation
		const pairs: [string, string][] = [
			["(", ")"],
			["[", "]"],
			["{", "}"],
			['"', '"'],
			["'", "'"],
			["\u201C", "\u201D"], // \u201C
			["\u2018", "\u2019"], // \u2018
		];
		for (const [open, close] of pairs) {
			if (formatted.startsWith(open) && !formatted.includes(close)) {
				formatted += "..." + close;
				break;
			}
		}
		for (const [open, close] of pairs) {
			if (formatted.endsWith(close) && !formatted.includes(open)) {
				formatted = open + "..." + formatted;
				break;
			}
		}

		if (/^[a-z]/.test(formatted)) {
			formatted = "..." + formatted;
		}
		// Replace trailing punctuation with ellipsis
		// Preserve closing quotes/brackets that may have been added
		formatted = formatted.replace(
			/[,:;-—]([)\]}\"\'\u201D\u2019]*)$/,
			"...$1",
		);
		return formatted;
	}
</script>

<div class="imposter-game">
	{#if loading}
		<p class="loading">Loading verses...</p>
	{:else if error}
		<div class="error">
			<p>Error: {error}</p>
			<button onclick={newGame}>Retry</button>
		</div>
	{:else if data}
		<!-- <div class="instructions">
      <p>Click the verse that doesn't belong (from a different book).</p>
    </div> -->
		<div class="verses">
			{#each data.verses as verse, i}
				<div class="verse-item">
					<button
						class="verse-button"
						class:clicked={clicked[i]}
						class:correct={clicked[i] && i === data.imposterIndex}
						class:wrong={clicked[i] && i !== data.imposterIndex}
						onclick={() => handleClick(i)}
						disabled={gameOver}
					>
						{formatVerse(verse)}
					</button>
					{#if gameOver}
						<div class="ref">{data.refs[i]}</div>
					{/if}
				</div>
			{/each}
		</div>
		{#if gameOver}
			<div class="result">
				<button onclick={newGame}>New Game</button>
			</div>
		{/if}
	{/if}
</div>

<style>
	.imposter-game {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		padding: 2rem;
		max-width: 900px;
		margin: 0 auto;
	}

	.loading,
	.error {
		text-align: center;
	}

	/*.instructions {
    text-align: center;
    font-style: italic;
    color: #666;
  }*/

	.verses {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		gap: 1.5rem;
		width: 100%;
	}

	.verse-item {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.verse-button {
		padding: 1.5rem;
		font-size: 1.1rem;
		line-height: 1.4;
		border: 3px solid #ddd;
		background: #fafafa;
		cursor: pointer;
		border-radius: 12px;
		transition: all 0.3s ease;
		min-height: 100px;
		text-align: left;
		white-space: pre-wrap;
		word-wrap: break-word;
	}

	.verse-button:hover:not(.clicked):not(:disabled) {
		border-color: #007bff;
		background: #f8f9ff;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
	}

	.verse-button:disabled {
		cursor: not-allowed;
		opacity: 0.6;
	}

	.verse-button.clicked {
		cursor: default;
	}

	.correct {
		background: #d4edda !important;
		border-color: #28a745 !important;
		color: #155724;
		box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.3);
	}

	.wrong {
		background: #f8d7da !important;
		border-color: #dc3545 !important;
		color: #721c24;
		box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.3);
	}

	.ref {
		font-size: 0.9rem;
		font-weight: 500;
		text-align: center;
		color: #555;
		padding-top: 0.25rem;
	}

	.verse-button.correct ~ .ref {
		color: #28a745;
		font-weight: bold;
	}

	.verse-button.wrong ~ .ref {
		color: #dc3545;
	}

	.result {
		display: flex;
		justify-content: center;
	}

	.result button,
	.error button {
		padding: 0.75rem 2rem;
		background: #007bff;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 1rem;
		cursor: pointer;
		transition: background 0.2s;
	}

	.result button:hover,
	.error button:hover {
		background: #0056b3;
	}
</style>
