<script setup lang="ts">
import { PhArrowRight as ArrowRight, PhList as List, PhX as X } from '@phosphor-icons/vue'

const open = ref(false)
const toggle = ref<HTMLButtonElement>()
const navigation = ref<HTMLElement>()
const props = withDefaults(defineProps<{ logo?: string; brandName?: string; englishName?: string }>(), {
  brandName: '慧遇书院',
  englishName: 'HUIYU ACADEMY',
})
const route = useRoute()
const links = computed(() => [
  { label: '首页', englishLabel: 'HOME', href: '/#home' },
  { label: `关于${props.brandName}`, englishLabel: `ABOUT ${props.englishName}`, href: '/#about' },
  { label: '卢慧老师', englishLabel: 'LU HUI', href: '/luhui' },
  { label: '课程与产品', englishLabel: 'COURSES & PRODUCTS', href: '/products' },
  { label: '官方信息', englishLabel: 'OFFICIAL INFO', href: '/#official' },
  { label: '品牌动态', englishLabel: 'BRAND NEWS', href: '/news' },
  { label: '联系我们', englishLabel: 'CONTACT US', href: '/#contact' },
])

function closeMenu(returnFocus = false) {
  open.value = false
  if (returnFocus) nextTick(() => toggle.value?.focus())
}

function isActive(href: string) {
  if (href.startsWith('/#')) return route.path === '/' && (href === '/#home' || route.hash === href.slice(1))
  return route.path === href || route.path.startsWith(`${href}/`)
}

watch(open, (value) => {
  if (!import.meta.client) return
  document.body.classList.toggle('nav-open', value)
  if (value) nextTick(() => navigation.value?.querySelector<HTMLAnchorElement>('a')?.focus())
})

onBeforeUnmount(() => {
  if (import.meta.client) document.body.classList.remove('nav-open')
})
</script>

<template>
  <header class="site-header">
    <BrandLogo :src="logo" :name="brandName" :english-name="englishName" />
    <button ref="toggle" class="menu-toggle" type="button" :aria-expanded="open" aria-controls="site-navigation" :aria-label="open ? '关闭导航' : '打开导航'" @click="open = !open" @keydown.esc="closeMenu(true)">
      <X v-if="open" :size="24" />
      <List v-else :size="24" />
    </button>
    <nav id="site-navigation" ref="navigation" :class="['main-nav', { open }]" aria-label="主导航" @keydown.esc="closeMenu(true)">
      <a v-for="link in links" :key="link.href" :href="link.href" :aria-current="isActive(link.href) ? 'page' : undefined" @click="closeMenu()">
        <span class="nav-label">{{ link.label }}</span>
        <span class="nav-english" lang="en">{{ link.englishLabel }}</span>
      </a>
    </nav>
    <a class="header-cta" href="/#official">
      官方渠道
      <ArrowRight :size="18" weight="light" />
    </a>
  </header>
</template>
