<template>
  <transition name="quick-menu">
    <div v-if="open" class="quick-menu" @click.stop>
      <button
        type="button"
        class="menu-entry"
        @click="$emit('quick-upload')"
        :disabled="!isConnected || uploading"
      >
        {{ uploading ? '上传中...' : '上传文件' }}
      </button>
      <button
        type="button"
        class="menu-entry"
        @click.stop="$emit('open-review')"
        :disabled="!isConnected || streamingMessage"
      >
        对话回顾
      </button>
      <button
        v-if="currentModelKey === 'qwen3-vl-plus'"
        type="button"
        class="menu-entry"
        @click.stop="$emit('pick-images')"
        :disabled="!isConnected || streamingMessage"
      >
        发送图片
      </button>
      <button
        type="button"
        class="menu-entry has-submenu"
        @click.stop="$emit('toggle-mode-menu')"
        :disabled="!isConnected || streamingMessage"
      >
        <span>运行模式</span>
        <span class="entry-arrow">{{ runModeLabel }}</span>
      </button>
      <button
        type="button"
        class="menu-entry has-submenu"
        @click.stop="$emit('toggle-model-menu')"
        :disabled="!isConnected"
      >
        <span>切换模型</span>
        <span class="entry-arrow">{{ currentModelLabel }}</span>
      </button>
      <button
        type="button"
        class="menu-entry has-submenu"
        @click.stop="$emit('toggle-tool-menu')"
        :disabled="!isConnected"
      >
        工具禁用
        <span class="entry-arrow">›</span>
      </button>
      <button
        type="button"
        class="menu-entry has-submenu"
        @click.stop="$emit('toggle-settings')"
        :disabled="!isConnected"
      >
        设置
        <span class="entry-arrow">›</span>
      </button>

      <transition name="submenu-slide">
        <div class="quick-submenu mode-submenu" v-if="modeMenuOpen">
          <div class="submenu-list">
            <button
              v-for="option in runModeOptions"
              :key="option.value"
              type="button"
              class="menu-entry submenu-entry"
              :class="{ active: option.value === resolvedRunMode }"
              @click.stop="$emit('select-run-mode', option.value)"
              :disabled="streamingMessage || !isConnected"
            >
              {{ option.label }}
            </button>
          </div>
        </div>
      </transition>

      <transition name="submenu-slide">
        <div class="quick-submenu model-submenu" v-if="modelMenuOpen">
          <div class="submenu-list">
            <button
              v-for="option in modelOptions"
              :key="option.key"
              type="button"
              class="menu-entry submenu-entry"
              :class="{ active: option.key === currentModelKey }"
              @click.stop="$emit('select-model', option.key)"
              :disabled="streamingMessage || !isConnected"
            >
              <span class="submenu-label">
                <span>{{ option.label }}</span>
                <span class="submenu-desc">{{ option.description }}</span>
              </span>
              <span v-if="option.key === currentModelKey" class="entry-arrow">✓</span>
            </button>
          </div>
        </div>
      </transition>

      <transition name="submenu-slide">
        <div class="quick-submenu tool-submenu" v-if="toolMenuOpen">
          <div class="submenu-status" v-if="toolSettingsLoading">正在同步工具状态...</div>
          <div v-else-if="!toolSettings.length" class="submenu-empty">暂无可控工具</div>
          <div v-else class="submenu-list">
            <button
              v-for="category in toolSettings"
              :key="category.id"
              type="button"
              class="menu-entry submenu-entry"
              :class="{ disabled: !category.enabled || category.locked }"
              @click.stop="$emit('update-tool-category', category.id, !category.enabled)"
              :disabled="streamingMessage || !isConnected || toolSettingsLoading"
            >
              <span class="submenu-label icon-label">
                <span class="icon icon-sm" :style="getIconStyle(toolCategoryIcon(category.id))" aria-hidden="true"></span>
                <span>{{ category.label }}</span>
              </span>
              <span class="entry-arrow">
                <template v-if="category.locked">
                  被管理员锁定
                </template>
                <template v-else>
                  {{ category.enabled ? '禁用' : '启用' }}
                </template>
              </span>
            </button>
          </div>
        </div>
      </transition>

      <transition name="submenu-slide">
        <div class="quick-submenu settings-submenu" v-if="settingsOpen">
          <div class="submenu-list">
            <button
              type="button"
              class="menu-entry submenu-entry"
              @click="$emit('realtime-terminal')"
              :disabled="!isConnected"
            >
              实时终端
            </button>
            <button
              type="button"
              class="menu-entry submenu-entry"
              @click="$emit('toggle-focus-panel')"
              :disabled="!isConnected"
            >
              聚焦面板
            </button>
            <button
              type="button"
              class="menu-entry submenu-entry"
              @click="$emit('toggle-token-panel')"
              :disabled="!currentConversationId"
            >
              用量统计
            </button>
            <button
              type="button"
              class="menu-entry submenu-entry"
              @click="$emit('compress-conversation')"
              :disabled="compressing || streamingMessage || !isConnected"
            >
              {{ compressing ? '压缩中...' : '压缩对话' }}
            </button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { computed } from 'vue';

