<script lang="ts">
	import { t } from 'svelte-i18n';
	import { fade, scale } from 'svelte/transition';

	interface Props {
		title: string;
		message: string;
		confirmLabel?: string;
		cancelLabel?: string;
		destructive?: boolean;
		onConfirm: () => void;
		onCancel: () => void;
	}

	let {
		title,
		message,
		confirmLabel,
		cancelLabel,
		destructive = true,
		onConfirm,
		onCancel
	}: Props = $props();

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') onCancel();
	}
</script>

<svelte:window onkeydown={handleKeydown} />

<!-- Backdrop -->
<div
	class="fixed inset-0 z-[60] flex items-center justify-center bg-black/30 backdrop-blur-sm"
	role="button"
	tabindex="-1"
	onclick={onCancel}
	onkeydown={(e) => e.key === 'Enter' && onCancel()}
	transition:fade={{ duration: 120 }}
>
	<!-- Dialog -->
	<!-- svelte-ignore a11y_click_events_have_key_events -->
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div
		class="mx-4 w-full max-w-sm rounded-2xl border border-border bg-card p-6 shadow-2xl"
		onclick={(e) => e.stopPropagation()}
		transition:scale={{ start: 0.95, duration: 150 }}
		role="alertdialog"
		tabindex="-1"
		aria-labelledby="confirm-dialog-title"
		aria-describedby="confirm-dialog-message"
	>
		<h2 id="confirm-dialog-title" class="mb-2 text-base font-semibold text-foreground">{title}</h2>
		<p id="confirm-dialog-message" class="mb-5 text-sm text-muted-foreground">{message}</p>

		<div class="flex items-center justify-end gap-2">
			<button
				type="button"
				onclick={onCancel}
				class="rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-accent"
			>
				{cancelLabel ?? ($t('common.cancel') ?? 'Cancel')}
			</button>
			<button
				type="button"
				onclick={onConfirm}
				class="rounded-lg px-4 py-2 text-sm font-medium transition-colors
					{destructive
						? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
						: 'bg-primary text-primary-foreground hover:bg-primary/90'}"
			>
				{confirmLabel ?? ($t('common.delete') ?? 'Delete')}
			</button>
		</div>
	</div>
</div>
