<!--
  Confirm dialog with fade/scale-in animation. Adds Escape-to-cancel,
  autofocus on the confirm button, and aria-modal so assistive tech
  treats the rest of the document as inert while the dialog is open.
-->
<script lang="ts">
	import { IconAlert } from '$lib/components/icons';
	import { t } from '$lib/i18n';

	interface Props {
		open: boolean;
		title: string;
		message: string;
		confirmLabel?: string;
		confirmVariant?: 'danger' | 'primary';
		onconfirm: () => void;
		oncancel: () => void;
	}

	const {
		open,
		title,
		message,
		confirmLabel = $t('common.confirm'),
		confirmVariant = 'primary',
		onconfirm,
		oncancel
	}: Props = $props();

	const iconBgClass = $derived(
		confirmVariant === 'danger'
			? 'bg-[var(--color-danger-light)]'
			: 'bg-[var(--color-brand-50)]'
	);

	const iconColorClass = $derived(
		confirmVariant === 'danger'
			? 'text-[var(--color-danger)]'
			: 'text-[var(--color-brand-600)]'
	);

	let confirmButton: HTMLButtonElement | null = $state(null);

	// Focus the confirm button when the dialog opens so keyboard
	// users can hit Enter immediately. Scoped to the open transition;
	// repeated opens re-focus.
	$effect(() => {
		if (open && confirmButton) {
			// queueMicrotask so the DOM is mounted before focus().
			queueMicrotask(() => confirmButton?.focus());
		}
	});

	function handleKey(e: KeyboardEvent) {
		if (!open) return;
		if (e.key === 'Escape') {
			e.preventDefault();
			oncancel();
		}
	}
</script>

<svelte:window onkeydown={handleKey} />

{#if open}
	<!-- Backdrop -->
	<div class="fixed inset-0 z-40 bg-[var(--surface-overlay)] animate-fade-in" role="presentation" onclick={oncancel}></div>

	<!-- Dialog -->
	<div
		class="fixed inset-0 z-50 flex items-center justify-center p-4"
		role="dialog"
		aria-modal="true"
		aria-labelledby="confirm-dialog-title"
	>
		<div class="dlg w-full max-w-md animate-scale-in">
			<span class="dlg-reg dlg-reg-tl"></span>
			<span class="dlg-reg dlg-reg-tr"></span>
			<span class="dlg-reg dlg-reg-bl"></span>
			<span class="dlg-reg dlg-reg-br"></span>

			<div class="flex items-start gap-4">
				<div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full {iconBgClass}">
					<IconAlert size={20} class={iconColorClass} />
				</div>
				<div class="flex-1">
					<h3 id="confirm-dialog-title" class="dlg-title">{title}</h3>
					<p class="dlg-msg">{message}</p>
				</div>
			</div>

			<div class="mt-6 flex justify-end gap-2">
				<button type="button" class="forge-btn-ghost" onclick={oncancel}>
					{$t('common.cancel')}
				</button>
				<button
					type="button"
					class="dlg-confirm {confirmVariant}"
					onclick={onconfirm}
					bind:this={confirmButton}
				>
					{confirmLabel}
				</button>
			</div>
		</div>
	</div>
{/if}

<style>
	.dlg {
		position: relative;
		background: var(--surface-card);
		border: 1px solid var(--border-primary);
		border-radius: var(--radius-2xl);
		padding: 1.5rem;
		box-shadow: var(--shadow-md);
	}
	.dlg-reg {
		position: absolute;
		width: 10px; height: 10px;
		border-color: var(--color-brand-500);
		border-style: solid;
		border-width: 0;
		pointer-events: none;
	}
	.dlg-reg-tl { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: var(--radius-2xl); }
	.dlg-reg-tr { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: var(--radius-2xl); }
	.dlg-reg-bl { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: var(--radius-2xl); }
	.dlg-reg-br { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: var(--radius-2xl); }

	.dlg-title {
		font-family: var(--font-family-sans);
		font-weight: 700;
		font-size: 1.15rem;
		letter-spacing: -0.01em;
		line-height: 1.25;
		color: var(--text-primary);
		margin: 0;
	}
	.dlg-msg {
		font-size: 0.9rem;
		color: var(--text-secondary);
		line-height: 1.5;
		margin: 0.5rem 0 0;
	}

	.dlg-confirm {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0.55rem 1rem;
		border: 0;
		border-radius: var(--radius-lg);
		font-family: var(--forge-mono);
		font-size: 0.72rem;
		font-weight: 600;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #fff;
		cursor: pointer;
		transition: transform 150ms ease, box-shadow 150ms ease;
	}
	.dlg-confirm.primary {
		background: var(--color-brand-600);
		box-shadow: 0 0 0 0 var(--forge-glow);
	}
	.dlg-confirm.primary:hover {
		background: var(--color-brand-700);
		transform: translateY(-1px);
		box-shadow: 0 0 0 4px var(--forge-glow);
	}
	.dlg-confirm.danger {
		background: var(--color-danger);
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-danger) 30%, transparent);
	}
	.dlg-confirm.danger:hover {
		background: var(--color-danger-dark);
		transform: translateY(-1px);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-danger) 30%, transparent);
	}
</style>
