<template>
  <header class="top-navbar">
    <div class="navbar-left">
      <div class="logo">
        <i class="fas fa-cube"></i>
        <span>工业模型软件管理统一平台</span>
      </div>
    </div>

    <div class="navbar-center">
      <nav class="main-nav">
        <button
          class="nav-item"
          :class="{
            active: currentPage === PAGE_TYPES.MODEL_VIEWER,
            disabled: !isCADConnected
          }"
          :disabled="!isCADConnected"
          @click="handleNavClick(PAGE_TYPES.MODEL_VIEWER)"
        >
          <i class="fas fa-eye"></i>模型查看
        </button>
        <button
          class="nav-item"
          :class="{
            active: currentPage === PAGE_TYPES.ANALYSIS_TOOLS,
            disabled: !isCADConnected
          }"
          :disabled="!isCADConnected"
          @click="handleNavClick(PAGE_TYPES.ANALYSIS_TOOLS)"
        >
          <i class="fas fa-layer-group"></i>模型分析
        </button>
        <button
          class="nav-item"
          :class="{
            active: currentPage === PAGE_TYPES.EXPORT_TOOLS,
            disabled: !isCADConnected
          }"
          :disabled="!isCADConnected"
          @click="handleNavClick(PAGE_TYPES.EXPORT_TOOLS)"
        >
          <i class="fas fa-download"></i>导出
        </button>
        <button
          class="nav-item"
          :class="{ active: currentPage === PAGE_TYPES.MODEL_GALLERY }"
          @click="handleNavClick(PAGE_TYPES.MODEL_GALLERY)"
        >
          <i class="fas fa-images"></i>模型库
        </button>
        <button
          class="nav-item"
          :class="{ active: currentPage === PAGE_TYPES.FORMAT_CONVERTER }"
          @click="handleNavClick(PAGE_TYPES.FORMAT_CONVERTER)"
        >
          <i class="fas fa-exchange-alt"></i>格式转换
        </button>
      </nav>
    </div>

    <div class="navbar-right">
      <div class="notification-center">
        <i class="fas fa-bell"></i>
        <span class="badge">3</span>
      </div>
      <div class="user-menu" @click="toggleUserDropdown">
        <img src="@/assets/images/adminlogo.png" alt="用户头像" class="user-avatar">
        <span class="username">管理员</span>
        <i class="fas fa-chevron-down" :class="{ 'rotated': showUserDropdown }"></i>

        <!-- 用户下拉菜单 -->
        <div v-show="showUserDropdown" class="user-dropdown">
          <div class="dropdown-item" @click.stop="handleLogout">
            <i class="fas fa-sign-out-alt"></i>
            <span>退出登录</span>
          </div>
        </div>
      </div>
      <div class="system-settings">
        <i class="fas fa-cog"></i>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCADStore } from '@/stores/cad'
import { useAuthStore } from '@/stores/auth'
import { PAGE_TYPES, CAD_REQUIRED_PAGES } from '@/config/pages'

// Props
const { currentPage } = defineProps({
  currentPage: {
    type: String,
    default: 'home'
  }
})

// Emits
const emit = defineEmits(['page-change'])

// Store
const cadStore = useCADStore()
const authStore = useAuthStore()

// Router
const router = useRouter()

// 用户下拉菜单状态
const showUserDropdown = ref(false)

// 检查是否有CAD连接
const isCADConnected = computed(() => {
  return cadStore.currentCAD !== null
})

// 处理导航点击
const handleNavClick = (page) => {
  // 如果是需要CAD连接的页面，检查连接状态
  if (CAD_REQUIRED_PAGES.includes(page) && !isCADConnected.value) {
    return
  }

  emit('page-change', page)
}

// 切换用户下拉菜单
const toggleUserDropdown = () => {
  showUserDropdown.value = !showUserDropdown.value
}

// 退出登录
const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.top-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--size-header-height);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border-primary);
  padding: 0 var(--spacing-xl);
  position: relative;
  z-index: var(--z-index-header);
}

.navbar-left {
  display: flex;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.logo i {
  font-size: var(--icon-size-xl);
  color: var(--color-primary);
}

.navbar-center {
  display: flex;
  align-items: center;
}

.main-nav {
  display: flex;
  gap: var(--spacing-sm);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-grid-gap) var(--spacing-lg);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--size-border-radius-button);
  transition: var(--transition-all);
  font-size: var(--font-size-base);
  font-weight: 500;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-item:hover:not(.disabled) {
  background: var(--color-white-rgb-1);
  color: var(--color-text-primary);
}

.nav-item.active {
  background: var(--color-primary);
  color: white;
}

.nav-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--color-text-tertiary);
}

.nav-item.disabled:hover {
  background: transparent;
  color: var(--color-text-tertiary);
}

.nav-item i {
  font-size: var(--font-size-base);
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.notification-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  background: var(--color-white-rgb-1);
  border-radius: var(--size-border-radius-button);
  cursor: pointer;
  transition: var(--transition-all);
}

.notification-center:hover {
  background: var(--color-white-rgb-15);
}

.notification-center i {
  color: var(--color-text-secondary);
  font-size: var(--icon-size-md);
}

.badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--color-error);
  color: white;
  font-size: var(--font-size-icon-small);
  padding: var(--size-2) var(--size-6);
  border-radius: var(--size-10);
  min-width: var(--size-16);
  text-align: center;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-white-rgb-1);
  border-radius: var(--size-border-radius-button);
  cursor: pointer;
  transition: var(--transition-all);
  position: relative;
}

.user-menu:hover {
  background: var(--color-white-rgb-15);
}

.user-avatar {
  width: var(--icon-size-xl);
  height: var(--icon-size-xl);
  border-radius: 50%;
}

.username {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: 500;
}

.user-menu i {
  color: var(--color-text-secondary);
  font-size: 12px;
  transition: transform 0.3s ease;
}

.user-menu i.rotated {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: var(--spacing-sm);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  box-shadow: 0 4px 20px var(--color-shadow-black-1);
  min-width: var(--size-140);
  z-index: 1000;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 12px 16px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: var(--font-size-base);
}

.dropdown-item:hover {
  background: var(--color-white-rgb-1);
}

.dropdown-item:first-child {
  border-radius: 8px 8px 0 0;
}

.dropdown-item:last-child {
  border-radius: 0 0 8px 8px;
}

.dropdown-item:only-child {
  border-radius: var(--size-border-radius);
}

.dropdown-item i {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.system-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-4xl);
  height: var(--spacing-4xl);
  background: var(--color-white-rgb-1);
  border-radius: var(--size-border-radius-button);
  cursor: pointer;
  transition: var(--transition-all);
}

.system-settings:hover {
  background: var(--color-white-rgb-15);
}

.system-settings i {
  color: var(--color-text-secondary);
  font-size: var(--icon-size-md);
}

/* 响应式设计 */
@media (max-width: var(--breakpoint-tablet)) {
  .main-nav {
    gap: var(--spacing-xs);
  }

  .nav-item {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .navbar-right {
    gap: var(--spacing-md);
  }
}

@media (max-width: 640px) {
  .navbar-center {
    display: none;
  }

  .logo span {
    font-size: var(--font-size-base);
  }
}
</style>