<script lang="ts">
	import { createEventDispatcher, onMount } from 'svelte';
	import { X, User, GitBranch } from 'lucide-svelte';

	export let open = false;

	const dispatch = createEventDispatcher<{
		select: 'user' | 'base';
		cancel: void;
	}>();

	function handleSelect(layer: 'user' | 'base') {
		dispatch('select', layer);
	}

	function handleCancel() {
		dispatch('cancel');
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape' && open) {
			handleCancel();
		}
	}

	function handleBackdropClick(e: MouseEvent) {
		if (e.target === e.currentTarget) {
			handleCancel();
		}
	}

	onMount(() => {
		window.addEventListener('keydown', handleKeydown);
		return () => {
			window.removeEventListener('keydown', handleKeydown);
		};
	});
</script>

{#if open}
	<!-- Backdrop -->
	<!-- svelte-ignore a11y-click-events-have-key-events -->
	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
	<div
		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
		on:click={handleBackdropClick}
		role="dialog"
		aria-modal="true"
		tabindex="-1"
	>
		<!-- Modal -->
		<div
			class="relative w-full max-w-md rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
		>
			<!-- Header -->
			<div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
				<h2 class="text-lg font-semibold text-neutral-900 dark:text-neutral-50">Where to save?</h2>
				<button
					type="button"
					on:click={handleCancel}
					class="rounded-lg p-1 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
				>
					<X size={20} />
				</button>
			</div>

			<!-- Body -->
			<div class="space-y-3 p-6">
				<button
					type="button"
					on:click={() => handleSelect('user')}
					class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
				>
					<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
						<User size={20} />
					</div>
					<div>
						<div class="font-medium text-neutral-900 dark:text-neutral-100">Personal Override</div>
						<div class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
							Save locally only. Changes won't sync upstream and stay on this machine.
						</div>
					</div>
				</button>

				<button
					type="button"
					on:click={() => handleSelect('base')}
					class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
				>
					<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
						<GitBranch size={20} />
					</div>
					<div>
						<div class="font-medium text-neutral-900 dark:text-neutral-100">Contribute to Database</div>
						<div class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
							Add to base operations. You'll need to commit and push manually.
						</div>
					</div>
				</button>
			</div>
		</div>
	</div>
{/if}
