<script lang="ts">
	import { undoQueue, undo } from '$lib/sync/undoQueue';
	import * as m from '$lib/paraglide/messages';

	// Show the most recent undoable (if any)
	const latest = $derived($undoQueue[$undoQueue.length - 1] ?? null);

	async function handleUndo() {
		if (latest) await undo(latest.id);
	}
</script>

{#if latest}
	<div
		data-testid="undo-toast"
		role="status"
		aria-live="polite"
		class="pointer-events-none fixed inset-x-0 z-50 flex justify-center px-4 md:bottom-8"
		style="bottom: calc(env(safe-area-inset-bottom) + 4.5rem)"
	>
		<div class="pointer-events-auto flex min-w-[16rem] items-center gap-3 rounded-md bg-slate-900 px-4 py-2.5 text-sm text-white shadow-[0px_20px_40px_rgba(15,23,42,0.25)] dark:bg-slate-100 dark:text-slate-900">
			<span class="truncate">{latest.label}</span>
			<button
				type="button"
				onclick={handleUndo}
				class="ml-auto rounded px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-white/80 hover:text-white dark:text-slate-900/80 dark:hover:text-slate-900"
			>
				{m.undo()}
			</button>
		</div>
	</div>
{/if}
