HokmPlay/src/app/page.tsx

"use client";

import { useEffect } from "react";
import { HomeScreen } from "@/components/HomeScreen";
import { GameScreen } from "@/components/screens/GameScreen";
import { ProfileScreen } from "@/components/screens/ProfileScreen";
import { FriendsScreen } from "@/components/screens/FriendsScreen";
import { OnlineLobbyScreen } from "@/components/screens/OnlineLobbyScreen";
import { RoomScreen } from "@/components/screens/RoomScreen";
import { MatchmakingScreen } from "@/components/screens/MatchmakingScreen";
import { LeaderboardScreen } from "@/components/screens/LeaderboardScreen";
import { ShopScreen } from "@/components/screens/ShopScreen";
import { ChatScreen } from "@/components/screens/ChatScreen";
import { AuthScreen } from "@/components/screens/AuthScreen";
import { DailyRewardModal } from "@/components/online/DailyRewardModal";
import { useSessionStore } from "@/lib/session-store";
import { useGameStore } from "@/lib/game-store";
import { useOnlineStore } from "@/lib/online-store";
import { screenFromHash, useUIStore, type Screen } from "@/lib/ui-store";

/** Transient screens can't be restored without their state — fall back to home. */
function resolveScreen(s: Screen): Screen {
  switch (s) {
    case "game":
      return useGameStore.getState().started ? s : "home";
    case "room":
      return useOnlineStore.getState().room ? s : "home";
    case "chat":
      return useOnlineStore.getState().activeChatFriend ? s : "home";
    case "matchmaking":
      return useOnlineStore.getState().matchmaking.phase !== "idle" ? s : "home";
    default:
      return s;
  }
}

export default function Page() {
  const screen = useUIStore((s) => s.screen);
  const init = useSessionStore((s) => s.init);
  const loading = useSessionStore((s) => s.loading);

  useEffect(() => {
    init();
    useUIStore.getState().initHistory();

    const onPop = (e: PopStateEvent) => {
      const raw = ((e.state?.screen as Screen) ?? screenFromHash());
      useUIStore.getState().syncFromPop(resolveScreen(raw));
    };
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, [init]);

  return (
    <>
      {renderScreen(screen)}
      <DailyRewardModal />
      {loading && null}
    </>
  );
}

function renderScreen(screen: string) {
  switch (screen) {
    case "game":
      return <GameScreen />;
    case "auth":
      return <AuthScreen />;
    case "profile":
      return <ProfileScreen />;
    case "friends":
      return <FriendsScreen />;
    case "online":
      return <OnlineLobbyScreen />;
    case "room":
      return <RoomScreen />;
    case "matchmaking":
      return <MatchmakingScreen />;
    case "leaderboard":
      return <LeaderboardScreen />;
    case "shop":
      return <ShopScreen />;
    case "chat":
      return <ChatScreen />;
    default:
      return <HomeScreen />;
  }
}