import { useEffect, useState } from 'react'
import { Outlet, useLocation } from 'react-router-dom'
import BottomNav from '../components/BottomNav.jsx'

// 移动端应用外壳
//   - 顶部安全区: 用 --safe-top 撑开 (由 main.jsx 的 calibrateSafeTop 实测校准)
//   - 中间 <main>: flex:1 可滚动主区
//   - 底部 TabBar: antd-mobile TabBar 自带底部安全区
//
// 注意: 这里不再用 antd-mobile 的 <SafeArea position="top" />.
// 它只是一个空 div, 高度完全依赖 env(safe-area-inset-top); 而 Android WebView
// (Tauri) 下该变量常为 0, 会导致内容顶到状态栏底下 —— V0.2 把 45px 的 NavBar
// 换成 23px 的 PageHeader 后这个问题就暴露了. 改用可控高度的 div + JS 校准.
export default function MobileShell() {
  const location = useLocation()
  // pathname 变化时给页面容器加动画 class (仅播放入场动画, 不重挂载子树,
  // 避免破坏 MacroPage 等页内子路由的挂载状态与滚动位置)
  const [animating, setAnimating] = useState(false)
  useEffect(() => {
    setAnimating(true)
    const t = setTimeout(() => setAnimating(false), 320)
    return () => clearTimeout(t)
  }, [location.pathname])

  return (
    <div className="app-root">
      <div className="app-safe-top" aria-hidden="true" />
      <main className="app-main">
        <div className={'page-transition' + (animating ? ' active' : '')}>
          <Outlet />
        </div>
      </main>
      <BottomNav />
    </div>
  )
}