import { cookies } from "next/headers";
import Script from "next/script";
import { Suspense } from "react";
import { AppSidebar } from "@/components/app-sidebar";
import { DataStreamProvider } from "@/components/data-stream-provider";
import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
import { auth } from "../(auth)/auth";
import { TopNavbar } from "@/components/top-navbar";
import { getSiteSettings, getNavLinks } from "@/lib/db/queries";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <Script
        src="https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js"
        strategy="beforeInteractive"
      />
      <DataStreamProvider>
        <Suspense fallback={<div className="flex h-dvh" />}>
          <SidebarWrapper>{children}</SidebarWrapper>
        </Suspense>
      </DataStreamProvider>
    </>
  );
}

async function SidebarWrapper({ children }: { children: React.ReactNode }) {
  const [session, cookieStore, siteSettings, navLinks] = await Promise.all([
    auth(),
    cookies(),
    getSiteSettings(),
    getNavLinks(),
  ]);
  const isCollapsed = cookieStore.get("sidebar_state")?.value !== "true";

  return (
    <SidebarProvider defaultOpen={!isCollapsed}>
      <TopNavbar
        siteName={siteSettings.siteName}
        siteLogo={siteSettings.siteLogo || undefined}
        siteLogoDark={siteSettings.siteLogoDark || undefined}
        isAdmin={session?.user?.type === "admin"}
        customLinks={navLinks.map(link => ({
          id: link.id,
          name: link.name,
          url: link.url,
          order: link.order
        }))}
      />
      <div className="pt-14 flex h-full w-full overflow-hidden"> {/* Add padding-top for fixed navbar */}
        <AppSidebar user={session?.user} />
        <SidebarInset className="h-[calc(100vh-56px)]">{children}</SidebarInset> {/* Adjust height */}
      </div>
    </SidebarProvider>
  );
}