PocketVeto/frontend/components/shared/AuthGuard.tsx

"use client";

import { useEffect, useState } from "react";
import { usePathname, useRouter } from "next/navigation";
import { useAuthStore } from "@/stores/authStore";
import { Sidebar } from "./Sidebar";
import { MobileHeader } from "./MobileHeader";

const NO_SHELL_PATHS = ["/login", "/register"];
const AUTH_REQUIRED = ["/following", "/notifications"];

export function AuthGuard({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const token = useAuthStore((s) => s.token);
  // Zustand persist hydrates asynchronously — wait for it before rendering
  const [hydrated, setHydrated] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);

  useEffect(() => {
    setHydrated(true);
  }, []);

  useEffect(() => {
    if (!hydrated) return;
    const needsAuth = AUTH_REQUIRED.some((p) => pathname.startsWith(p));
    if (!token && needsAuth) {
      router.replace("/login");
    }
  }, [hydrated, token, pathname, router]);

  if (!hydrated) return null;

  // Login/register pages render without the app shell
  if (NO_SHELL_PATHS.includes(pathname)) {
    return <>{children}</>;
  }

  // Auth-required pages: blank while redirecting
  const needsAuth = AUTH_REQUIRED.some((p) => pathname.startsWith(p));
  if (!token && needsAuth) return null;

  // Authenticated or guest browsing: render the full app shell
  return (
    <div className="flex h-screen bg-background">
      {/* Desktop sidebar — hidden on mobile */}
      <div className="hidden md:flex">
        <Sidebar />
      </div>

      {/* Mobile slide-in drawer */}
      {drawerOpen && (
        <div className="fixed inset-0 z-50 md:hidden">
          <div className="absolute inset-0 bg-black/50" onClick={() => setDrawerOpen(false)} />
          <div className="absolute left-0 top-0 bottom-0">
            <Sidebar onClose={() => setDrawerOpen(false)} />
          </div>
        </div>
      )}

      {/* Content column */}
      <div className="flex-1 flex flex-col min-h-0">
        <MobileHeader onMenuClick={() => setDrawerOpen(true)} />
        <main className="flex-1 overflow-auto">
          <div className="container mx-auto px-4 md:px-6 py-6 max-w-7xl">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}