'use client'

import { motion, AnimatePresence } from 'framer-motion'
import { usePathname } from 'next/navigation'

const defaultProps = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 },
  transition: { ease: 'easeInOut', duration: 0.5 },
}

export function PageTransitionEffect({
  children,
}: { children: React.ReactNode }) {
  const pathname = usePathname()

  return (
    <AnimatePresence mode='popLayout'>
      <motion.main {...defaultProps} key={pathname}>
        {children}
      </motion.main>
    </AnimatePresence>
  )
}

import { LayoutRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime'
import { useContext, useRef } from 'react'

function FrozenRouter(props: { children: React.ReactNode }) {
  const context = useContext(LayoutRouterContext ?? {})
  const frozen = useRef(context).current

  if (!frozen) {
    return <>{props.children}</>
  }

  return (
    <LayoutRouterContext.Provider value={frozen}>
      {props.children}
    </LayoutRouterContext.Provider>
  )
}

// usePageTransitionEffect.ts
import { create } from 'zustand'

export const usePageTransitionEffect = create(() => ({
  exited: true,
}))

// PageTransitionEffect.tsx
'use client'

import { usePageTransitionEffect } from './usePageTransitionEffect'

import { motion, AnimatePresence } from 'framer-motion'
import { usePathname } from 'next/navigation'
import { LayoutRouterContext } from 'next/dist/shared/lib/app-router-context.shared-runtime'
import { useContext, useEffect, useRef } from 'react'

import type { MotionProps } from 'framer-motion'

function FrozenRouter(props: { children: React.ReactNode }) {
  const context = useContext(LayoutRouterContext ?? {})
  const frozen = useRef(context).current

  if (!frozen) {
    return <>{props.children}</>
  }

  return (
    <LayoutRouterContext.Provider value={frozen}>
      {props.children}
    </LayoutRouterContext.Provider>
  )
}

export type PageTransitionEffectConfig = Omit<MotionProps, 'children' | 'key'>
export type PageTransitionEffectProps = PageTransitionEffectConfig & {
  children: React.ReactNode
}

const defaultProps = {
  initial: { opacity: 0 },
  animate: { opacity: 1 },
  exit: { opacity: 0 },
  transition: { ease: 'easeInOut', duration: 0.5 },
} satisfies PageTransitionEffectConfig

const onEnter = () => {
  usePageTransitionEffect.setState({
    exited: false,
  })
}

const onExitComplete = () => {
  usePageTransitionEffect.setState({
    exited: true,
  })
}

export function PageTransitionEffect({
  children,
  ...props
}: PageTransitionEffectProps) {
  const pathname = usePathname()

  useEffect(() => {
    onEnter()
  }, [pathname])

  return (
    <AnimatePresence mode='popLayout' onExitComplete={onExitComplete}>
      <motion.main {...defaultProps} {...props} key={pathname}>
        <FrozenRouter>{children}</FrozenRouter>
      </motion.main>
    </AnimatePresence>
  )
}

// layout.tsx

export default function CustomLayout({ children }) {
  return <>
    <YourHeader />
    {/* 此时，页面切换时，只有 content 有动画，header 和 footer 没有动画 */}
    <PageTransitionEffect style={{ width: '100%', maxWidth: 1024, margin: '0 auto' }}>
      {children}
    </PageTransitionEffect>
    <YourFooter />
  </>
}

// children component

export function ChildrenComponent() {
  const { exited } = usePageTransitionEffect()

  // ...
}

const defaultProps = {
  initial: { opacity: 0, transition: { duration: 0.5 } },
  animate: { opacity: 1, transition: { duration: 0.5 } },
  exit: { opacity: 0, transition: { duration: 0.5 } },
} satisfies LimitedAnimationOptions

const hardReloadAddonProps: LimitedAnimationOptions = {
  initial: { transition: { duration: 0 } },
  animate: { transition: { duration: 0 } },
}

function PageTransitionEffect() {
  const hasHydrated = useHasHydrated()
  const animProps = merge({}, defaultProps, {
    initial,
    animate,
    exit,
  })
  // 使用 useRef 来避免每次渲染都重新计算 duration
  const animAnimateDuration = useRef(
    animProps.animate?.transition?.duration ??
      defaultProps.animate.transition.duration
  ).current
  const [appliedAnimProps, setAppliedAnimProps] = useState(
    merge({}, animProps, hardReloadAddonProps)
  )
  // 在 animAnimateDuration 改变时，
  // 动画时间结束后，把 entry transition duration 的限制移除
  useListen(animAnimateDuration, () => {
    setTimeout(() => {
      setAppliedAnimProps(animProps)
    }, animAnimateDuration * 1000)
  })

  if (!hasHydrated) {
    // 初始加载时，不要动画，避免 opacity: 0 初始样式
    return <main {...divProps}>{children}</main>
  }

  return (
    <AnimatePresence ...>
      <motion.main {...appliedAnimProps} ...>
        <FrozenRouter>{children}</FrozenRouter>
      </motion.main>
    </AnimatePresence>
  )
}