<script>
  import { goto } from '$app/navigation';
  import { clearSearch } from '$lib/stores/searchStore';

  let { results = [], query = '', selectedIndex = -1 } = $props();

  function handleSelect(item) {
    if (item.tipo === 'entidad') {
      goto(`/entidad/${item.codigo}`);
    } else if (item.tipo === 'objeto_gasto') {
      goto(`/objeto/${item.codigo}`);
    }
    clearSearch();
  }
</script>

{#if results.length > 0}
  <div class="absolute top-full left-0 right-0 mt-1 bg-white border rounded shadow-lg max-h-80 overflow-y-auto z-50">
    {#each results as item, index}
      <button
        type="button"
        class="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 {index === selectedIndex ? 'bg-gray-100' : ''}"
        onclick={() => handleSelect(item)}
      >
        <div class="flex items-center gap-2">
          {#if item.tipo === 'objeto_gasto'}
            <span class="font-mono text-xs text-slate-400">{item.codigo}</span>
          {/if}
          <span>{item.nombre}</span>
          {#if item.sigla}
            <span class="text-slate-400">({item.sigla})</span>
          {/if}
        </div>
        <div class="text-xs text-gray-500">{item.contexto}</div>
      </button>
    {/each}
  </div>
{:else if query.length >= 2}
  <div class="absolute top-full left-0 right-0 mt-1 bg-white border rounded p-3 text-sm text-gray-500">
    Sin resultados para "{query}"
  </div>
{/if}