<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
import AdminRowActionsDropdown from './AdminRowActionsDropdown.vue';
import { useAdminTableRowActionsMenu } from '../composables/useAdminTableRowActionsLayout';

const rootRef = ref<HTMLElement | null>(null);
const inlineRef = ref<HTMLElement | null>(null);
const localUseMenu = ref(false);

const sharedUseMenu = useAdminTableRowActionsMenu();
const useMenu = computed(() => sharedUseMenu?.value ?? localUseMenu.value);

const ACTION_GAP = 6;
const MOBILE_MAX = 768;

function measureInlineWidth(inline: HTMLElement) {
  const buttons = Array.from(inline.querySelectorAll<HTMLElement>('.el-button'));
  if (buttons.length === 0) return 0;
  return buttons.reduce((sum, btn, idx) => sum + btn.offsetWidth + (idx > 0 ? ACTION_GAP : 0), 0);
}

function updateLocalMode() {
  if (sharedUseMenu != null) return;

  const root = rootRef.value;
  const inline = inlineRef.value;
  if (!root || !inline) return;

  if (window.innerWidth <= MOBILE_MAX) {
    localUseMenu.value = true;
    return;
  }

  const total = measureInlineWidth(inline);
  localUseMenu.value = total > root.clientWidth;
}

let rootObserver: ResizeObserver | null = null;

onMounted(async () => {
  if (sharedUseMenu != null) return;

  await nextTick();
  updateLocalMode();

  if (rootRef.value) {
    rootObserver = new ResizeObserver(() => updateLocalMode());
    rootObserver.observe(rootRef.value);
  }
  window.addEventListener('resize', updateLocalMode);
});

onBeforeUnmount(() => {
  rootObserver?.disconnect();
  if (sharedUseMenu == null) {
    window.removeEventListener('resize', updateLocalMode);
  }
});
</script>

<template>
  <div
    ref="rootRef"
    class="admin-responsive-actions"
    :class="{ 'is-menu': useMenu }"
    @click.stop
  >
    <div ref="inlineRef" class="admin-responsive-actions__inline action-btns">
      <slot name="inline" />
    </div>
    <div class="admin-responsive-actions__menu">
      <AdminRowActionsDropdown>
        <slot name="menu" />
      </AdminRowActionsDropdown>
    </div>
  </div>
</template>

<style scoped>
.admin-responsive-actions {
  width: 100%;
  min-width: 0;
}

.admin-responsive-actions__menu {
  display: none;
  justify-content: center;
  width: 100%;
}

.admin-responsive-actions.is-menu .admin-responsive-actions__inline {
  display: none;
}

.admin-responsive-actions.is-menu .admin-responsive-actions__menu {
  display: inline-flex;
}

.action-btns {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  min-width: 0;
  max-width: 100%;
}

.action-btns :deep(.el-button) {
  margin: 0;
  padding: 0 6px !important;
  min-height: 24px;
  height: 24px;
  border-radius: 6px !important;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.action-btns :deep(.el-button.is-link) {
  background: transparent !important;
}

.admin-responsive-actions.is-menu {
  min-width: 72px;
}
</style>
