"use client";

import type { ReactNode } from "react";

import { PlayerDesktopHeader } from "@/components/layout/player-desktop-header";
import { PlayerBottomNav } from "@/components/layout/player-bottom-nav";
import { PlayerSidebar } from "@/components/layout/player-sidebar";
import { NetworkStatusBanner } from "@/components/network-status-banner";
import { PullToRefreshIndicator } from "@/components/pull-to-refresh-indicator";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";
import { usePullToRefresh } from "@/hooks/use-pull-to-refresh";
import { playerMainInset } from "@/lib/player-spacing";

type PlayerAppShellProps = {
  children: ReactNode;
};

/**
 * 玩家端外壳：
 * - 移动：主体 + 底部 Tab（H5）
 * - 桌面：侧栏 + 顶栏 + 宽主内容区（UI 设计稿）
 */
export function PlayerAppShell({ children }: PlayerAppShellProps): ReactNode {
  const isMobile = useIsMobile();
  const { pullDistance, isRefreshing } = usePullToRefresh({
    onRefresh: () => {
      window.dispatchEvent(new CustomEvent("lottery-hall-refresh"));
      window.dispatchEvent(new CustomEvent("lottery-wallet-refresh"));
    },
    threshold: 70,
    enabled: isMobile,
  });

  return (
    <div className="flex h-full min-h-0 flex-1 overflow-hidden bg-white text-foreground lg:flex-row">
      <PlayerSidebar />

      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
        {isMobile ? (
          <PullToRefreshIndicator
            pullDistance={pullDistance}
            isRefreshing={isRefreshing}
            threshold={70}
          />
        ) : null}
        <NetworkStatusBanner />
        <PlayerDesktopHeader />

        <main
          id="player-scroll-container"
          className={cn(
            "flex min-h-0 w-full flex-1 flex-col overflow-y-auto overscroll-y-contain bg-[#f8fafc] lg:bg-[#f0f2f6]",
            playerMainInset,
          )}
        >
          {children}
        </main>

        <div className="relative z-50 w-full shrink-0 lg:hidden">
          <PlayerBottomNav />
        </div>
      </div>
    </div>
  );
}