<script lang="ts">
import { enhance } from '$app/forms';
import TagInput from '$lib/components/TagInput.svelte';
import PersonTypeahead from '$lib/components/PersonTypeahead.svelte';
import PersonMultiSelect from '$lib/components/PersonMultiSelect.svelte';
import { untrack } from 'svelte';
import { isoToGerman, germanToIso } from '$lib/utils';
import { m } from '$lib/paraglide/messages.js';

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

let { document: doc } = untrack(() => data);
let tags = $state(doc.tags ? doc.tags.map((t: { name: string }) => t.name) : []);
let senderId = $state(doc.sender?.id ?? '');
let selectedReceivers = $state(doc.receivers ?? []);

let dateDisplay = $state(isoToGerman(doc.documentDate ?? ''));
let dateIso = $state(doc.documentDate ?? '');
let dateDirty = $state(false);
let confirmDelete = $state(false);

const dateInvalid = $derived(dateDirty && dateDisplay.length > 0 && dateIso === '');

function handleDateInput(e: Event) {
	const input = e.target as HTMLInputElement;
	const digits = input.value.replace(/\D/g, '').slice(0, 8);
	let formatted: string;
	if (digits.length <= 2) {
		formatted = digits;
	} else if (digits.length <= 4) {
		formatted = `${digits.slice(0, 2)}.${digits.slice(2)}`;
	} else {
		formatted = `${digits.slice(0, 2)}.${digits.slice(2, 4)}.${digits.slice(4)}`;
	}
	input.value = formatted;
	dateDisplay = formatted;
	dateIso = germanToIso(formatted);
	dateDirty = true;
}
</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 method="POST" enctype="multipart/form-data" use:enhance class="space-y-6 pb-20">
		<!-- ── Section 1: Wer & Wann ── -->
		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.doc_section_who_when()}
			</h2>

			<div class="grid grid-cols-1 gap-5 md:grid-cols-2">
				<!-- Datum -->
				<div>
					<label for="documentDate" class="mb-1 block text-sm font-medium text-ink-2"
						>{m.form_label_date()}</label
					>
					<input
						id="documentDate"
						type="text"
						inputmode="numeric"
						value={dateDisplay}
						oninput={handleDateInput}
						placeholder={m.form_placeholder_date()}
						maxlength="10"
						class="block w-full rounded border border-line p-2 text-sm shadow-sm
                               {dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:border-ink focus:ring-ink'}"
						aria-describedby={dateInvalid ? 'date-error' : undefined}
					/>
					<input type="hidden" name="documentDate" value={dateIso} />
					{#if dateInvalid}
						<p id="date-error" class="mt-1 text-xs text-red-600">{m.form_date_error()}</p>
					{/if}
				</div>

				<!-- Ort -->
				<div>
					<label for="location" class="mb-1 block text-sm font-medium text-ink-2"
						>{m.form_label_location()}</label
					>
					<input
						id="location"
						type="text"
						name="location"
						value={doc.location || ''}
						placeholder={m.form_placeholder_location()}
						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
					/>
				</div>

				<!-- Absender -->
				<div>
					<PersonTypeahead
						name="senderId"
						label={m.form_label_sender()}
						bind:value={senderId}
						initialName={doc.sender ? `${doc.sender.firstName} ${doc.sender.lastName}` : ''}
					/>
				</div>

				<!-- Empfänger -->
				<div>
					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_receivers()}</p>
					<PersonMultiSelect bind:selectedPersons={selectedReceivers} />
				</div>
			</div>
		</div>

		<!-- ── Section 2: Beschreibung ── -->
		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.doc_section_description()}
			</h2>

			<div class="space-y-5">
				<!-- Titel -->
				<div>
					<label for="title" class="mb-1 block text-sm font-medium text-ink-2"
						>{m.form_label_title()} *</label
					>
					<input
						id="title"
						type="text"
						name="title"
						value={doc.title || ''}
						required
						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
					/>
				</div>

				<!-- Aufbewahrungsort -->
				<div>
					<label for="documentLocation" class="mb-1 block text-sm font-medium text-ink-2"
						>{m.form_label_archive_location()}</label
					>
					<input
						id="documentLocation"
						type="text"
						name="documentLocation"
						value={doc.documentLocation || ''}
						placeholder={m.form_placeholder_archive_location()}
						class="block w-full rounded border border-line p-2 text-sm shadow-sm focus:border-ink focus:ring-ink"
					/>
					<p class="mt-1 text-xs text-ink-3">{m.form_helper_archive_location()}</p>
				</div>

				<!-- Schlagworte -->
				<div>
					<p class="mb-1 block text-sm font-medium text-ink-2">{m.form_label_tags()}</p>
					<TagInput bind:tags={tags} />
					<input type="hidden" name="tags" value={tags.join(',')} />
				</div>

				<!-- Inhalt -->
				<div>
					<label for="summary" class="mb-1 block text-sm font-medium text-ink-2"
						>{m.form_label_content()}</label
					>
					<textarea
						id="summary"
						name="summary"
						rows="5"
						placeholder={m.form_placeholder_content()}
						class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
						>{doc.summary || ''}</textarea
					>
				</div>
			</div>
		</div>

		<!-- ── Section 3: Transkription ── -->
		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.form_label_transcription()}
			</h2>
			<textarea
				id="transcription"
				name="transcription"
				rows="12"
				placeholder={m.form_placeholder_transcription()}
				class="block w-full rounded border border-line p-2 font-serif text-sm shadow-sm focus:border-ink focus:ring-ink"
				>{doc.transcription || ''}</textarea
			>
		</div>

		<!-- ── Section 4: Datei ── -->
		<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
			<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
				{m.doc_section_file()}
			</h2>

			<div class="mb-4 flex items-center gap-3 rounded bg-muted px-3 py-2 text-sm text-ink-2">
				<img
					src="/degruyter-icons/Simple/Medium-24px/SVG/Action/PDF-Document-MD.svg"
					alt=""
					aria-hidden="true"
					class="h-4 w-4 flex-shrink-0"
				/>
				<span
					>{m.doc_current_file_label()}
					<strong class="font-medium text-ink">{doc.originalFilename}</strong></span
				>
			</div>

			<label for="file-upload" class="mb-1 block text-sm font-medium text-ink-2">
				{m.doc_file_replace_label()}
				<span class="font-normal text-ink-3">({m.doc_file_replace_note()})</span>
			</label>
			<input
				id="file-upload"
				type="file"
				name="file"
				class="block w-full cursor-pointer text-sm
                       text-ink-2 file:mr-4 file:rounded
                       file:border-0 file:bg-muted
                       file:px-4 file:py-2
                       file:text-sm file:font-semibold
                       file:text-ink hover:file:bg-muted"
			/>
		</div>

		<!-- ── 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)]"
		>
			<!-- Left: delete -->
			<div class="flex items-center gap-3">
				{#if confirmDelete}
					<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
					<button
						type="submit"
						form="delete-form"
						class="rounded bg-red-600 px-4 py-1.5 text-sm font-bold text-white transition-colors hover:bg-red-700"
					>
						{m.btn_delete()}
					</button>
					<button
						type="button"
						onclick={() => (confirmDelete = false)}
						class="text-sm text-ink-2 transition-colors hover:text-ink"
					>
						{m.btn_cancel()}
					</button>
				{:else}
					<button
						type="button"
						onclick={() => (confirmDelete = true)}
						class="flex items-center gap-1.5 text-sm text-ink-3 transition-colors hover:text-red-600"
					>
						<img
							src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Delete/Delete-MD.svg"
							alt=""
							aria-hidden="true"
							class="h-4 w-4"
						/>
						{m.btn_delete()}
					</button>
				{/if}
			</div>

			<!-- Right: cancel + save -->
			<div class="flex items-center gap-4">
				<a
					href="/documents/{doc.id}"
					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
				>
					{m.btn_cancel()}
				</a>
				<button
					type="submit"
					class="rounded bg-primary px-6 py-2 text-sm font-bold tracking-widest text-white uppercase transition-colors hover:bg-primary/80"
				>
					{m.btn_save()}
				</button>
			</div>
		</div>
	</form>

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