"use client";

import { PermissionRouteGuard } from "@/components/auth/permission-route-guard";
import { Separator } from "@/components/ui/separator";
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";
import { cn } from "@/lib/utils";
import { useLocale } from "next-intl";
import { ReactNode } from "react";
import { AppHeader } from "./app-header";
import { AppSidebar } from "./app-sidebar";

type DashboardLayoutProps = {
  children: ReactNode;
};

const ENABLE_PERMISSION_ROUTE_GUARD =
  process.env.NEXT_PUBLIC_ENABLE_PERMISSION_ROUTE_GUARD !== "false";

export function DashboardLayout({ children }: DashboardLayoutProps) {
  const locale = useLocale();
  const isRTL = locale === "ar";
  const direction = isRTL ? "rtl" : "ltr";

  return (
    <>
      {ENABLE_PERMISSION_ROUTE_GUARD ? <PermissionRouteGuard /> : null}
      <SidebarProvider>
        <div

          className="flex h-screen w-full overflow-hidden bg-background print:block print:h-auto print:overflow-visible"
        >
          {/* Sidebar - hidden on print */}
          <div className={cn("print:hidden")}>
            <AppSidebar />
          </div>

          {/* Main Content Area */}
          <SidebarInset className="flex flex-col flex-1 overflow-hidden print:overflow-visible print:w-full">
            {/* Header with Mobile Trigger - hidden on print */}
            <header className="h-16 border-b border-border bg-card px-3 sm:px-6 flex items-center sticky top-0 z-10 print:hidden">
              {/* Mobile Sidebar Trigger */}
              <SidebarTrigger className="lg:hidden" />
              <Separator orientation="vertical" className="h-6 lg:hidden" />
              <AppHeader />
            </header>

            {/* Page Content */}
            <main className="flex-1 overflow-y-auto scrollbar-hide p-3 sm:p-6 print:overflow-visible print:p-0">{children}</main>
          </SidebarInset>
        </div>
      </SidebarProvider>
    </>
  );
}