import type { ReactNode } from "react";

import { cookies } from "next/headers";
import { redirect } from "next/navigation";

import { DashboardUiPrefsHydrator } from "@/app/dashboard/_components/dashboard-ui-prefs-hydrator";
import { loadBackendUiPrefs } from "@/app/dashboard/settings/appearance/_lib/ui-prefs-server-api";
import { AppPoweredByFooter } from "@/components/layout/app-powered-by-footer";
import { AppSidebar } from "@/components/sidebar/dashboard/app-sidebar";
import { AccountSwitcher } from "@/components/sidebar/account-switcher";
import { LayoutControls } from "@/components/sidebar/layout-controls";
import { SearchDialog } from "@/components/sidebar/search-dialog";
import { ThemeSwitcher } from "@/components/sidebar/theme-switcher";
import { HeaderNotifications } from "@/components/sidebar/header-notifications";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { SIDEBAR_COLLAPSIBLE_VALUES, SIDEBAR_VARIANT_VALUES } from "@/lib/preferences/layout";
import { getDashboardSessionUser } from "@/lib/server/backend-session-user";
import { hasBackendSession } from "@/lib/server/require-backend-session";
import { cn } from "@/lib/utils";
import { getPreference } from "@/server/server-actions";

export default async function Layout({ children }: Readonly<{ children: ReactNode }>) {
  const cookieStore = await cookies();

  if (!(await hasBackendSession())) {
    redirect("/login");
  }

  const defaultOpen = cookieStore.get("sidebar_state")?.value !== "false";
  const [cookieVariant, cookieCollapsible, currentUser, uiPrefsResult] = await Promise.all([
    getPreference("sidebar_variant", SIDEBAR_VARIANT_VALUES, "inset"),
    getPreference("sidebar_collapsible", SIDEBAR_COLLAPSIBLE_VALUES, "icon"),
    getDashboardSessionUser(),
    loadBackendUiPrefs(),
  ]);

  const variant = uiPrefsResult.errorMessage
    ? cookieVariant
    : uiPrefsResult.uiPrefs.sidebar_variant;
  const collapsible = uiPrefsResult.errorMessage
    ? cookieCollapsible
    : uiPrefsResult.uiPrefs.sidebar_collapsible;

  return (
    <SidebarProvider
      defaultOpen={defaultOpen}
      className="h-svh max-h-svh overflow-hidden"
      style={
        {
          "--sidebar-width": "calc(var(--spacing) * 68)",
        } as React.CSSProperties
      }
    >
      <AppSidebar variant={variant} collapsible={collapsible} currentUser={currentUser} />
      <SidebarInset
        className={cn(
          "min-h-0 min-w-0 overflow-hidden",
          "max-h-svh",
          "md:peer-data-[variant=inset]:max-h-[calc(100svh-1rem)]",
          "[html[data-content-layout=centered]_&>header]:mx-auto",
          "[html[data-content-layout=centered]_&>header]:w-full",
          "[html[data-content-layout=centered]_&>header]:max-w-screen-2xl",
          "peer-data-[variant=inset]:border",
          "[--dashboard-header-height:--spacing(12)]",
        )}
      >
        <header
          className={cn(
            "flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12",
            "[html[data-navbar-style=sticky]_&]:sticky [html[data-navbar-style=sticky]_&]:top-0 [html[data-navbar-style=sticky]_&]:z-50 [html[data-navbar-style=sticky]_&]:overflow-hidden [html[data-navbar-style=sticky]_&]:rounded-t-[inherit] [html[data-navbar-style=sticky]_&]:bg-background/50 [html[data-navbar-style=sticky]_&]:backdrop-blur-md",
          )}
        >
          <div className="flex w-full items-center justify-between px-4 lg:px-6">
            <div className="flex items-center gap-1 lg:gap-2">
              <SidebarTrigger className="-ml-1" />
              <Separator
                orientation="vertical"
                className="mx-2 data-[orientation=vertical]:h-4 data-[orientation=vertical]:self-center"
              />
              <SearchDialog />
            </div>
            <div className="flex items-center gap-2">
              <HeaderNotifications />
              <LayoutControls audience="backend" />
              <ThemeSwitcher audience="backend" />
              {currentUser ? (
                <AccountSwitcher
                  user={{
                    name: currentUser.displayName || currentUser.email || "Admin",
                    email: currentUser.email,
                    avatar: "",
                  }}
                />
              ) : null}
            </div>
          </div>
        </header>
        <div
          className={cn(
            "flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden overflow-y-auto p-4 pb-6 lg:px-6 lg:pb-8 has-data-[content-padding=false]:p-0",
            "has-[[data-page-layout=full]]:overflow-hidden",
            "[html[data-content-layout=centered]_&]:mx-auto",
            "[html[data-content-layout=centered]_&]:w-full",
            "[html[data-content-layout=centered]_&]:max-w-screen-2xl",
            "[html[data-content-layout=centered]_&]:has-[[data-page-layout=full]]:mx-0",
            "[html[data-content-layout=centered]_&]:has-[[data-page-layout=full]]:max-w-none",
          )}
        >
          <DashboardUiPrefsHydrator userId={currentUser?.id ?? null} />
          {children}
        </div>
        <AppPoweredByFooter />
      </SidebarInset>
    </SidebarProvider>
  );
}