<template>
  <!-- Menu de débordement « ⋮ » standardisé : UNE action primaire visible dans la barre,
       TOUT le secondaire ici. Kill le bloat des barres d'outils (Planif, Dispatch « Outils »…).
       Usage :
         <OverflowMenu :groups="[
           { label:'Réglages', items:[{icon:'tune', label:'Compétences', action:openSkills}] },
           { items:[{icon:'refresh', label:'Rafraîchir', action:reload}] },
         ]" />
       ou à plat :  <OverflowMenu :items="[{icon:'refresh', label:'Rafraîchir', action:reload}]" />
       Chaque item : { icon, label, caption?, color?, disabled?, action?(fn) | to?(route) }. -->
  <q-btn v-bind="triggerProps" :label="label" :icon="icon" :aria-label="ariaLabel">
    <q-tooltip v-if="tooltip">{{ tooltip }}</q-tooltip>
    <q-menu anchor="bottom right" self="top right" auto-close>
      <q-list dense style="min-width:220px">
        <template v-for="(g, gi) in normalizedGroups" :key="gi">
          <q-separator v-if="gi > 0 && g.label == null" spaced />
          <q-item-label v-if="g.label" header class="om-header">{{ g.label }}</q-item-label>
          <q-item
            v-for="(it, ii) in g.items" :key="gi + '-' + ii"
            clickable
            :to="it.to || undefined"
            :disable="!!it.disabled"
            @click="run(it)"
          >
            <q-item-section v-if="it.icon" avatar>
              <q-icon :name="it.icon" :color="it.color || undefined" size="20px" />
            </q-item-section>
            <q-item-section>
              <q-item-label>{{ it.label }}</q-item-label>
              <q-item-label v-if="it.caption" caption>{{ it.caption }}</q-item-label>
            </q-item-section>
          </q-item>
        </template>
      </q-list>
    </q-menu>
  </q-btn>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  // Soit des groupes (avec en-têtes + séparateurs), soit une liste à plat.
  groups: { type: Array, default: null },
  items: { type: Array, default: null },
  // Apparence du déclencheur : par défaut, une puce ronde « ⋮ » discrète.
  label: { type: String, default: '' },
  icon: { type: String, default: 'more_vert' },
  tooltip: { type: String, default: 'Plus d’actions' },
  ariaLabel: { type: String, default: 'Plus d’actions' },
  flat: { type: Boolean, default: true },
  dense: { type: Boolean, default: true },
  round: { type: Boolean, default: true },
})

// Déclencheur : rond quand pas de label (⋮), sinon bouton texte discret.
const triggerProps = computed(() => ({
  flat: props.flat,
  dense: props.dense,
  round: props.round && !props.label,
  noCaps: true,
}))

const normalizedGroups = computed(() => {
  if (props.groups && props.groups.length) {
    return props.groups.map(g => ({ label: g.label || null, items: (g.items || []).filter(Boolean) }))
  }
  return [{ label: null, items: (props.items || []).filter(Boolean) }]
})

function run (it) {
  if (it.disabled) return
  if (typeof it.action === 'function') it.action()
}
</script>

<style scoped>
.om-header { color: var(--ops-text-muted); font-size: 0.72rem; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 700; padding-top: 8px; }
</style>
