<script lang="ts">
import { enhance } from '$app/forms';
import { m } from '$lib/paraglide/messages.js';
import { getConfirmService } from '$lib/shared/services/confirm.svelte.js';
import BackButton from '$lib/shared/primitives/BackButton.svelte';
import DocumentEditLayout from '$lib/document/DocumentEditLayout.svelte';

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

const doc = $derived(data.document);
const { confirm } = getConfirmService();

async function handleDelete() {
	const confirmed = await confirm({
		title: m.doc_delete_confirm(),
		destructive: true
	});
	if (confirmed) {
		(document.getElementById('delete-form') as HTMLFormElement | null)?.requestSubmit();
	}
}
</script>

<svelte:head>
	<title>{doc.title || doc.originalFilename || 'Dokument'} — {m.doc_edit_heading()}</title>
</svelte:head>

<DocumentEditLayout doc={doc} formId="update-form" formAction="?/update" formError={form?.error}>
	{#snippet topbar()}
		<BackButton class="" />

		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
			{doc.title || doc.originalFilename}
		</p>

		<div class="w-40"></div>
	{/snippet}

	{#snippet actionbar()}
		<button
			type="button"
			onclick={handleDelete}
			class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 font-sans text-xs font-bold text-red-600 transition-colors hover:border-red-600 hover:bg-red-50"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				class="h-4 w-4"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
				aria-hidden="true"
			>
				<polyline points="3 6 5 6 21 6" />
				<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
				<path d="M10 11v6M14 11v6" />
				<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
			</svg>
			{m.btn_delete()}
		</button>

		<div class="flex items-center gap-3">
			<a
				href="/documents/{doc.id}"
				class="font-sans text-sm font-medium text-ink-2 transition-colors hover:text-ink"
			>
				{m.btn_cancel()}
			</a>

			<button
				type="submit"
				form="mark-for-review-form"
				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_mark_for_review()}
			</button>

			<button
				type="submit"
				form="update-form"
				class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/90"
			>
				{m.btn_save()}
			</button>
		</div>
	{/snippet}
</DocumentEditLayout>

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