<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.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">
        撤销
        <span class="topbar-count">{{ undoCount }}/{{ undoLimit }}</span>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="edit.undo" :disabled="!canUndo">
            撤销 (Ctrl+Z) · {{ undoCount }}/{{ undoLimit }}
          </el-dropdown-item>
          <el-dropdown-item command="edit.redo" :disabled="!canRedo">
            重做 (Ctrl+Y) · {{ redoCount }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 编辑 / 视图 / 图层 / 过滤 已从顶栏移除；过滤由左侧「仅*」与 MapEditorView 驱动。 -->
    <div class="spacer" />

    <el-tooltip :content="`撤销 (Ctrl+Z) · ${undoCount}/${undoLimit}`" placement="bottom">
      <el-button size="small" :disabled="!canUndo" class="topbar-icon-btn" @click="onCmd('edit.undo')">
        ↶
        <span v-if="undoCount > 0" class="topbar-badge">{{ undoCount }}</span>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="`重做 (Ctrl+Y) · ${redoCount}`" placement="bottom">
      <el-button size="small" :disabled="!canRedo" class="topbar-icon-btn" @click="onCmd('edit.redo')">
        ↷
        <span v-if="redoCount > 0" class="topbar-badge">{{ redoCount }}</span>
      </el-button>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
export interface ViewFilterState {
  selectFilter: {
    sites: boolean
    tracks: boolean
    cars: boolean
    decor: boolean
    trackMode?: 'all' | 'straight' | 'curve'
  }
  alignSnap: { sites: boolean; cars: boolean; tracks: boolean }
  showViewport: { sceneLabels: boolean; scenePrimitives: boolean; cars: boolean }
}

withDefaults(defineProps<{
  canUndo: boolean
  canRedo: boolean
  saving?: boolean
  undoCount?: number
  redoCount?: number
  undoLimit?: number
  /** 保留类型兼容；顶栏「过滤」菜单已移除。 */
  viewFilter?: ViewFilterState
}>(), {
  undoCount: 0,
  redoCount: 0,
  undoLimit: 20
})

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

function onCmd(cmd: string) {
  emit('cmd', cmd)
}
</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; }

.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-count {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.topbar-icon-btn {
  position: relative;
  color: var(--me-text) !important;
  background: var(--me-surface) !important;
  border: 1px solid var(--me-border) !important;
  font-size: 15px;
  min-width: 36px;
}
.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-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--mg-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.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;
}
</style>
