<script lang="ts">
import { enhance } from '$app/forms';
import { untrack } from 'svelte';
import { m } from '$lib/paraglide/messages.js';
import WhoWhenSection from '$lib/components/document/WhoWhenSection.svelte';
import DescriptionSection from '$lib/components/document/DescriptionSection.svelte';
import TranscriptionSection from '$lib/components/document/TranscriptionSection.svelte';
import FileSectionEdit from './FileSectionEdit.svelte';
import SaveBar from './SaveBar.svelte';

let { data, form } = $props();

let { document: doc } = untrack(() => data);
let tags = $state(doc.tags ?? []);
let senderId = $state(doc.sender?.id ?? '');
let selectedReceivers = $state(doc.receivers ?? []);
</script>

<div class="mx-auto max-w-4xl px-4 py-8">
	<!-- Heading -->
	<div class="mb-6">
		<a
			href="/documents/{doc.id}"
			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
		>
			<img
				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
				alt=""
				aria-hidden="true"
				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
			/>
			{m.btn_back_to_document()}
		</a>
		<h1 class="font-serif text-3xl text-ink">
			{m.doc_edit_heading()} —
			<span class="text-ink/70">{doc.title || doc.originalFilename}</span>
		</h1>
	</div>

	{#if form?.error}
		<div class="mb-6 rounded border border-red-200 bg-red-50 p-4 text-red-700">{form.error}</div>
	{/if}

	<form
		id="update-form"
		method="POST"
		action="?/update"
		enctype="multipart/form-data"
		use:enhance
		class="space-y-6 pb-20"
	>
		<WhoWhenSection
			bind:senderId={senderId}
			bind:selectedReceivers={selectedReceivers}
			initialDateIso={doc.documentDate ?? ''}
			initialLocation={doc.location ?? ''}
			initialSenderName={doc.sender ? doc.sender.displayName : ''}
		/>
		<DescriptionSection
			bind:tags={tags}
			initialTitle={doc.title ?? ''}
			initialDocumentLocation={doc.documentLocation ?? ''}
			initialSummary={doc.summary ?? ''}
			titleRequired={true}
		/>
		<TranscriptionSection initialTranscription={doc.transcription ?? ''} />
		<FileSectionEdit originalFilename={doc.originalFilename} />
		<SaveBar docId={doc.id} />
	</form>

	<form id="mark-for-review-form" method="POST" action="?/markForReview" use:enhance></form>
	<form id="delete-form" method="POST" action="?/delete" use:enhance></form>
</div>
