"use client"

/**
 * AppSidebar — single-column nav matching the design reference:
 * Exxat One header, primary links, "Documents" group, utilities, user.
 *
 * Collapsed (icon) chrome is driven only by CSS (`group-data-[collapsible=icon]:…`)
 * on the ancestor from `ui/sidebar` — the same DOM is always rendered so Radix
 * `useId()` order matches between SSR and hydration (fixes downstream menus).
 */

import * as React from "react"
import { Link, useNavigate } from "react-router"
import { useLocation } from "react-router"
import { motion, useReducedMotion } from "motion/react"

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "../ui/collapsible"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
  PRODUCT_SWITCHER_MENU_SURFACE_CLASS,
  SHELL_IDENTITY_MENU_SURFACE_CLASS,
  Shortcut,
} from "../ui/dropdown-menu"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "../ui/popover"
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarMenuSeparator,
  SidebarTrigger,
  useRegisterNavFlyoutToggle,
  useSidebar,
} from "../ui/sidebar"
import { SidebarNavLabel } from "../ui/sidebar"
import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar"
import { Badge } from "../ui/badge"
import { StatusBadge } from "../ui/status-badge"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "../ui/tooltip"
import { cn } from "../../lib/utils"
import { Button } from "../ui/button"
import { Tip } from "../ui/tip"
import { Kbd, KbdGroup } from "../ui/kbd"
import { useModKeyLabel } from "../../hooks/use-mod-key-label"
import { useAppShellSlots } from "./app-shell-slots"
import { useLocationHash } from "../../hooks/use-location-hash"
import { useSidebarReflowZoom } from "../../hooks/use-sidebar-reflow-zoom"
import {
  SIDEBAR_DRILL_IN_WIDTH_MAX,
  SIDEBAR_DRILL_IN_WIDTH_MIN,
  SIDEBAR_PRIMARY_WIDTH_MAX,
  SIDEBAR_PRIMARY_WIDTH_MIN,
  useSidebarDrillInWidth,
  useSidebarPrimaryWidth,
} from "../../hooks/use-sidebar-drill-in-width"
import { useProduct, type Product } from "./product-context"
import { useShellLayout } from "../../hooks/shell-layout-context"
import {
  movesSidebarHeaderToBar,
  showsProductInSidebar,
  showsProfileInSidebar,
  showsScopeInSidebar,
} from "../../lib/shell-layout"
import { productSlug } from "@exxatdesignux/product-framework"
import { useSecondaryPanel } from "./secondary-panel"
import { NavUser } from "./nav-user"
import { SidebarDrillIn } from "../ui/sidebar-drill-in"
import { SidebarRailResizeHandle } from "./sidebar-drill-in-resize-handle"
import { motionHeaderEnter } from "../../lib/motion-ui"
import { createNavActiveState, type NavActiveState } from "../../lib/nav-active-state"
import type {
  NavDrillInConfig,
  NavLinkItem,
  NavSecondaryItem,
  NavSection,
} from "./nav-render-types"
import { navUrlPath } from "../../lib/nav-active"
/**
 * Which row is highlighted, resolved from the nav the app registered.
 *
 * The rules live in `@exxatdesignux/ui/lib/nav-active-state`; what stays here is
 * getting them to the ~15 row components that ask. A context rather than a
 * parameter because the answer depends on the *whole* URL corpus, so every row
 * has to consult the same instance or two rows can both think they won.
 *
 * The empty default is for rows rendered outside `AppSidebar` (tests, previews):
 * nothing is highlighted, rather than a crash.
 */
const NavActiveContext = React.createContext<NavActiveState>(
  createNavActiveState({ urls: [] }),
)

function useNavActive(): NavActiveState {
  return React.useContext(NavActiveContext)
}

/** Accessible suffix for sidebar badges (badge is rendered outside the link node). */
function badgeAccessibleSuffix(badge: number | string): string {
  if (typeof badge === "number") return `${badge} items`
  return String(badge)
}

function NavItemBadgeContent({ badge }: { badge: number | string }) {
  if (typeof badge === "number") {
    return (
      <Badge className="h-4 min-w-4 px-1 text-xs leading-none font-semibold rounded-full tabular-nums border-transparent bg-destructive text-destructive-foreground hover:bg-destructive">
        {badge}
      </Badge>
    )
  }
  if (badge === "New") return <StatusBadge status="new" />
  if (badge === "Beta") return <StatusBadge status="beta" />
  return (
    <Badge className="h-4 px-1.5 text-xs leading-none font-semibold rounded-full">
      {badge}
    </Badge>
  )
}

/** Child row for expandable nav items — shared by inline sub-menu and collapsed-rail popover. */
const SidebarNavChildLink = React.forwardRef<
  HTMLAnchorElement,
  {
    parent: NavLinkItem
    child: NavLinkItem
    pathname: string
    locationHash: string
    onNavigate?: () => void
    /** Inline sub-menu pins badge on `SidebarMenuSubItem`; flyout keeps badge in-row. */
    hideBadge?: boolean
    /** Popover uses surface tokens; inline sub-menu uses `SidebarMenuSubButton`. */
    linkClassName?: string
  } & Omit<React.ComponentPropsWithoutRef<typeof Link>, "to">
>(function SidebarNavChildLink(
  {
    parent,
    child,
    pathname,
    locationHash,
    onNavigate,
    hideBadge = false,
    linkClassName,
    className: incomingClassName,
    onClick,
    ...linkRest
  },
  ref,
) {
  const { openPanel } = useSecondaryPanel()
  const childActive = useNavActive().isChildActive(pathname, parent, child, locationHash)
  const childPath = navUrlPath(child.url)

  return (
    <Link
      ref={ref}
      to={child.url}
      className={cn(
        "flex w-full min-w-0 items-center gap-2",
        linkClassName,
        incomingClassName,
      )}
      aria-current={childActive ? "page" : undefined}
      aria-label={
        child.badge !== undefined
          ? `${child.title}, ${badgeAccessibleSuffix(child.badge)}`
          : undefined
      }
      onClick={e => {
        onNavigate?.()
        if (parent.secondaryPanel && !child.url.includes("#")) {
          const panelId = parent.secondaryPanel
          // Same-route only — first navigation to `/library/all` opens the panel
          // from `library/_layout.tsx` after the URL updates (avoids pathname race).
          if (pathname === childPath) {
            e.preventDefault()
            openPanel(panelId)
          }
        }
        onClick?.(e)
      }}
      {...linkRest}
    >
      <span className="size-4 shrink-0 inline-flex items-center justify-center" aria-hidden="true">
        {childActive && child.iconActive ? child.iconActive : child.icon}
      </span>
      <SidebarNavLabel>{child.title}</SidebarNavLabel>
      {!hideBadge && child.badge !== undefined ? (
        <span className="ms-auto shrink-0" aria-hidden="true">
          <NavItemBadgeContent badge={child.badge} />
        </span>
      ) : null}
    </Link>
  )
})
SidebarNavChildLink.displayName = "SidebarNavChildLink"

