"use client"

import {motion} from "motion/react"
import {usePathname} from "next/navigation"
import {useState} from "react"
import {AppSidebar} from "@/components/layout/sidebar"
import {SiteHeader} from "@/components/layout/header"
import {SidebarInset, SidebarProvider} from "@/components/ui/sidebar"
import {useAuthRedirect} from "@/hooks/use-auth-redirect"


export default function MainLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const pathname = usePathname()
  const [isFullWidth, setIsFullWidth] = useState(false)

  useAuthRedirect()

  return (
    <SidebarProvider
      className="h-screen"
      style={
        {
          "--header-height": "60px",
        } as React.CSSProperties
      }
    >
      <AppSidebar />
      <SidebarInset className="flex flex-col min-w-0 h-screen">
        <SiteHeader isFullWidth={isFullWidth} onToggleFullWidth={setIsFullWidth} />
        <div className="flex flex-1 flex-col bg-background overflow-y-auto overflow-x-hidden min-w-0 hide-scrollbar">
          <div className={`w-full mx-auto px-4 sm:px-6 md:px-8 lg:px-12 min-w-0 transition-all duration-300 ease-in-out ${!isFullWidth ? "max-w-[1320px]" : "max-w-full"}`}>
            <motion.div
              key={pathname}
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{
                duration: 0.5,
                ease: "easeOut",
              }}
              className="w-full"
            >
              {children}
            </motion.div>
          </div>
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}