import { useState, useEffect } from "react";
import useWebSocket, { ReadyState } from "react-use-websocket";
import { useDebouncedCallback } from "use-debounce";
import Connecting from "./apps/Connecting.tsx";
import Waiting from "./apps/Waiting.tsx";
import Starting from "./apps/Starting.tsx";
import Gaming from "./apps/Gaming.tsx";
import Finished from "./apps/Finished.tsx";
import Failed from "./apps/Failed.tsx";
import type { GameState } from "./GameState.ts";

type Props = {
  gameId: number;
  playerId: number;
};

type WebSocketMessage =
  | { type: "connect" }
  | { type: "prepare"; data: { problem: string } }
  | { type: "ready" }
  | { type: "start"; data: { startTime: string } }
  | {
      type: "finish";
      data: { yourScore: number | null; opponentScore: number | null };
    }
  | { type: "score"; data: { score: number } }
  | { type: "code"; data: { code: string } }
  | {
      type: "watch";
      data: {
        problem: string;
        scoreA: number | null;
        codeA: string;
        scoreB: number | null;
        codeB: string;
      };
    };

export default ({ gameId, playerId }: Props) => {
  // const socketUrl = `wss://t.nil.ninja/iosdc/2024/sock/golf/${gameId}/${playerId}/`;
  const socketUrl = `ws://localhost:8002/sock/golf/${gameId}/${playerId}/`;

  const { sendJsonMessage, lastJsonMessage, readyState } =
    useWebSocket<WebSocketMessage>(socketUrl);

  const [gameState, setGameState] = useState<GameState>("connecting");

  const [problem, setProblem] = useState<string | null>(null);

  // in seconds
  const [timeLeft, setTimeLeft] = useState<number | null>(null);
  useEffect(() => {
    if (gameState === "starting" && timeLeft !== null) {
      const timer = setInterval(() => {
        setTimeLeft((prevTime) => {
          // `prevTime` is not null because `timeLeft` is not null.
          prevTime = prevTime!;
          if (prevTime <= 1) {
            clearInterval(timer);
            setGameState("gaming");
            return 0;
          }
          return prevTime - 1;
        });
      }, 1000);

      return () => clearInterval(timer);
    }
  }, [gameState]);

  const [score, setScore] = useState<number | null>(null);

  const [result, setResult] = useState<{
    yourScore: number | null;
    opponentScore: number | null;
  } | null>(null);

  const onCodeChange = useDebouncedCallback((data) => {
    sendJsonMessage({ type: "code", data });
  }, 1000);

  useEffect(() => {
    if (readyState === ReadyState.UNINSTANTIATED) {
      setGameState("failed");
    } else if (
      readyState === ReadyState.CLOSING ||
      readyState === ReadyState.CLOSED
    ) {
      if (gameState !== "finished") {
        setGameState("failed");
      }
    } else if (readyState === ReadyState.CONNECTING) {
      setGameState("connecting");
    } else if (readyState === ReadyState.OPEN) {
      if (lastJsonMessage !== null) {
        if (lastJsonMessage.type === "prepare") {
          const { problem } = lastJsonMessage.data;
          setProblem(problem);
          sendJsonMessage({ type: "ready", data: {} });
        } else if (lastJsonMessage.type === "start") {
          const { startTime } = lastJsonMessage.data;
          const startTimeMs = Date.parse(startTime);
          setTimeLeft(
            Math.max(0, Math.floor((startTimeMs - Date.now()) / 1000)),
          );
          setGameState("starting");
        } else if (lastJsonMessage.type === "finish") {
          const result = lastJsonMessage.data;
          setResult(result);
          setGameState("finished");
        } else if (lastJsonMessage.type === "score") {
          const { score } = lastJsonMessage.data;
          setScore(score);
        } else {
          setGameState("failed");
        }
      } else {
        setGameState("waiting");
        sendJsonMessage({ type: "connect", data: {} });
      }
    }
  }, [readyState, lastJsonMessage]);

  return (
    <div>
      <h1>
        Game #{gameId} (playerId #{playerId})
      </h1>
      <div>
        {gameState === "connecting" ? (
          <Connecting gameId={gameId} playerId={playerId} />
        ) : gameState === "waiting" ? (
          <Waiting gameId={gameId} playerId={playerId} />
        ) : gameState === "starting" ? (
          <Starting gameId={gameId} playerId={playerId} timeLeft={timeLeft} />
        ) : gameState === "gaming" ? (
          <Gaming
            gameId={gameId}
            playerId={playerId}
            problem={problem}
            score={score}
            onCodeChange={onCodeChange}
          />
        ) : gameState === "finished" ? (
          <Finished gameId={gameId} playerId={playerId} result={result!} />
        ) : (
          <Failed gameId={gameId} playerId={playerId} />
        )}
      </div>
    </div>
  );
};