<template>
  <header class="app-header">
    <div class="header-container">
      <NuxtLink to="/" class="header-logo" aria-label="呼籁旅行首页">
        <img v-if="images?.logo?.main" :src="images.logo.main" alt="呼籁旅行" class="logo-img" width="40" height="40" />
        <div class="logo-text-group">
          <span class="logo-text">呼籁旅行</span>
          <span class="logo-sub">HULAI TRAVEL</span>
        </div>
      </NuxtLink>

      <nav class="header-nav" aria-label="主导航">
        <ul class="nav-list">
          <li
            v-for="item in navItems"
            :key="item.to"
            class="nav-item"
            :class="{ 'has-dropdown': item.children }"
            @mouseenter="item.children && (openDropdown = item.to)"
            @mouseleave="item.children && (openDropdown = null)"
          >
            <NuxtLink :to="item.to" class="nav-link" :class="{ active: isActive(item.to) }">
              {{ item.text }}
              <span v-if="item.children" class="nav-arrow">▾</span>
            </NuxtLink>
            <!-- 下拉菜单：真实 <a> 链接，SEO 可抓取 -->
            <ul v-if="item.children" class="nav-dropdown" :class="{ show: openDropdown === item.to }">
              <li v-for="child in item.children" :key="child.to" class="dropdown-item">
                <NuxtLink :to="child.to" class="dropdown-link" @click="openDropdown = null">
                  <span class="dropdown-text">{{ child.text }}</span>
                  <span v-if="child.season" class="dropdown-season">{{ child.season }}</span>
                </NuxtLink>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

      <button
        class="mobile-toggle"
        :aria-expanded="mobileOpen"
        aria-controls="mobile-nav"
        aria-label="打开导航菜单"
        @click="mobileOpen = !mobileOpen"
      >
        <span class="toggle-bar" :class="{ open: mobileOpen }"></span>
      </button>
    </div>

    <LayoutMobileNav :is-open="mobileOpen" :items="navItems" @close="mobileOpen = false" />
  </header>
</template>

<script setup>
import { ref } from 'vue'

const { data: navData } = await usePublicApi('navigation')
const { data: images } = await usePublicApi('images')

const navItems = computed(() => navData.value?.header || [])
const mobileOpen = ref(false)
const openDropdown = ref(null)
const route = useRoute()

function isActive(path) {
  if (path === '/') return route.path === '/'
  return route.path.startsWith(path)
}

watch(() => route.path, () => {
  mobileOpen.value = false
})
</script>

<style lang="less" scoped>
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: box-shadow @transition-base;

  &:hover {
    box-shadow: @shadow-xs;
  }
}

.header-container {
  .container();
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;

  .respond-lg({
    height: 72px;
  });
}

.header-logo {
  display: flex;
  align-items: center;
  gap: @space-sm;
  text-decoration: none;
  line-height: 1.2;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;

  .respond-lg({
    width: 44px;
    height: 44px;
  });
}

.logo-text-group {
  display: flex;
  flex-direction: column;
}

.logo-text {
  font-size: @font-size-lg;
  font-weight: @font-weight-bold;
  color: @color-primary;

  .respond-lg({
    font-size: @font-size-xl;
  });
}

.logo-sub {
  font-size: @font-size-xs;
  color: @color-text-muted;
  letter-spacing: 2px;
}

.header-nav {
  display: none;

  .respond-lg({
    display: block;
  });
}

.nav-list {
  display: flex;
  gap: @space-xl;
}

.nav-link {
  font-size: @font-size-base;
  color: @color-text-secondary;
  text-decoration: none;
  padding: @space-sm 0;
  border-bottom: 2px solid transparent;
  transition: color @transition-fast, border-color @transition-fast;

  &:hover,
  &.active {
    color: @color-primary;
    border-bottom-color: @color-primary;
  }
}

// 下拉菜单
.has-dropdown {
  position: relative;
}

.nav-arrow {
  font-size: 13px;
  margin-left: 4px;
  opacity: 0.85;
  color: @color-primary;
  transition: transform @transition-fast;

  .has-dropdown:hover & {
    transform: rotate(180deg);
  }
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: @space-sm 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity @transition-fast, visibility @transition-fast;
  z-index: 10;

  // 防止鼠标移到下拉菜单过程中菜单消失
  &::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }

  &.show {
    opacity: 1;
    visibility: visible;
  }
}

.dropdown-item {
  list-style: none;
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @space-sm @space-lg;
  text-decoration: none;
  color: @color-text-secondary;
  font-size: @font-size-sm;
  white-space: nowrap;
  transition: background @transition-fast, color @transition-fast;

  &:hover {
    background: @color-primary-bg;
    color: @color-primary;
  }
}

