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

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

  let {
    value = $bindable(),
    placeholder = "Selecione um funcionário",
    disabled = false,
    required = false,
  }: Props = $props();

  let busca = $state("");
  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
  const funcionariosFiltrados = $derived.by(() => {
    if (!busca.trim()) return funcionarios;

    const termo = busca.toLowerCase().trim();
    return funcionarios.filter((f) => {
      const nomeMatch = f.nome?.toLowerCase().includes(termo);
      const matriculaMatch = f.matricula?.toLowerCase().includes(termo);
      const cpfMatch = f.cpf?.replace(/\D/g, "").includes(termo.replace(/\D/g, ""));
      return nomeMatch || matriculaMatch || cpfMatch;
    });
  });

  // Funcionário selecionado
  const funcionarioSelecionado = $derived.by(() => {
    if (!value) return null;
    return funcionarios.find((f) => f._id === value);
  });

  function selecionarFuncionario(funcionarioId: string) {
    value = funcionarioId;
    const funcionario = funcionarios.find((f) => f._id === funcionarioId);
    busca = funcionario?.nome || "";
    mostrarDropdown = false;
  }

  function limpar() {
    value = undefined;
    busca = "";
    mostrarDropdown = false;
  }

  // Atualizar busca quando funcionário selecionado mudar externamente
  $effect(() => {
    if (value && !busca) {
      const funcionario = funcionarios.find((f) => f._id === value);
      busca = funcionario?.nome || "";
    }
  });

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

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

<div class="form-control w-full relative">
  <label class="label">
    <span class="label-text font-medium">
      Funcionário
      {#if required}
        <span class="text-error">*</span>
      {/if}
    </span>
  </label>

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

    {#if value}
      <button
        type="button"
        onclick={limpar}
        class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs btn-circle"
        disabled={disabled}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    {:else}
      <div class="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-5 w-5 text-base-content/40"
          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}

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

    {#if mostrarDropdown && busca && funcionariosFiltrados.length === 0}
      <div
        class="absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-lg shadow-lg p-4 text-center text-base-content/60"
      >
        Nenhum funcionário encontrado
      </div>
    {/if}
  </div>

  {#if funcionarioSelecionado}
    <div class="text-xs text-base-content/60 mt-1">
      Selecionado: {funcionarioSelecionado.nome}
      {#if funcionarioSelecionado.matricula}
        - {funcionarioSelecionado.matricula}
      {/if}
    </div>
  {/if}
</div>
