<template>
  <el-header class="navbar">
    <div class="navbar-container">
      <!-- Logo -->
      <div class="navbar-brand">
        <router-link to="/" class="brand-link">
          <span class="brand-text">AIGC Demo</span>
        </router-link>
      </div>

      <!-- 导航菜单 -->
      <el-menu
        mode="horizontal"
        class="navbar-menu"
        background-color="#409EFF"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
        @select="handleMenuSelect"
      >
        <el-menu-item index="/welcome">
          <span>欢迎页</span>
        </el-menu-item>
        
        <el-menu-item index="/home">
          <span>首页</span>
        </el-menu-item>
        
        <el-menu-item v-if="userStore.isAuthenticated" index="/profile">
          <span>个人主页</span>
        </el-menu-item>
        
        <el-menu-item v-if="userStore.isAuthenticated" index="/orders">
          <span>订单管理</span>
        </el-menu-item>
        
        <el-menu-item v-if="userStore.isAuthenticated" index="/payments">
          <span>支付记录</span>
        </el-menu-item>
        
        <el-menu-item v-if="userStore.isAdmin" index="/admin/orders">
          <span>后台管理</span>
        </el-menu-item>
        
        <el-menu-item v-if="userStore.isAdmin" index="/admin/users">
          <span>用户管理</span>
        </el-menu-item>
        
        <el-menu-item v-if="userStore.isAdmin" index="/admin/dashboard">
          <span>数据仪表盘</span>
        </el-menu-item>
      </el-menu>

      <!-- 快速切换提示（暂时隐藏） -->
      <!-- <div class="quick-switch-hint" v-if="showShortcutHint">
        <el-tooltip content="使用 Alt + 数字键快速切换页面" placement="bottom">
          <el-icon><Keyboard /></el-icon>
        </el-tooltip>
      </div> -->

      <!-- 用户菜单 -->
      <div class="navbar-user">
        <template v-if="userStore.isAuthenticated">
          <el-dropdown @command="handleUserCommand">
            <span class="user-dropdown">
              <span>{{ userStore.username }}</span>
              <el-tag v-if="userStore.user?.points" size="small" type="success" class="points-tag">
                {{ userStore.user.points }}积分
              </el-tag>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  个人资料
                </el-dropdown-item>
                <el-dropdown-item v-if="userStore.isAdmin" command="admin">
                  后台管理
                </el-dropdown-item>
                <el-dropdown-item command="settings">
                  设置
                </el-dropdown-item>
                <el-dropdown-item divided command="logout">
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
        
        <template v-else>
          <el-button type="primary" plain @click="$router.push('/login')">
            登录
          </el-button>
          <el-button type="success" plain @click="$router.push('/register')">
            注册
          </el-button>
        </template>
      </div>
    </div>
  </el-header>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()

// 显示快捷键提示（暂时禁用）
// const showShortcutHint = ref(true)

// 快速切换处理函数
const handleMenuSelect = (index) => {
  // 使用replace而不是push，避免浏览器历史记录堆积
  router.replace(index)
}

// 暂时禁用快捷键功能，确保基本功能正常
// const handleKeydown = (event) => {
//   // 快捷键功能暂时禁用
// }

// onMounted(() => {
//   // 暂时不添加键盘事件监听
// })

// onUnmounted(() => {
//   // 暂时不移除键盘事件监听
// })

const handleUserCommand = async (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('个人资料功能开发中')
      break
    case 'admin':
      router.push('/admin/dashboard')
      break
    case 'settings':
      ElMessage.info('设置功能开发中')
      break
    case 'logout':
      try {
        await ElMessageBox.confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await userStore.logoutUser()
        ElMessage.success('退出登录成功')
        router.push('/')
      } catch (error) {
        // 用户取消
      }
      break
  }
}
</script>

<style scoped>
.navbar {
  height: 60px;
  line-height: 60px;
  padding: 0;
}

.navbar-container {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.navbar-brand {
  margin-right: 40px;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  font-size: 20px;
  font-weight: bold;
}

.brand-icon {
  margin-right: 8px;
  font-size: 24px;
}

.brand-text {
  font-size: 18px;
}

.navbar-menu {
  flex: 1;
  border-bottom: none;
}

.navbar-menu .el-menu-item {
  height: 60px;
  line-height: 60px;
  border-bottom: none;
}

.navbar-menu .el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar-user {
  margin-left: auto;
}

.user-dropdown {
  display: flex;
  align-items: center;
  color: white;
  cursor: pointer;
  padding: 0 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-dropdown:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.points-tag {
  margin-left: 4px;
  font-size: 12px;
}

.user-dropdown .el-icon {
  margin-right: 4px;
}

.navbar-user .el-button {
  margin-left: 8px;
}

.shortcut-hint {
  font-size: 10px;
  opacity: 0.7;
  margin-left: 8px;
  padding: 2px 4px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  font-family: monospace;
}

.quick-switch-hint {
  margin-right: 20px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s;
}

.quick-switch-hint:hover {
  color: white;
}
</style>
