<script lang="ts">
  import Twemoji from '$lib/components/ui/Twemoji.svelte';
  import { searchEmojis, type EmojiItem } from '$lib/utils/emojiData';

  interface Props {
    query: string;
    onSelect: (emoji: string) => void;
    onClose: () => void;
  }

  let {
    query,
    onSelect,
    onClose,
  }: Props = $props();

  let selectedIndex = $state(0);

  // Filter emojis based on query
  const filteredEmojis = $derived(
    searchEmojis(query).slice(0, 10)
  );

  // Reset selection when query changes
  $effect(() => {
    query;
    selectedIndex = 0;
  });

  function handleKeyDown(e: KeyboardEvent) {
    if (filteredEmojis.length === 0) return;

    switch (e.key) {
      case 'ArrowDown':
        e.preventDefault();
        selectedIndex = (selectedIndex + 1) % filteredEmojis.length;
        break;
      case 'ArrowUp':
        e.preventDefault();
        selectedIndex = (selectedIndex - 1 + filteredEmojis.length) % filteredEmojis.length;
        break;
      case 'Enter':
      case 'Tab':
        e.preventDefault();
        if (filteredEmojis[selectedIndex]) {
          onSelect(filteredEmojis[selectedIndex].emoji);
        }
        break;
      case 'Escape':
        e.preventDefault();
        onClose();
        break;
    }
  }

  // Expose keyboard handler for parent to call
  export { handleKeyDown };
</script>

{#if filteredEmojis.length > 0}
  <div
    class="absolute z-50 bg-dark border border-light/10 rounded-lg shadow-xl overflow-hidden max-h-64 overflow-y-auto"
    style="bottom: 100%; left: 0; margin-bottom: 8px; min-width: 280px;"
  >
    <div class="p-2 text-xs text-light/50 border-b border-light/10">
      Emojis matching :{query}
    </div>
    {#each filteredEmojis as emoji, i}
      <button
        class="w-full flex items-center gap-3 px-3 py-2 text-left transition-colors {i === selectedIndex ? 'bg-primary/20' : 'hover:bg-light/5'}"
        onclick={() => onSelect(emoji.emoji)}
        onmouseenter={() => selectedIndex = i}
      >
        <div class="w-6 h-6 flex items-center justify-center">
          <Twemoji emoji={emoji.emoji} size={20} />
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-light">:{emoji.names[0]}:</p>
          {#if emoji.names.length > 1}
            <p class="text-xs text-light/40 truncate">
              Also: {emoji.names.slice(1, 4).map(n => `:${n}:`).join(' ')}
            </p>
          {/if}
        </div>
      </button>
    {/each}
  </div>
{/if}
