import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar"
import { AppSidebar } from "./app-sidebar"
import { MobileNav } from "@/components/navigation/mobile-nav"
import { useIsMobile } from "@/hooks/use-mobile"
import { Separator } from "@/components/ui/separator"
import { useNavigation } from "@/contexts/navigation-context"

interface MainLayoutProps {
  children: React.ReactNode
}

export function MainLayout({ children }: MainLayoutProps) {
  const isMobile = useIsMobile()
  const { breadcrumbs, currentTitle } = useNavigation()

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        {/* Header with breadcrumbs */}
        <header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/50 bg-background/60 backdrop-blur-xl supports-backdrop-filter:bg-background/60 transition-all duration-300 ease-in-out">
          <div className="flex items-center gap-2 px-4 w-full">
            <SidebarTrigger className="-ml-1 text-muted-foreground hover:text-primary transition-colors" />
            <Separator orientation="vertical" className="mr-2 h-4 bg-border/50" />
            <nav aria-label="Breadcrumb" className="flex items-center gap-1 text-sm bg-muted/30 px-3 py-1.5 rounded-full border border-border/30">
              {breadcrumbs.length === 0 ? (
                <span className="text-sm font-medium text-primary px-1">{currentTitle}</span>
              ) : (
                breadcrumbs.map((crumb, index) => (
                  <span key={crumb.url} className="flex items-center gap-1">
                    {index > 0 && (
                      <span className="text-muted-foreground/50">/</span>
                    )}
                    {index === breadcrumbs.length - 1 ? (
                      <span className="text-sm font-medium text-primary px-1">{crumb.title}</span>
                    ) : (
                      <span className="text-sm text-muted-foreground hover:text-foreground transition-colors px-1">{crumb.title}</span>
                    )}
                  </span>
                ))
              )}
            </nav>
          </div>
        </header>

        {/* Main content */}
        <div className="flex-1 overflow-auto">
          {children}
        </div>

        {/* Mobile bottom navigation */}
        {isMobile && <MobileNav />}
      </SidebarInset>
    </SidebarProvider>
  )
}