<script lang="ts">
import { m } from '$lib/paraglide/messages.js';

let { docId }: { docId: string } = $props();

let confirmDelete = $state(false);
</script>

<div
	class="sticky bottom-0 z-10 -mx-4 border-t border-line bg-surface px-4 py-3 shadow-[0_-2px_8px_rgba(0,0,0,0.06)] sm:px-6 sm:py-4"
>
	<!-- Desktop: delete left, cancel+buttons right -->
	<!-- Mobile: action buttons stacked full-width, delete+cancel row at bottom -->
	<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
		<!-- Primary actions first (top on mobile, right on desktop) -->
		<div class="flex flex-col gap-2 sm:order-last sm:flex-row sm:items-center sm:gap-4">
			<button
				type="submit"
				form="mark-for-review-form"
				class="w-full rounded-sm border border-line px-4 py-2.5 font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:bg-muted sm:w-auto sm:py-2"
			>
				{m.btn_mark_for_review()}
			</button>
			<button
				type="submit"
				class="w-full rounded bg-primary px-6 py-2.5 font-sans text-sm font-bold tracking-widest text-primary-fg uppercase transition-colors hover:bg-primary/80 sm:w-auto sm:py-2"
			>
				{m.btn_save()}
			</button>
		</div>

		<!-- Secondary: delete + cancel (row on both mobile and desktop) -->
		<div class="flex items-center justify-between sm:justify-start sm:gap-4">
			{#if confirmDelete}
				<span class="font-sans text-sm text-red-700">{m.doc_delete_confirm()}</span>
				<div class="flex items-center gap-3">
					<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>
				</div>
			{:else}
				<button
					type="button"
					onclick={() => (confirmDelete = true)}
					class="flex items-center gap-1.5 rounded border border-red-300 px-4 py-1.5 text-sm 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>
				<a
					href="/documents/{docId}"
					class="text-sm font-medium text-ink-2 transition-colors hover:text-ink"
				>
					{m.btn_cancel()}
				</a>
			{/if}
		</div>
	</div>
</div>
