<template>
  <div id="mobile-menu" class="fixed inset-0 z-40 bg-art-bg/95 backdrop-blur-xl flex flex-col items-center justify-center space-y-8 transition-all duration-300 menu-closed md:hidden">
    <button @click="toggleMobileMenu" class="absolute top-6 right-6 text-white"><i data-lucide="x" class="w-8 h-8"></i></button>
    <a @click="navigate('/')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">首页</a>
    <a @click="navigate('/blog')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">思考</a>
    <a @click="navigate('/works')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">作品</a>
    <a @click="navigate('/snippets')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">代码</a>
    <a @click="navigate('/about')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">关于</a>
    <a @click="openAdmin" class="font-mono text-sm text-art-muted mt-8">管理入口</a>
  </div>
</template>

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

const router = useRouter()

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

const navigate = (target: string) => {
  router.push(target)
  toggleMobileMenu()
}

const openAdmin = () => {
  window.open('admin.html', '_blank')
}

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

onMounted(refreshIcons)
onUpdated(refreshIcons)
</script>