<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 { 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);

async function handleSubmit(payload: {
	title: string;
	body: string;
	status: 'DRAFT' | 'PUBLISHED';
	personIds: string[];
	documentIds: string[];
}) {
	submitting = true;
	errorMessage = null;
	try {
		const res = await csrfFetch('/api/geschichten', {
			method: 'POST',
			headers: { 'Content-Type': 'application/json' },
			body: JSON.stringify(payload)
		});
		if (!res.ok) {
			const code = (await res.json().catch(() => ({})))?.code;
			errorMessage = getErrorMessage(code);
			return;
		}
		const created = await res.json();
		goto(`/geschichten/${created.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.geschichten_new_button()}</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
		initialPersons={data.initialPersons}
		initialDocuments={data.initialDocuments}
		onSubmit={handleSubmit}
		submitting={submitting}
	/>
</div>
