{visit ? guestDisplayName(visit) : "Гостевая заявка"}

{loading ? "Загружаем запрос..." : question}

Ответ *

setAnswer(event.target.value)}
            rows={5}
            className="app-input w-full resize-none rounded-lg p-3 text-sm"
            placeholder="Напишите уточнение для администратора"
          />
        </label>
        {error ? (
          <p className="app-feedback-danger rounded-lg px-3 py-2 text-sm">
            {error}
          </p>
        ) : null}
      </div>
    </Modal>
  );
}

export function AppShell({
  children,
  desktopWideMode = false,
  desktopImmersiveMode = false,
  standaloneAppMode = false,
  mobileFullscreen = false,
  onDesktopWideModeChange,
  suppressPushOnboardingPrompt = false,
}: AppShellProps) {
  const {
    user,
    loading,
    status: authStatus,
    error: authError,
    retryAuthentication,
  } = useUser();
  const { mobileNavPlacement } = useMobileNavPlacement();
  const [desktopCompactPanelBehavior] = useDesktopCompactPanelBehavior();
  const expandCompactPanelsOnHover = desktopCompactPanelBehavior === "hover";
  const router = useRouter();
  const pathname = usePathname();
  const [isMobileLeftNavOpen, setIsMobileLeftNavOpen] = useState(false);
  const [isMobileCalendarOpen, setIsMobileCalendarOpen] = useState(false);

const prevPathnameRef = useRef(pathname);

const cal = useCalendarModals();

useEffect(() => {
    // Если загрузка завершена и пользователь не авторизован - редирект на логин
    if (!loading && authStatus === "unauthenticated" && !user) {
      router.push("/login");
    }
  }, [user, loading, authStatus, router]);

// Close mobile drawers on route change
  useEffect(() => {
    if (prevPathnameRef.current !== pathname) {
      prevPathnameRef.current = pathname;
      startTransition(() => {
        setIsMobileLeftNavOpen(false);
        setIsMobileCalendarOpen(false);
      });
    }
  }, [pathname]);

useEffect(() => {
    const onResize = () => {
      if (window.innerWidth >= 1024) {
        setIsMobileLeftNavOpen(false);
        setIsMobileCalendarOpen(false);
      }
    };

window.addEventListener("resize", onResize);
    onResize();

return () => {
      window.removeEventListener("resize", onResize);
    };
  }, []);

useEffect(() => {
    if (isMobileLeftNavOpen || isMobileCalendarOpen) {
      document.body.style.overflow = "hidden";
      return;
    }

document.body.style.overflow = "";

return () => {
      document.body.style.overflow = "";
    };
  }, [isMobileLeftNavOpen, isMobileCalendarOpen]);

// Показываем загрузку, пока проверяем авторизацию
  if (loading) {
    return (
      <div className="app-shell min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="mb-4 inline-block h-12 w-12 animate-spin rounded-full border-4 border-sky-400 border-t-transparent"></div>
          <p className="app-text-muted text-sm">Загрузка...</p>
        </div>
      </div>
    );
  }

if (!user && authStatus === "recovering") {
    return (
      <div className="app-shell min-h-screen flex items-center justify-center p-4">
        <div className="app-surface w-full max-w-md rounded-lg p-5 text-center">
          <Loader2 className="mx-auto mb-3 h-8 w-8 animate-spin text-sky-400" />
          <h1 className="text-base font-semibold">
            Восстанавливаем соединение
          </h1>
          <p className="app-text-muted mt-2 text-sm">
            {authError || "Сервер временно недоступен."}
          </p>
          <button
            type="button"
            className="app-button-primary mt-4 px-4 py-2 text-sm"
            onClick={() => void retryAuthentication()}
          >
            Повторить
          </button>
        </div>
      </div>
    );
  }

// Если пользователь не авторизован, ничего не показываем (уже редиректим)
  if (!user) {
    return null;
  }

return (
    <div
      className={`${mobileFullscreen || standaloneAppMode ? "h-[100dvh] overflow-hidden" : "min-h-screen pt-10"} ${desktopImmersiveMode || standaloneAppMode ? "lg:pt-0" : "lg:pt-14"} ${desktopWideMode ? "lg:h-[100dvh] lg:overflow-hidden" : ""} app-shell flex flex-col ${mobileNavPlacement === "bottom" && !mobileFullscreen && !standaloneAppMode ? "pb-[calc(env(safe-area-inset-bottom)+3.75rem)] lg:pb-0" : ""}`}
    >
      <div
        className={
          standaloneAppMode ? "hidden" : desktopImmersiveMode ? "lg:hidden" : ""
        }
      >
        <Header
          mobileNavPlacement={mobileNavPlacement}
          suppressMobileChrome={mobileFullscreen}
          onOpenLeftNav={() => setIsMobileLeftNavOpen(true)}
          onOpenCalendar={() => setIsMobileCalendarOpen(true)}
        />
      </div>
      <div
        className={`mx-auto flex w-full flex-1 min-h-0 max-w-6xl ${desktopWideMode ? "lg:max-w-none" : ""} ${standaloneAppMode ? "gap-0 px-0 py-0" : desktopImmersiveMode ? "gap-0 px-0 py-0 lg:gap-0 lg:px-3 lg:py-3" : mobileFullscreen ? `gap-0 px-0 py-0 lg:py-4 ${desktopWideMode ? "lg:gap-3 lg:px-3" : "lg:gap-6 lg:px-8"}` : `gap-6 px-4 py-4 sm:px-8 lg:py-4 ${desktopWideMode ? "lg:gap-3 lg:px-3" : ""}`}`}
      >
        {!desktopImmersiveMode && !standaloneAppMode ? (
          <LeftNav
            fixedDesktop
            compact={desktopWideMode}
            expandOnHover={expandCompactPanelsOnHover}
          />
        ) : null}
        <main
          className={`flex-1 min-w-0 min-h-0 space-y-6 ${mobileFullscreen ? "overflow-visible" : ""} ${desktopWideMode ? "lg:flex lg:flex-col lg:gap-4 lg:space-y-0 lg:overflow-hidden" : ""}`}
        >
          {!mobileFullscreen &&
          !standaloneAppMode &&
          !suppressPushOnboardingPrompt ? (
            <PushOnboardingPrompt />
          ) : null}
          {children}
        </main>
        {!desktopImmersiveMode && !standaloneAppMode ? (
          <CalendarSidebar
            onOpenCalendarModal={cal.handleOpenCalendarModal}
            onOpenEventModal={cal.handleOpenEventModal}
            onOpenParticipantsModal={cal.handleOpenParticipantsModal}
            eventsRefreshTrigger={cal.eventsRefreshTrigger}
            setEventsRefreshTrigger={cal.handleSetEventsRefreshTrigger}
            setSidebarEvents={cal.handleSetSidebarEvents}
            onCalendarChange={cal.handleCalendarChange}
            fixedDesktop
            compact={desktopWideMode}
            expandOnHover={expandCompactPanelsOnHover}
            onExpand={() => onDesktopWideModeChange?.(false)}
          />
        ) : null}
      </div>

{!standaloneAppMode ? (
        <MobileLeftDrawer
          isOpen={isMobileLeftNavOpen}
          onClose={() => setIsMobileLeftNavOpen(false)}
        >
          <RoutedLeftNavContent
            onNavigate={() => setIsMobileLeftNavOpen(false)}
          />
        </MobileLeftDrawer>
      ) : null}

{!standaloneAppMode ? (
        <MobileCalendarDrawer
          isOpen={isMobileCalendarOpen}
          onClose={() => setIsMobileCalendarOpen(false)}
          onOpenCalendarModal={cal.handleOpenCalendarModal}
          onOpenEventModal={cal.handleOpenEventModal}
          onOpenParticipantsModal={cal.handleOpenParticipantsModal}
          eventsRefreshTrigger={cal.eventsRefreshTrigger}
          setEventsRefreshTrigger={cal.handleSetEventsRefreshTrigger}
          setSidebarEvents={cal.handleSetSidebarEvents}
          onCalendarChange={cal.handleCalendarChange}
        />
      ) : null}

{!standaloneAppMode ? <CalendarModals {...cal} /> : null}
      <GuestInfoRequestPrompt userId={user.id} />
      {!standaloneAppMode && <DailyTimeAllocationPrompt userId={user.id} />}
    </div>
  );
}

{title}