<script lang="ts">
	import { keyboard } from '$lib/stores/keyboard.svelte.js';

	interface ShortcutItem {
		readonly keys: string;
		readonly description: string;
	}

	interface ShortcutCategory {
		readonly name: string;
		readonly shortcuts: readonly ShortcutItem[];
	}

	const categories: readonly ShortcutCategory[] = [
		{
			name: 'Global',
			shortcuts: [
				{ keys: 'Ctrl+K / Cmd+K', description: 'Open search' },
				{ keys: '?', description: 'Toggle keyboard shortcuts' },
				{ keys: '1-9', description: 'Switch to board by index' },
				{ keys: 'f', description: 'Toggle favorites bar' },
				{ keys: 'Escape', description: 'Close dialogs / overlays' }
			]
		},
		{
			name: 'Board View',
			shortcuts: [
				{ keys: 'j', description: 'Navigate to next app' },
				{ keys: 'k', description: 'Navigate to previous app' },
				{ keys: 'Enter', description: 'Open selected app' },
				{ keys: 'e', description: 'Toggle edit mode' }
			]
		}
	] as const;

	function handleBackdropClick(e: MouseEvent) {
		if (e.target === e.currentTarget) {
			keyboard.closeOverlay();
		}
	}
</script>

{#if keyboard.overlayOpen}
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div
		class="fixed inset-0 z-[90] flex items-center justify-center bg-black/60 backdrop-blur-sm"
		onclick={handleBackdropClick}
		onkeydown={(e) => e.key === 'Escape' && keyboard.closeOverlay()}
	>
		<div
			class="mx-4 w-full max-w-xl rounded-2xl border border-border bg-card shadow-[var(--shadow-lift)]"
			role="dialog"
			aria-label="Keyboard Shortcuts"
		>
			<!-- Header -->
			<div class="flex items-center justify-between border-b border-border px-6 py-4">
				<h2 class="text-lg font-semibold text-foreground">Keyboard Shortcuts</h2>
				<button
					type="button"
					onclick={() => keyboard.closeOverlay()}
					class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
					aria-label="Close"
				>
					<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
						<line x1="18" y1="6" x2="6" y2="18" />
						<line x1="6" y1="6" x2="18" y2="18" />
					</svg>
				</button>
			</div>

			<!-- Body -->
			<div class="px-6 py-5">
				<div class="grid gap-6 sm:grid-cols-2">
					{#each categories as category (category.name)}
						<div>
							<h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
								{category.name}
							</h3>
							<div class="space-y-2">
								{#each category.shortcuts as shortcut (shortcut.keys)}
									<div class="flex items-center justify-between gap-4">
										<span class="text-sm text-foreground">{shortcut.description}</span>
										<div class="flex shrink-0 gap-1">
											{#each shortcut.keys.split(' / ') as keyCombo (keyCombo)}
												<kbd
													class="inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground"
												>
													{keyCombo}
												</kbd>
											{/each}
										</div>
									</div>
								{/each}
							</div>
						</div>
					{/each}
				</div>
			</div>

			<!-- Footer hint -->
			<div class="border-t border-border px-6 py-3 text-center">
				<p class="text-xs text-muted-foreground">
					Shortcuts are disabled when typing in text fields
				</p>
			</div>
		</div>
	</div>
{/if}
