<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 FileSectionNew from './FileSectionNew.svelte';
import { type FilenameParseResult } from '$lib/utils/filename';

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

let tags: string[] = $state([]);
let senderId = $state(untrack(() => data.initialSenderId));
let selectedReceivers: { id: string; firstName: string; lastName: string }[] = $state(
	untrack(() => data.initialReceivers)
);

let parsedSuggestion = $state<FilenameParseResult>({});
</script>

<div class="mx-auto max-w-4xl px-4 py-8">
	<!-- Heading -->
	<div class="mb-6">
		<a
			href="/"
			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
		>
			<svg
				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
				fill="none"
				stroke="currentColor"
				viewBox="0 0 24 24"
			>
				<path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="2"
					d="M10 19l-7-7m0 0l7-7m-7 7h18"
				/>
			</svg>
			{m.btn_back_to_overview()}
		</a>
		<h1 class="font-serif text-3xl text-ink">{m.doc_new_heading()}</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 method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
		<WhoWhenSection
			bind:senderId={senderId}
			bind:selectedReceivers={selectedReceivers}
			initialSenderName={data.initialSenderName}
			suggestedDateIso={parsedSuggestion.dateIso ?? ''}
			suggestedSenderName={parsedSuggestion.personName ?? ''}
		/>
		<DescriptionSection
			bind:tags={tags}
			titleRequired={true}
			suggestedTitle={parsedSuggestion.suggestedTitle ?? ''}
		/>
		<TranscriptionSection />
		<FileSectionNew onfileParsed={(r) => (parsedSuggestion = r)} />

		<!-- Sticky Save Bar -->
		<div
			class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
		>
			<a href="/" class="text-sm font-medium text-ink-2 transition-colors hover:text-ink">
				{m.btn_cancel()}
			</a>
			<div class="flex items-center gap-3">
				<button
					type="submit"
					name="metadataComplete"
					value="false"
					formaction="?/save"
					class="rounded-sm border border-gray-300 px-5 py-2 font-sans text-xs font-bold tracking-widest text-gray-600 uppercase transition-colors hover:bg-gray-50"
				>
					{m.btn_save()}
				</button>
				<button
					type="submit"
					name="metadataComplete"
					value="true"
					formaction="?/saveReviewed"
					class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-colors hover:bg-brand-navy/90"
				>
					{m.btn_save_and_mark_reviewed()}
				</button>
			</div>
		</div>
	</form>
</div>
