import type { CSSProperties, ReactNode } from "react"
import { AppSidebar } from "@/components/app-sidebar"
import { AuthGuard } from "@/components/auth-guard"
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
import { CommandPalette } from "@/components/command-palette"
import { ReleaseNotesModal } from "@/components/release-notes-modal"
import { DataSourceProvider } from "@/lib/data-source"
import { EvoBGPProvider } from "@/lib/evobgp-context"

const SKIP_TO_CONTENT_CLASS =
  "bg-background text-foreground ring-ring sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-50 focus:rounded-md focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:shadow-sm focus:ring-2"

export default function MainLayout({ children }: { children: ReactNode }) {
  return (
    <AuthGuard>
      <DataSourceProvider>
        <EvoBGPProvider>
          <SidebarProvider
            style={{ "--sidebar-width": "240px" } as CSSProperties}
          >
            <a href="#main-content" className={SKIP_TO_CONTENT_CLASS}>
              К содержимому
            </a>
            <AppSidebar />
            <SidebarInset id="main-content" className="h-svh overflow-hidden">
              {children}
            </SidebarInset>
            <CommandPalette />
            <ReleaseNotesModal />
          </SidebarProvider>
        </EvoBGPProvider>
      </DataSourceProvider>
    </AuthGuard>
  )
}