import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "./AppSidebar";
import { Outlet, useLocation } from "react-router-dom";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

export function MainLayout() {
  const { pathname } = useLocation();
  // The dashboard paints its own warm full-bleed background and scrolls in its
  // own container, so it escapes the 1500px content cap (and the pr-2 gutter)
  // to reach the window edge. Other pages keep the capped white layout.
  const isDashboard = pathname.startsWith("/dashboard");

  return (
    <motion.div layout>
      <SidebarProvider defaultOpen>
        <div className={cn("flex min-h-screen w-full", !isDashboard && "pr-2")}>
          <AppSidebar />
          <main className="flex-1 overflow-hidden">
            <div className="flex h-14 w-full items-center border-b px-4 gap-4">
              <SidebarTrigger />
            </div>
            <div
              className={cn(
                "overflow-auto h-[calc(100vh-3.5rem)]",
                !isDashboard && "max-w-[1500px]"
              )}
            >
              <Outlet />
            </div>
          </main>
        </div>
      </SidebarProvider>
    </motion.div>
  );
}
