<script setup>
/**
 * SkillCadenceTable — éditeur RÉUTILISABLE des compétences d'un technicien :
 * chips (ordre = priorité, glisser-déposer) + Score (★ maîtrise) + Cadence % PAR compétence,
 * et (optionnel) la Cadence GLOBALE du tech (défaut 100 %).
 *
 * SOURCE UNIQUE : utilisé à la fois par le volet « clic sur un tech » (Planif) ET par l'outil
 * « Équipe — compétences, cadence & coût » → même gabarit partout. Opère sur l'objet tech LIVE
 * (skills[]/skill_levels{}/skill_eff{}/efficiency) ; la persistance reste au parent via les events.
 */
import { reactive } from 'vue'
import TagEditor from 'src/components/shared/TagEditor.vue'
import HelpHint from 'src/components/shared/HelpHint.vue'

const props = defineProps({
  tech: { type: Object, required: true }, // objet LIVE : { id, name, skills[], skill_levels{}, skill_eff{}, efficiency }
  catalog: { type: Array, default: () => [] }, // tagCatalog
  getColor: { type: Function, default: () => '#6b7280' },
  palette: { type: Array, default: () => [] }, // TAG_PALETTE
  showGlobal: { type: Boolean, default: false }, // affiche la cadence GLOBALE (défaut 100 %) — utile dans l'outil équipe
})
const emit = defineEmits(['tags-change', 'set-level', 'set-cadence', 'set-global', 'create-tag', 'update-tag'])

// Conversions cadence % ↔ facteur (bas facteur = rapide). Mêmes formules que PlanificationPage (effPctOf/factorFromPct).
const pctOf = (factor) => { const f = Number(factor) || 1; return Math.round(100 / (f > 0 ? f : 1)) }

const skills = () => (Array.isArray(props.tech.skills) ? props.tech.skills : [])
const levelOf = (sk) => (props.tech.skill_levels && props.tech.skill_levels[sk]) || 0
const cadenceOf = (sk) => { const e = props.tech.skill_eff && props.tech.skill_eff[sk]; return (e != null && e !== '') ? pctOf(e) : '' } // '' = hérite du global
const globalPct = () => pctOf(props.tech.efficiency) // défaut efficiency=1 → 100 %

// Tampons de saisie (n'écrit qu'au blur/enter, comme l'original) — locaux au composant.
const buf = reactive({}) // { sk: pct }
const gBuf = reactive({ v: undefined })
function commitSkill (sk) { if (!(sk in buf)) return; const v = buf[sk]; delete buf[sk]; emit('set-cadence', { sk, pct: v }) }
function commitGlobal () { if (gBuf.v === undefined) return; const v = gBuf.v; gBuf.v = undefined; emit('set-global', v) }
</script>

