"use client";

import { AuthGuard, LoginGuard } from "@/contexts";
import { useIsMobile } from "@/hooks/use-mobile";
import { usePathname } from "next/navigation";
import type { PropsWithChildren } from "react";
import { Header } from "./header";
import Notification from "./notification";
import { Sidebar } from "./sidebar";

function MainLayout({ children }: PropsWithChildren) {
  const isMobile = useIsMobile();

  return (
    <div className="flex min-h-screen">
      <Sidebar />
      {/* Spacer to reserve space for collapsed sidebar on mobile - avoids reflow */}
      {isMobile && <div className="w-[70px] shrink-0" />}
      <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-gray-2 dark:bg-[#020d1a]">
        <Header />
        <main className="isolate mx-auto flex min-h-0 w-full max-w-screen-2xl flex-1 flex-col overflow-x-clip px-3 py-4 md:px-4 md:py-6 2xl:px-6 2xl:py-4">
          {children}
        </main>
      </div>
    </div>
  );
}

export function ConditionalLayout({ children }: PropsWithChildren) {
  const pathname = usePathname();
  const isAuthPage = pathname.startsWith("/auth");

  return (
    <>
      {isAuthPage ? (
        <LoginGuard>
          <main>{children}</main>
        </LoginGuard>
      ) : (
        <AuthGuard>
          <Notification>
            <MainLayout>{children}</MainLayout>
          </Notification>
        </AuthGuard>
      )}
    </>
  );
}