<template>
  <div class="edit-top-bar">
    <el-button
      type="primary"
      class="topbar-save-btn"
      :loading="saving"
      @click="onCmd('project.save')"
    >
      保存
    </el-button>

    <el-dropdown trigger="click" @command="onCmd">
      <el-button text class="topbar-btn">导入</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="file.import.dwg">导入 .dwg/.dxf</el-dropdown-item>
          <el-dropdown-item command="file.import.geojson">导入 .geojson</el-dropdown-item>
          <el-dropdown-item command="file.upload.image" divided>导入图片</el-dropdown-item>
          <el-dropdown-item command="file.upload.model">导入 CycleGUI 模型</el-dropdown-item>
          <el-dropdown-item command="file.export.png" divided>导出 PNG</el-dropdown-item>
          <el-dropdown-item command="file.export.svg">导出 SVG</el-dropdown-item>
          <el-dropdown-item command="file.export.json">导出 JSON</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown trigger="click" @command="onCmd">
      <el-button text class="topbar-btn">编辑</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="edit.cut">剪切 (Ctrl+X)</el-dropdown-item>
          <el-dropdown-item command="edit.copy">复制 (Ctrl+C)</el-dropdown-item>
          <el-dropdown-item command="edit.paste">粘贴 (Ctrl+V)</el-dropdown-item>
          <el-dropdown-item command="edit.delete">删除 (Del)</el-dropdown-item>
          <el-dropdown-item command="edit.selectAll" divided>全选</el-dropdown-item>
          <el-dropdown-item command="edit.invert">反选</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown trigger="click" @command="onCmd">
      <el-button text class="topbar-btn">撤销</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="edit.undo" :disabled="!canUndo">撤销 (Ctrl+Z)</el-dropdown-item>
          <el-dropdown-item command="edit.redo" :disabled="!canRedo">重做 (Ctrl+Y)</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown trigger="click" @command="onCmd">
      <el-button text class="topbar-btn">视图</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="view.fitAll">缩放至全屏</el-dropdown-item>
          <el-dropdown-item command="view.fitSelection">缩放至选中</el-dropdown-item>
          <el-dropdown-item command="view.toggleGrid" divided>显示网格</el-dropdown-item>
          <el-dropdown-item command="view.toggleScale">显示比例尺</el-dropdown-item>
          <el-dropdown-item command="view.toggle2D">切换 2D / 3D</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <el-dropdown trigger="click" @command="onCmd">
      <el-button text class="topbar-btn">图层</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="layer.new">新建图层…</el-dropdown-item>
          <el-dropdown-item command="layer.toggleVisibility">切换显示图层…</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!--
      「过滤」菜单：对齐 SimpleLite 桌面底部工具栏的「选择 / 对齐 / 显示内容」三组开关。
      由 MapEditorView 维护 viewFilter 状态：
        - selectFilter.{sites,tracks,cars,decor}：未勾选的类型不会进入 selection（也就不会被高亮 + 不会出现在右侧属性面板），等价于 SimpleLite 的 SelectFilter*。
        - alignSnap.{sites,cars,tracks}：影响绘制工具吸附目标。
        - showViewport.{sceneLabels,scenePrimitives,cars}：影响右侧属性面板的类型筛选；画布渲染本身仍由 SimpleLite LayerToShow / 后端开关控制，等后续后端 API 打通后可双向同步。
      历史上「图层」菜单里的「站点层可见 / 可选」等三项是 stub，已删除并搬到这里。
    -->
    <el-dropdown trigger="click" @command="onCmd">
      <el-button text class="topbar-btn">过滤</el-button>
      <template #dropdown>
        <el-dropdown-menu class="topbar-filter-menu">
          <el-dropdown-item disabled class="topbar-filter-header">选择（可拾取）</el-dropdown-item>
          <el-dropdown-item command="view.select.sites">{{ mark(viewFilter.selectFilter.sites) }} 站点</el-dropdown-item>
          <el-dropdown-item command="view.select.tracks">{{ mark(viewFilter.selectFilter.tracks) }} 路径</el-dropdown-item>
          <el-dropdown-item command="view.select.cars">{{ mark(viewFilter.selectFilter.cars) }} AGV</el-dropdown-item>
          <el-dropdown-item command="view.select.decor">{{ mark(viewFilter.selectFilter.decor) }} 区域 / 装饰</el-dropdown-item>

          <el-dropdown-item divided disabled class="topbar-filter-header">对齐（鼠标吸附）</el-dropdown-item>
          <el-dropdown-item command="view.snap.sites">{{ mark(viewFilter.alignSnap.sites) }} 吸附站点</el-dropdown-item>
          <el-dropdown-item command="view.snap.cars">{{ mark(viewFilter.alignSnap.cars) }} 吸附 AGV</el-dropdown-item>
          <el-dropdown-item command="view.snap.tracks">{{ mark(viewFilter.alignSnap.tracks) }} 吸附路径</el-dropdown-item>

          <el-dropdown-item divided disabled class="topbar-filter-header">显示内容</el-dropdown-item>
          <el-dropdown-item command="view.show.sceneLabels">{{ mark(viewFilter.showViewport.sceneLabels) }} 场景图元标记</el-dropdown-item>
          <el-dropdown-item command="view.show.scenePrimitives">{{ mark(viewFilter.showViewport.scenePrimitives) }} 场景图元</el-dropdown-item>
          <el-dropdown-item command="view.show.cars">{{ mark(viewFilter.showViewport.cars) }} 车辆</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <div class="spacer" />

    <el-tooltip content="撤销 (Ctrl+Z)" placement="bottom">
      <el-button size="small" :disabled="!canUndo" class="topbar-icon-btn" @click="onCmd('edit.undo')">↶</el-button>
    </el-tooltip>
    <el-tooltip content="重做 (Ctrl+Y)" placement="bottom">
      <el-button size="small" :disabled="!canRedo" class="topbar-icon-btn" @click="onCmd('edit.redo')">↷</el-button>
    </el-tooltip>

  </div>
