/**
 * H5 移动端布局
 * - 底部 Tab 导航（首页/设备/我的）
 * - 使用 Outlet 渲染子页面
 */
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useH5AuthStore } from './auth';
import { BottomNav } from './components';

export default function H5Layout() {
  const { isAuthenticated } = useH5AuthStore();
  const location = useLocation();

  // 未认证时重定向到登录页，保留目标地址
  if (!isAuthenticated) {
    return <Navigate to={`/pms/login?redirect=${encodeURIComponent(location.pathname + location.search)}`} replace />;
  }

  return (
    <div className="h5-layout mx-auto max-w-md">
      <div className="min-h-screen pb-14">
        <Outlet />
      </div>
      <BottomNav />
    </div>
  );
}

/** 不带底部导航的 H5 布局（登录页、通道详情等全屏页面） */
export function H5PlainLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="h5-layout mx-auto max-w-md">
      <div className="min-h-screen">{children}</div>
    </div>
  );
}
