"use client";
import { Loader2 } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";
import { useEffect } from "react";
import { AchievementUnlockNotifier } from "@/components/gamification/achievement-unlock-notifier";
import { useAuth } from "@/hooks/use-auth";
import { useTranslations } from "@/lib/i18n/context";
import { BottomNav } from "./bottom-nav";
import { SidebarNav } from "./sidebar-nav";
import { TopBar } from "./top-bar";
const PUBLIC_PATHS = ["/auth/login", "/auth/register"];
export function AuthShell({ children }: { children: React.ReactNode }) {
const { user, isAuthenticated, isLoading } = useAuth();
const { t } = useTranslations();
const pathname = usePathname();
const router = useRouter();
const isPublicPage = PUBLIC_PATHS.some((p) => pathname.startsWith(p));
const isAdminPage = pathname.startsWith("/admin");
const isOnboardingPage = pathname === "/onboarding";
const showUnlockNotifier = isAuthenticated && !isPublicPage && !!user?.id;
useEffect(() => {
if (!isLoading && !isAuthenticated && !isPublicPage) {
router.replace("/auth/login");
}
}, [isLoading, isAuthenticated, isPublicPage, router]);
// Redirect non-admins away from /admin
useEffect(() => {
if (
!isLoading &&
isAuthenticated &&
isAdminPage &&
user?.role !== "ADMIN"
) {
router.replace("/");
}
}, [isLoading, isAuthenticated, isAdminPage, user?.role, router]);
// Redirect to onboarding if not completed
useEffect(() => {
if (
!isLoading &&
isAuthenticated &&
!isOnboardingPage &&
!isPublicPage &&
user &&
!user.onboardingCompletedAt
) {
router.replace("/onboarding");
}
}, [
isLoading,
isAuthenticated,
isOnboardingPage,
isPublicPage,
user,
router,
]);
// Loading state
if (isLoading) {
return (
{t("nav.loadingScreen")}
);
}
// Public pages (login, register) — render without any nav
if (isPublicPage) {
return (
{children}
);
}
// Not authenticated, waiting for redirect
if (!isAuthenticated) {
return (
{t("nav.loadingScreen")}
);
}
// Onboarding page — minimal shell, no sidebar/nav
if (isOnboardingPage) {
return (
<>
{showUnlockNotifier && user?.id ? (
) : null}
{children}
);
}
// Authenticated — full app shell
return (
<>
{showUnlockNotifier && user?.id ? (
) : null}
{/*
Keyboard-only skip link. The non-focused state has both
`pointer-events-none` (so a mouse click in the top-left corner
passes through to the logo behind it) AND `-translate-y-full`
(so even an accidental tap with stylus / touch can't activate
it). Focus restores both — the element jumps back into the
viewport and becomes clickable.
*/}
{t("nav.skipToContent")}
);
}