<template>
  <div class="space-y-1">
    <SearchSelect
      :model-value="modelValue"
      :options="productOptions"
      :loading="loading"
      :placeholder="placeholder"
      :empty-text="emptyText"
      size="sm"
      option-value="id"
      option-label="name"
      :disabled="disabled"
      @update:modelValue="updateValue"
    >
      <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, watch } from 'vue'
import SearchSelect from '~/components/common/SearchSelect.vue'
import { useProducts } from '~/composables/useProducts'

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

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

const { products, loading, loadProducts } = useProducts()

const productOptions = computed(() => {
  const baseOptions = Array.isArray(products.value) ? products.value : []
  if (!props.typeProductId) {
    return baseOptions
  }

  const allowedTypeId = String(props.typeProductId)
  return baseOptions.filter((product) => {
    const typeId =
      product?.typeProductId ||
      product?.typeProduct?.id ||
      null
    return typeId ? String(typeId) === allowedTypeId : false
  })
})

onMounted(() => {
  if (productOptions.value.length === 0) {
    loadProducts().catch((error) => {
      console.error('Erreur lors du chargement des produits:', error)
    })
  }
})

watch(
  () => props.modelValue,
  (value) => {
    if (typeof value === 'string') {
      const exists = productOptions.value.some((product) => product.id === value)
      if (!exists && productOptions.value.length === 0 && !loading.value) {
        loadProducts().catch((error) => {
          console.error('Erreur lors du chargement des produits:', error)
        })
      }
    }
  },
)

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

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