defineOptions({ name: 'QuickMenu' });

const props = defineProps<{
  open: boolean;
  isConnected: boolean;
  uploading: boolean;
  streamingMessage: boolean;
  thinkingMode: boolean;
  toolMenuOpen: boolean;
  toolSettings: Array<{ id: string; label: string; enabled: boolean }>;
  toolSettingsLoading: boolean;
  settingsOpen: boolean;
  compressing: boolean;
  currentConversationId: string | null;
  iconStyle?: (key: string) => Record<string, string>;
  toolCategoryIcon: (categoryId: string) => string;
  modeMenuOpen: boolean;
  runMode?: 'fast' | 'thinking' | 'deep';
  modelMenuOpen: boolean;
  modelOptions: Array<{ key: string; label: string; description: string; disabled?: boolean }>;
  currentModelKey: string;
  blockUpload?: boolean;
  blockToolToggle?: boolean;
  blockRealtimeTerminal?: boolean;
  blockFocusPanel?: boolean;
  blockTokenPanel?: boolean;
  blockCompressConversation?: boolean;
  blockConversationReview?: boolean;
}>();

defineEmits<{
  (event: 'quick-upload'): void;
  (event: 'toggle-tool-menu'): void;
  (event: 'toggle-settings'): void;
  (event: 'update-tool-category', id: string, enabled: boolean): void;
  (event: 'realtime-terminal'): void;
  (event: 'toggle-focus-panel'): void;
  (event: 'toggle-token-panel'): void;
  (event: 'compress-conversation'): void;
  (event: 'toggle-mode-menu'): void;
  (event: 'select-run-mode', mode: 'fast' | 'thinking' | 'deep'): void;
  (event: 'toggle-model-menu'): void;
  (event: 'select-model', key: string): void;
  (event: 'open-review'): void;
}>();

const runModeOptions = [
  { value: 'fast', label: '快速模式' },
  { value: 'thinking', label: '思考模式' },
  { value: 'deep', label: '深度思考模式' }
] as const;

const runModeLabelMap: Record<'fast' | 'thinking' | 'deep', string> = {
  fast: '快速模式',
  thinking: '思考模式',
  deep: '深度思考'
};

const resolvedRunMode = computed<'fast' | 'thinking' | 'deep'>(() => {
  if (props.runMode === 'deep' || props.runMode === 'thinking' || props.runMode === 'fast') {
    return props.runMode;
  }
  return props.thinkingMode ? 'thinking' : 'fast';
});

const runModeLabel = computed(() => runModeLabelMap[resolvedRunMode.value]);

const getIconStyle = (key: string) => (props.iconStyle ? props.iconStyle(key) : {});

const currentModelLabel = computed(() => {
  const found = props.modelOptions?.find(m => m.key === props.currentModelKey);
  return found ? found.label : '未选择';
});
</script>

<style scoped>
.submenu-desc {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #7f8792);
  margin-top: 2px;
}
</style>
