<template>
  <!-- Sélecteur de technicien avec autosuggest (typeahead). Réutilisable partout
       où on choisit un tech, pour une UX cohérente. options = [{label, value}]. -->
  <q-select
    dense outlined
    :model-value="modelValue"
    @update:model-value="v => $emit('update:modelValue', v)"
    :options="filtered"
    use-input input-debounce="200" fill-input hide-selected
    emit-value map-options clearable
    :label="label" :style="style" behavior="menu"
    @filter="onFilter">
    <template #no-option>
      <q-item><q-item-section class="text-grey-6">{{ noOptionLabel }}</q-item-section></q-item>
    </template>
  </q-select>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  modelValue: { type: [String, null], default: null },
  options: { type: Array, default: () => [] }, // [{label, value}]
  label: { type: String, default: 'Technicien' },
  style: { type: String, default: 'min-width:200px' },
  // Recherche ASYNCHRONE optionnelle : `async (val) => [{label, value}]`. Fournie → remplace le filtrage
  // local sur `options` (ex. autosuggest « tous les utilisateurs » du champ d'assignation). Absente → filtre local.
  searchFn: { type: Function, default: null },
  noOptionLabel: { type: String, default: 'Aucun technicien' },
})
defineEmits(['update:modelValue'])
const filtered = ref(props.options)
watch(() => props.options, (v) => { filtered.value = v }, { immediate: true })
function onFilter (val, update) {
  if (props.searchFn) {
    // Recherche distante : on lance la promesse puis on pousse le résultat dans le menu (patron q-select remote).
    Promise.resolve(props.searchFn(val)).then(opts => update(() => { filtered.value = Array.isArray(opts) ? opts : [] }))
      .catch(() => update(() => { filtered.value = [] }))
    return
  }
  update(() => {
    const n = (val || '').toLowerCase()
    filtered.value = !n ? props.options
      : props.options.filter(o => (o.label || '').toLowerCase().includes(n) || String(o.value || '').toLowerCase().includes(n))
  })
}
</script>
