import type { ReactNode } from "react";

import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/layout/AppSidebar";
import { AppHeader } from "@/components/layout/AppHeader";
import { BottomNav } from "@/components/layout/BottomNav";
import type { UserRole } from "@/types/auth";

/**
 * Shared shell for all authenticated portal routes. Pass the user's role and
 * the sidebar, header title, and mobile bottom nav all configure themselves
 * from NAV_CONFIG.
 *
 * Fixed-shell contract: the shell is locked to the viewport (`h-svh` +
 * `overflow-hidden`), so the sidebar, header, and bottom nav never move —
 * only the content area between them scrolls (vertically). The page itself
 * can never scroll horizontally: `min-w-0` lets the inset shrink below wide
 * content (tables), and `overflow-x-hidden` on the scroller forces wide
 * content to scroll inside its own container (e.g. the DataTable) instead of
 * dragging the whole layout.
 *
 * Usage (in a route-group layout):
 *   <AppShell role={role}>{children}</AppShell>
 */
export function AppShell({
  role,
  children,
}: {
  role: UserRole;
  children: ReactNode;
}) {
  return (
    <SidebarProvider className="h-svh overflow-hidden">
      <AppSidebar role={role} />
      <SidebarInset className="min-w-0 overflow-hidden">
        <AppHeader role={role} />
        <div className="min-h-0 flex-1 overflow-x-hidden overflow-y-auto">
          {/* h-full (not min-h-full) so fill-height children — e.g. the
              Schedule calendar — get a definite height to bound their own
              internal scroll against. Normal page content keeps min-height:auto
              and overflows, so the shell scroller still scrolls as before. */}
          <div className="flex h-full flex-col p-4 md:p-6 lg:p-8">
            {children}
          </div>
        </div>
        <BottomNav role={role} />
      </SidebarInset>
    </SidebarProvider>
  );
}