<script lang="ts" setup>
import DefaultLayout from './default/components/DefaultLayout.vue'
import { usePagePresentationMotion } from '@/composables/usePagePresentationMotion'

const route = useRoute()
const pagePresentationMotion = usePagePresentationMotion()

// keep-alive 缓存按页面身份命中，避免 query 变化导致同一页面反复新建实例。
const routeCacheKey = computed(() => {
  if (route.meta.keepAliveKey) return route.meta.keepAliveKey.toString()

  // 部分列表页的 query 会参与接口参数，缓存 key 需要保留完整路由避免串用旧数据。
  if (route.meta.keepAliveByFullPath) return route.fullPath

  return route.path
})

// 页面过渡按实际页面身份触发；keep-alive 页面避免 query 变化时反复入场。
const routeTransitionKey = computed(() => (route.meta.keepAlive ? routeCacheKey.value : route.fullPath))
const isPageEntering = ref(false)
const pageRouteRef = ref<HTMLElement | null>(null)
let pageMotionTimer: number | null = null
let pageMotionFrame: number | null = null

// 使用稳定容器触发轻量入场动画，避免重建 keep-alive 导致页面缓存失效。
function playPageEnterMotion() {
  if (pageMotionTimer) {
    window.clearTimeout(pageMotionTimer)
    pageMotionTimer = null
  }

  if (pageMotionFrame) {
    window.cancelAnimationFrame(pageMotionFrame)
    pageMotionFrame = null
  }

  isPageEntering.value = false
  if (pagePresentationMotion.start(routeTransitionKey.value, pageRouteRef.value)) return

  pageMotionFrame = window.requestAnimationFrame(() => {
    pageMotionFrame = null
    isPageEntering.value = true
    pageMotionTimer = window.setTimeout(() => {
      isPageEntering.value = false
      pageMotionTimer = null
    }, 220)
  })
}

watch(routeTransitionKey, playPageEnterMotion, { flush: 'post' })

onMounted(playPageEnterMotion)

onBeforeUnmount(() => {
  if (pageMotionTimer) window.clearTimeout(pageMotionTimer)
  if (pageMotionFrame) window.cancelAnimationFrame(pageMotionFrame)
  pagePresentationMotion.cancel()
})
</script>

<template>
  <DefaultLayout>
    <router-view v-slot="{ Component }">
      <div ref="pageRouteRef" class="mp-page-route" :class="{ 'mp-page-route--entering': isPageEntering }">
        <keep-alive :max="24">
          <component :is="Component" v-if="route.meta.keepAlive" :key="routeCacheKey" />
        </keep-alive>
        <component :is="Component" v-if="!route.meta.keepAlive" :key="route.fullPath" />
      </div>
    </router-view>
  </DefaultLayout>
</template>

<style lang="scss">
// As we are using `layouts` plugin we need its styles to be imported
@use '@layouts/styles/default-layout';
</style>