/** Inline sub-menu row — badge pinned to far end (same contract as `SidebarMenuBadge`). */
function SidebarNavSubMenuRow({
  parent,
  child,
  pathname,
  locationHash,
}: {
  parent: NavLinkItem
  child: NavLinkItem
  pathname: string
  locationHash: string
}) {
  const childActive = useNavActive().isChildActive(pathname, parent, child, locationHash)

  return (
    <SidebarMenuSubItem>
      <SidebarMenuSubButton asChild isActive={childActive} className="min-w-0 flex-1">
        <SidebarNavChildLink
          parent={parent}
          child={child}
          pathname={pathname}
          locationHash={locationHash}
          hideBadge
        />
      </SidebarMenuSubButton>
      {child.badge !== undefined ? (
        <span
          aria-hidden="true"
          data-sidebar="nav-sub-badge"
          className="me-2 shrink-0 self-center"
        >
          <NavItemBadgeContent badge={child.badge} />
        </span>
      ) : null}
    </SidebarMenuSubItem>
  )
}

/** Nested collapsible inside an expanded parent sub-menu (e.g. Compliance under Program). */
function CollapsibleNavSubItem({
  item,
  pathname,
}: {
  item: NavLinkItem
  pathname: string
}) {
  const locationHash = useLocationHash()
  const navActive = useNavActive()
  const isAnyNestedActive =
    item.children?.some((child) => navActive.isChildActive(pathname, item, child, locationHash)) ??
    false
  const parentMenuButtonActive = navActive.isParentActive(pathname, item, locationHash)
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    setOpen(isAnyNestedActive)
  }, [isAnyNestedActive, pathname, locationHash])

  if (!item.children?.length) return null

  return (
    <Collapsible open={open} onOpenChange={setOpen} asChild>
      <SidebarMenuSubItem className="group/collapsible-sub flex-col !items-stretch">
        <CollapsibleTrigger asChild>
          <SidebarMenuSubButton isActive={parentMenuButtonActive} className="w-full min-w-0">
            <span className="flex size-4 shrink-0 items-center justify-center" aria-hidden="true">
              {parentMenuButtonActive && item.iconActive ? item.iconActive : item.icon}
            </span>
            <SidebarNavLabel>{item.title}</SidebarNavLabel>
            <span
              className="ms-auto flex size-4 shrink-0 items-center justify-center"
              aria-hidden="true"
            >
              <i
                className="fa-light fa-chevron-right text-xs text-current transition-transform duration-200 ease-out group-data-[state=open]/collapsible-sub:rotate-90 motion-reduce:transition-none"
                aria-hidden="true"
              />
            </span>
          </SidebarMenuSubButton>
        </CollapsibleTrigger>
        <CollapsibleContent className="w-full overflow-hidden data-[state=open]:[animation:collapsible-down_200ms_ease-out] data-[state=closed]:[animation:collapsible-up_200ms_ease-out] motion-reduce:animate-none">
          <SidebarMenuSub>
            {item.children.map((child) => (
              <SidebarNavSubMenuRow
                key={child.key}
                parent={item}
                child={child}
                pathname={pathname}
                locationHash={locationHash}
              />
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuSubItem>
    </Collapsible>
  )
}

function collectFlyoutLinks(
  parent: NavLinkItem,
): { parent: NavLinkItem; child: NavLinkItem }[] {
  const links: { parent: NavLinkItem; child: NavLinkItem }[] = []
  for (const child of parent.children ?? []) {
    if (child.children?.length) {
      for (const grandchild of child.children) {
        links.push({ parent: child, child: grandchild })
      }
    } else {
      links.push({ parent, child })
    }
  }
  return links
}

/**
 * CollapsibleNavItem — isolated component so each collapsible has its own
 * controlled `open` state initialised in useEffect. This avoids the Radix
 * hydration mismatch caused by `defaultOpen` resolving differently on the
 * server (SSR) vs the client (navigate not yet available).
 */
function CollapsibleNavItem({ item, pathname }: { item: NavLinkItem; pathname: string }) {
  const locationHash = useLocationHash()
  const navActive = useNavActive()
  const isAnyChildActive =
    item.children?.some(c => navActive.isChildActive(pathname, item, c, locationHash)) ?? false
  const parentMenuButtonActive = navActive.isParentActive(pathname, item, locationHash)
  const { secondaryFlyoutHidden, activePanel } = useSecondaryPanel()
  const { state, isMobile } = useSidebar()
  const [open, setOpen] = React.useState(false)
  const [flyoutOpen, setFlyoutOpen] = React.useState(false)
  const flyoutTitleId = React.useId()
  // Defer the icon-rail React-tree swap until AFTER the sidebar's CSS width
  // transition (`duration-200` in `packages/ui/src/components/ui/sidebar.tsx`)
  // has finished. The component returns a completely different tree per mode
  // — `<Collapsible>` (expanded) vs `<Popover>` (icon rail) — so a sync flip
  // unmounts every Radix Collapsible + tooltip + mounts every Radix Popover
  // (with floating-ui, focus traps, portals) right at frame 0 of the toggle.
  // That ~30–80 ms of synchronous React + Radix work blocks the main thread
  // exactly while the browser is starting to interpolate width, which is the
  // dominant cause of "the sidebar feels sluggish" everywhere in the app.
  //
  // Strategy:
  //   • Expanding (collapsed → expanded): flip immediately so labels appear
  //     as the rail widens — anything else feels delayed.
  //   • Collapsing (expanded → collapsed): wait DEFER_MS so the rail visibly
  //     slides closed first, then swap the primitives inside an already-
  //     narrowed rail. CSS hides the labels + sub-list during this window
  //     (`group-data-[collapsible=icon]:hidden` + `size-8!`), so the user
  //     never sees the still-mounted Collapsible tree peeking through.
  const targetIconRail = state === "collapsed" && !isMobile
  const [iconRailCollapsed, setIconRailCollapsed] = React.useState(targetIconRail)
  React.useEffect(() => {
    if (!targetIconRail) {
      setIconRailCollapsed((prev) => (prev === false ? prev : false))
      return
    }
    // 200ms CSS transition + 20ms commit buffer.
    const t = setTimeout(() => setIconRailCollapsed(true), 220)
    return () => clearTimeout(t)
  }, [targetIconRail])
  // In the icon rail the parent icon is the ONLY visible thing for this item
  // (no sub-list, no labels) — so it must reflect "I'm somewhere inside this
  // section" by lighting up on any descendant route (e.g. `/library/all`),
  // not only on the parent URL itself. In the expanded view we keep the
  // parent neutral and let the active child row carry `data-active` (see
  // `isParentActive`).
  const iconRailActive = isAnyChildActive
  const triggerIcon =
    (iconRailCollapsed ? iconRailActive : parentMenuButtonActive) && item.iconActive
      ? item.iconActive
      : item.icon

  const navRouteKey = `${pathname}|${locationHash}|${isAnyChildActive}`
  const prevNavRouteKeyRef = React.useRef(navRouteKey)
  React.useEffect(() => {
    if (navRouteKey === prevNavRouteKeyRef.current) return
    prevNavRouteKeyRef.current = navRouteKey
    setOpen(isAnyChildActive)
    setFlyoutOpen(false)
  }, [navRouteKey, isAnyChildActive])

  /** Expand parent when scope nav is open (desktop rail or flyout Main menu). */
  React.useEffect(() => {
    const scopePanelOpen =
      item.secondaryPanel != null && activePanel === item.secondaryPanel
    if (isAnyChildActive && (secondaryFlyoutHidden || scopePanelOpen)) {
      setOpen(true)
    }
  }, [secondaryFlyoutHidden, isAnyChildActive, activePanel, item.secondaryPanel])

  if (!item.children?.length) return null

  /** Icon rail: sub-list is hidden — open a flyout. Also avoids `CollapsibleTrigger asChild` on `SidebarMenuButton` with `tooltip` (extra `Tooltip` root breaks Radix `Slot`). */
  if (iconRailCollapsed) {
    return (
      <SidebarMenuItem>
        <Popover
          open={flyoutOpen}
          onOpenChange={next => {
            setFlyoutOpen(next)
          }}
        >
          <Tooltip>
            <TooltipTrigger asChild>
              <PopoverTrigger asChild>
                <SidebarMenuButton
                  isActive={iconRailActive}
                  aria-current={iconRailActive ? "page" : undefined}
                  aria-haspopup="dialog"
                  aria-label={`${item.title} — open subpages`}
                >
                  <span
                    key={iconRailActive ? "active" : "idle"}
                    className={cn(
                      "size-4 shrink-0 flex items-center justify-center",
                      iconRailActive &&
                        "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                    )}
                    aria-hidden="true"
                  >
                    {triggerIcon}
                  </span>
                  <span className="sr-only">{item.title}</span>
                </SidebarMenuButton>
              </PopoverTrigger>
            </TooltipTrigger>
            <TooltipContent side="right" align="center">
              {item.title}
            </TooltipContent>
          </Tooltip>
          <PopoverContent
            className="w-64 p-1"
            side="right"
            align="start"
            sideOffset={8}
            aria-labelledby={flyoutTitleId}
          >
            <h2 id={flyoutTitleId} className="sr-only">
              {item.title}
            </h2>
            <ul className="flex flex-col gap-0.5">
              {collectFlyoutLinks(item).map(({ parent: linkParent, child }) => {
                const childActive = navActive.isChildActive(pathname, linkParent, child, locationHash)
                return (
                  <li key={`${linkParent.key}-${child.key}`}>
                    <SidebarNavChildLink
                      parent={linkParent}
                      child={child}
                      pathname={pathname}
                      locationHash={locationHash}
                      onNavigate={() => setFlyoutOpen(false)}
                      linkClassName={cn(
                        "flex min-h-8 w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none ring-ring",
                        "text-popover-foreground hover:bg-accent hover:text-accent-foreground",
                        "focus-visible:ring-2",
                        childActive && "bg-accent font-medium text-accent-foreground",
                      )}
                    />
                  </li>
                )
              })}
            </ul>
          </PopoverContent>
        </Popover>
      </SidebarMenuItem>
    )
  }

  return (
    <Collapsible
      open={open}
      onOpenChange={next => {
        setOpen(next)
      }}
      asChild
    >
      {/* `group/collapsible` lets descendant utilities react to the
          Radix `data-state` (e.g. chevron rotate, content slide). Radix's
          asChild merges the data-state onto this `<SidebarMenuItem>`. */}
      <SidebarMenuItem className="group/collapsible">
        <SidebarMenuButton
          asChild
          isActive={parentMenuButtonActive}
          tooltip={item.title}
        >
          <CollapsibleTrigger>
            <span
              key={parentMenuButtonActive ? "active" : "idle"}
              className={cn(
                "size-4 shrink-0 flex items-center justify-center",
                parentMenuButtonActive &&
                  "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
              )}
              aria-hidden="true"
            >
              {triggerIcon}
            </span>
            <SidebarNavLabel>{item.title}</SidebarNavLabel>
            <span
              className="ms-auto flex size-4 shrink-0 items-center justify-center"
              aria-hidden="true"
            >
              <i
                className="fa-light fa-chevron-right text-xs text-current transition-transform duration-200 ease-out group-data-[state=open]/collapsible:rotate-90 motion-reduce:transition-none"
                aria-hidden="true"
              />
            </span>
          </CollapsibleTrigger>
        </SidebarMenuButton>
        {/* Slide the children open/closed using Radix's
            `--radix-collapsible-content-height` CSS variable. `overflow-hidden`
            is required so the height clip is visible during the animation.
            Keyframes defined in `app/globals.css` (`collapsible-down/up`). */}
        <CollapsibleContent className="overflow-hidden group-data-[collapsible=icon]:hidden data-[state=open]:[animation:collapsible-down_200ms_ease-out] data-[state=closed]:[animation:collapsible-up_200ms_ease-out] motion-reduce:animate-none">
          <SidebarMenuSub>
            {item.children.map(child => {
              if (child.children?.length && child.children.length <= 40) {
                return (
                  <CollapsibleNavSubItem key={child.key} item={child} pathname={pathname} />
                )
              }

              return (
                <SidebarNavSubMenuRow
                  key={child.key}
                  parent={item}
                  child={child}
                  pathname={pathname}
                  locationHash={locationHash}
                />
              )
            })}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  )
}

function NavLinkItems({ items, pathname }: { items: NavLinkItem[]; pathname: string }) {
  const { activePanel, openPanel, closePanel, secondaryFlyoutHidden, showSecondaryFlyout } =
    useSecondaryPanel()
  const { dismissNavFlyout, state, isMobile } = useSidebar()
  const locationHash = useLocationHash()
  const navActive = useNavActive()
  const iconRailCollapsed = state === "collapsed" && !isMobile
  return (
    <>
      {items.map(item => {
        // Large child sets (>40) skip the collapsible/flyout pattern and navigate
        // to a full page instead — prevents overwhelming the sidebar.
        const childCount = item.children?.length ?? 0
        if (childCount > 0 && childCount <= 40) {
          return <CollapsibleNavItem key={item.key} item={item} pathname={pathname} />
        }

        const isActive = navActive.isRowActive(pathname, item.url, locationHash)
        const itemPath = navUrlPath(item.url)
        const linkAriaLabel =
          item.badge !== undefined
            ? `${item.title}, ${badgeAccessibleSuffix(item.badge)}`
            : iconRailCollapsed
              ? item.title
              : undefined
        return (
          <SidebarMenuItem key={item.key}>
            <SidebarMenuButton asChild isActive={isActive} tooltip={item.title}>
              <Link
                to={item.url}
                aria-current={isActive ? "page" : undefined}
                {...(linkAriaLabel ? { "aria-label": linkAriaLabel } : {})}
                onClick={e => {
                  // Reopen the panel when the user clicks a panel-driving row
                  // while ALREADY on its route — react-router `<Link>` does not
                  // navigate to the same URL, so without this the panel could
                  // stay closed (e.g. after the user collapsed it manually).
                  // On first click (different route), default navigation runs
                  // and the route's `useAutoPanel` opens the panel itself.
                  if (
                    item.secondaryPanel &&
                    itemPath &&
                    pathname === itemPath &&
                    !item.url.includes("#")
                  ) {
                    e.preventDefault()
                    if (
                      secondaryFlyoutHidden &&
                      activePanel === item.secondaryPanel
                    ) {
                      showSecondaryFlyout()
                    } else {
                      openPanel(item.secondaryPanel)
                    }
                  }
                  // Leaf navigation — close mobile / high-zoom flyout. Skip rows
                  // that open a drill-in stack so the user can pick a section item.
                  if (!item.drillIn && !item.secondaryPanel) {
                    dismissNavFlyout()
                  }
                  // Leaving a hub with a nested scope rail (Library) — drop panel state.
                  if (!item.secondaryPanel && activePanel) {
                    closePanel({ mainSidebar: "leave" })
                  }
                }}
              >
                <span
                  key={isActive ? "active" : "idle"}
                  className={cn(
                    "size-4 shrink-0 flex items-center justify-center",
                    isActive &&
                      "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                  )}
                  aria-hidden="true"
                >
                  {isActive && item.iconActive ? item.iconActive : item.icon}
                </span>
                <SidebarNavLabel>{item.title}</SidebarNavLabel>
                {item.badge !== undefined ? (
                  <span className="ms-auto shrink-0" aria-hidden="true">
                    <NavItemBadgeContent badge={item.badge} />
                  </span>
                ) : null}
              </Link>
            </SidebarMenuButton>
            {item.badge !== undefined ? (
              /* Dot indicator — visible only when sidebar is collapsed */
              <span
                aria-hidden="true"
                className={cn(
                  "absolute top-1 right-1 size-2 rounded-full hidden group-data-[collapsible=icon]:block",
                  typeof item.badge === "number" ? "bg-destructive"
                    : item.badge === "New" ? "bg-brand"
                    : item.badge === "Beta" ? "bg-[var(--insight-severity-warning)]"
                    : "bg-primary"
                )}
              />
            ) : null}
          </SidebarMenuItem>
        )
      })}
    </>
  )
}

/**
 * Classic sidebar (`sidebar-classic`): Ask Leo + Search + Notifications at the
 * top of primary nav; Settings / Help + profile in `SidebarFooter`.
 * Utility-bar layouts move these actions to `UtilityBarSlot` instead.
 */

/** Expanded classic sidebar: Ask Leo (labeled) + Search / Notifications icon-only in one row. */
function SidebarQuickActions({ pathname }: { pathname: string }) {
  const { state, isMobile } = useSidebar()
  const mod = useModKeyLabel()
  const { slots, on, data } = useAppShellSlots()
  const Notifications = slots.Notifications
  const askLeoPanelOpen = on.askLeoOpen ?? false
  const quickActions = data.useNav().quickActions
  const askLeo = quickActions.find((item) => item.opensAskLeo)
  const search = quickActions.find((item) => item.opensCommandMenu)

  if (state === "collapsed" && !isMobile) {
    return (
      <SidebarNavSecondaryItems
        items={quickActions}
        pathname={pathname}
        iconOnly
      />
    )
  }

  if (!askLeo || !search) {
    return <SidebarNavSecondaryItems items={quickActions} pathname={pathname} />
  }

  const searchTooltip = (
    <span className="inline-flex items-center gap-1.5">
      Search
      <KbdGroup>
        <Kbd>{mod}</Kbd>
        <Kbd>K</Kbd>
      </KbdGroup>
    </span>
  )

  return (
    <SidebarMenuItem>
      <div
        role="toolbar"
        aria-label="Quick actions"
        className="flex w-full min-w-0 items-center gap-0.5"
      >
        <SidebarMenuButton
          type="button"
          isActive={askLeoPanelOpen}
          tooltip={askLeo.title}
          className="min-h-8 min-w-0 flex-1 justify-start"
          onClick={() => on.setAskLeoOpen?.(true)}
        >
          <span className="flex size-4 shrink-0 items-center justify-center" aria-hidden="true">
            {askLeo.icon}
          </span>
          <SidebarNavLabel>{askLeo.title}</SidebarNavLabel>
        </SidebarMenuButton>

        <SidebarMenuButton
          type="button"
          tooltip={searchTooltip}
          aria-label="Search"
          className="!size-8 !min-h-8 !max-h-8 !w-8 !min-w-8 !max-w-8 aspect-square shrink-0 justify-center gap-0 p-0"
          onClick={() => on.openCommandMenu?.()}
        >
          <span className="flex size-4 items-center justify-center" aria-hidden="true">
            {search.icon}
          </span>
        </SidebarMenuButton>
        <Shortcut keys={`${mod}K`} onInvoke={() => on.openCommandMenu?.()} />

        {Notifications ? (
          <Notifications className="!size-8 !min-h-8 !max-h-8 !w-8 shrink-0" />
        ) : null}
      </div>
    </SidebarMenuItem>
  )
}

/** Utilities-style rows (⌘K, Ask Leo, Settings, …) — shared by quick actions + bottom group. */
function SidebarNavSecondaryItems({
  items,
  pathname,
  iconOnly = false,
}: {
  items: NavSecondaryItem[]
  pathname: string
  /** Collapsed icon rail — label + shortcut hints hidden. */
  iconOnly?: boolean
}) {
  const mod = useModKeyLabel()
  const locationHash = useLocationHash()
  const navActive = useNavActive()
  const { slots, on } = useAppShellSlots()
  const Notifications = slots.Notifications
  const askLeoPanelOpen = on.askLeoOpen ?? false
  const { dismissNavFlyout, state, isMobile } = useSidebar()
  const iconRailCollapsed = iconOnly || (state === "collapsed" && !isMobile)
  return (
    <>
      {items.map((item) => {
        if (item.key === "notifications") {
          return (
            <SidebarMenuItem key={item.key}>
              <div
                className={cn(
                  "flex w-full items-center",
                  iconRailCollapsed ? "justify-center" : "px-0",
                )}
              >
                {Notifications ? (
                  <Notifications
                    className={cn(
                      iconRailCollapsed
                        ? "!size-8"
                        : "min-h-8 w-full justify-start gap-2 px-2",
                    )}
                  />
                ) : null}
              </div>
            </SidebarMenuItem>
          )
        }

        const pathOnly = navUrlPath(item.url)
        const linkActive =
          !item.opensCommandMenu &&
          !item.opensAskLeo &&
          Boolean(pathOnly) &&
          pathOnly !== "#" &&
          (item.isActive?.(pathname) ??
            navActive.isRowActive(pathname, item.url, locationHash))

        return (
          <SidebarMenuItem key={item.key}>
            {item.opensCommandMenu ? (
              <SidebarMenuButton
                type="button"
                tooltip={item.title}
                isActive={false}
                onClick={() => on.openCommandMenu?.()}
              >
                <span className="size-4 shrink-0 flex items-center justify-center" aria-hidden="true">
                  {item.icon}
                </span>
                {!iconOnly ? <SidebarNavLabel>{item.title}</SidebarNavLabel> : null}
                {!iconOnly ? (
                  <KbdGroup className="ms-auto">
                    <Kbd>{mod}</Kbd>
                    <Kbd>K</Kbd>
                  </KbdGroup>
                ) : null}
              </SidebarMenuButton>
            ) : item.opensAskLeo ? (
              <SidebarMenuButton
                type="button"
                tooltip={item.title}
                isActive={askLeoPanelOpen}
                onClick={() => {
                  on.setAskLeoOpen?.(true)
                  dismissNavFlyout()
                }}
              >
                <span className="size-4 shrink-0 flex items-center justify-center" aria-hidden="true">
                  {item.icon}
                </span>
                {!iconOnly ? <SidebarNavLabel>{item.title}</SidebarNavLabel> : null}
              </SidebarMenuButton>
            ) : (
              <SidebarMenuButton asChild isActive={linkActive} tooltip={item.title}>
                <Link
                  to={item.url}
                  aria-current={linkActive ? "page" : undefined}
                  {...(iconRailCollapsed ? { "aria-label": item.title } : {})}
                  onClick={() => dismissNavFlyout()}
                >
                  <span
                    key={linkActive ? "active" : "idle"}
                    className={cn(
                      "size-4 shrink-0 flex items-center justify-center",
                      linkActive &&
                        "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                    )}
                    aria-hidden="true"
                  >
                    {linkActive && item.iconActive ? item.iconActive : item.icon}
                  </span>
                  {!iconOnly ? <SidebarNavLabel>{item.title}</SidebarNavLabel> : null}
                </Link>
              </SidebarMenuButton>
            )}
          </SidebarMenuItem>
        )
      })}
    </>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// TeamSwitcher — product-aware scope picker in the sidebar header
//
// The trigger is shell chrome and lives here: sidebar-density, two-line plus a
// size-8 avatar, collapsing to a bare logo on the icon rail. The scope *state*
// and the open menu's body are app-owned and arrive through the shell slots, so
// this file has no opinion about what a scope is beyond the fields in
// `ShellScope`. A session whose scope is fixed (a student) reads the same two
// lines with nothing to open.
// ─────────────────────────────────────────────────────────────────────────────

function TeamSwitcher() {
  const { state, isMobile } = useSidebar()
  const { product } = useProduct()

  // Each product has its own scope universe (NAV_SCHOOLS vs NAV_SITES). Keying
  // the inner state on `product` prevents stale NavSchool state from rendering
  // against NAV_SITES (or vice versa) when the product changes.
  return <TeamSwitcherInner key={product} product={product} state={state} isMobile={isMobile} />
}

function TeamSwitcherInner({
  product,
  state,
  isMobile,
}: {
  product: Product
  state: "expanded" | "collapsed"
  isMobile: boolean
}) {
  const { slots, data } = useAppShellSlots()
  const { ScopeSwitcherMenu } = slots
  const scopeBag = data.useScope(product)
  const { parent, child } = scopeBag

  const iconRailCollapsed = state === "collapsed" && !isMobile

  // Same reasoning as the utility bar's circle: nothing licensed here means
  // nothing to switch, and the page says why.
  if (scopeBag.status === "none") return null

  if (scopeBag.fixed && parent !== null && child !== null) {
    // The same row, minus the chevron and the press. On the icon rail only the
    // logo survives, so the names ride on it as an image label rather than in a
    // tooltip that would need a focus stop to open.
    return (
      <SidebarMenuItem>
        <div
          className={cn(
            "flex items-center gap-2 rounded-md p-2 text-sidebar-foreground",
            "group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:!p-0",
          )}
          {...(iconRailCollapsed ? { role: "img", "aria-label": scopeBag.ariaLabel } : {})}
        >
          <Avatar className="size-8 shrink-0">
            <AvatarImage
              src={parent.logo}
              alt=""
              referrerPolicy="origin"
              className="object-contain p-1 group-data-[collapsible=icon]:p-0.5"
            />
            <AvatarFallback className="bg-secondary text-xs font-bold text-secondary-foreground">
              {parent.initials}
            </AvatarFallback>
          </Avatar>
          <span className="flex min-w-0 flex-1 flex-col justify-center text-start text-sm leading-snug group-data-[collapsible=icon]:hidden">
            <span className="min-w-0 truncate font-medium">{child.name}</span>
            <span className="min-w-0 truncate text-xs text-muted-foreground">{parent.name}</span>
          </span>
        </div>
      </SidebarMenuItem>
    )
  }

  return (
    <SidebarMenuItem>
    <DropdownMenu onOpenChange={scopeBag.onOpenChange}>
      <Tooltip>
        <TooltipTrigger asChild>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              {...(iconRailCollapsed ? { "aria-label": scopeBag.ariaLabel } : {})}
              className={cn(
                "py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
                /* `size=lg` is `h-12` + `overflow-hidden` — two lines + avatar need more height */
                (state === "expanded" || isMobile) &&
                  "h-auto min-h-12 !overflow-visible items-center",
                "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center",
                /* Icon rail: default is `size-8` + `p-2` (~16px inner) — clips 32px avatars; center logo without chevron */
                "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!min-h-9 group-data-[collapsible=icon]:!max-h-9 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:overflow-visible",
              )}
            >
              {parent ? (
                <Avatar
                  className={cn(
                    "size-8 shrink-0",
                    /* Icon rail: same 36px frame as product mark + header button */
                    "group-data-[collapsible=icon]:h-8 group-data-[collapsible=icon]:w-8",
                  )}
                >
                  <AvatarImage
                    src={parent.logo}
                    alt=""
                    referrerPolicy="origin"
                    className="object-contain p-1 group-data-[collapsible=icon]:p-0.5"
                  />
                  <AvatarFallback className="text-xs font-bold bg-secondary text-secondary-foreground">
                    {parent.initials}
                  </AvatarFallback>
                </Avatar>
              ) : (
                <span
                  className="flex size-8 shrink-0 items-center justify-center rounded-full border border-dashed border-sidebar-border text-muted-foreground"
                  aria-hidden="true"
                >
                  <i className={cn(scopeBag.emptyIconClass, "text-xs")} />
                </span>
              )}
              <div
                className={cn(
                  "flex min-w-0 flex-1 flex-col justify-center text-start text-sm leading-snug",
                  "group-data-[collapsible=icon]:hidden",
                )}
              >
                <span className="min-w-0 font-medium">{scopeBag.label}</span>
                {parent ? (
                  <span className="min-w-0 text-xs text-muted-foreground">{parent.name}</span>
                ) : null}
              </div>
              {(state === "expanded" || isMobile) && (
                <span
                  className="ms-auto flex w-6 shrink-0 self-stretch items-center justify-center text-muted-foreground"
                  aria-hidden="true"
                >
                  <i className="fa-light fa-chevron-down block text-xs leading-none" aria-hidden="true" />
                </span>
              )}
            </SidebarMenuButton>
          </DropdownMenuTrigger>
        </TooltipTrigger>
        <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile}>
          {parent && child ? `${child.name} · ${parent.name}` : scopeBag.choosePrompt}
        </TooltipContent>
      </Tooltip>

      <DropdownMenuContent
        className={SHELL_IDENTITY_MENU_SURFACE_CLASS}
        align="start"
        side="right"
        sideOffset={8}
      >
        {ScopeSwitcherMenu ? <ScopeSwitcherMenu scope={scopeBag} /> : null}
      </DropdownMenuContent>
    </DropdownMenu>
    </SidebarMenuItem>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// Product logo (header) — expanded: full `ExxatProductLogo` + chevron; collapsed: `ExxatProductMark`
// only (32×32 like school Avatar), no chevron.
// ─────────────────────────────────────────────────────────────────────────────

// Exxat One ships as **two siblings** — see
// `apps/web/docs/multi-product-routing-pattern.md`. `scope` carries the
// disambiguator ("Schools" / "Sites") that the dropdown renders next to the
// shared "Exxat One" wordmark; `label` is the full accessible name used
// in `aria-label` and the collapsed-rail tooltip.

function ProductLogoButton() {
  const { customProducts } = useProduct()
  const { state, isMobile } = useSidebar()
  const { slots, data } = useAppShellSlots()
  const { ProductLogo, ProductMark, ProductSwitcherItems } = slots
  const current = data.useActiveProduct()
  const iconRail = state === "collapsed" && !isMobile
  const expandedOrMobile = state === "expanded" || isMobile

  return (
    <DropdownMenu>
      <Tooltip>
        <TooltipTrigger asChild>
          <DropdownMenuTrigger asChild>
            <SidebarMenuButton
              size="lg"
              className={cn(
                "py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
                expandedOrMobile &&
                  "h-auto min-h-12 !overflow-visible items-center [&>span:last-child]:!overflow-visible [&>span:last-child]:!whitespace-normal [&>span:last-child]:text-clip",
                "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center",
                iconRail &&
                  "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!min-h-9 group-data-[collapsible=icon]:!max-h-9 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:overflow-visible",
              )}
              aria-label={`Current product: ${current.label}. Switch product`}
              suppressHydrationWarning
            >
              {iconRail ? (
                // Match the school selector footprint in the icon rail (32px frame,
                // 28px mark — same visual weight as the avatar with inset padding).
                <span className="flex size-8 shrink-0 items-center justify-center">
                  {ProductMark ? (
                    <ProductMark
                      product={current.id}
                      previewCustomBrand={
                        current.customIndex !== undefined
                          ? customProducts[current.customIndex]
                          : undefined
                      }
                      className="size-7"
                    />
                  ) : null}
                </span>
              ) : (
                <span className="flex min-h-0 min-w-0 flex-1 items-center gap-2">
                  {/* Adaptive product lock-up. The `"sidebar"` variant runs
                      the A → B1 → B2 cascade based on the wordmark area's
                      width — full wordmark inline, suffix-only on one line,
                      or wrapped suffix up to 2 lines. Mark is always
                      visible. Scope chip is intentionally NOT rendered here
                      (Exxat One — Schools / Sites read identically in the
                      sidebar; the dropdown rows still show scope to
                      distinguish them). */}
                  {ProductLogo ? (
                    <ProductLogo
                      product={current.id}
                      variant="sidebar"
                      previewCustomBrand={
                        current.customIndex !== undefined
                          ? customProducts[current.customIndex]
                          : undefined
                      }
                      className="min-w-0 flex-1"
                    />
                  ) : null}
                  <span
                    className="flex w-6 shrink-0 items-center justify-center self-center text-muted-foreground"
                    aria-hidden="true"
                  >
                    <i
                      className="fa-light fa-chevron-down block text-xs leading-none"
                      aria-hidden="true"
                    />
                  </span>
                </span>
              )}
            </SidebarMenuButton>
          </DropdownMenuTrigger>
        </TooltipTrigger>
        {/* Tooltip fires in both states. In the collapsed rail it's the only
            way to discover the product name; in the expanded rail it's the
            wrap affordance for Lock-up B2 (when the suffix needs to wrap to
            2 lines, hover/focus surfaces the full `current.label` including
            the scope qualifier). */}
        <TooltipContent side="right" align="center">
          {current.label}
        </TooltipContent>
      </Tooltip>

      <DropdownMenuContent
        className={PRODUCT_SWITCHER_MENU_SURFACE_CLASS}
        align="start"
        side="right"
        sideOffset={8}
      >
        {ProductSwitcherItems ? <ProductSwitcherItems /> : null}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

// ─────────────────────────────────────────────────────────────────────────────
// AppSidebar
// ─────────────────────────────────────────────────────────────────────────────

/** Light header entrance — Motion (Animate UI–style open distribution: animate-ui.com/docs). */
function SidebarHeaderStack({ children }: { children: React.ReactNode }) {
  const reduceMotion = useReducedMotion()
  return (
    <motion.div
      className="flex flex-col"
      initial={reduceMotion ? false : { opacity: 0.88, y: -2 }}
      animate={{ opacity: 1, y: 0 }}
      transition={reduceMotion ? { duration: 0 } : motionHeaderEnter}
    >
      {children}
    </motion.div>
  )
}

/** Expand / collapse the primary rail — sidebar header (non–utility-bar layouts). */
function PrimarySidebarToggle() {
  const { state, isMobile } = useSidebar()
  const mod = useModKeyLabel()
  const collapsed = state === "collapsed" && !isMobile
  return (
    <SidebarMenuItem
      className={cn(
        "flex",
        collapsed ? "justify-center" : "justify-end",
      )}
    >
      <Tip
        side={collapsed ? "right" : "bottom"}
        label={
          <>
            <span>{collapsed ? "Expand sidebar" : "Collapse sidebar"}</span>
            <KbdGroup>
              <Kbd>{mod}</Kbd>
              <Kbd>B</Kbd>
            </KbdGroup>
          </>
        }
      >
        <SidebarTrigger
          className={cn(
            "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
            collapsed && "size-8",
          )}
        />
      </Tip>
    </SidebarMenuItem>
  )
}

/** Drilled-in section's nav rows — rendered inside `SidebarDrillIn`.
 *
 *  Active state uses **exact path + search compare** rather than the shared
 *  `isNavActive` prefix matcher because drilled-in items routinely share a
 *  pathname and disambiguate via `?param=value` (Tokens categories all live
 *  at `/tokens-themes` and pivot on `?category=…`). Prefix matching would
 *  light up every category row at once. Two items with distinct paths
 *  (e.g. `/settings/profile` vs `/settings/organization`) also work
 *  correctly because the search is `""` on both sides. */
function SidebarDrillInItems({
  items,
  pathname,
}: {
  items: NavLinkItem[]
  pathname: string
}) {
  const locationSearch = useLocation().search
  const currentHref = `${pathname}${locationSearch}`
  const { dismissNavFlyout, state, isMobile } = useSidebar()
  const { activePanel, closePanel } = useSecondaryPanel()
  const iconRailCollapsed = state === "collapsed" && !isMobile
  return (
    <SidebarMenu className="gap-0.5">
      {items.map(item => {
        const isActive = item.url === currentHref
        return (
          <SidebarMenuItem key={item.key}>
            <SidebarMenuButton asChild isActive={isActive} tooltip={item.title}>
              <Link
                to={item.url}
                aria-current={isActive ? "page" : undefined}
                {...(iconRailCollapsed ? { "aria-label": item.title } : {})}
                onClick={() => {
                  dismissNavFlyout()
                  if (activePanel) {
                    closePanel({ mainSidebar: "leave" })
                  }
                }}
              >
                <span
                  key={isActive ? "active" : "idle"}
                  className={cn(
                    "size-4 shrink-0 flex items-center justify-center",
                    isActive &&
                      "[animation:sidebar-icon-pop_380ms_cubic-bezier(0.34,1.56,0.64,1)_both]",
                  )}
                  aria-hidden="true"
                >
                  {isActive && item.iconActive ? item.iconActive : item.icon}
                </span>
                <SidebarNavLabel>{item.title}</SidebarNavLabel>
              </Link>
            </SidebarMenuButton>
          </SidebarMenuItem>
        )
      })}
    </SidebarMenu>
  )
}

/** Type-narrowing helper: returns the nav row IFF it carries a `drillIn`
 *  config whose `sectionRouteRoot` (or `sectionRouteMatch` override)
 *  matches the current pathname. */
function findActiveDrillInSection(
  rows: ReadonlyArray<NavLinkItem | NavSecondaryItem>,
  pathname: string,
): (NavLinkItem | NavSecondaryItem) & { drillIn: NavDrillInConfig } | undefined {
  for (const row of rows) {
    if (!row.drillIn) continue
    const match = row.drillIn.sectionRouteMatch
      ? row.drillIn.sectionRouteMatch(pathname)
      : pathname.startsWith(row.drillIn.sectionRouteRoot)
    if (match) {
      return row as (NavLinkItem | NavSecondaryItem) & { drillIn: NavDrillInConfig }
    }
  }
  return undefined
}

function NavPrimaryPreamble({
  items,
  pathname,
}: {
  items: NavLinkItem[]
  pathname: string
}) {
  if (items.length === 0) return null
  return <NavLinkItems items={items} pathname={pathname} />
}

function NavPrimaryEpilogue({
  items,
  pathname,
}: {
  items: NavLinkItem[]
  pathname: string
}) {
  if (items.length === 0) return null
  return (
    <SidebarGroup className="py-2 pt-0" role="group" aria-label="Primary">
      <SidebarGroupContent>
        <SidebarMenu className="gap-0.5">
          <NavLinkItems items={items} pathname={pathname} />
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}

function NavPrimarySectionGroup({
  section,
  pathname,
}: {
  section: NavSection
  pathname: string
}) {
  return (
    <SidebarGroup
      className="py-0 pt-0"
      role="group"
      aria-label={section.label.trim() || "Primary navigation"}
    >
      {section.label.trim() ? (
        <SidebarGroupLabel
          className="text-xs font-medium uppercase tracking-wide px-2 text-sidebar-section-label"
          suppressHydrationWarning
        >
          {section.label}
        </SidebarGroupLabel>
      ) : null}
      <SidebarGroupContent>
        <SidebarMenu className="gap-0.5">
          <NavLinkItems items={section.items} pathname={pathname} />
        </SidebarMenu>
      </SidebarGroupContent>
    </SidebarGroup>
  )
}

export function AppSidebar({ className, ...props }: React.ComponentProps<typeof Sidebar>) {
  const pathname = useLocation().pathname
  const navigate = useNavigate()
  const { isMobile, open, setOpen } = useSidebar()
  const reflowZoom = useSidebarReflowZoom()
  const { focusShellSupersedesPrimarySidebar } = useSecondaryPanel()
  const { variant: shellLayoutVariant } = useShellLayout()
  const { product } = useProduct()
  const { slots, data } = useAppShellSlots()
  // Per Rule 5 of the multi-product routing pattern: each product registers its
  // own primary nav. The app resolves the active product's tree; the sidebar
  // renders whatever comes back, so switching products swaps the whole tree
  // without this component knowing which products exist.
  const nav = data.useNav()
  const {
    primary: primaryNav,
    primaryLayout: primaryNavLayout,
    quickActions,
    documents,
    documentsLabel,
    secondary: secondaryNav,
  } = nav
  const isClassicSidebar = showsProfileInSidebar(shellLayoutVariant)

  const navActive = React.useMemo(
    () => createNavActiveState({ urls: nav.knownUrls, rowActive: nav.rowActive }),
    [nav.knownUrls, nav.rowActive],
  )

  // Drill-in detection. The URL is the source of truth — any nav row in
  // primary / documents / footer that carries a `drillIn` config + matches
  // the current pathname swaps the sidebar content area to a stacked
  // `[← Back] · <sectionTitle> · <items>` view via the `SidebarDrillIn`
  // primitive.
  const drillInSection = React.useMemo(
    () => findActiveDrillInSection(
      // Quick actions carry drill-ins too (the assistant row owns
      // `/<product>/leo`), so search every group rather than the primary tree
      // alone.
      [...quickActions, ...primaryNav, ...documents, ...secondaryNav],
      pathname,
    ),
    [quickActions, primaryNav, documents, secondaryNav, pathname],
  )
  const isDrilledIn = Boolean(drillInSection)
  // A drill-in row whose body the app draws instead of a row list. Absent for
  // most rows, which is the point: only the odd shapes need an entry.
  const customDrillIn = React.useMemo(
    () =>
      drillInSection
        ? slots.drillInPanels?.find(panel => panel.rowKey === drillInSection.key)
        : undefined,
    [slots.drillInPanels, drillInSection],
  )
  const navFlyout = isMobile || reflowZoom
  const widenSidebarForDrillIn = isDrilledIn && !navFlyout
  const showDrillInResize = widenSidebarForDrillIn && open
  const showPrimaryResize = open && !navFlyout && !isDrilledIn
  const { width: drillInWidth, setWidth: setDrillInWidth } =
    useSidebarDrillInWidth(widenSidebarForDrillIn)
  const { width: primaryWidth, setWidth: setPrimaryWidth } =
    useSidebarPrimaryWidth(showPrimaryResize)
  const drillInWidthRef = React.useRef(drillInWidth)
  const primaryWidthRef = React.useRef(primaryWidth)
  React.useLayoutEffect(() => {
    drillInWidthRef.current = drillInWidth
  }, [drillInWidth])
  React.useLayoutEffect(() => {
    primaryWidthRef.current = primaryWidth
  }, [primaryWidth])

  const handleDrillInNavFlyoutToggle = React.useCallback((): boolean => {
    if (!navFlyout || !isDrilledIn) return false
    setOpen((current) => !current, { persist: false })
    return true
  }, [navFlyout, isDrilledIn, setOpen])

  useRegisterNavFlyoutToggle(handleDrillInNavFlyoutToggle)

  const productDashboardHref = `/${productSlug(product)}/dashboard`
  const handleDrillInBack = React.useCallback(() => {
    navigate(productDashboardHref)
  }, [navigate, productDashboardHref])

  // Incidental sidebar state while drilled in — same contract as
  // `SidebarAutoCollapse`: visual only (`persist: false`), restore pre-visit
  // state on leave. Desktop drill-in expands the rail; flyout (mobile / ≥200%
  // zoom) stays closed until the user opens it explicitly.
  //
  // The assistant row used to get its own copy of this branch, identical except
  // that it skipped the focus-shell guard. Reaching that difference needs a
  // focus route that also matches a drill-in row, and none of the focus suffixes
  // sit under one, so the two collapse into this single branch.
  const openRef = React.useRef(open)
  const setOpenRef = React.useRef(setOpen)
  React.useLayoutEffect(() => {
    openRef.current = open
    setOpenRef.current = setOpen
  }, [open, setOpen])
  const savedOpenRef = React.useRef<boolean | null>(null)

  React.useEffect(() => {
    const rememberCurrentOpen = () => {
      if (savedOpenRef.current === null) {
        savedOpenRef.current = openRef.current
      }
    }

    if (isDrilledIn && !focusShellSupersedesPrimarySidebar) {
      rememberCurrentOpen()
      if (!navFlyout) {
        setOpenRef.current(true, { persist: false })
      } else {
        setOpenRef.current(false, { persist: false })
      }
      return
    }
    if (savedOpenRef.current !== null) {
      setOpenRef.current(savedOpenRef.current, { persist: false })
      savedOpenRef.current = null
    }
  }, [isDrilledIn, focusShellSupersedesPrimarySidebar, navFlyout])

  if (focusShellSupersedesPrimarySidebar) {
    return null
  }

  // Full-width bars own product, scope, and the expand/collapse toggle. The
  // mobile flyout still needs a visible Close (X) — Esc and the scrim remain,
  // but sighted users need an in-panel dismiss control (WCAG 2.1.1).
  const barOwnsHeaderChrome = movesSidebarHeaderToBar(shellLayoutVariant)
  const showFlyoutClose = isMobile || reflowZoom
  const showSidebarHeader = !barOwnsHeaderChrome || showFlyoutClose

  return (
    <NavActiveContext.Provider value={navActive}>
    <Sidebar
      collapsible="icon"
      className={className}
      {...props}
    >
      {/*
        Scroll ownership:
        - Desktop / normal height: primary rail scrolls in `SidebarContent`.
          Settings, Help, and profile no longer live here — they moved to the
          shell UtilityBarSlot (`apps/web/components/utility-bar-slot.tsx`).
        - Reflow / zoom / short viewport (`reflowZoom`): one scroll column on `<nav>`
          (WCAG 1.4.10).
        - Drill-in: section pane owns the full height.
      */}
      <nav
        aria-label="Application"
        data-exxat-sidebar="application-nav"
        data-reflow-zoom={reflowZoom ? "true" : "false"}
        data-drill-in-open={isDrilledIn ? "true" : undefined}
        className={cn(
          "relative flex min-h-0 flex-1 flex-col overflow-visible",
          // Scroll lives on `SidebarContent` / drill-in panes — keep this shell
          // `overflow-visible` so the shadcn-style resize pill is not clipped.
          isDrilledIn
            ? "min-h-0"
            : reflowZoom
              ? "overflow-y-auto overflow-x-hidden overscroll-y-contain"
              : "min-h-0",
        )}
      >
        <SidebarContent
          className={cn(
            "gap-0 !overflow-visible",
            isDrilledIn
              ? "flex min-h-0 flex-1 flex-col overflow-hidden"
              : reflowZoom
                ? "!flex-none"
                : "min-h-0 flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain",
          )}
        >
          <SidebarDrillIn
            open={isDrilledIn}
            sectionTitle={
              customDrillIn?.hidesSectionTitle
                ? ""
                : (drillInSection?.drillIn.sectionTitle ?? "")
            }
            onBack={handleDrillInBack}
            baseContent={
              <>
                {showSidebarHeader ? (
                <SidebarHeader
                  className={cn(
                    "gap-1 p-0 pt-0",
                    barOwnsHeaderChrome && showFlyoutClose
                      ? "pb-0"
                      : "border-b border-sidebar-border pb-2",
                  )}
                >
                  {showFlyoutClose ? (
                    <div className="flex items-center justify-end px-1 pt-0.5">
                      <Tip label="Close navigation" side="bottom">
                        <Button
                          type="button"
                          variant="ghost"
                          size="icon-sm"
                          aria-label="Close navigation"
                          onClick={() => setOpen(false)}
                        >
                          <i className="fa-light fa-xmark text-sm" aria-hidden="true" />
                        </Button>
                      </Tip>
                    </div>
                  ) : null}
                  {!barOwnsHeaderChrome ? (
                  <SidebarHeaderStack>
                    <SidebarMenu className="gap-0.5">
                      <PrimarySidebarToggle />
                      {showsProductInSidebar(shellLayoutVariant) ? (
                        <>
                          <SidebarMenuItem>
                            <ProductLogoButton />
                          </SidebarMenuItem>
                          <SidebarMenuSeparator className="mx-0 my-1.5 group-data-[collapsible=icon]:mx-auto group-data-[collapsible=icon]:w-8" />
                        </>
                      ) : null}
                      {showsScopeInSidebar(shellLayoutVariant) ? <TeamSwitcher /> : null}
                    </SidebarMenu>
                  </SidebarHeaderStack>
                  ) : null}
                </SidebarHeader>
                ) : null}

                <SidebarGroup className="py-2" role="group" aria-label="Primary">
                  <SidebarGroupContent>
                    <SidebarMenu className="gap-0.5">
                      {isClassicSidebar ? <SidebarQuickActions pathname={pathname} /> : null}
                      <NavPrimaryPreamble items={primaryNavLayout.preamble} pathname={pathname} />
                    </SidebarMenu>
                  </SidebarGroupContent>
                </SidebarGroup>

                {primaryNavLayout.sections.map(section => (
                  <NavPrimarySectionGroup
                    key={section.key}
                    section={section}
                    pathname={pathname}
                  />
                ))}

                <NavPrimaryEpilogue items={primaryNavLayout.epilogue ?? []} pathname={pathname} />

                {documents.length > 0 ? (
                  <SidebarGroup className="py-2" role="group" aria-label={documentsLabel ?? "Documents"}>
                    <SidebarGroupLabel>{documentsLabel ?? "Documents"}</SidebarGroupLabel>
                    <SidebarGroupContent>
                      <SidebarMenu className="gap-0.5">
                        <NavPrimaryPreamble items={documents} pathname={pathname} />
                      </SidebarMenu>
                    </SidebarGroupContent>
                  </SidebarGroup>
                ) : null}
              </>
            }
          >
            {drillInSection ? (
              customDrillIn ? (
                <customDrillIn.Body />
              ) : (
                <SidebarDrillInItems
                  items={drillInSection.drillIn.items}
                  pathname={pathname}
                />
              )
            ) : null}
          </SidebarDrillIn>

          {/* Esc + Cmd/Ctrl+[ exit the drilled-in view. Bound only while
              drilled in so the chords don't shadow anything else app-wide.
              `useShortcut` already skips inputs/textareas/contenteditable
              and open dialogs, so Esc closes a Dialog first if one is up. */}
          {isDrilledIn && (
            <>
              <Shortcut keys="Escape" onInvoke={handleDrillInBack} />
              <Shortcut keys="Cmd+[" onInvoke={handleDrillInBack} />
              <Shortcut keys="Ctrl+[" onInvoke={handleDrillInBack} />
            </>
          )}
        </SidebarContent>

        {showsProfileInSidebar(shellLayoutVariant) && !isDrilledIn ? (
          <SidebarFooter className="shrink-0 border-t border-sidebar-border bg-sidebar">
            <SidebarGroup className="py-2" role="group" aria-label="Utilities">
              <SidebarGroupContent>
                <SidebarMenu className="gap-0.5">
                  <SidebarNavSecondaryItems items={secondaryNav} pathname={pathname} />
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
            <NavUser user={nav.user} />
          </SidebarFooter>
        ) : null}
        {showDrillInResize ? (
          <SidebarRailResizeHandle
            label="Resize drill-down navigation"
            widthPx={drillInWidth}
            getWidth={() => drillInWidthRef.current}
            onResizeTo={setDrillInWidth}
            valueMin={SIDEBAR_DRILL_IN_WIDTH_MIN}
            valueMax={SIDEBAR_DRILL_IN_WIDTH_MAX}
          />
        ) : null}
        {showPrimaryResize ? (
          <SidebarRailResizeHandle
            label="Resize primary navigation"
            widthPx={primaryWidth}
            getWidth={() => primaryWidthRef.current}
            onResizeTo={setPrimaryWidth}
            valueMin={SIDEBAR_PRIMARY_WIDTH_MIN}
            valueMax={SIDEBAR_PRIMARY_WIDTH_MAX}
          />
        ) : null}
      </nav>
    </Sidebar>
    </NavActiveContext.Provider>
  )
}