<template>
  <!-- Saisie de compétences en CHIPS (cohérent partout). Stocke/émet une chaîne
       CSV ("fibre,cuivre") pour rester compatible avec le backend existant.
       Tape + Entrée = nouvelle compétence ; suggestions proposées. -->
  <q-select
    dense outlined multiple use-input use-chips hide-dropdown-icon
    new-value-mode="add-unique" input-debounce="0"
    :model-value="arr"
    @update:model-value="onChange"
    :options="filtered" @filter="onFilter"
    :label="label" :style="style"
    placeholder="fibre, cuivre…" />
</template>

<script setup>
import { ref, computed } from 'vue'
const props = defineProps({
  modelValue: { type: [String, Array], default: '' },
  suggestions: { type: Array, default: () => ['fibre', 'cuivre', 'aérien', 'souterrain', 'TV', 'téléphonie', 'installation', 'réparation', 'épissure'] },
  label: { type: String, default: 'Compétences' },
  style: { type: String, default: 'min-width:150px' },
})
const emit = defineEmits(['update:modelValue'])
const arr = computed(() => Array.isArray(props.modelValue)
  ? props.modelValue
  : String(props.modelValue || '').split(',').map(s => s.trim()).filter(Boolean))
const filtered = ref(props.suggestions)
function onFilter (val, update) {
  update(() => {
    const n = (val || '').toLowerCase()
    filtered.value = props.suggestions.filter(s => s.toLowerCase().includes(n))
  })
}
function onChange (v) { emit('update:modelValue', (v || []).join(',')) }
</script>
