<script lang="ts">
	import { getMdiPath, getAllMdiNames } from '$lib/mdi-lookup.svelte';

	let { value = '', onselect } = $props<{
		value: string;
		onselect: (icon: string) => void;
	}>();

	let open = $state(false);
	let search = $state('');
	let buttonEl: HTMLButtonElement;
	let dropdownStyle = $state('');

	const popular = [
		'mdiServer', 'mdiCamera', 'mdiImage', 'mdiVideo', 'mdiBell', 'mdiSend',
		'mdiRobot', 'mdiHome', 'mdiStar', 'mdiHeart', 'mdiAccount', 'mdiFolder',
		'mdiFolderImage', 'mdiAlbum', 'mdiImageMultiple', 'mdiCloudUpload',
		'mdiEye', 'mdiCog', 'mdiTelegram', 'mdiWebhook', 'mdiMessageText',
		'mdiCalendar', 'mdiClock', 'mdiMapMarker', 'mdiTag', 'mdiFilter',
		'mdiSort', 'mdiMagnify', 'mdiPencil', 'mdiDelete', 'mdiPlus',
		'mdiCheck', 'mdiClose', 'mdiAlert', 'mdiInformation', 'mdiShield',
		'mdiLink', 'mdiDownload', 'mdiUpload', 'mdiRefresh', 'mdiPlay',
		'mdiPause', 'mdiStop', 'mdiSkipNext', 'mdiMusic', 'mdiMovie',
		'mdiFileDocument', 'mdiEmail', 'mdiPhone', 'mdiChat', 'mdiShare',
	];

	const filtered = $derived.by(() => {
		const allIcons = getAllMdiNames();
		if (!search) return popular.filter(p => allIcons.includes(p));
		const q = search.toLowerCase();
		return allIcons.filter(k => k.toLowerCase().includes(q)).slice(0, 60);
	});

	function toggleOpen() {
		if (!open && buttonEl) {
			const rect = buttonEl.getBoundingClientRect();
			dropdownStyle = `position:fixed; z-index:9999; top:${rect.bottom + 4}px; left:${rect.left}px;`;
		}
		open = !open;
		if (!open) search = '';
	}

	function select(iconName: string) {
		onselect(iconName);
		open = false;
		search = '';
	}

	function handleKeydown(e: KeyboardEvent) {
		if (e.key === 'Escape' && open) {
			open = false;
			search = '';
		}
	}
</script>

<svelte:window onkeydown={open ? handleKeydown : undefined} />

<div class="inline-block">
	<button type="button" bind:this={buttonEl} onclick={toggleOpen}
		class="flex items-center justify-center gap-1 px-2 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] hover:bg-[var(--color-muted)] transition-colors">
		{#if value && getMdiPath(value)}
			<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(value)} /></svg>
		{:else}
			<span class="text-[var(--color-muted-foreground)] text-xs">Icon</span>
		{/if}
		<span class="text-xs text-[var(--color-muted-foreground)]">▼</span>
	</button>
</div>

{#if open}
	<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
		role="presentation"
		onclick={() => { open = false; search = ''; }}></div>

	<div style="{dropdownStyle} width: 20rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); padding: 0.75rem;"
		class="">
		<input type="text" bind:value={search} placeholder="Search icons..."
			class="w-full px-2 py-1 mb-2 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
		<div style="display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; max-height: 14rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;">
			<button type="button" onclick={() => select('')}
				class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] text-xs text-[var(--color-muted-foreground)]"
				title="No icon">✕</button>
			{#each filtered as iconName}
				<button type="button" onclick={() => select(iconName)}
					class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] {value === iconName ? 'bg-[var(--color-accent)]' : ''}"
					title={iconName.replace('mdi', '')}>
					<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(iconName)} /></svg>
				</button>
			{/each}
		</div>
	</div>
{/if}
