"use client";

import type { ReactNode } from "react";

import { NetworkStatusBanner } from "@/components/network-status-banner";
import { PlayerBottomNav } from "@/components/layout/player-bottom-nav";

type PlayerAppShellProps = {
  children: ReactNode;
};

/**
 * 玩家端外壳：顶栏（品牌 + 会话）+ 主体 + **底部 Tab 导航**（H5）。
 * 底部栏留白：{@link PlayerBottomNav} 对应 `padding-bottom`.
 *
 * 注意：全局离线横幅和服务器错误覆盖层已在 ErrorProvider 中处理
 * 这里的 NetworkStatusBanner 仅用于 WebSocket 状态显示
 */
export function PlayerAppShell({ children }: PlayerAppShellProps): ReactNode {
  return (
    <div className="min-h-dvh bg-white text-foreground">
      <NetworkStatusBanner />
      <main className="mx-auto flex w-full max-w-lg flex-col pb-[calc(4rem+env(safe-area-inset-bottom,0px)+1.5rem)]">
        {children}
      </main>
      <PlayerBottomNav />
    </div>
  );
}