import React, { useEffect, useState } from "react";
import LoginSection from "./sections/LoginSection";
import ServerSection from "./sections/ServerSection";
import OptionsSection from "./sections/OptionsSection";
import "./MainMenu.css";
import { useAuth } from "../../hooks/useAuth";

const MainMenu = ({ onStartGame }) => {
  const [menuView, setMenuView] = useState("LOGIN");
  const [selectedServer, setSelectedServer] = useState(null);
  const { user, logout } = useAuth();

  useEffect(() => {
    if (user) {
      setMenuView("SERVERS");
    } else {
      setMenuView("LOGIN");
      setSelectedServer(null);
    }
  }, [user]);

  return (
    <div id="mainMenu" className="main-menu">
      <div className="menu-container">
        <div className="menu-header">
          <h1 className="menu-title">GALAXY STRIKE ONLINE</h1>
          <p className="menu-subtitle">Space Idle MMORPG</p>
        </div>

        <div className="menu-content">
          {menuView === "LOGIN" && (
            <LoginSection onLogin={() => setMenuView("SERVERS")} />
          )}

          {menuView === "SERVERS" && (
            <ServerSection
              onBack={() => {
                logout();
                setMenuView("LOGIN");
              }}
              onSelect={(server) => {
                setSelectedServer(server);
                setMenuView("OPTIONS");
              }}
              onContinue={() => onStartGame()}
            />
          )}

          {menuView === "OPTIONS" && (
            <OptionsSection
              server={selectedServer}
              onContinue={onStartGame}
              onBack={() => {
                setSelectedServer(null);
                setMenuView("SERVERS");
              }}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default MainMenu;