<template>
  <header class="navbar">
    <div class="navbar-container">
      <!-- Logo -->
      <div class="navbar-brand">
        <router-link to="/" class="brand-link">
          <img src="/images/backgrounds/logo.svg?v=2" alt="Logo" class="brand-logo" />
        </router-link>
      </div>

      <!-- 导航菜单 -->
      <a-menu
        mode="horizontal"
        class="navbar-menu"
        :selected-keys="[]"
        @click="handleMenuClick"
      >
        <a-menu-item key="/welcome">
          <span>{{ $t('common.welcome') }}</span>
        </a-menu-item>

        <a-menu-item key="/admin/dashboard">
          <span>{{ $t('common.home') }}</span>
        </a-menu-item>

        <a-menu-item v-if="userStore.isAuthenticated" key="/profile">
          <span>{{ $t('common.profile') }}</span>
        </a-menu-item>

        <a-menu-item v-if="userStore.isAuthenticated" key="/admin/orders">
          <span>{{ $t('common.orders') }}</span>
        </a-menu-item>

        <a-menu-item v-if="userStore.isAuthenticated" key="/payments">
          <span>{{ $t('common.payments') }}</span>
        </a-menu-item>

        <a-menu-item v-if="userStore.isAdmin" key="/admin/dashboard">
          <span>{{ $t('common.adminPanel') }}</span>
        </a-menu-item>
      </a-menu>

      <!-- 用户菜单 -->
      <div class="navbar-user">
        <template v-if="userStore.isAuthenticated">
          <LanguageSwitcher />
          <a-dropdown>
            <span class="user-dropdown">
              <span>{{ userStore.username }}</span>
              <a-tag v-if="userStore.availablePoints > 0" color="success" class="points-tag">
                {{ userStore.availablePoints }}{{ $t('common.points') }}
              </a-tag>
            </span>
            <template #overlay>
              <a-menu @click="handleUserMenuClick">
                <a-menu-item key="profile">
                  {{ $t('common.userProfile') }}
                </a-menu-item>
                <a-menu-item v-if="userStore.isAdmin" key="admin">
                  {{ $t('common.adminPanel') }}
                </a-menu-item>
                <a-menu-item key="settings">
                  {{ $t('common.settings') }}
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="logout">
                  {{ $t('common.logout') }}
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </template>

        <template v-else>
          <LanguageSwitcher />
          <a-button type="primary" ghost @click="$router.push('/login')">
            {{ $t('common.login') }}
          </a-button>
          <a-button ghost @click="$router.push('/register')">
            {{ $t('common.register') }}
          </a-button>
        </template>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { message, Modal } from 'ant-design-vue'
import LanguageSwitcher from './LanguageSwitcher.vue'

const { t } = useI18n()
const userStore = useUserStore()
const router = useRouter()

// 导航菜单点击
const handleMenuClick = ({ key }) => {
  router.replace(key)
}

// 用户下拉菜单点击
const handleUserMenuClick = async ({ key }) => {
  switch (key) {
    case 'profile':
      message.info(t('common.profileDevMsg'))
      break
    case 'admin':
      if (userStore.isAdmin) {
        router.push('/admin/dashboard')
      } else {
        message.warning(t('common.noPermissionMsg'))
      }
      break
    case 'settings':
      message.info(t('common.settingsDevMsg'))
      break
    case 'logout':
      Modal.confirm({
        title: t('common.tip'),
        content: t('common.logoutConfirm'),
        okText: t('common.confirm'),
        cancelText: t('common.cancel'),
        async onOk() {
          await userStore.logoutUser()
          message.success(t('common.logoutSuccess'))
          router.push('/')
        }
      })
      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-logo {
  height: 40px;
  width: auto;
}

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

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

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

.navbar-menu :deep(.ant-menu-item) {
  height: 60px;
  line-height: 60px;
  border-bottom: none;
}

.navbar-menu :deep(.ant-menu-item:hover) {
  background-color: var(--bg-hover) !important;
}

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

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

.user-dropdown:hover {
  background-color: var(--bg-hover);
}

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

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

.navbar-user .ant-btn {
  margin-left: 8px;
}

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

.quick-switch-hint {
  margin-right: 20px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.3s;
}

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