<!--
  RequiredSkillsField — compétences REQUISES d'un job (store hub /roster/job-skills, PAS un champ ERPNext).
  Le tech doit les avoir TOUTES ; la 1re = principale (dispatch auto). Module RÉUTILISABLE extrait du volet jobDetail.
  Réutilise le TagEditor partagé. Le catalogue de tags + la fonction couleur sont fournis par le parent
  (board = tagCatalog/getTagColor ; ticket = useTagCatalog) — pas de source dupliquée ici.
-->
<template>
  <div class="jd-skill row items-center q-gutter-sm q-mb-xs">
    <q-icon name="construction" size="16px" color="grey-6" /><span class="text-caption text-grey-7">Compétences requises</span>
    <TagEditor :model-value="skills" :all-tags="allTags" :get-color="getColor" :can-edit="false"
      placeholder="Ajouter une compétence requise…" style="min-width:220px;flex:1"
      @update:model-value="onChange" @create="$emit('create', $event)" />
  </div>
</template>

<script setup>
import { Notify } from 'quasar'
import * as roster from 'src/api/roster'
import TagEditor from 'src/components/shared/TagEditor.vue'

const props = defineProps({
  name: { type: String, default: '' }, // docname du Dispatch Job
  skills: { type: Array, default: () => [] },
  allTags: { type: Array, default: () => [] },
  getColor: { type: Function, default: () => '#6b7280' },
})
const emit = defineEmits(['updated', 'create'])

// TagEditor émet un tableau de libellés (ou de {tag}) ; on tolère aussi une CSV (rétro-compat).
function normSkillList (list) {
  const raw = Array.isArray(list) ? list : String(list || '').split(',')
  return [...new Set(raw.map(x => (typeof x === 'string' ? x : (x && x.tag) || '')).map(s => String(s).trim()).filter(Boolean))]
}

async function onChange (list) {
  const arr = normSkillList(list)
  if (!props.name) { emit('updated', arr); return }
  try {
    await roster.setJobSkills(props.name, arr)
    emit('updated', arr) // le parent rafraîchit son pool si besoin
  } catch (e) {
    Notify.create({ type: 'negative', message: 'Compétences non enregistrées : ' + (e && e.message), timeout: 3000 })
  }
}
</script>
