<template>
  <Teleport to="body">
    <div v-if="isOpen" class="fixed inset-0 z-[60]" @pointerdown="close" @contextmenu.prevent="close">
      <div
        class="absolute min-w-44 rounded-lg border border-border bg-surface-1 py-1 shadow-pop"
        :style="menuStyle"
        @pointerdown.stop
      >
        <button
          v-for="(item, i) in items"
          :key="i"
          type="button"
          class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-sm transition-colors disabled:opacity-40"
          :class="item.danger ? 'text-danger hover:bg-danger/10' : 'text-fg-muted hover:bg-surface-2 hover:text-fg'"
          :disabled="item.disabled"
          @click="select(item)"
        >
          <component :is="item.icon" v-if="item.icon" :size="15" :stroke-width="1.75" />
          {{ item.label }}
        </button>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
// Menu contextuel unique, positionné au curseur, monté une fois par IdeShell. Ferme au
// pointerdown hors menu (overlay plein écran transparent) et sur Escape. Recalage simple pour ne
// pas déborder du bas / de la droite de la fenêtre.
import { computed, onBeforeUnmount, onMounted } from 'vue';
import { useContextMenu, type ContextMenuItem } from '../../composables/useContextMenu';

const { isOpen, posX, posY, items, close } = useContextMenu();

const menuStyle = computed(() => {
  const menuW = 208; // min-w-44 (176px) + marge
  const menuH = items.value.length * 34 + 8;
  const x = Math.max(8, Math.min(posX.value, window.innerWidth - menuW - 8));
  const y = Math.max(8, Math.min(posY.value, window.innerHeight - menuH - 8));
  return { left: `${x}px`, top: `${y}px` };
});

function select(item: ContextMenuItem): void {
  if (item.disabled) return;
  close();
  item.onSelect();
}
function onKey(e: KeyboardEvent): void {
  if (e.key === 'Escape' && isOpen.value) close();
}
onMounted(() => window.addEventListener('keydown', onKey));
onBeforeUnmount(() => window.removeEventListener('keydown', onKey));
</script>
