<script setup>
/**
 * Collapses its slotted toolbar buttons into a "⋮" dropdown on mobile
 * (≤ 768px) while rendering them completely unchanged inline on desktop
 * (display: contents — the buttons stay direct flex children of the
 * .bannercontrol group, so desktop layout is byte-identical).
 *
 * In the open dropdown, icon-only buttons get a readable label injected from
 * their title attribute (idempotent; hidden outside the panel), so the same
 * buttons work as a selection list without duplicating any v-if conditions.
 */
const open = ref(false)
const panelRef = ref(null)

const toggle = async () => {
  open.value = !open.value
  if (open.value) {
    await nextTick()
    panelRef.value?.querySelectorAll('button[title]').forEach((btn) => {
      if (btn.querySelector('.mam-label')) return
      // Buttons with a real visible text label don't need an injected one
      // (< 4 chars catches icon-only buttons incl. badge counters).
      if ((btn.textContent || '').trim().length >= 4) return
      const span = document.createElement('span')
      span.className = 'mam-label'
      span.textContent = btn.getAttribute('title') || ''
      btn.appendChild(span)
    })
  }
}

// Any action tap closes the menu
const onPanelClick = (e) => {
  if (e.target.closest('button')) open.value = false
}
</script>

<template>
  <div class="mam">
    <button type="button" class="button mam-toggle" title="Aktionen" @click="toggle">
      <span class="tf-icon ti ti-dots-vertical ti-xs color-inherit"></span>
    </button>
    <div v-if="open" class="mam-backdrop" @click="open = false"></div>
    <div ref="panelRef" class="mam-panel" :class="{ 'mam-open': open }" @click="onPanelClick">
      <slot />
    </div>
  </div>
</template>

<style scoped>
/* Desktop: wrapper and panel dissolve — buttons flow inline as before. */
.mam {
  display: contents;
}

.mam-toggle {
  display: none;
}

.mam-panel {
  display: contents;
}

.mam-backdrop {
  display: none;
}

.mam-panel :deep(.mam-label) {
  display: none;
}

@media (max-width: 768px) {
  .mam {
    display: block;
    position: relative;
  }

  .mam-toggle {
    display: inline-flex;
  }

  .mam-panel {
    display: none;
  }

  .mam-panel.mam-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 250px;
    max-width: calc(100vw - 24px);
    max-height: 65vh;
    overflow-y: auto;
    background: var(--theme-bg-primary, #fff);
    border: 1px solid var(--theme-border, #e3e7ec);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    padding: 8px;
    z-index: 1200;
  }

  .mam-panel.mam-open :deep(button) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-align: left;
  }

  .mam-panel.mam-open :deep(.mam-label) {
    display: inline;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mam-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: transparent;
  }
}
</style>