<template>
  <div>
    <TagEditor :model-value="skills()" :all-tags="catalog" :get-color="getColor" :can-edit="false" sortable
               placeholder="Cliquez pour ajouter une compétence…"
               @update:model-value="items => emit('tags-change', items)" @create="e => emit('create-tag', e)" />
    <div v-if="skills().length > 1" class="text-caption text-grey-6 q-mt-xs" style="line-height:1.3">
      ↔ <b>Glisse les chips</b> pour l'ordre de priorité — la <b>1<sup>re</sup> (★)</b> = fonction principale :
      le dispatch auto envoie ces jobs à ce tech <b>en premier</b> (épargne les moins spécialisés).
    </div>

    <div v-if="skills().length" class="q-mt-md">
      <div class="row items-center text-caption text-grey-6 q-pb-xs">
        <div class="col">Compétence</div>
        <div style="width:90px" class="text-center">Score</div>
        <div style="width:88px" class="text-center">Cadence <HelpHint title="Cadence (vitesse)" text="Vitesse du technicien pour cette compétence. 100 % = cadence normale ; plus haut = plus rapide (fait plus de jobs, ex. 200 % = deux fois plus) ; sous 100 % = plus lent. Vide = hérite de la cadence globale du tech. Le dispatch auto en tient compte pour estimer les durées." /></div>
      </div>
      <div v-for="(sk, si) in skills()" :key="sk" class="row items-center no-wrap q-py-xs" style="border-top:1px solid #eee">
        <div class="col row items-center no-wrap">
          <span class="skill-rank" :class="{ 'skill-rank-1': si === 0 }" :title="si === 0 ? 'Priorité 1 — compétence principale' : 'Priorité ' + (si + 1)">{{ si + 1 }}</span>
          <q-btn flat dense round size="xs" icon="circle" :style="{ color: getColor(sk) }"><q-tooltip>Couleur</q-tooltip>
            <q-menu><div class="q-pa-xs" style="width:208px">
              <div class="row">
                <q-btn v-for="c in palette" :key="c" v-close-popup flat dense round size="xs" icon="circle" :style="{ color: c }" @click="emit('update-tag', { name: sk, color: c })" />
              </div>
              <div class="row items-center no-wrap q-mt-xs q-px-xs">
                <span class="text-caption text-grey-7 q-mr-sm">Perso</span>
                <input type="color" :value="getColor(sk)" @change="e => emit('update-tag', { name: sk, color: e.target.value })" style="width:42px;height:26px;border:1px solid #ddd;border-radius:4px;background:none;cursor:pointer;padding:0" />
                <span class="text-caption text-grey-5 q-ml-sm">toute couleur</span>
              </div>
            </div></q-menu>
          </q-btn>
          <span class="skill-chip" :style="{ background: getColor(sk) }">{{ sk }}</span>
        </div>
        <div style="width:90px" class="text-center no-wrap">
          <q-icon v-for="n in 5" :key="n" :name="levelOf(sk) >= n ? 'star' : 'star_outline'" :color="levelOf(sk) >= n ? 'indigo' : 'grey-4'" size="16px" class="cursor-pointer" @click="emit('set-level', { sk, level: levelOf(sk) === n ? 0 : n })" />
        </div>
        <div style="width:88px">
          <q-input dense outlined type="number" step="25" min="20" max="1000" :model-value="(sk in buf) ? buf[sk] : cadenceOf(sk)" @update:model-value="v => { buf[sk] = v }" @blur="commitSkill(sk)" @keyup.enter="commitSkill(sk)" suffix="%" placeholder="glob." input-class="text-right" />
        </div>
      </div>
      <div class="text-caption text-grey-6 q-mt-xs"><b>Score</b> ★ = maîtrise · <b>Cadence</b> : <b>100&nbsp;%</b> = normale · <b>200&nbsp;%</b> = deux fois plus de jobs · &lt;&nbsp;100&nbsp;% = plus lent · vide = hérite du global · × sur le chip = retirer.</div>
    </div>

    <!-- Cadence GLOBALE du tech (défaut 100 %) — s'applique aux compétences sans cadence propre. -->
    <div v-if="showGlobal" class="row items-center q-mt-sm q-pt-sm" style="border-top:1px dashed #e2e8f0">
      <div class="col text-caption text-weight-medium text-grey-7">Cadence globale <span class="text-grey-5 text-weight-regular">(défaut 100 %)</span></div>
      <q-input dense outlined type="number" step="10" min="20" max="1000" style="width:96px" suffix="%"
               :model-value="(gBuf.v !== undefined) ? gBuf.v : globalPct()" @update:model-value="v => { gBuf.v = v }" @blur="commitGlobal" @keyup.enter="commitGlobal">
        <q-tooltip>100 % = cadence normale · PLUS HAUT = plus rapide (fait plus de jobs). Hérité par les compétences sans cadence propre.</q-tooltip>
      </q-input>
    </div>
  </div>
</template>

<style scoped>
.skill-chip { font-size: 10px; line-height: 15px; height: 15px; padding: 0 5px; border-radius: 8px; color: #fff; font-weight: 600; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; }
.skill-rank { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; color: #64748b; font-size: 9px; font-weight: 800; margin-right: 5px; flex-shrink: 0; }
.skill-rank-1 { background: #fef3c7; color: #b45309; box-shadow: 0 0 0 1.5px rgba(250,204,21,0.7); }
</style>
