<template>
	<!-- 顶部工具条：左侧为视图切换/重置，右侧为显示/控制模式 -->
	<header class="topbar">
		<!-- 视图切换与重置 -->
		<nav class="top-tabs">
			<!-- 原始视图 -->
			<button class="tab" :class="{ active: activeTab === 'origin' }" @click="onToOrigin?.()"
				:title="tUI('TOPBAR_ORIGIN')">
				<i class="icon-home" />
				<span>{{ tUI('TOPBAR_ORIGIN') }}</span>
			</button>

			<!-- 爆炸视图 -->
			<button class="tab" :class="{ active: activeTab === 'explode' }" @click="onToExplode?.()"
				:title="tUI('TOPBAR_EXPLODE')">
				<i class="icon-cube" />
				<span>{{ tUI('TOPBAR_EXPLODE') }}</span>
			</button>

			<!-- 还原部件 -->
			<button class="tab" @click="onResetParts?.()" :title="tUI('TOPBAR_RESTORE')">
				<i class="icon-restore" />
				<span>{{ tUI('TOPBAR_RESTORE') }}</span>
			</button>

			<!-- 重置视角 -->
			<button class="tab" @click="onResetCamera?.()" :title="tUI('TOPBAR_RESET_CAMERA')">
				<i class="icon-back" />
				<span>{{ tUI('TOPBAR_RESET_CAMERA') }}</span>
			</button>
		</nav>

		<!-- 外观/交互模式控制 -->
		<div class="top-actions">
			<!-- 背景色切换 -->
			<button class="pill" @click="onToggleBackground?.()" :title="tUI('TOPBAR_TOGGLE_BG')">
				{{ tUI('TOPBAR_TOGGLE_BG') }}
			</button>

			<!-- 控制模式：相机 -->
			<button class="pill" :class="{ on: mode === 'camera' }" @click="onSetCamera?.()"
				:title="tUI('TOPBAR_MODE_CAMERA')">
				{{ tUI('TOPBAR_MODE_CAMERA') }}
			</button>

			<!-- 控制模式：模型（整体拖动） -->
			<button class="pill" :class="{ on: mode === 'model' }" @click="onSetModel?.()"
				:title="tUI('TOPBAR_MODE_MODEL')">
				{{ tUI('TOPBAR_MODE_MODEL') }}
			</button>
		</div>
	</header>
</template>

<script setup lang="ts">
/**
 * 顶部工具条组件
 * - 职责：提供视图切换（原始/爆炸）、部件/相机重置、背景切换，以及“视角/整体”控制模式切换
 * - 组件自身不改变任何业务状态，通过回调把动作交回给父组件
 */
import { tUI, UI_KEYS } from './i18nExt';

type TTab = 'origin' | 'explode'
type TMode = 'camera' | 'model'

/** 对外只暴露当前状态与一组事件回调 */
defineProps<{
	/** 当前激活的视图标签 */
	activeTab: TTab
	/** 当前控制模式：camera(轨道控制) / model(整体拖动) */
	mode: TMode

	/** 切换到原始视图 */
	onToOrigin?: () => void
	/** 切换到爆炸视图 */
	onToExplode?: () => void
	/** 还原所有部件位置 */
	onResetParts?: () => void
	/** 重置相机视角 */
	onResetCamera?: () => void
	/** 切换背景色（浅/深） */
	onToggleBackground?: () => void
	/** 切换到“视角控制”模式 */
	onSetCamera?: () => void
	/** 切换到“整体拖动”模式 */
	onSetModel?: () => void
}>();
</script>

<style scoped>
/* （与你原样式一致，这里略） */
.topbar {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	background: #f7f7f7;
	border-bottom: 1px solid #e5e5e5;
	z-index: 30;
}

.top-tabs {
	display: flex;
	gap: 8px;
}

.top-tabs .tab {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #e5e5e5;
	cursor: pointer;
}

.top-tabs .tab.active {
	border-color: #1677ff;
	color: #1677ff;
}

.top-actions {
	display: flex;
	gap: 8px;
}

.pill {
	height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid #e5e5e5;
	cursor: pointer;
}

.pill.on {
	background: #1677ff;
	color: #fff;
	border-color: #1677ff;
}

.icon-home::before {
	content: '🏠';
}

.icon-cube::before {
	content: '🧊';
}

.icon-restore::before {
	content: '↺';
}

.icon-back::before {
	content: '🎯';
}
</style>
