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

// Context must already be set by the parent layout via provideConfirmService().
const service = getConfirmService();

let dialogEl: HTMLDialogElement;

$effect(() => {
	if (service.options) {
		dialogEl.showModal();
	} else {
		dialogEl.close();
	}
});
</script>

<dialog
	bind:this={dialogEl}
	class="m-auto w-full max-w-sm rounded-sm border border-line bg-surface p-6 shadow-lg backdrop:bg-black/50"
	aria-labelledby="confirm-title"
	oncancel={(e) => {
		e.preventDefault();
		service.settle(false);
	}}
	onclick={(e) => {
		const opts = service.options;
		if (!opts) return;
		const closeOnBackdrop = opts.closeOnBackdrop ?? !opts.destructive;
		if (closeOnBackdrop && e.target === dialogEl) {
			service.settle(false);
		}
	}}
>
	{#if service.options}
		{@const opts = service.options}
		<h2 id="confirm-title" class="mb-2 font-serif text-lg text-ink">{opts.title}</h2>
		{#if opts.body !== undefined}
			<p class="mb-6 text-sm text-ink-2">{opts.body}</p>
		{/if}
		<div class="flex items-center justify-end gap-3">
			<button
				type="button"
				class="min-h-[44px] cursor-pointer rounded-sm border border-line px-4 py-2 text-sm font-medium text-ink-2 transition-colors hover:bg-muted"
				onclick={() => service.settle(false)}
			>
				{opts.cancelLabel ?? m.btn_cancel()}
			</button>
			<button
				type="button"
				class="min-h-[44px] cursor-pointer rounded-sm px-4 py-2 text-sm font-medium transition-colors {opts.destructive
					? 'bg-danger text-danger-fg hover:bg-danger/80'
					: 'bg-primary text-primary-fg hover:bg-primary/80'}"
				onclick={() => service.settle(true)}
			>
				{opts.confirmLabel ?? m.btn_confirm()}
			</button>
		</div>
	{/if}
</dialog>
