import { Outlet, useLocation, useNavigate } from "react-router-dom";

import { useMe } from "../hooks/auth";
import { useServerEvents } from "../hooks/useServerEvents";
import { BottomBar } from "./BottomBar";
import { NotificationBell } from "./NotificationBell";
import { NotificationToaster } from "./NotificationToaster";

const TITLES: Record<string, string> = {
  "/": "Forbidden Stars",
  "/group": "Группа",
  "/group/settings": "Настройки группы",
  "/account": "Аккаунт",
  "/match/new": "Новая партия",
  "/stats": "Общая статистика",
};

export function AppShell() {
  const location = useLocation();
  const navigate = useNavigate();
  const { data: me } = useMe();
  useServerEvents(!!me); // живые обновления (SSE) только при наличии сессии
  const title =
    TITLES[location.pathname] ??
    (location.pathname.startsWith("/u/") ? "Профиль игрока" : "Forbidden Stars");
  const isHome = location.pathname === "/";

  return (
    <div className="app-shell">
      <header className="top-bar">
        <div className="top-bar-left">
          {isHome ? (
            <span className="title">{title}</span>
          ) : (
            <button className="btn btn-ghost" onClick={() => navigate(-1)}>
              ← Назад
            </button>
          )}
        </div>
        <span className="title small muted top-bar-center">{!isHome ? title : ""}</span>
        <div className="top-bar-right">
          <NotificationBell enabled={!!me} />
        </div>
      </header>

      <NotificationToaster enabled={!!me} />

      <main className="app-main">
        <Outlet />
      </main>

      <BottomBar />
    </div>
  );
}