import { useLocation } from "react-router-dom";
import { Outlet } from "react-router-dom";
import { AppMenuTabs } from "./AppMenuTabs";
import { useSidebar } from "@/shared/common/ui/sidebar";
import Top from "@/record-management/components/common/Top";
import { useAuth } from "@/shared/context/AuthContext";

export const AppLayout = () => {
  const { pathname } = useLocation();
  const isAuthPage = pathname === "/";
  const { toggleSidebar } = useSidebar();
  const { user } = useAuth();
  
  const userRoles = user?.roles?.map((role) => role.key) || [];
  const isSuperAdmin = userRoles.includes("super_admin");
  
  if (isAuthPage) {
    return (
      <div className="min-h-screen w-full bg-gray-50">
        <Outlet />
      </div>
    );
  }

  return (
    <div className="w-full flex flex-col min-h-screen bg-background text-foreground">
      <Top onToggleSidebar={toggleSidebar} showRecordManagementShortcut={!isSuperAdmin} />
      <AppMenuTabs />
      <div className="px-2 pb-2 pt-8 sm:px-4 sm:pb-4 sm:pt-10 flex-1">
        <div className="w-full overflow-x-auto">
          <Outlet />
        </div>
      </div>
    </div>
  );
};