<template>
  <div class="space-y-1">
    <!-- Label + toggle collapse -->
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;">
      <p class="filter-label" style="margin-bottom: 0;">
        FONCTION
        <span v-if="modelValue.length" style="font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.65rem; margin-left: 4px;">({{ modelValue.length }} active{{ modelValue.length > 1 ? 's' : '' }})</span>
      </p>
      <button
        @click="toggleCollapse"
        style="font-size: 0.7rem; color: var(--nav-text-muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; white-space: nowrap;"
      >{{ isOpen ? 'Replier' : 'Fonctions (' + FONCTIONS.length + ')' }}</button>
    </div>

    <!-- Chips (visible si ouvert ou si des fonctions sont actives) -->
    <div v-if="isOpen" class="chips-row">
      <span
        v-for="fn in FONCTIONS"
        :key="fn"
        class="chip"
        :style="modelValue.includes(fn)
          ? 'background: var(--nav-primary); color: var(--nav-text-on-primary); font-weight: 600;'
          : 'background: var(--nav-bg-alt); color: var(--nav-text-muted);'"
        @click="toggle(fn)"
      >{{ fn }}</span>
    </div>

    <!-- Effacer (visible même replié si filtres actifs) -->
    <p v-if="modelValue.length" class="text-xs pt-0.5" style="color: var(--nav-text-muted);">
      <button @click="emit('update:modelValue', [])" class="underline hover:opacity-70">Effacer</button>
    </p>
  </div>
</template>

<script setup lang="ts">
const FONCTIONS = [
  'Juridique',
  'Technique',
  'Économique',
  'Administratif',
  'Chantier',
  'Comptabilité',
  'Développement',
  'Formation',
  "Gestion d'agence",
  'Santé mentale',
] as const

const props = defineProps<{
  modelValue: string[]
  counts: Record<string, number>
}>()

const emit = defineEmits<{
  'update:modelValue': [value: string[]]
}>()

// Replié par défaut, ouvre automatiquement quand des filtres sont actifs
const manuallyOpen = ref(false)

const isOpen = computed(() => {
  return manuallyOpen.value || props.modelValue.length > 0
})

function toggleCollapse() {
  // Si des filtres actifs forcent l'ouverture, on doit gérer le cas « forcer fermer »
  if (isOpen.value) {
    manuallyOpen.value = false
    // Si des fonctions sont actives, le computed va les réouvrir — on les efface
    // Non : on laisse le choix à l'utilisateur. On toggle juste manuallyOpen.
    // Quand replié avec filtres actifs, l'indicateur "(N actives)" reste visible.
  } else {
    manuallyOpen.value = true
  }
}

function toggle(fn: string) {
  if (props.modelValue.includes(fn)) {
    emit('update:modelValue', props.modelValue.filter(f => f !== fn))
  } else {
    emit('update:modelValue', [...props.modelValue, fn])
  }
}
</script>

<style scoped>
.filter-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--nav-text-muted);
  display: block;
  text-transform: uppercase;
}
.chips-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.chip {
  cursor: pointer;
  padding: 3px 10px;
  border-radius: 9999px;
  font-size: 0.75rem;
  transition: all 0.15s;
  user-select: none;
}
</style>
