import DefaultTheme from 'vitepress/theme'
import type { Theme } from 'vitepress'
import { h, watch, nextTick } from 'vue'
import { useData, useRoute } from 'vitepress'

import ProjectList from './components/ProjectList.vue'
import HomePage from './components/HomePage.vue'
import CapabilityTabs from './components/CapabilityTabs.vue'
import FeatureGrid from './components/FeatureGrid.vue'
import ScreenshotPreview from './components/ScreenshotPreview.vue'

import { setupNavAnchorHighlight, applyNavAnchorHighlight } from './nav-anchor'

import './styles/portal.css'

/**
 * 首页用 layout: page 承载自定义整页排版，
 * 这里给它套一层 .portal-page，把默认窄栏与 padding 去掉。
 * 同时接管导航栏锚点项的高亮（VitePress 默认只认 path，不认 hash）。
 */
const PortalLayout = () => {
  const { frontmatter } = useData()
  const route = useRoute()

  const isPortal = frontmatter.value.layout === 'page'

  /**
   * Layout 是函数式组件，onMounted 在这里不生效（Vue 会告警），
   * 因此直接在渲染期间调度：等 DOM 落地后跑一次，再靠 MutationObserver 兜住后续变化。
   */
  if (typeof window !== 'undefined') {
    nextTick(() => setupNavAnchorHighlight())
  }

  // SPA 路由切换不触发 hashchange，这里补一次
  watch(
    () => [route.path, route.hash],
    () => nextTick(() => applyNavAnchorHighlight())
  )

  return h('div', { class: isPortal ? 'portal-page' : '' }, h(DefaultTheme.Layout))
}

export default {
  extends: DefaultTheme,
  Layout: PortalLayout,
  enhanceApp({ app }) {
    app.component('ProjectList', ProjectList)
    app.component('HomePage', HomePage)
    app.component('CapabilityTabs', CapabilityTabs)
    app.component('FeatureGrid', FeatureGrid)
    app.component('ScreenshotPreview', ScreenshotPreview)
  },
} satisfies Theme