HokmPlay/src/components/screens/GameScreen.tsx

"use client";

import { useEffect, useRef, useState } from "react";
import { GameTable } from "@/components/GameTable";
import { PostMatchRewardsModal } from "@/components/online/PostMatchRewardsModal";
import { useGameStore } from "@/lib/game-store";
import { useSessionStore } from "@/lib/session-store";
import { useUIStore } from "@/lib/ui-store";
import { getService } from "@/lib/online/service";
import { pushNotification } from "@/lib/notification-store";
import { MatchSummary, RewardResult } from "@/lib/online/types";

export function GameScreen() {
  const game = useGameStore((s) => s.game);
  const mode = useGameStore((s) => s.mode);
  const live = useGameStore((s) => s.live);
  const serverReward = useGameStore((s) => s.serverReward);
  const tally = useGameStore((s) => s.tally);
  const meta = useGameStore((s) => s.matchMeta);
  const reset = useGameStore((s) => s.reset);
  const returnTo = useUIStore((s) => s.returnTo);
  const go = useUIStore((s) => s.go);
  const refreshProfile = useSessionStore((s) => s.refreshProfile);

  const [reward, setReward] = useState<RewardResult | null>(null);
  const submitted = useRef(false);

  // Leaving the table (back button, browser/hardware back) keeps the match alive
  // & resumable — pause is handled by the unmount effect below. A finished match
  // is torn down instead.
  const exit = () => {
    if (useGameStore.getState().game.phase === "match-over") reset();
    go(returnTo);
  };

  // Match truly finished (reward dismissed): tear the match down.
  const finish = () => {
    reset();
    go(returnTo);
  };

  // Any way the table unmounts (exit button, hardware/browser back), keep an
  // in-progress match alive and resumable instead of letting it run unattended.
  useEffect(() => {
    return () => {
      const gs = useGameStore.getState();
      if (gs.started && gs.game.phase !== "match-over") gs.minimize();
    };
  }, []);

  const notifyAchievements = (r: RewardResult) => {
    for (const a of r.newAchievements)
      pushNotification({
        kind: "achievement",
        titleFa: "دستاورد جدید",
        titleEn: "New achievement",
        bodyFa: a.nameFa,
        bodyEn: a.nameEn,
        icon: a.icon,
      });
  };

  // Client-run games (private rooms / casual): submit the result to the server.
  useEffect(() => {
    if (!live && mode === "online" && game.phase === "match-over" && !submitted.current) {
      submitted.current = true;
      const summary: MatchSummary = {
        ranked: meta.ranked,
        stake: meta.stake,
        won: game.matchWinner === 0,
        kotFor: tally.kotFor,
        kotAgainst: tally.kotAgainst,
        tricksWon: tally.tricksTeam0,
        rounds: game.matchScore[0] + game.matchScore[1],
        trump: game.trump,
        // shutout = you won and the opponent never scored a round (e.g. 7–0)
        shutout: game.matchWinner === 0 && game.matchScore[1] === 0,
      };
      getService()
        .submitMatchResult(summary)
        .then((r) => {
          setReward(r);
          refreshProfile();
          notifyAchievements(r);
        });
    }
  }, [live, mode, game.phase, game.matchWinner, game.matchScore, game.trump, meta, tally, refreshProfile]);

  // Server-run ranked games: the reward arrives via the hub.
  useEffect(() => {
    if (live && serverReward && !submitted.current) {
      submitted.current = true;
      setReward(serverReward);
      refreshProfile();
      notifyAchievements(serverReward);
    }
  }, [live, serverReward, refreshProfile]);

  return (
    <>
      <GameTable onExit={exit} />
      {reward && (
        <PostMatchRewardsModal
          reward={reward}
          won={game.matchWinner === 0}
          onClose={() => {
            setReward(null);
            finish();
          }}
        />
      )}
    </>
  );
}