<script lang="ts">
	import { useQuery } from 'convex-svelte';
	import { api } from '@sgse-app/backend/convex/_generated/api';

	interface Props {
		value?: string; // Nome do funcionário
		placeholder?: string;
		disabled?: boolean;
	}

	let {
		value = $bindable(''),
		placeholder = 'Digite o nome do funcionário',
		disabled = false
	}: Props = $props();

	// Usar value diretamente como busca para evitar conflitos de sincronização
	let mostrarDropdown = $state(false);

	// Buscar funcionários
	const funcionariosQuery = useQuery(api.funcionarios.getAll, {});

	const funcionarios = $derived(funcionariosQuery?.data?.filter((f) => !f.desligamentoData) || []);

	// Filtrar funcionários baseado na busca (por nome ou matrícula)
	const funcionariosFiltrados = $derived.by(() => {
		if (!value || !value.trim()) return funcionarios.slice(0, 10); // Limitar a 10 quando vazio

		const termo = value.toLowerCase().trim();
		return funcionarios
			.filter((f) => {
				const nomeMatch = f.nome?.toLowerCase().includes(termo);
				const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
				return nomeMatch || matriculaMatch;
			})
			.slice(0, 20); // Limitar resultados
	});

	function selecionarFuncionario(nome: string) {
		value = nome;
		mostrarDropdown = false;
	}

	function handleFocus() {
		if (!disabled) {
			mostrarDropdown = true;
		}
	}

	function handleBlur() {
		// Delay para permitir click no dropdown
		setTimeout(() => {
			mostrarDropdown = false;
		}, 200);
	}

	function handleInput() {
		mostrarDropdown = true;
	}
</script>

<div class="relative w-full">
	<input
		type="text"
		bind:value
		oninput={handleInput}
		{placeholder}
		{disabled}
		onfocus={handleFocus}
		onblur={handleBlur}
		class="input input-bordered w-full pr-10"
		autocomplete="off"
	/>

	<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2">
		<svg
			xmlns="http://www.w3.org/2000/svg"
			class="text-base-content/40 h-5 w-5"
			fill="none"
			viewBox="0 0 24 24"
			stroke="currentColor"
		>
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				stroke-width="2"
				d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
			/>
		</svg>
	</div>

	{#if mostrarDropdown && funcionariosFiltrados.length > 0}
		<div
			class="bg-base-100 border-base-300 absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-lg border shadow-lg"
		>
			{#each funcionariosFiltrados as funcionario}
				<button
					type="button"
					onclick={() => selecionarFuncionario(funcionario.nome || '')}
					class="hover:bg-base-200 border-base-200 w-full border-b px-4 py-3 text-left transition-colors last:border-b-0"
				>
					<div class="font-medium">{funcionario.nome}</div>
					<div class="text-base-content/60 text-sm">
						{#if funcionario.matricula}
							Matrícula: {funcionario.matricula}
						{/if}
						{#if funcionario.descricaoCargo}
							{funcionario.matricula ? ' • ' : ''}
							{funcionario.descricaoCargo}
						{/if}
					</div>
				</button>
			{/each}
		</div>
	{/if}

	{#if mostrarDropdown && value && value.trim() && funcionariosFiltrados.length === 0}
		<div
			class="bg-base-100 border-base-300 text-base-content/60 absolute z-50 mt-1 w-full rounded-lg border p-4 text-center shadow-lg"
		>
			<div class="text-sm">Nenhum funcionário encontrado</div>
			<div class="mt-1 text-xs opacity-70">
				Você pode continuar digitando para buscar livremente
			</div>
		</div>
	{/if}
</div>
