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

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

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

async function handleSubmit(payload: {
	title: string;
	body: string;
	status: 'DRAFT' | 'PUBLISHED';
	personIds: string[];
	documentIds: string[];
}) {
	submitting = true;
	errorMessage = null;
	try {
		const res = await fetch(`/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);
			return;
		}
		goto(`/geschichten/${data.geschichte.id}`);
	} 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">
		{m.btn_edit()}: {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}

	<GeschichteEditor geschichte={data.geschichte} onSubmit={handleSubmit} submitting={submitting} />
</div>
