// App entry — routes between landing, picker, and shell

const App = () => {
  // Hash-based routing: #/landing | #/picker | #/app/<persona>/<page>[/<id>]
  const [hash, setHash] = React.useState(window.location.hash || "#/landing");
  React.useEffect(() => {
    const onHash = () => setHash(window.location.hash || "#/landing");
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Shared state across pages
  const [persona, setPersona] = React.useState("coach");
  const [chat, setChat] = React.useState(window.NASEF_DATA.chatSeed);
  const [matches, setMatches] = React.useState(window.NASEF_DATA.matches);
  const [standings, setStandings] = React.useState(window.NASEF_DATA.standings);
  const [roster, setRoster] = React.useState(window.NASEF_DATA.hamiltonRoster);
  const [rescheduleRequests, setRescheduleRequests] = React.useState([]);

  // Match-lobby in-game state (BO5 tracker for the live SSBU match)
  const [gameState, setGameState] = React.useState({
    currentGame: 4,
    homeGames: 2,
    awayGames: 1,
    stagePhase: "striking",
    struckStages: [],
    pickedStage: null,
    games: [
      { stage: "Battlefield", winner: "home" },
      { stage: "Pokémon Stadium 2", winner: "away" },
      { stage: "Hollow Bastion", winner: "home" },
      { stage: null, winner: null },
      { stage: null, winner: null },
    ],
  });

  // Edit-mode tweaks
  const [tweakOpen, setTweakOpen] = React.useState(false);
  React.useEffect(() => {
    const handler = (e) => {
      if (e.data?.type === "__activate_edit_mode") setTweakOpen(true);
      if (e.data?.type === "__deactivate_edit_mode") setTweakOpen(false);
    };
    window.addEventListener("message", handler);
    window.parent.postMessage({ type: "__edit_mode_available" }, "*");
    return () => window.removeEventListener("message", handler);
  }, []);

  // Route parsing — must compute BEFORE any conditional return so hook order is stable
  const parts = hash.replace(/^#\//, "").split("/");
  const route = parts[0] || "landing";
  const personaParam = parts[1] || persona;
  const pageParam = parts[2] || "home";
  const idParam = parts[3];

  // Sync hook must run unconditionally on every render
  React.useEffect(() => {
    if (route === "app" && personaParam && personaParam !== persona) setPersona(personaParam);
  }, [route, personaParam]);

  const navTo = (p, page = "home") => {
    setPersona(p);
    window.location.hash = `#/app/${p}/${page}`;
  };
  const goPage = (page) => {
    window.location.hash = `#/app/${persona}/${page}`;
  };
  const openLobby = (matchId) => {
    window.location.hash = `#/app/${persona}/lobby${matchId ? "/" + matchId : ""}`;
  };

  if (route === "landing") {
    return <Landing onEnter={() => (window.location.hash = "#/picker")} />;
  }

  if (route === "picker") {
    return <PersonaPicker onPick={(p) => navTo(p, "home")} />;
  }

  let page = null;
  switch (pageParam) {
    case "home":         page = <HomePage persona={personaParam} onNav={goPage} onOpenLobby={openLobby} />; break;
    case "competitions": page = <CompetitionsPage persona={personaParam} onNav={goPage} />; break;
    case "schedule":     page = <SchedulePage persona={personaParam} matches={matches} onOpenLobby={openLobby}
                                  onRequestReschedule={(req) => setRescheduleRequests(rs => [...rs, req])} />; break;
    case "standings":    page = <StandingsPage persona={personaParam} standings={standings} />; break;
    case "teams":        page = <TeamsPage persona={personaParam} roster={roster} onRosterChange={setRoster} />; break;
    case "school":       page = <SchoolPage />; break;
    case "lobby":        page = <LobbyPage persona={personaParam} matchId={idParam} onNav={goPage}
                                  gameState={gameState} setGameState={setGameState}
                                  chat={chat} setChat={setChat} />; break;
    case "bracket":      page = <BracketPage persona={personaParam} />; break;
    case "admin":        page = <AdminPage />; break;
    default: page = <HomePage persona={personaParam} onNav={goPage} onOpenLobby={openLobby} />;
  }

  return (
    <Shell
      persona={personaParam}
      page={pageParam}
      onNav={goPage}
      onSwitchPersona={() => (window.location.hash = "#/picker")}
      onOpenLobby={openLobby}
    >
      {page}
    </Shell>
  );
};

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