<script lang="ts">
	import { goto } from '$app/navigation';
	import { Search, Plus, Package, Clock } from '@lucide/svelte';

	interface Props {
		open: boolean;
		onclose: () => void;
	}

	let { open = $bindable(), onclose }: Props = $props();

	let query = $state('');
	let selectedIndex = $state(0);
	let inputEl: HTMLInputElement | undefined = $state();

	const quickActions = [
		{ icon: Plus, label: 'Log food', desc: 'Quick add calories', href: '/fitness' },
		{ icon: Package, label: 'New inventory item', desc: 'Add a new item to track', href: '/inventory' },
		{ icon: Clock, label: 'Go to Budget', desc: 'View transactions', href: '/budget' },
	];

	let filteredActions = $derived(
		query.trim()
			? quickActions.filter(a =>
				a.label.toLowerCase().includes(query.toLowerCase()) ||
				a.desc.toLowerCase().includes(query.toLowerCase())
			)
			: quickActions
	);

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape') {
			onclose();
			return;
		}
		if (e.key === 'ArrowDown') {
			e.preventDefault();
			selectedIndex = Math.min(selectedIndex + 1, filteredActions.length - 1);
		}
		if (e.key === 'ArrowUp') {
			e.preventDefault();
			selectedIndex = Math.max(selectedIndex - 1, 0);
		}
		if (e.key === 'Enter' && filteredActions[selectedIndex]) {
			goto(filteredActions[selectedIndex].href);
			onclose();
		}
	}

	$effect(() => {
		if (open) {
			query = '';
			selectedIndex = 0;
			// Focus input after render
			requestAnimationFrame(() => inputEl?.focus());
		}
	});
</script>

{#if open}
	<!-- svelte-ignore a11y_no_static_element_interactions -->
	<div class="cmd-overlay open" onclick={(e) => { if (e.target === e.currentTarget) onclose(); }} onkeydown={handleKeydown}>
		<div class="cmd-box" role="dialog" aria-label="Command palette">
			<div class="cmd-input-wrap">
				<Search size={18} />
				<input
					class="cmd-input"
					placeholder="Search transactions, items, or type a command..."
					bind:value={query}
					bind:this={inputEl}
					onkeydown={handleKeydown}
				/>
			</div>
			<div class="cmd-results">
				{#each filteredActions as action, i}
					<button
						class="cmd-item"
						class:selected={i === selectedIndex}
						onclick={() => { goto(action.href); onclose(); }}
						onmouseenter={() => selectedIndex = i}
					>
						<div class="cmd-item-icon">
							<action.icon size={16} />
						</div>
						<div>
							<div class="cmd-item-text">{action.label}</div>
							<div class="cmd-item-desc">{action.desc}</div>
						</div>
					</button>
				{/each}
			</div>
			<div class="cmd-footer">
				<div class="cmd-hint"><kbd>&uarr;&darr;</kbd> navigate</div>
				<div class="cmd-hint"><kbd>&crarr;</kbd> select</div>
				<div class="cmd-hint"><kbd>esc</kbd> close</div>
			</div>
		</div>
	</div>
{/if}

<style>
	.cmd-overlay {
		position: fixed;
		inset: 0;
		background: var(--overlay);
		z-index: 100;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding-top: 20vh;
	}
	.cmd-box {
		width: 560px;
		max-width: 90vw;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: 14px;
		box-shadow: 0 24px 48px rgba(0,0,0,0.2);
		overflow: hidden;
	}
	.cmd-input-wrap {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--border);
	}
	.cmd-input-wrap :global(svg) { color: var(--text-3); flex-shrink: 0; }
	.cmd-input {
		flex: 1;
		background: none;
		border: none;
		outline: none;
		font-size: var(--text-md);
		color: var(--text-1);
		font-family: var(--font);
	}
	.cmd-input::placeholder { color: var(--text-4); }
	.cmd-results { max-height: 300px; overflow-y: auto; }
	.cmd-item {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		padding: 10px var(--sp-4);
		cursor: pointer;
		transition: background var(--transition);
		width: 100%;
		background: none;
		border: none;
		text-align: left;
	}
	.cmd-item:hover, .cmd-item.selected { background: var(--accent-dim); }
	.cmd-item-icon {
		width: 32px;
		height: 32px;
		border-radius: var(--radius-md);
		background: var(--card-secondary);
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.cmd-item-icon :global(svg) { color: var(--text-3); }
	.cmd-item-text { font-size: var(--text-base); color: var(--text-1); }
	.cmd-item-desc { font-size: var(--text-sm); color: var(--text-3); }
	.cmd-footer {
		padding: var(--sp-2) var(--sp-4);
		border-top: 1px solid var(--border);
		display: flex;
		gap: var(--sp-3);
	}
	.cmd-hint {
		font-size: var(--text-xs);
		color: var(--text-4);
		display: flex;
		align-items: center;
		gap: var(--sp-1);
	}
	.cmd-hint kbd {
		font-family: var(--mono);
		font-size: var(--text-xs);
		padding: 1px 4px;
		border-radius: 3px;
		background: var(--card-secondary);
		border: 1px solid var(--border);
	}
</style>
