Inventory/app/components/ConstructeurSelect.vue

<template>
  <div class="space-y-2 constructeur-select">
    <label v-if="label" class="label"><span class="label-text">{{ label }}</span></label>
    <div class="flex items-center gap-2">
      <div class="relative flex-1">
        <input
          type="text"
          v-model="searchTerm"
          class="input input-bordered w-full pr-10"
          :placeholder="placeholder"
          @focus="openDropdown = true; ensureOptionsLoaded()"
          @input="onSearch"
        />
        <button
          type="button"
          class="absolute right-2 top-1/2 -translate-y-1/2 btn btn-ghost btn-xs"
          @click="ensureOptionsLoaded(true)"
        >
          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l4-4 4 4m0-8l-4 4-4-4" />
          </svg>
        </button>
        <div
          v-if="openDropdown"
          class="absolute z-20 mt-1 w-full max-h-48 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
        >
          <div
            v-if="options.length === 0"
            class="px-3 py-2 text-xs text-gray-500"
          >
            Aucun constructeur trouvé
          </div>
          <button
            v-for="option in options"
            :key="option.id"
            type="button"
            class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
            @click="selectOption(option)"
          >
            <div class="flex flex-col">
              <span class="font-medium">{{ option.name }}</span>
              <span class="text-xs text-gray-500">
                {{ [option.email, option.phone].filter(Boolean).join(' • ') || '—' }}
              </span>
            </div>
          </button>
        </div>
      </div>
      <button type="button" class="btn btn-outline btn-sm" @click="openCreateModal = true">
        Nouveau
      </button>
    </div>

    <div v-if="selectedConstructeur" class="text-xs text-gray-500">
      <span class="font-medium">{{ selectedConstructeur.name }}</span>
      <span v-if="selectedConstructeur.email"> • {{ selectedConstructeur.email }}</span>
      <span v-if="selectedConstructeur.phone"> • {{ selectedConstructeur.phone }}</span>
    </div>

    <dialog class="modal" :class="{ 'modal-open': openCreateModal }">
      <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">Nouveau constructeur</h3>
        <form @submit.prevent="handleCreate">
          <div class="form-control mb-3">
            <label class="label"><span class="label-text">Nom</span></label>
            <input v-model="createForm.name" type="text" class="input input-bordered" required />
          </div>
          <div class="form-control mb-3">
            <label class="label"><span class="label-text">Email</span></label>
            <input v-model="createForm.email" type="email" class="input input-bordered" placeholder="ex: contact@constructeur.com" />
          </div>
          <div class="form-control mb-3">
            <label class="label"><span class="label-text">Téléphone</span></label>
            <input v-model="createForm.phone" type="text" class="input input-bordered" placeholder="ex: 01 23 45 67 89" />
          </div>

          <div class="modal-action">
            <button type="button" class="btn" @click="closeCreateModal">Annuler</button>
            <button type="submit" class="btn btn-primary" :disabled="creating">
              <span v-if="creating" class="loading loading-spinner loading-xs mr-2"></span>
              Créer
            </button>
          </div>
        </form>
      </div>
    </dialog>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
import { useConstructeurs } from '~/composables/useConstructeurs'

const props = defineProps({
  modelValue: {
    type: String,
    default: null,
  },
  label: {
    type: String,
    default: '',
  },
  placeholder: {
    type: String,
    default: 'Sélectionner ou créer un constructeur...',
  },
})

const emit = defineEmits(['update:modelValue'])

const { constructeurs, searchConstructeurs, createConstructeur } = useConstructeurs()
const searchTerm = ref('')
const openDropdown = ref(false)
const openCreateModal = ref(false)
const creating = ref(false)
const options = ref([])
let searchTimeout = null
let lastSearchTerm = ''

const applyOptions = (items = []) => {
  const selectedId = props.modelValue
  const cloned = [...items]
  const limited = cloned.slice(0, 10)

  if (selectedId && !limited.some(item => item.id === selectedId)) {
    const selected = cloned.find(item => item.id === selectedId)
    if (selected) {
      if (limited.length >= 10) limited.pop()
      limited.unshift(selected)
    }
  }

  options.value = limited
}

const createForm = ref({
  name: '',
  email: '',
  phone: '',
})

const selectedConstructeur = computed(() =>
  constructeurs.value.find(item => item.id === props.modelValue) || null
)

watch(
  () => props.modelValue,
  (newValue) => {
    if (newValue && !selectedConstructeur.value) {
      // ensure current selection is loaded
      ensureOptionsLoaded(true)
    }
    if (newValue) {
      const match = constructeurs.value.find(item => item.id === newValue)
      if (match) {
        searchTerm.value = match.name
      }
    }
  },
  { immediate: true }
)

const ensureOptionsLoaded = async (force = false) => {
  if (!force && !searchTerm.value && constructeurs.value.length) {
    applyOptions(constructeurs.value)
    return
  }
  if (!force && searchTerm.value === lastSearchTerm && options.value.length) return
  if (options.value.length && !force) return
  const result = await searchConstructeurs(searchTerm.value)
  if (result.success) {
    applyOptions(result.data || [])
    lastSearchTerm = searchTerm.value
  }
}

const onSearch = () => {
  openDropdown.value = true
  clearTimeout(searchTimeout)
  searchTimeout = setTimeout(async () => {
    if (!searchTerm.value && constructeurs.value.length) {
      applyOptions(constructeurs.value)
      lastSearchTerm = ''
      return
    }
    if (searchTerm.value === lastSearchTerm) return
    const result = await searchConstructeurs(searchTerm.value)
    if (result.success) {
      applyOptions(result.data || [])
      lastSearchTerm = searchTerm.value
    }
  }, 250)
}

const selectOption = (option) => {
  emit('update:modelValue', option.id)
  openDropdown.value = false
  searchTerm.value = option.name
}

const closeCreateModal = () => {
  openCreateModal.value = false
  createForm.value = { name: '', email: '', phone: '' }
}

const handleCreate = async () => {
  creating.value = true
  const payload = { ...createForm.value }
  if (!payload.phone) delete payload.phone
  if (!payload.email) delete payload.email
  const result = await createConstructeur(payload)
  creating.value = false
  if (result.success) {
    emit('update:modelValue', result.data.id)
    searchTerm.value = result.data.name
    closeCreateModal()
    await ensureOptionsLoaded(true)
  }
}

watch(
  constructeurs,
  (list) => {
    applyOptions(list || [])
    if (!searchTerm.value) {
      lastSearchTerm = ''
    }
  },
  { immediate: true }
)

const clickHandler = (event) => {
  const element = event.target
  if (element && element.closest) {
    if (
      element.closest('.menu') ||
      element.closest('.modal-box') ||
      element.closest('.btn') ||
      element.closest('.constructeur-select')
    ) {
      return
    }
  }
  openDropdown.value = false
}

onMounted(() => {
  window.addEventListener('click', clickHandler)
  ensureOptionsLoaded()
})

onBeforeUnmount(() => {
  window.removeEventListener('click', clickHandler)
  clearTimeout(searchTimeout)
})
</script>