<template>
  <div
    v-if="config.visible"
    ref="menuRef"
    class="context-menu"
    :style="menuStyle"
    @click.stop
  >
    <!-- 空白区域菜单 -->
    <template v-if="config.context === 'blank'">
      <div class="context-menu-item" @click="handleCreateFile">
        <span class="context-menu-icon">📄</span>
        <span>新建文件</span>
        <span class="context-menu-shortcut">Ctrl+N</span>
      </div>
      <div class="context-menu-item" @click="handleCreateDir">
        <span class="context-menu-icon">📁</span>
        <span>新建文件夹</span>
        <span class="context-menu-shortcut">Ctrl+Shift+N</span>
      </div>
    </template>

    <!-- 文件菜单 -->
    <template v-else-if="config.context === 'file' && config.selectedFile">
      <div class="context-menu-item" @click="handleCreateFile">
        <span class="context-menu-icon">📄</span>
        <span>新建文件</span>
        <span class="context-menu-shortcut">Ctrl+N</span>
      </div>
      <div class="context-menu-item" @click="handleCreateDir">
        <span class="context-menu-icon">📁</span>
        <span>新建文件夹</span>
        <span class="context-menu-shortcut">Ctrl+Shift+N</span>
      </div>
      <div class="context-menu-divider"></div>
      <div
        v-if="!config.selectedFile.is_dir && isOfficeFile(config.selectedFile.name)"
        class="context-menu-item"
        @click="handleOpenWithSystem"
      >
        <span class="context-menu-icon">🚀</span>
        <span>系统默认程序打开</span>
      </div>
      <div class="context-menu-divider"></div>
      <div class="context-menu-item" @click="handleRename">
        <span class="context-menu-icon">✏️</span>
        <span>重命名</span>
        <span class="context-menu-shortcut">F2</span>
      </div>
      <div class="context-menu-item danger" @click="handleDelete">
        <span class="context-menu-icon">🗑️</span>
        <span>删除</span>
        <span class="context-menu-shortcut">Del</span>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch, nextTick } from 'vue'
import type { ContextMenuConfig, FileItem } from '@/types/file-system'
import { isOfficeFile } from '@/utils/fileTypeHelpers'

const menuRef = ref<HTMLElement>()

// Props
interface Props {
  config: ContextMenuConfig
}

const props = defineProps<Props>()

// Emits
interface Emits {
  (e: 'action', action: string, payload?: any): void
  (e: 'close'): void
}

const emit = defineEmits<Emits>()

const menuStyle = computed(() => {
  return { left: props.config.x + 'px', top: props.config.y + 'px' }
})

// 位置修正：渲染后检查菜单是否超出视口，自动调整位置
watch(() => props.config.visible, (visible) => {
  if (!visible) return
  nextTick(() => {
    const el = menuRef.value
    if (!el) return
    const rect = el.getBoundingClientRect()
    if (rect.right > window.innerWidth) {
      el.style.left = (window.innerWidth - rect.width - 4) + 'px'
    }
    if (rect.bottom > window.innerHeight) {
      el.style.top = (window.innerHeight - rect.height - 4) + 'px'
    }
  })
})

/**
 * 处理菜单项点击
 */
const handleCreateFile = () => {
  emit('action', 'createFile')
  emit('close')
}

const handleCreateDir = () => {
  emit('action', 'createDir')
  emit('close')
}

const handleOpenWithSystem = () => {
  if (props.config.selectedFile) {
    emit('action', 'openWithSystem', props.config.selectedFile)
  }
  emit('close')
}

const handleRename = () => {
  if (props.config.selectedFile) {
    emit('action', 'rename', props.config.selectedFile)
  }
  emit('close')
}

const handleDelete = () => {
  if (props.config.selectedFile) {
    emit('action', 'delete', props.config.selectedFile)
  }
  emit('close')
}
</script>

<style scoped>
.context-menu {
  position: fixed;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border-2);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 200px;
  padding: 4px;
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
  user-select: none;
  color: var(--color-text-1);
}

.context-menu-item:hover {
  background: var(--color-fill-2);
}

.context-menu-item.danger {
  color: rgb(var(--danger-6));
}

.context-menu-item.danger:hover {
  background: rgb(var(--danger-1));
}

.context-menu-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.context-menu-shortcut {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-text-3);
  background: var(--color-fill-2);
  padding: 2px 6px;
  border-radius: 3px;
}

.context-menu-divider {
  height: 1px;
  background: var(--color-border-2);
  margin: 4px 0;
}
</style>
