movieloop-frontend/src/components/versus/VersusCompletionModal.tsx

import { useNavigate } from 'react-router';
import { useVersusStore } from '@/stores/versus-store';
import { useAuthStore } from '@/stores/auth-store';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Trophy, Loader2 } from 'lucide-react';

export default function VersusCompletionModal() {
  const navigate = useNavigate();
  const user = useAuthStore((s) => s.user);
  const lobbyState = useVersusStore((s) => s.lobbyState);
  const matchResult = useVersusStore((s) => s.matchResult);
  const myScore = useVersusStore((s) => s.myScore);
  const reset = useVersusStore((s) => s.reset);

  const iAmDone = !!myScore;
  const isOpen = iAmDone;
  if (!isOpen) return null;

  const waitingForOpponent = iAmDone && lobbyState !== 'finished';
  const myTotal = (myScore as { totalScore?: number } | null)?.totalScore ?? 0;

  const handleBackToVersus = () => {
    reset();
    navigate('/versus');
  };

  return (
    <Dialog open={isOpen}>
      <DialogContent className="sm:max-w-md" showCloseButton={false}>
        {waitingForOpponent ? (
          <>
            <DialogHeader>
              <DialogTitle>You finished!</DialogTitle>
            </DialogHeader>
            <div className="flex flex-col items-center gap-4 py-6">
              <p className="text-3xl font-bold">{myTotal}</p>
              <p className="text-sm text-muted-foreground">Your score</p>
              <div className="flex items-center gap-2 text-muted-foreground">
                <Loader2 className="h-4 w-4 animate-spin" />
                <span>Waiting for opponent to finish...</span>
              </div>
            </div>
          </>
        ) : matchResult ? (
          <>
            <DialogHeader>
              <DialogTitle className="flex items-center gap-2">
                <Trophy className="h-5 w-5 text-yellow-500" />
                Match Complete!
              </DialogTitle>
            </DialogHeader>
            <div className="space-y-4 py-4">
              <MatchResultDisplay matchResult={matchResult} userId={user?.id} />
              <Button className="w-full" onClick={handleBackToVersus}>
                Back to Versus
              </Button>
            </div>
          </>
        ) : null}
      </DialogContent>
    </Dialog>
  );
}

function MatchResultDisplay({
  matchResult,
  userId,
}: {
  matchResult: NonNullable<ReturnType<typeof useVersusStore.getState>['matchResult']>;
  userId?: string;
}) {
  const p1Score =
    (matchResult.player1Score as { totalScore?: number } | null)?.totalScore ??
    0;
  const p2Score =
    (matchResult.player2Score as { totalScore?: number } | null)?.totalScore ??
    0;
  const isWinner = matchResult.winnerId === userId;
  const isTie = matchResult.winnerId === null;

  return (
    <div className="space-y-4">
      <div className="text-center">
        {isTie ? (
          <p className="text-xl font-bold text-muted-foreground">It's a tie!</p>
        ) : isWinner ? (
          <p className="text-xl font-bold text-green-600">You win!</p>
        ) : (
          <p className="text-xl font-bold text-red-500">You lose!</p>
        )}
      </div>

      <div className="flex items-center justify-around rounded-lg border border-border p-4">
        <div className="text-center">
          <p className="text-sm text-muted-foreground">{matchResult.player1.username}</p>
          <p className="text-2xl font-bold">{p1Score}</p>
        </div>
        <span className="text-lg font-bold text-muted-foreground">vs</span>
        <div className="text-center">
          <p className="text-sm text-muted-foreground">{matchResult.player2.username}</p>
          <p className="text-2xl font-bold">{p2Score}</p>
        </div>
      </div>
    </div>
  );
}