"use client";

import type { ComponentProps, CSSProperties, ReactNode } from "react";

import { AumModeHeaderBadge } from "@/app/customer/_components/aum-mode-header-badge";
import { ImpersonationBanner } from "@/app/customer/_components/impersonation-banner";
import { ImpersonationUsersSelector } from "@/app/customer/_components/impersonation-users-selector";
import { PortfolioScopeBanner } from "@/app/customer/_components/portfolio-scope-banner";
import { AppPoweredByFooter } from "@/components/layout/app-powered-by-footer";
import { AccountSwitcher, type HeaderUser } from "@/components/sidebar/account-switcher";
import { AppSidebar } from "@/components/sidebar/app-sidebar";
import { LayoutControls } from "@/components/sidebar/layout-controls";
import { SearchDialog } from "@/components/sidebar/search-dialog";
import { HoldingsSearchDialog } from "@/components/sidebar/holdings-search-dialog";
import { ThemeSwitcher } from "@/components/sidebar/theme-switcher";
import { Separator } from "@/components/ui/separator";
import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import type { ImpersonationType } from "@/lib/auth/logout-client";
import { cn } from "@/lib/utils";

import type { CustomerNavigationPayload } from "@/navigation/sidebar/dynamic-sidebar";

type DashboardSidebarShellProps = {
  children: ReactNode;
  defaultOpen: boolean;
  variant: ComponentProps<typeof AppSidebar>["variant"];
  collapsible: ComponentProps<typeof AppSidebar>["collapsible"];
  sessionUser?: HeaderUser | null;
  impersonated?: boolean;
  impersonationType?: ImpersonationType | null;
  impersonationOwnerName?: string | null;
  navigation?: CustomerNavigationPayload;
  allowedRoutes?: readonly string[];
  customerTenant?: string | null;
  canUsePortfolioScope?: boolean;
};

export function DashboardSidebarShell({
  children,
  defaultOpen,
  variant,
  collapsible,
  sessionUser,
  impersonated = false,
  impersonationType = null,
  impersonationOwnerName = null,
  navigation,
  allowedRoutes,
  customerTenant = null,
  canUsePortfolioScope = false,
}: DashboardSidebarShellProps) {
  return (
    <SidebarProvider
      defaultOpen={defaultOpen}
      className="h-svh max-h-svh overflow-hidden"
      style={
        {
          "--sidebar-width": "calc(var(--spacing) * 68)",
        } as CSSProperties
      }
    >
      <AppSidebar
        variant={variant}
        collapsible={collapsible}
        sessionUser={sessionUser}
        impersonated={impersonated}
        impersonationType={impersonationType}
        navigation={navigation}
        allowedRoutes={allowedRoutes}
        customerTenant={customerTenant}
      />
      <SidebarInset
        className={cn(
          "min-h-0 min-w-0 overflow-hidden",
          // Pin shell to the viewport so the powered-by footer stays visible.
          "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)]",
        )}
      >
        {customerTenant ? (
          <>
            <ImpersonationBanner
              tenant={customerTenant}
              impersonated={impersonated}
              impersonationType={impersonationType}
              impersonationOwnerName={impersonationOwnerName}
            />
            <PortfolioScopeBanner tenant={customerTenant} canUsePortfolioScope={canUsePortfolioScope} />
          </>
        ) : null}
        <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 tenant={customerTenant} navigation={navigation} allowedRoutes={allowedRoutes} />
              {customerTenant ? (
                <HoldingsSearchDialog
                  tenant={customerTenant}
                  navigation={navigation}
                  allowedRoutes={allowedRoutes}
                />
              ) : null}
            </div>
            <div className="flex items-center gap-2">
              {customerTenant ? (
                <ImpersonationUsersSelector canUsePortfolioScope={canUsePortfolioScope} />
              ) : null}
              {customerTenant ? <AumModeHeaderBadge tenant={customerTenant} /> : null}
              <LayoutControls tenant={customerTenant} />
              <ThemeSwitcher tenant={customerTenant} />
              {sessionUser ? (
                <AccountSwitcher
                  user={sessionUser}
                  tenant={customerTenant}
                  impersonated={impersonated}
                  impersonationType={impersonationType}
                />
              ) : 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",
            "[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",
            "has-[[data-page-layout=viewport]]:min-h-0 has-[[data-page-layout=viewport]]:overflow-hidden",
          )}
        >
          {children}
        </div>
        <AppPoweredByFooter />
      </SidebarInset>
    </SidebarProvider>
  );
}