import { useState } from "react";
import { GameProvider } from "./context/GameContext.js";
import { CharacterPage } from "./components/game/CharacterPage.js";
import { GameLayout } from "./components/game/GameLayout.js";
import { LoginPage } from "./components/game/LoginPage.js";
import { ProfilePage } from "./components/game/ProfilePage.js";

const getProfileDiscordId = (): string | null => {
  const match = /^\/profile\/(\d+)$/.exec(window.location.pathname);
  return match?.[1] ?? null;
};

const getCharacterDiscordId = (): string | null => {
  const match = /^\/character\/(\d+)$/.exec(window.location.pathname);
  return match?.[1] ?? null;
};

const handleAuthCallback = (): boolean => {
  if (window.location.pathname !== "/auth/callback") {
    return false;
  }

  const params = new URLSearchParams(window.location.search);
  const token = params.get("token");

  if (token) {
    localStorage.setItem("elysium_token", token);
  }

  window.history.replaceState(null, "", "/");
  return Boolean(token);
};

const isAuthenticated = (): boolean => {
  const fromCallback = handleAuthCallback();
  return fromCallback || Boolean(localStorage.getItem("elysium_token"));
};

export const App = (): React.JSX.Element => {
  const [loggedIn, setLoggedIn] = useState(isAuthenticated);

  const profileDiscordId = getProfileDiscordId();
  if (profileDiscordId) {
    return <ProfilePage discordId={profileDiscordId} />;
  }

  const characterDiscordId = getCharacterDiscordId();
  if (characterDiscordId) {
    return <CharacterPage discordId={characterDiscordId} />;
  }

  if (!loggedIn) {
    return <LoginPage onLogin={() => { setLoggedIn(true); }} />;
  }

  return (
    <GameProvider>
      <GameLayout />
    </GameProvider>
  );
};