<script lang="ts">
import { goto } from '$app/navigation';
import { m } from '$lib/paraglide/messages.js';
import GeschichteEditor from '$lib/geschichte/GeschichteEditor.svelte';
import JourneyEditor from '$lib/geschichte/JourneyEditor.svelte';
import BackButton from '$lib/shared/primitives/BackButton.svelte';
import { getErrorMessage } from '$lib/shared/errors';
import { csrfFetch } from '$lib/shared/cookies';
import type { PageData } from './$types';

let { data }: { data: PageData } = $props();

let submitting = $state(false);
let errorMessage: string | null = $state(null);

const isJourney = $derived(data.geschichte.type === 'JOURNEY');

async function handleSubmit(payload: {
	title: string;
	body: string;
	status: 'DRAFT' | 'PUBLISHED';
	personIds: string[];
}) {
	submitting = true;
	errorMessage = null;
	try {
		const res = await csrfFetch(`/api/geschichten/${data.geschichte.id}`, {
			method: 'PATCH',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify(payload)
		});
		if (!res.ok) {
			const code = (await res.json().catch(() => ({})))?.code;
			errorMessage = getErrorMessage(code);
			throw new Error('save failed');
		}
		goto(`/geschichten/${data.geschichte.id}`);
	} catch (e) {
		if (!errorMessage) {
			console.error('Geschichte save failed', e);
			errorMessage = getErrorMessage(undefined);
		}
		// Contract: onSubmit rejects on failure — both editors catch and keep
		// their dirty state instead of disarming the unsaved-changes guard.
		throw e;
	} finally {
		submitting = false;
	}
}
</script>

<div class="mx-auto max-w-5xl px-4 py-8">
	<div class="mb-6">
		<BackButton />
	</div>

	<h1 class="mb-6 font-serif text-3xl font-bold text-ink">
		{isJourney ? m.journey_edit_title_journey() : m.journey_edit_title_story()}:
		{data.geschichte.title}
	</h1>

	{#if errorMessage}
		<div
			class="mb-4 rounded border border-danger bg-danger/10 p-3 text-sm text-danger"
			role="alert"
		>
			{errorMessage}
		</div>
	{/if}

	{#if isJourney}
		<JourneyEditor geschichte={data.geschichte} onSubmit={handleSubmit} submitting={submitting} />
	{:else}
		<GeschichteEditor
			geschichte={data.geschichte}
			onSubmit={handleSubmit}
			submitting={submitting}
		/>
	{/if}
</div>
