/* eslint-disable */
/* Main App — hash-based router + Tweaks panel integration */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "roundTime": 60,
  "letterCount": 9,
  "soundEnabled": true,
  "showStarfield": true
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState(window.location.hash.replace(/^#/, "") || "home");
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [authReady, setAuthReady] = useState(false);
  const [user, setUser] = useState(window.Auth.getUser());
  const toast = useToast();
  const telegramStartHandledRef = useRef(false);

  useEffect(() => {
    function onHash() {
      setRoute(window.location.hash.replace(/^#/, "") || "home");
    }
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    let alive = true;
    window.Auth.init()
      .then(u => { if (alive) { setUser(u); setAuthReady(true); } })
      .catch(() => { if (alive) setAuthReady(true); });
    const off = window.Auth.onChange(u => setUser(u));
    return () => { alive = false; off(); };
  }, []);

  useEffect(() => {
    const tg = window.Telegram?.WebApp;
    if (!tg) return;
    tg.ready();
    tg.expand();
    tg.setHeaderColor?.("#120d24");
    tg.setBackgroundColor?.("#120d24");
  }, []);

  // Apply sound toggle
  useEffect(() => {
    window.Sound.enabled = tweaks.soundEnabled;
  }, [tweaks.soundEnabled]);

  useEffect(() => {
    function onRing(event) {
      const detail = event.detail || {};
      window.Sound.ring();
      toast(`${detail.fromName || "Игрок"} зовёт вас в игру${detail.roomName ? `: ${detail.roomName}` : ""}`);
      const oldTitle = document.title;
      document.title = "🔔 Вас зовут в игру!";
      setTimeout(() => { document.title = oldTitle; }, 3500);
    }
    window.addEventListener("starhour:ring", onRing);
    return () => window.removeEventListener("starhour:ring", onRing);
  }, [toast]);

  function navigate(target) {
    window.location.hash = "#" + target;
    setRoute(target);
  }

  useEffect(() => {
    if (!authReady || telegramStartHandledRef.current) return;
    const startParam = window.Auth.telegramStartParam ? window.Auth.telegramStartParam() : "";
    const match = /^join_([A-Z0-9]{4,8})$/i.exec(startParam || "");
    if (!match) return;
    telegramStartHandledRef.current = true;
    navigate(`join/${match[1].toUpperCase()}`);
  }, [authReady]);

  // Parse route
  const [head, ...rest] = route.split("/");
  const arg = rest.join("/");

  if (!authReady) {
    return (
      <>
        {tweaks.showStarfield && <Starfield/>}
        <div id="app">
          <div className="shell" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
            <div className="card-dark text-center">Загружаем игру…</div>
          </div>
        </div>
      </>
    );
  }

  const protectedRoutes = new Set(["create", "join", "room", "game", "results", "final", "profile"]);
  let screen;
  if (!user && head === "auth") screen = <AuthScreen onNavigate={navigate} afterAuth="home" initialMode={arg === "register" ? "register" : "login"} />;
  else if (!user && protectedRoutes.has(head)) screen = <AuthScreen onNavigate={navigate} afterAuth={route || "home"} />;
  else if (head === "home" || head === "") screen = <HomeScreen onNavigate={navigate} />;
  else if (head === "rooms") screen = <PublicRoomsScreen onNavigate={navigate} />;
  else if (head === "auth") screen = <AuthScreen onNavigate={navigate} afterAuth="home" initialMode={arg === "register" ? "register" : "login"} />;
  else if (head === "create") screen = <CreateRoomScreen onNavigate={navigate} tweaks={tweaks} />;
  else if (head === "join") screen = <JoinRoomScreen onNavigate={navigate} roomId={arg} />;
  else if (head === "room") screen = <LobbyScreen onNavigate={navigate} roomId={arg} tweaks={tweaks} />;
  else if (head === "game") screen = <GameScreen onNavigate={navigate} roomId={arg} />;
  else if (head === "results") screen = <ResultsScreen onNavigate={navigate} roomId={arg} />;
  else if (head === "final") screen = <FinalScreen onNavigate={navigate} roomId={arg} />;
  else if (head === "profile") screen = <ProfileScreen onNavigate={navigate} />;
  else if (head === "stats") screen = <StatsScreen onNavigate={navigate} />;
  else screen = <HomeScreen onNavigate={navigate} />;

  return (
    <>
      {tweaks.showStarfield && <Starfield/>}
      <div id="app">
        {screen}
      </div>
      <MobileNav user={user} route={route} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Раунд">
          <TweakSlider
            label="Время раунда"
            value={tweaks.roundTime}
            onChange={v => setTweak("roundTime", v)}
            min={20} max={180} step={5} unit="с"
          />
          <TweakSlider
            label="Кол-во букв"
            value={tweaks.letterCount}
            onChange={v => setTweak("letterCount", v)}
            min={6} max={12} step={1}
          />
        </TweakSection>
        <TweakSection label="Интерфейс">
          <TweakToggle
            label="Звуки"
            value={tweaks.soundEnabled}
            onChange={v => setTweak("soundEnabled", v)}
          />
          <TweakToggle
            label="Звёздное небо"
            value={tweaks.showStarfield}
            onChange={v => setTweak("showStarfield", v)}
          />
        </TweakSection>
        <TweakSection label="Сервис">
          <TweakButton label="Сбросить данные" onClick={() => {
            if (!confirm("Сбросить все комнаты и историю?")) return;
            localStorage.removeItem("starhour:rooms");
            localStorage.removeItem("starhour:stats");
            location.hash = "#home";
            location.reload();
          }}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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