<script lang="ts">
	import { onMount } from "svelte";
	import { editorStore } from "$lib/stores/editor.svelte";
	import { Toast, ConfirmDialog, Settings } from "$lib/components";
	import {
		EditorHeader,
		SettingsPanel,
		RoundEditor,
		QuestionEditModal,
	} from "$lib/components/editor";
	import {
		TutorialModal,
		type TutorialSlide,
	} from "$lib/components/kuldvillak/ui";
	import { getLocale } from "$lib/paraglide/runtime";
	import * as m from "$lib/paraglide/messages";

	// Question editing state
	let editingQ = $state<{ r: number; c: number; q: number } | null>(null);

	// Toast state
	let toastMessage = $state("");
	let toastType = $state<"error" | "success">("error");
	let toastVisible = $state(false);

	// Confirm dialog
	let showResetConfirm = $state(false);

	// Final round modal
	let showFinalRoundModal = $state(false);

	// Settings modal
	let showSettingsModal = $state(false);

	// Tutorial modal states
	let showRulesModal = $state(false);
	let showHowToModal = $state(false);

	// Tutorial slides - using paraglide translations with localized images
	const rulesSlides: TutorialSlide[] = $derived([
		{
			image: `/tutorials/${getLocale()}/rules-1.png`,
			text: m.kv_tutorial_rules_placeholder(),
		},
	]);

	const howToSlides: TutorialSlide[] = $derived([
		{
			image: `/tutorials/${getLocale()}/howto-1.png`,
			text: m.kv_tutorial_howto_1(),
		},
		{
			image: `/tutorials/${getLocale()}/howto-2.png`,
			text: m.kv_tutorial_howto_2(),
		},
		{
			image: `/tutorials/${getLocale()}/howto-3.png`,
			text: m.kv_tutorial_howto_3(),
		},
		{
			image: `/tutorials/${getLocale()}/howto-4.png`,
			text: m.kv_tutorial_howto_4(),
		},
		{
			image: `/tutorials/${getLocale()}/howto-5.png`,
			text: m.kv_tutorial_howto_5(),
		},
		{
			image: `/tutorials/${getLocale()}/howto-6.png`,
			text: m.kv_tutorial_howto_6(),
		},
		{
			image: `/tutorials/${getLocale()}/howto-7.png`,
			text: m.kv_tutorial_howto_7(),
		},
	]);

	// Active round for editing (shared between SettingsPanel and RoundEditor)
	let activeRoundIndex = $state(0);

	// Load saved data on mount
	onMount(() => {
		editorStore.load();
	});

	// Autosave effect
	$effect(() => {
		const _ = [
			editorStore.gameName,
			editorStore.settings,
			editorStore.teams,
			editorStore.rounds,
			editorStore.finalRound,
		];
		editorStore.save();
	});

	function showToast(message: string, type: "error" | "success" = "error") {
		toastMessage = message;
		toastType = type;
		toastVisible = true;
	}

	async function handleStart() {
		const result = await editorStore.startGame();
		if (!result.success && result.error) {
			showToast(result.error, "error");
		}
	}

	function handleReset() {
		editorStore.reset(m.kv_edit_r1(), m.kv_edit_r2());
		showToast(m.kv_edit_reset_success(), "success");
		showResetConfirm = false;
	}

	function handleQuestionClick(
		roundIndex: number,
		catIndex: number,
		qIndex: number,
	) {
		editingQ = { r: roundIndex, c: catIndex, q: qIndex };
	}
</script>

<svelte:head>
	<title>{m.kv_edit_title()} - {m.game_kuldvillak()}</title>
	<link rel="icon" href="/kuldvillak_favicon.svg" type="image/svg+xml" />
</svelte:head>

<div class="min-h-screen bg-kv-black flex flex-col gap-2 md:gap-4 p-2 md:p-4">
	<!-- Header -->
	<EditorHeader
		bind:gameName={editorStore.gameName}
		onStart={handleStart}
		onReset={() => (showResetConfirm = true)}
		onSettings={() => (showSettingsModal = true)}
		onImportSuccess={() => showToast(m.kv_toast_game_loaded(), "success")}
		onImportError={(err) => showToast(err, "error")}
	/>

	<!-- Settings Panel -->
	<SettingsPanel
		onEditFinalRound={() => (showFinalRoundModal = true)}
		onShowRules={() => (showRulesModal = true)}
		onShowHowTo={() => (showHowToModal = true)}
		{activeRoundIndex}
		onRoundSelect={(index) => (activeRoundIndex = index)}
	/>

	<!-- Game Board(s) -->
	<RoundEditor bind:activeRoundIndex onQuestionClick={handleQuestionClick} />
</div>

<!-- Question Edit Modal -->
{#if editingQ}
	<QuestionEditModal
		roundIndex={editingQ.r}
		catIndex={editingQ.c}
		qIndex={editingQ.q}
		onClose={() => (editingQ = null)}
	/>
{/if}

<!-- Reset Confirmation Dialog -->
<ConfirmDialog
	bind:open={showResetConfirm}
	title={m.kv_edit_reset_confirm_title()}
	message={m.kv_edit_reset_confirm_message()}
	confirmText={m.kv_edit_reset()}
	onconfirm={handleReset}
/>

<!-- Final Round Modal -->
{#if showFinalRoundModal}
	<QuestionEditModal
		onClose={() => (showFinalRoundModal = false)}
		finalRound={true}
	/>
{/if}

<!-- Settings Modal -->
<Settings bind:open={showSettingsModal} />

<!-- Toast -->
<Toast message={toastMessage} type={toastType} bind:visible={toastVisible} />

<!-- Tutorial Modals -->
<TutorialModal
	bind:open={showRulesModal}
	title={m.kv_edit_rules()}
	slides={rulesSlides}
/>
<TutorialModal
	bind:open={showHowToModal}
	title={m.kv_edit_how_to()}
	slides={howToSlides}
/>
