/* global React, ReactDOM, LockedScreen, DecryptSequence, GameOverScreen,
            CorpNav, CorpFooter, HomePage, AboutPage, ContactPage */

// ─────────────────────────────────────────────────────────────────────────────
// GAME MASTER CONFIG
// Edit these per scenario. The decryption key is case-insensitive.
// Append ?gm=1 to the URL to outline the planted WHO/HOW/WHERE clues.
// ─────────────────────────────────────────────────────────────────────────────
const CONFIG = {
  decryptKey: "TinyHorsePants",
  timerMinutes: 30,
  skipUnlockAnimation: false,
};

const { useState, useEffect, useMemo } = React;

function App() {
  // ?gm=1 → highlight breach clues for the game master
  const highlightClues = useMemo(() => {
    if (typeof window === "undefined") return false;
    return new URLSearchParams(window.location.search).get("gm") === "1";
  }, []);
  const tweaks = { highlightClues };

  // top-level state: 'locked' | 'decrypting' | 'unlocked' | 'gameover'
  const [phase, setPhase] = useState("locked");
  // within unlocked: 'home' | 'about' | 'contact'
  const [page, setPage] = useState("home");

  // timer — anchored to mount time so it counts down deterministically.
  // resetKey lets us restart the scenario from game-over.
  const [resetKey, setResetKey] = useState(0);
  const timer = useMemo(() => ({
    endsAt: Date.now() + CONFIG.timerMinutes * 60 * 1000,
    total: CONFIG.timerMinutes * 60 * 1000,
  }), [resetKey]);

  // tick the gameover check (only matters while locked)
  useEffect(() => {
    if (phase !== "locked") return;
    const id = setInterval(() => {
      if (Date.now() >= timer.endsAt) setPhase("gameover");
    }, 500);
    return () => clearInterval(id);
  }, [phase, timer.endsAt]);

  function handleCorrectKey() {
    setPhase(CONFIG.skipUnlockAnimation ? "unlocked" : "decrypting");
  }

  function handleDecryptComplete() {
    setPhase("unlocked");
    setPage("home");
    window.scrollTo(0, 0);
  }

  function handleRetry() {
    setResetKey(k => k + 1);
    setPhase("locked");
  }

  function navigate(p) {
    setPage(p);
    window.scrollTo(0, 0);
  }

  return (
    <>
      {phase === "locked" && (
        <LockedScreen
          timer={timer}
          decryptKey={CONFIG.decryptKey}
          onCorrectKey={handleCorrectKey}
          tweaks={tweaks}
        />
      )}

      {phase === "decrypting" && (
        <DecryptSequence onComplete={handleDecryptComplete} />
      )}

      {phase === "gameover" && (
        <GameOverScreen onRetry={handleRetry} />
      )}

      {phase === "unlocked" && (
        <div className="corp-world">
          <div className="ambient"></div>
          <CorpNav page={page} onNav={navigate} />
          {page === "home" && <HomePage onNav={navigate} />}
          {page === "about" && <AboutPage onNav={navigate} tweaks={tweaks} />}
          {page === "contact" && <ContactPage tweaks={tweaks} />}
          <CorpFooter onNav={navigate} />
        </div>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);