<template>
  <header class="fixed top-0 w-full z-50 glass-nav transition-all duration-300" id="main-header">
    <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
      <div class="cursor-pointer group" @click="goTo('/')">
        <span class="font-serif text-2xl italic tracking-wider text-white group-hover:text-art-accent transition-colors">年糕崽崽.Dev</span>
      </div>
      <nav class="hidden md:flex items-center gap-10">
        <button 
          @click="goTo('/')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'home' }"
          data-target="home"
        >
          首页
        </button>
        <button 
          @click="goTo('/blog')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'blog' }"
          data-target="blog"
        >
          思考
        </button>
        <button 
          @click="goTo('/columns')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'columns' }"
          data-target="columns"
        >
          专栏
        </button>
        <button 
          @click="goTo('/works')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'works' }"
          data-target="works"
        >
          作品
        </button>
        <button 
          @click="goTo('/snippets')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'snippets' }"
          data-target="snippets"
        >
          代码
        </button>
        <button 
          @click="goTo('/about')" 
          class="nav-item text-sm font-medium tracking-wide text-art-muted hover:text-white transition-colors link-underline"
          :class="{ 'text-white after:w-full': activeNav === 'about' }"
          data-target="about"
        >
          关于
        </button>
      </nav>
      <div class="hidden md:flex items-center gap-4">
        <a href="#" class="text-art-muted hover:text-white transition-colors"><i data-lucide="github" class="w-5 h-5"></i></a>
        <a href="/admin" target="_blank" class="text-art-muted hover:text-white transition-colors" title="后台管理">
          <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
        </a>
        <button @click="goTo('/services')" class="px-5 py-2 text-xs font-bold tracking-widest uppercase border border-white/20 hover:border-art-accent hover:text-art-accent transition-all rounded-full">
          合作
        </button>
      </div>
      <button class="md:hidden text-white" @click="toggleMobileMenu">
        <i data-lucide="menu" class="w-6 h-6"></i>
      </button>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, onMounted, onUpdated, watch, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const activeNav = ref('home')

const toggleMobileMenu = () => {
  const menu = document.getElementById('mobile-menu')
  if (menu) {
    if (menu.classList.contains('menu-closed')) {
      menu.classList.remove('menu-closed')
      menu.classList.add('menu-open')
      document.body.style.overflow = 'hidden'
    } else {
      menu.classList.remove('menu-open')
      menu.classList.add('menu-closed')
      document.body.style.overflow = ''
    }
  }
}

// navigate function is used in template via @click handlers
// navigate function removed - not used in template

const updateActiveNav = () => {
  const path = route.path
  if (path === '/') activeNav.value = 'home'
  else if (path === '/blog' || path.startsWith('/blog/')) activeNav.value = 'blog'
  else if (path === '/columns' || path.startsWith('/columns/')) activeNav.value = 'columns'
  else if (path === '/categories' || path.startsWith('/categories/')) activeNav.value = 'categories'
  else if (path === '/works' || path.startsWith('/works/')) activeNav.value = 'works'
  else if (path === '/snippets') activeNav.value = 'snippets'
  else if (path === '/services') activeNav.value = 'services'
  else if (path === '/about') activeNav.value = 'about'
}

const refreshIcons = () => {
  if ((window as any).lucide) {
    (window as any).lucide.createIcons()
  }
}

onMounted(() => {
  updateActiveNav()
  refreshIcons()
})

onUpdated(() => {
  refreshIcons()
})

watch(
  () => route.path,
  () => {
    updateActiveNav()
    nextTick(refreshIcons)
  }
)

const goTo = (target: string) => {
  router.push(target)
}
</script>

<style scoped>
/* 组件特定样式可以在这里添加 */
</style>