</template>

<script setup lang="ts">
export interface ViewFilterState {
  selectFilter: { sites: boolean; tracks: boolean; cars: boolean; decor: boolean }
  alignSnap: { sites: boolean; cars: boolean; tracks: boolean }
  showViewport: { sceneLabels: boolean; scenePrimitives: boolean; cars: boolean }
}

defineProps<{
  canUndo: boolean
  canRedo: boolean
  saving?: boolean
  // 由 MapEditorView 注入：「过滤」菜单的三组开关状态。父组件保证非空。
  viewFilter: ViewFilterState
}>()

const emit = defineEmits<{
  (e: 'cmd', cmd: string): void
}>()

function onCmd(cmd: string) {
  emit('cmd', cmd)
}

function mark(on: boolean): string {
  return on ? '☑' : '☐'
}
</script>

<style scoped>
.edit-top-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: linear-gradient(180deg, var(--me-chrome-1) 0%, var(--me-chrome-2) 100%);
  border-bottom: 1px solid var(--me-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(var(--mg-shadow-rgb, 22, 58, 74), 0.08);
}
.spacer { flex: 1; }
.el-divider--vertical { margin: 0 6px; background: var(--me-border); }

.topbar-btn {
  color: var(--me-text) !important;
  font-weight: 600;
  font-size: 13.5px;
  padding: 6px 12px;
  height: auto;
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.topbar-btn:hover {
  color: var(--mg-primary) !important;
  background: var(--me-hover) !important;
}
.topbar-btn:focus {
  background: var(--me-hover) !important;
}

.topbar-icon-btn {
  color: var(--me-text) !important;
  background: var(--me-surface) !important;
  border: 1px solid var(--me-border) !important;
  font-size: 15px;
}
.topbar-icon-btn:hover:not(.is-disabled) {
  background: var(--me-hover) !important;
  border-color: rgba(var(--mg-primary-rgb), 0.55) !important;
  color: var(--mg-primary) !important;
}
.topbar-icon-btn.is-disabled {
  opacity: 0.4;
}

.topbar-save-btn {
  font-weight: 600;
  font-size: 13.5px;
  padding: 6px 18px;
  height: auto;
  border-radius: 6px;
  margin-right: 4px;
  --el-button-bg-color: var(--mg-primary) !important;
  --el-button-border-color: var(--mg-primary) !important;
  --el-button-hover-bg-color: var(--mg-primary-hover) !important;
  --el-button-hover-border-color: var(--mg-primary-hover) !important;
  --el-button-active-bg-color: var(--mg-primary-active) !important;
  --el-button-active-border-color: var(--mg-primary-active) !important;
  --el-button-text-color: #fff !important;
  --el-button-hover-text-color: #fff !important;
}

.topbar-filter-menu :deep(.topbar-filter-header) {
  font-size: 11px;
  color: var(--me-text-muted);
  cursor: default;
  pointer-events: none;
  padding-top: 6px;
  padding-bottom: 2px;
  text-transform: none;
  letter-spacing: 0.4px;
}
</style>
