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

	interface Props {
		open: boolean;
		title: string;
		message: string;
		requireConfirmation?: boolean;
		confirmText?: string;
		loading?: boolean;
		onConfirm: () => void;
		onCancel: () => void;
	}

	let {
		open,
		title,
		message,
		requireConfirmation = false,
		confirmText = 'DELETE',
		loading = false,
		onConfirm,
		onCancel
	}: Props = $props();

	let confirmInput = $state('');

	let canConfirm = $derived(
		!requireConfirmation || confirmInput.toUpperCase() === confirmText.toUpperCase()
	);

	function handleKeydown(event: KeyboardEvent) {
		if (event.key === 'Escape' && !loading) {
			onCancel();
		}
	}

	// Reset input when modal closes
	$effect(() => {
		if (!open) {
			confirmInput = '';
		}
	});

	// Lock body scroll when open
	$effect(() => {
		if (open) {
			document.body.style.overflow = 'hidden';
			return () => {
				document.body.style.overflow = '';
			};
		}
	});
</script>

<svelte:window onkeydown={handleKeydown} />

{#if open}
	<!-- Backdrop -->
	<button
		type="button"
		class="fixed inset-0 z-50 cursor-default bg-overlay backdrop-blur-sm"
		onclick={() => !loading && onCancel()}
		aria-label="Close modal"
		disabled={loading}
		transition:fade={{ duration: 200 }}
	></button>

	<!-- Modal -->
	<div
		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
		role="dialog"
		aria-modal="true"
		aria-labelledby="delete-modal-title"
		tabindex="-1"
		transition:fade={{ duration: 200 }}
	>
		<div
			class="pointer-events-auto mx-4 w-full max-w-md rounded-xl border border-error-500/30 bg-theme-card shadow-2xl"
			transition:scale={{ start: 0.95, duration: 200 }}
		>
			<!-- Header -->
			<div class="border-b border-error-500/20 bg-error-50/50 px-5 py-4 dark:bg-error-950/30">
				<h2
					id="delete-modal-title"
					class="text-lg font-semibold text-error-700 dark:text-error-400"
				>
					{title}
				</h2>
			</div>

			<!-- Body -->
			<div class="px-5 py-5">
				<p class="text-sm text-theme-secondary">{message}</p>

				{#if requireConfirmation}
					<div class="mt-4">
						<label for="confirm-input" class="block text-sm font-medium text-theme-secondary">
							Type <span class="font-mono font-bold text-error-600 dark:text-error-400"
								>{confirmText}</span
							> to confirm
						</label>
						<input
							id="confirm-input"
							type="text"
							bind:value={confirmInput}
							class="mt-2 w-full rounded-lg border border-theme bg-theme px-3 py-2 text-theme focus:border-error-500 focus:ring-1 focus:ring-error-500 focus:outline-none"
							placeholder={confirmText}
							disabled={loading}
							autocomplete="off"
						/>
					</div>
				{/if}
			</div>

			<!-- Footer -->
			<div class="flex justify-end gap-3 border-t border-theme px-5 py-4">
				<button type="button" class="btn-ghost" onclick={onCancel} disabled={loading}>
					Cancel
				</button>
				<button
					type="button"
					class="btn-danger"
					onclick={onConfirm}
					disabled={!canConfirm || loading}
				>
					{#if loading}
						<svg class="mr-2 h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none">
							<circle
								class="opacity-25"
								cx="12"
								cy="12"
								r="10"
								stroke="currentColor"
								stroke-width="4"
							></circle>
							<path
								class="opacity-75"
								fill="currentColor"
								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
							></path>
						</svg>
						Deleting...
					{:else}
						Delete
					{/if}
				</button>
			</div>
		</div>
	</div>
{/if}
