<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 v-if="visibleMenus.includes('home')" @click="navigate('/')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">首页</a>
    <a v-if="visibleMenus.includes('blog')" @click="navigate('/blog')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">思考</a>
    <a v-if="visibleMenus.includes('columns')" @click="navigate('/columns')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">专栏</a>
    <a v-if="visibleMenus.includes('works')" @click="navigate('/works')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">作品</a>
    <a v-if="visibleMenus.includes('videos')" @click="navigate('/videos')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">视频</a>
    <a v-if="visibleMenus.includes('snippets')" @click="navigate('/snippets')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">代码</a>
    <a v-if="visibleMenus.includes('about')" @click="navigate('/about')" class="font-serif text-3xl italic text-white hover:text-art-accent cursor-pointer">关于</a>
    <a v-if="visibleMenus.includes('services')" @click="navigate('/services')" 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, ref, watch } from 'vue'
import { usePublicSettings } from '../composables/usePublicSettings'

const router = useRouter()
const { cache, getStringSetting } = usePublicSettings()
const visibleMenus = ref<string[]>(['home', 'blog', 'columns', 'works', 'videos', 'snippets', 'about', 'services'])

const applyMenuSettings = () => {
  const menusRaw = getStringSetting('visible_menus')
  if (!menusRaw) return
  try {
    const parsed = JSON.parse(menusRaw)
    if (Array.isArray(parsed)) {
      visibleMenus.value = parsed
    }
  } catch {
    visibleMenus.value = menusRaw.split(',').map((m: string) => m.trim()).filter((m: string) => m)
  }
}

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()
  applyMenuSettings()
})

watch(cache, () => {
  applyMenuSettings()
})
onUpdated(refreshIcons)
</script>