.dropdown-text {
  flex: 1;
}

.dropdown-season {
  font-size: @font-size-xs;
  color: @color-text-muted;
  background: @color-bg-gray;
  padding: 2px 6px;
  border-radius: @border-radius-sm;
  margin-left: @space-sm;
}

// 下拉菜单
.has-dropdown {
  position: relative;
}

.nav-arrow {
  font-size: 13px;
  margin-left: 4px;
  opacity: 0.85;
  color: @color-primary;
  transition: transform @transition-fast;

  .has-dropdown:hover & {
    transform: rotate(180deg);
  }
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: @space-sm 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity @transition-fast, visibility @transition-fast;
  z-index: 10;

  // 防止鼠标移到下拉菜单过程中菜单消失
  &::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }

  &.show {
    opacity: 1;
    visibility: visible;
  }
}

.dropdown-item {
  list-style: none;
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @space-sm @space-lg;
  text-decoration: none;
  color: @color-text-secondary;
  font-size: @font-size-sm;
  white-space: nowrap;
  transition: background @transition-fast, color @transition-fast;

  &:hover {
    background: @color-primary-bg;
    color: @color-primary;
  }
}

.dropdown-text {
  flex: 1;
}

.dropdown-season {
  font-size: @font-size-xs;
  color: @color-text-muted;
  background: @color-bg-gray;
  padding: 2px 6px;
  border-radius: @border-radius-sm;
  margin-left: @space-sm;
}

// 下拉菜单
.has-dropdown {
  position: relative;
}

.nav-arrow {
  font-size: 13px;
  margin-left: 4px;
  opacity: 0.85;
  color: @color-primary;
  transition: transform @transition-fast;

  .has-dropdown:hover & {
    transform: rotate(180deg);
  }
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: @space-sm 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity @transition-fast, visibility @transition-fast;
  z-index: 10;

  // 防止鼠标移到下拉菜单过程中菜单消失
  &::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }

  &.show {
    opacity: 1;
    visibility: visible;
  }
}

.dropdown-item {
  list-style: none;
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @space-sm @space-lg;
  text-decoration: none;
  color: @color-text-secondary;
  font-size: @font-size-sm;
  white-space: nowrap;
  transition: background @transition-fast, color @transition-fast;

  &:hover {
    background: @color-primary-bg;
    color: @color-primary;
  }
}

.dropdown-text {
  flex: 1;
}

.dropdown-season {
  font-size: @font-size-xs;
  color: @color-text-muted;
  background: @color-bg-gray;
  padding: 2px 6px;
  border-radius: @border-radius-sm;
  margin-left: @space-sm;
}

// 下拉菜单
.has-dropdown {
  position: relative;
}

.nav-arrow {
  font-size: 13px;
  margin-left: 4px;
  opacity: 0.85;
  color: @color-primary;
  transition: transform @transition-fast;

  .has-dropdown:hover & {
    transform: rotate(180deg);
  }
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  background: @color-bg-white;
  border-radius: @border-radius-md;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  padding: @space-sm 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity @transition-fast, visibility @transition-fast;
  z-index: 10;

  // 防止鼠标移到下拉菜单过程中菜单消失
  &::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
  }

  &.show {
    opacity: 1;
    visibility: visible;
  }
}

.dropdown-item {
  list-style: none;
}

.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: @space-sm @space-lg;
  text-decoration: none;
  color: @color-text-secondary;
  font-size: @font-size-sm;
  white-space: nowrap;
  transition: background @transition-fast, color @transition-fast;

  &:hover {
    background: @color-primary-bg;
    color: @color-primary;
  }
}

.dropdown-text {
  flex: 1;
}

.dropdown-season {
  font-size: @font-size-xs;
  color: @color-text-muted;
  background: @color-bg-gray;
  padding: 2px 6px;
  border-radius: @border-radius-sm;
  margin-left: @space-sm;
}

.mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;

  .respond-lg({
    display: none;
  });
}

.toggle-bar {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: @color-text-primary;
  transition: background @transition-fast;

  &::before,
  &::after {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: @color-text-primary;
    transition: transform @transition-base;
  }

  &::before {
    top: -7px;
  }

  &::after {
    top: 7px;
  }

  &.open {
    background: transparent;

    &::before {
      top: 0;
      transform: rotate(45deg);
    }

    &::after {
      top: 0;
      transform: rotate(-45deg);
    }
  }
}
</style>
