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 { MatchSummary, RewardResult } from "@/lib/online/types";

export function GameScreen() {
  const game = useGameStore((s) => s.game);
  const mode = useGameStore((s) => s.mode);
  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);

  const exit = () => {
    reset();
    go(returnTo);
  };

  useEffect(() => {
    if (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,
      };
      getService()
        .submitMatchResult(summary)
        .then((r) => {
          setReward(r);
          refreshProfile();
        });
    }
  }, [mode, game.phase, game.matchWinner, game.matchScore, game.trump, meta, tally, refreshProfile]);

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