<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

import { Copy, Edit3, Trash2 } from '@vben/icons';
import { $t } from '@vben/locales';

defineProps<{
  x: number;
  y: number;
}>();

const emit = defineEmits(['close', 'duplicate', 'delete', 'rename']);

// 点击外部关闭
const handleClickOutside = () => {
  emit('close');
};

onMounted(() => document.addEventListener('click', handleClickOutside));
onUnmounted(() => document.removeEventListener('click', handleClickOutside));
</script>

<template>
  <div
    class="border-border bg-popover fixed z-50 w-36 rounded-lg border py-1 shadow-xl"
    :style="{ left: `${x}px`, top: `${y}px` }"
    @click.stop
  >
    <div
      class="text-popover-foreground hover:bg-accent flex cursor-pointer items-center gap-2 px-3 py-2 text-xs"
      @click="
        $emit('rename');
        $emit('close');
      "
    >
      <Edit3 class="size-3.5" />
      <span>{{ $t('ai-platform.workflow.editor.contextMenu.rename') }}</span>
    </div>

    <div
      class="text-popover-foreground hover:bg-accent flex cursor-pointer items-center gap-2 px-3 py-2 text-xs"
      @click="
        $emit('duplicate');
        $emit('close');
      "
    >
      <Copy class="size-3.5" />
      <span>{{ $t('ai-platform.workflow.editor.contextMenu.duplicate') }}</span>
    </div>

    <div class="bg-border my-1 h-px"></div>

    <div
      class="flex cursor-pointer items-center gap-2 px-3 py-2 text-xs text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950"
      @click="
        $emit('delete');
        $emit('close');
      "
    >
      <Trash2 class="size-3.5" />
      <span>{{ $t('ai-platform.workflow.editor.contextMenu.delete') }}</span>
    </div>
  </div>
</template>
