<template>
  <div class="space-y-1">
    <SearchSelect
      :model-value="modelValue ?? undefined"
      :options="composantOptions"
      :loading="loading"
      :placeholder="placeholder"
      :empty-text="emptyText"
      size="sm"
      option-value="id"
      :option-label="formatLabel"
      :disabled="disabled"
      server-search
      @update:modelValue="updateValue"
      @search="handleSearch"
    >
      <template #option-description="{ option }">
        <span class="text-xs text-base-content/60">
          {{ formatDescription(option) }}
        </span>
      </template>
    </SearchSelect>
    <p v-if="helperText" class="text-xs text-base-content/60">
      {{ helperText }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import SearchSelect from '~/components/common/SearchSelect.vue'
import { useComposants } from '~/composables/useComposants'

const props = withDefaults(
  defineProps<{
    modelValue?: string | null
    placeholder?: string
    emptyText?: string
    helperText?: string
    disabled?: boolean
    typeComposantId?: string | null
  }>(),
  {
    modelValue: '',
    placeholder: 'Sélectionner un composant…',
    emptyText: 'Aucun composant disponible',
    helperText: '',
    disabled: false,
    typeComposantId: null,
  },
)

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | null): void
}>()

const { loading: globalLoading, loadComposants } = useComposants()

const localComposants = ref<any[]>([])
const localLoading = ref(false)
const loading = computed(() => localLoading.value || globalLoading.value)

const composantOptions = computed(() => localComposants.value)

const loadFilteredComposants = async (search = '') => {
  if (!props.typeComposantId) return
  localLoading.value = true
  try {
    const result = await loadComposants({ typeComposantId: props.typeComposantId, search, itemsPerPage: 200, force: true })
    if (result.success && result.data?.items) {
      localComposants.value = result.data.items
    }
  }
  catch (error: unknown) {
    console.error('Erreur lors du chargement des composants:', error)
  }
  finally {
    localLoading.value = false
  }
}

let searchDebounce: ReturnType<typeof setTimeout> | null = null
const handleSearch = (term: string) => {
  if (searchDebounce) clearTimeout(searchDebounce)
  searchDebounce = setTimeout(() => loadFilteredComposants(term.trim()), 300)
}

onMounted(() => {
  loadFilteredComposants()
})

watch(
  () => props.typeComposantId,
  () => {
    loadFilteredComposants()
  },
)

const updateValue = (value: string | number | null | undefined) => {
  if (value === undefined || value === null || value === '') {
    emit('update:modelValue', null)
    return
  }
  emit('update:modelValue', String(value))
}

const formatLabel = (option: any) => {
  if (!option) return ''
  const name = option.name || 'Composant'
  return option.reference ? `${name} — ${option.reference}` : name
}

const formatDescription = (option: any) => {
  const parts: string[] = []
  const typeName = option?.typeComposant?.name
  if (typeName) {
    parts.push(typeName)
  }
  if (option?.reference) {
    parts.push(`Ref. ${option.reference}`)
  }
  if (option?.prix !== undefined && option.prix !== null) {
    const price = Number(option.prix)
    if (!Number.isNaN(price)) {
      parts.push(`${price.toFixed(2)} €`)
    }
  }
  return parts.length ? parts.join(' • ') : 'Sans référence'
}
</script>
