import { CaretDoubleLeft, CaretDoubleRight, DotsThree, X } from "@phosphor-icons/react";
import {
  createContext,
  isValidElement,
  useContext,
  useEffect,
  useRef,
  useState,
  type CSSProperties,
  type ReactNode,
} from "react";
import { createPortal } from "react-dom";
import { cn } from "../../lib/cn";
import { IconButton, Menu, type MenuItem } from "../actions";
import { PanelFooterRoutes, UhuruPanel, type PanelConfig } from "../layout/panel";
import {
  UhuruPanelRouteProvider,
  useUhuruPanelRoute,
} from "../navigation/panel-route-context";
import { UhuruPanelStateProvider } from "../panel-context";
import { Popover } from "../overlay";
import {
  UhuruAiPanelProvider,
  useAiPanelContext,
  type AiPanelPosition,
} from "./ai-panel-context";

type ResizablePanelProps = {
  ariaLabel?: string;
  children: ReactNode;
  className?: string;
  collapsed?: boolean;
  collapsedWidth?: number;
  defaultWidth: number;
  enabled?: boolean;
  expandOnHover?: boolean;
  showRail?: boolean;
  collapsible?: boolean;
  iconHoverAnimation?: "none" | "lift" | "slide" | "pulse";
  header?: ReactNode;
  collapsedHeader?: ReactNode;
  collapsedHeaderActions?: ReactNode;
  headerActions?: ReactNode;
  beforeFooter?: ReactNode;
  footer?: ReactNode;
  footerRoutes?: PanelConfig["footerRoutes"];
  maxWidth?: number;
  minWidth?: number;
  onToggleCollapsed?: () => void;
  onHoverExpandedChange?: (expanded: boolean) => void;
  style?: CSSProperties;
  side: "left" | "right";
};

function clampWidth(width: number, minWidth: number, maxWidth: number) {
  return Math.min(maxWidth, Math.max(minWidth, width));
}

function ResizablePanel({
  ariaLabel,
  children,
  className,
  collapsed = false,
  collapsedWidth = 64,
  defaultWidth,
  enabled = false,
  expandOnHover = false,
  showRail = true,
  collapsible = false,
  iconHoverAnimation = "none",
  collapsedHeader,
  collapsedHeaderActions,
  header,
  headerActions,
  beforeFooter,
  footer,
  footerRoutes,
  maxWidth = 480,
  minWidth = 220,
  onToggleCollapsed,
  onHoverExpandedChange,
  style,
  side,
}: ResizablePanelProps) {
  const [width, setWidth] = useState(clampWidth(defaultWidth, minWidth, maxWidth));
  const [hoverExpanded, setHoverExpanded] = useState(false);
  const [isResizing, setIsResizing] = useState(false);
  const draggingRef = useRef(false);

  useEffect(() => {
    function handleMove(event: PointerEvent) {
      if (!draggingRef.current || collapsed) {
        return;
      }

      const nextWidth =
        side === "left"
          ? clampWidth(event.clientX, minWidth, maxWidth)
          : clampWidth(window.innerWidth - event.clientX, minWidth, maxWidth);

      setWidth(nextWidth);
    }

    function handleUp() {
      draggingRef.current = false;
      setIsResizing(false);
      document.body.style.cursor = "";
      document.body.style.userSelect = "";
    }

    window.addEventListener("pointermove", handleMove);
    window.addEventListener("pointerup", handleUp);
    return () => {
      window.removeEventListener("pointermove", handleMove);
      window.removeEventListener("pointerup", handleUp);
    };
  }, [collapsed, maxWidth, minWidth, side]);

  const railVisible = showRail;
  const effectiveCollapsed = collapsed && !hoverExpanded;
  const hideRailCompletely = effectiveCollapsed && !railVisible && expandOnHover;
  const railWidth = effectiveCollapsed ? (railVisible ? collapsedWidth : 0) : width;
  const showPanelHeader = effectiveCollapsed
    ? Boolean(collapsedHeader || collapsedHeaderActions || collapsible)
    : Boolean(header || headerActions);

  useEffect(() => {
    onHoverExpandedChange?.(hoverExpanded);
  }, [hoverExpanded, onHoverExpandedChange]);

  return (
    <section
      aria-label={ariaLabel}
      className={cn(
        "relative flex h-full flex-col border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] will-change-[width]",
        isResizing ? "transition-none" : "transition-[width] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
        hideRailCompletely
          ? "overflow-visible border-transparent"
          : side === "left"
            ? "border-r"
            : "border-l",
        className,
      )}
      onMouseEnter={() => {
        if (expandOnHover && collapsed) setHoverExpanded(true);
      }}
      onMouseLeave={() => {
        if (expandOnHover) setHoverExpanded(false);
      }}
      style={{ width: railWidth, ...style } satisfies CSSProperties}
    >
      {hideRailCompletely ? (
        <button
          aria-label={`Expand ${side} panel`}
          className={cn(
            "absolute inset-y-0 z-10 w-1.5 appearance-none border-0 bg-transparent p-0 opacity-0 outline-none",
            side === "left" ? "-right-1" : "-left-1",
          )}
          onMouseEnter={() => setHoverExpanded(true)}
          onMouseLeave={() => setHoverExpanded(false)}
          onFocus={() => setHoverExpanded(true)}
          onBlur={() => setHoverExpanded(false)}
          onClick={() => onToggleCollapsed?.()}
          type="button"
        />
      ) : null}
      <UhuruPanelStateProvider
        collapsed={effectiveCollapsed}
        collapsedSize={collapsedWidth}
        expandOnHover={expandOnHover}
        iconHoverAnimation={iconHoverAnimation}
        onToggleCollapsed={onToggleCollapsed}
        showRail={railVisible}
        showToggle={collapsible}
        side={side}
      >
        <div className={cn("flex h-full min-h-0 flex-col", hideRailCompletely && !hoverExpanded ? "pointer-events-none opacity-0" : "")}>
          {showPanelHeader ? (
            <div
              className={cn(
                "flex items-center gap-[var(--uhuru-panel-gap)] border-b border-[var(--uhuru-border-subtle)] px-[var(--uhuru-panel-padding-x)] py-[var(--uhuru-panel-padding-y)]",
                effectiveCollapsed ? "justify-center !gap-0 !px-0 py-2" : "justify-between",
              )}
            >
              <div className={cn("min-w-0", effectiveCollapsed ? "w-full flex-none" : "flex-1")}>
                {effectiveCollapsed ? (collapsedHeader ?? header) : header}
              </div>
              {effectiveCollapsed ? collapsedHeaderActions : headerActions}
            </div>
          ) : null}
          <div className="min-h-0 flex-1 overflow-auto">
            {children}
          </div>
          {beforeFooter && !effectiveCollapsed ? (
            <div className="shrink-0 border-t border-[var(--uhuru-border-subtle)] px-4 py-3">{beforeFooter}</div>
          ) : null}
          {footer && !effectiveCollapsed ? (
            <div className="shrink-0 border-t border-[var(--uhuru-border-subtle)] px-4 py-3">{footer}</div>
          ) : null}
          <PanelFooterRoutes collapsed={effectiveCollapsed} routes={footerRoutes} />
        </div>
      </UhuruPanelStateProvider>
      {enabled && !effectiveCollapsed ? (
        <button
          aria-label={`Resize ${side} panel`}
          className={cn(
            "absolute top-0 h-full w-3 cursor-col-resize touch-none bg-transparent",
            side === "left" ? "-right-1.5" : "-left-1.5",
          )}
          onPointerDown={(event) => {
            event.preventDefault();
            draggingRef.current = true;
            setIsResizing(true);
            document.body.style.cursor = "col-resize";
            document.body.style.userSelect = "none";
          }}
          type="button"
        >
          <span
            className={cn(
              "absolute top-1/2 h-10 w-[2px] -translate-y-1/2 rounded-full bg-[var(--uhuru-border-default)]",
              side === "left" ? "right-[5px]" : "left-[5px]",
            )}
          />
        </button>
      ) : null}
    </section>
  );
}

export type UhuruAppLayoutProps = {
  aiPanelConfig?: AiPanelConfig;
  children?: ReactNode;
  className?: string;
  header?: ReactNode;
  leftPanel?: ReactNode;
  leftPanelConfig?: PanelConfig;
  bottomPanel?: ReactNode;
  bottomPanelConfig?: PanelConfig;
  rightPanel?: ReactNode;
  rightPanelConfig?: PanelConfig;
  fab?: ReactNode;
  scrollMode?: "content" | "page";
};

export type AiPanelConfig = PanelConfig & {
  content?: ReactNode;
  defaultOpen?: boolean;
  enabled?: boolean;
  onOpenChange?: (open: boolean) => void;
  open?: boolean;
  position?: AiPanelPosition;
};

export type UhuruAppLayoutTogglePlacement = "auto" | "header" | "panel" | "none";

type UhuruAppLayoutControls = {
  hasLeftPanel: boolean;
  hasRightPanel: boolean;
  isMobileViewport: boolean;
  leftPanelCollapsed: boolean;
  leftPanelExpandIcon?: ReactNode;
  onToggleLeftPanel: () => void;
  onToggleRightPanel: () => void;
  rightPanelCollapsed: boolean;
  rightPanelExpandIcon?: ReactNode;
};

const UhuruAppLayoutControlsContext = createContext<UhuruAppLayoutControls | null>(null);

export type UhuruAppLayoutHeaderProps = {
  actions?: ReactNode;
  actionsClassName?: string;
  className?: string;
  compactBreakpoint?: number;
  backgroundOpacity?: number;
  center?: ReactNode;
  centerClassName?: string;
  contentClassName?: string;
  description?: ReactNode;
  descriptionClassName?: string;
  height?: number | string;
  leading?: ReactNode;
  leadingClassName?: string;
  leftTogglePlacement?: UhuruAppLayoutTogglePlacement;
  paddingBlock?: number | string;
  paddingInlineEnd?: number | string;
  paddingInlineStart?: number | string;
  profile?: ReactNode;
  profileClassName?: string;
  rightTogglePlacement?: UhuruAppLayoutTogglePlacement;
  search?: ReactNode;
  searchClassName?: string;
  style?: CSSProperties;
  toggleGap?: number;
  title?: ReactNode;
  trailing?: ReactNode;
  trailingClassName?: string;
  titleClassName?: string;
  variant?: "classic" | "standard";
  mobileActionItems?: MenuItem[];
  mobileActions?: ReactNode;
  mobileActionsLabel?: string;
};

function HeaderMobileOverflow({
  align,
  actions,
  items,
  label,
  search,
}: {
  align: "left" | "right";
  actions?: ReactNode;
  items?: MenuItem[];
  label: string;
  search?: ReactNode;
}) {
  const [open, setOpen] = useState(false);
  const resolvedItems = items?.map((item) => ({
    ...item,
    onSelect: () => {
      item.onSelect?.();
      setOpen(false);
    },
  }));

  if (!search && !actions && !resolvedItems?.length) {
    return null;
  }

  return (
    <Popover
      align={align}
      content={
        <div className="flex min-w-56 flex-col gap-2">
          {search ? <div className="min-w-0">{search}</div> : null}
          {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
          {resolvedItems?.length ? <Menu className="-m-2" items={resolvedItems} /> : null}
        </div>
      }
      isOpen={open}
      onOpenChange={setOpen}
      trigger={
        <IconButton
          icon={<DotsThree weight="bold" />}
          label={label}
        />
      }
    />
  );
}

export function UhuruAppLayoutHeader({
  actions,
  actionsClassName,
  className,
  compactBreakpoint = 1023,
  backgroundOpacity = 0.98,
  center,
  centerClassName,
  contentClassName,
  description,
  descriptionClassName,
  height,
  leading,
  leadingClassName,
  leftTogglePlacement,
  paddingBlock = 8,
  paddingInlineEnd,
  paddingInlineStart,
  profile,
  profileClassName,
  rightTogglePlacement,
  search,
  searchClassName,
  style,
  toggleGap = 24,
  title,
  trailing,
  trailingClassName,
  titleClassName,
  variant = "classic",
  mobileActionItems,
  mobileActions,
  mobileActionsLabel = "More header actions",
}: UhuruAppLayoutHeaderProps) {
  const controls = useContext(UhuruAppLayoutControlsContext);
  const [isCompactViewport, setIsCompactViewport] = useState(false);
  const trailingContent = trailing ?? actions;
  const profileContent = profile ?? leading;
  const searchContent = search ?? center;

  useEffect(() => {
    if (typeof window === "undefined") return;

    const media = window.matchMedia(`(max-width: ${compactBreakpoint}px)`);
    const update = () => setIsCompactViewport(media.matches);
    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, [compactBreakpoint]);
  const resolvedLeftTogglePlacement = leftTogglePlacement ?? "panel";
  const resolvedRightTogglePlacement = rightTogglePlacement ?? "panel";
  const showLeftToggle = Boolean(
    controls?.hasLeftPanel && (
      controls.isMobileViewport
        ? resolvedLeftTogglePlacement !== "none"
        : resolvedLeftTogglePlacement === "header" || resolvedLeftTogglePlacement === "auto"
    ),
  );
  const showRightToggle = Boolean(
    controls?.hasRightPanel && (
      controls.isMobileViewport
        ? resolvedRightTogglePlacement !== "none"
        : resolvedRightTogglePlacement === "header" || resolvedRightTogglePlacement === "auto"
    ),
  );
  const headerStyle: CSSProperties = { ...style };
  if (height !== undefined) {
    headerStyle.height = typeof height === "number" ? `${height}px` : height;
  }
  if (paddingBlock !== undefined) {
    headerStyle.paddingTop = paddingBlock;
    headerStyle.paddingBottom = paddingBlock;
  }
  headerStyle.paddingLeft = paddingInlineStart
    ?? (showLeftToggle ? (isCompactViewport ? 12 : 16) : 12);
  headerStyle.paddingRight = paddingInlineEnd
    ?? (showRightToggle ? (isCompactViewport ? 12 : 16) : 12);

  const leftToggle = showLeftToggle && controls ? (
    <IconButton
      aria-expanded={controls.isMobileViewport ? false : !controls.leftPanelCollapsed}
      icon={
        controls.isMobileViewport || controls.leftPanelCollapsed
          ? controls.leftPanelExpandIcon ?? <CaretDoubleRight weight="regular" />
          : <CaretDoubleLeft weight="regular" />
      }
      label={controls.isMobileViewport || controls.leftPanelCollapsed ? "Open left panel" : "Collapse left panel"}
      onClick={controls.onToggleLeftPanel}
    />
  ) : null;
  const rightToggle = showRightToggle && controls ? (
    <IconButton
      aria-expanded={controls.isMobileViewport ? false : !controls.rightPanelCollapsed}
      icon={
        controls.isMobileViewport || controls.rightPanelCollapsed
          ? controls.rightPanelExpandIcon ?? <CaretDoubleLeft weight="regular" />
          : <CaretDoubleRight weight="regular" />
      }
      label={controls.isMobileViewport || controls.rightPanelCollapsed ? "Open right panel" : "Collapse right panel"}
      onClick={controls.onToggleRightPanel}
    />
  ) : null;
  const identityText = title || description ? (
    <div className="min-w-0">
      {title ? <div className={cn("truncate text-sm font-medium text-[var(--uhuru-text-primary)]", titleClassName)}>{title}</div> : null}
      {description ? <div className={cn("truncate text-xs text-[var(--uhuru-text-secondary)]", descriptionClassName)}>{description}</div> : null}
    </div>
  ) : null;
  const identity = (
    <div className={cn("flex min-w-0 items-center gap-2", leadingClassName)}>
      {profileContent ? <div className={cn("flex shrink-0 items-center", profileClassName)}>{profileContent}</div> : null}
      {identityText}
    </div>
  );
  const standardIdentity = (
    <div className={cn("flex min-w-0 items-center justify-end gap-2", leadingClassName)}>
      {identityText ? <div className="min-w-0 text-right">{identityText}</div> : null}
      {profileContent ? <div className={cn("flex shrink-0 items-center", profileClassName)}>{profileContent}</div> : null}
    </div>
  );
  const mobileOverflow = (
    <HeaderMobileOverflow
      align={variant === "standard" ? "left" : "right"}
      actions={mobileActions ?? (mobileActionItems?.length ? undefined : trailingContent)}
      items={mobileActionItems}
      label={mobileActionsLabel}
      search={searchContent}
    />
  );

  return (
    <div
      data-variant={variant}
      className={cn(
        "relative flex w-full min-h-[var(--uhuru-control-height)] items-center overflow-visible border-b border-[var(--uhuru-border-default)] py-1 backdrop-blur-[18px]",
        className,
      )}
      style={headerStyle}
    >
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 bg-[var(--uhuru-surface-overlay)]"
        style={{ opacity: Math.min(1, Math.max(0, backgroundOpacity)) }}
      />
      <div
        className={cn(
          "relative w-full min-w-0 flex-1 items-center",
          contentClassName,
        )}
      >
        {isCompactViewport ? (
          <div
            className="grid w-full min-w-0 items-center"
            style={{
              gridTemplateColumns: [
                leftToggle ? "auto" : null,
                ...(variant === "standard"
                  ? ["auto", "minmax(0, 1fr)"]
                  : ["minmax(0, 1fr)", "auto"]),
                rightToggle ? "auto" : null,
              ].filter(Boolean).join(" "),
              columnGap: 8,
            }}
          >
            {leftToggle ? (
              <div style={{ marginRight: Math.max(0, toggleGap - 8) }}>{leftToggle}</div>
            ) : null}
            {variant === "standard" ? (
              <>
                <div className="flex min-w-0 items-center">{mobileOverflow}</div>
                <div className="min-w-0 overflow-hidden">{standardIdentity}</div>
              </>
            ) : (
              <>
                <div className="min-w-0 overflow-hidden">{identity}</div>
                {mobileOverflow}
              </>
            )}
            {rightToggle ? (
              <div style={{ marginLeft: Math.max(0, toggleGap - 8) }}>{rightToggle}</div>
            ) : null}
          </div>
        ) : variant === "standard" ? (
          <div
            className="grid w-full min-w-0 items-center"
            style={{
              gridTemplateColumns: [
                leftToggle ? "auto" : null,
                "auto",
                "minmax(10rem, 1fr)",
                "auto",
                rightToggle ? "auto" : null,
              ].filter(Boolean).join(" "),
              columnGap: 16,
            }}
          >
            {leftToggle ? (
              <div style={{ marginRight: Math.max(0, toggleGap - 16) }}>{leftToggle}</div>
            ) : null}
            <div className={cn("flex min-w-0 items-center gap-2", actionsClassName, trailingClassName)}>{trailingContent}</div>
            <div className={cn("flex min-w-0 justify-center", centerClassName, searchClassName)}>{searchContent}</div>
            {standardIdentity}
            {rightToggle ? (
              <div style={{ marginLeft: Math.max(0, toggleGap - 16) }}>{rightToggle}</div>
            ) : null}
          </div>
        ) : (
          <div
            className="grid w-full min-w-0 items-center"
            style={{
              gridTemplateColumns: [
                leftToggle ? "auto" : null,
                "auto",
                "minmax(10rem, 1fr)",
                "auto",
                rightToggle ? "auto" : null,
              ].filter(Boolean).join(" "),
              columnGap: 16,
            }}
          >
            {leftToggle ? (
              <div style={{ marginRight: Math.max(0, toggleGap - 16) }}>{leftToggle}</div>
            ) : null}
            {identity}
            <div className={cn("flex min-w-0 justify-center", centerClassName, searchClassName)}>{searchContent}</div>
            <div className={cn("flex min-w-0 items-center justify-end gap-2", actionsClassName, trailingClassName)}>{trailingContent}</div>
            {rightToggle ? (
              <div style={{ marginLeft: Math.max(0, toggleGap - 16) }}>{rightToggle}</div>
            ) : null}
          </div>
        )}
      </div>
    </div>
  );
}

function UhuruAppLayoutFrame({
  aiPanelConfig,
  children,
  className,
  header,
  leftPanel,
  leftPanelConfig,
  bottomPanel,
  bottomPanelConfig,
  fab,
  rightPanel,
  rightPanelConfig,
  scrollMode = "page",
}: UhuruAppLayoutProps) {
  const aiPanel = useAiPanelContext();
  const aiPanelOpen = Boolean(aiPanel?.enabled && aiPanel.isOpen);
  const aiPanelPosition = aiPanel?.position ?? aiPanelConfig?.position ?? "left";
  const resolvedLeftPanel =
    aiPanelOpen && aiPanelPosition === "left"
      ? aiPanelConfig?.content
      : leftPanel;
  const resolvedRightPanel =
    aiPanelOpen && aiPanelPosition === "right"
      ? aiPanelConfig?.content
      : rightPanel;
  const resolvedLeftPanelConfig =
    aiPanelOpen && aiPanelPosition === "left"
      ? aiPanelConfig
      : leftPanelConfig;
  const resolvedRightPanelConfig =
    aiPanelOpen && aiPanelPosition === "right"
      ? aiPanelConfig
      : rightPanelConfig;
  const [aiPanelCollapsed, setAiPanelCollapsed] = useState(
    aiPanelConfig?.defaultCollapsed ?? false,
  );
  const [leftPanelCollapsed, setLeftPanelCollapsed] = useState(leftPanelConfig?.defaultCollapsed ?? false);
  const [rightPanelCollapsed, setRightPanelCollapsed] = useState(rightPanelConfig?.defaultCollapsed ?? false);
  const [leftPanelHoverExpanded, setLeftPanelHoverExpanded] = useState(false);
  const [rightPanelHoverExpanded, setRightPanelHoverExpanded] = useState(false);
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
  const [mobileRightPanelOpen, setMobileRightPanelOpen] = useState(false);
  const [headerHeight, setHeaderHeight] = useState(0);

  const leftPanelContent = resolvedLeftPanel;
  const panelRoute = useUhuruPanelRoute();
  const leftPanelResizeEnabled = resolvedLeftPanelConfig?.allowResize ?? false;
  const rightPanelResizeEnabled = resolvedRightPanelConfig?.allowResize ?? false;
  const headerRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (!mobileSidebarOpen && !mobileRightPanelOpen) {
      return;
    }

    const previousOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";

    return () => {
      document.body.style.overflow = previousOverflow;
    };
  }, [mobileRightPanelOpen, mobileSidebarOpen]);

  function openMobileSidebar() {
    setMobileRightPanelOpen(false);
    setMobileSidebarOpen(true);
  }

  function openMobileRightPanel() {
    setMobileSidebarOpen(false);
    setMobileRightPanelOpen(true);
  }

  const [isMobileViewport, setIsMobileViewport] = useState(false);
  const previousAiPanelOpenRef = useRef(aiPanelOpen);

  useEffect(() => {
    if (typeof window === "undefined") {
      return;
    }

    const media = window.matchMedia("(max-width: 767px)");
    const update = () => setIsMobileViewport(media.matches);

    update();
    media.addEventListener("change", update);
    return () => media.removeEventListener("change", update);
  }, []);

  useEffect(() => {
    const wasOpen = previousAiPanelOpenRef.current;
    previousAiPanelOpenRef.current = aiPanelOpen;

    if (!isMobileViewport) return;

    if (aiPanelOpen) {
      if (aiPanelPosition === "left") openMobileSidebar();
      else openMobileRightPanel();
      return;
    }

    if (wasOpen) {
      setMobileSidebarOpen(false);
      setMobileRightPanelOpen(false);
    }
  }, [aiPanelOpen, aiPanelPosition, isMobileViewport]);

  useEffect(() => {
    const node = headerRef.current;
    if (!node) {
      setHeaderHeight(0);
      return;
    }

    const update = () => {
      setHeaderHeight(node.getBoundingClientRect().height);
    };

    update();

    if (typeof ResizeObserver === "undefined") {
      return;
    }

    const observer = new ResizeObserver(update);
    observer.observe(node);
    return () => observer.disconnect();
  }, [header]);

  const headerToggleProps = isValidElement<UhuruAppLayoutHeaderProps>(header)
    ? header.props
    : undefined;
  const resolveTogglePlacement = (
    placement: UhuruAppLayoutTogglePlacement | undefined,
  ): Exclude<UhuruAppLayoutTogglePlacement, "auto"> => {
    if (placement === "auto") {
      return "header";
    }

    return placement ?? "panel";
  };
  const leftTogglePlacement = resolveTogglePlacement(headerToggleProps?.leftTogglePlacement);
  const rightTogglePlacement = resolveTogglePlacement(headerToggleProps?.rightTogglePlacement);
  const mobilePanelOpen = mobileSidebarOpen || mobileRightPanelOpen;
  const showHeader = Boolean(header);
  const stickyPanelTop = scrollMode === "page" ? headerHeight : 0;
  const effectiveLeftPanelCollapsed =
    aiPanelOpen && aiPanelPosition === "left"
      ? aiPanelCollapsed
      : leftPanelCollapsed;
  const effectiveRightPanelCollapsed =
    aiPanelOpen && aiPanelPosition === "right"
      ? aiPanelCollapsed
      : rightPanelCollapsed;
  function toggleLeftPanel() {
    if (aiPanelOpen && aiPanelPosition === "left") {
      setAiPanelCollapsed((current) => !current);
      return;
    }
    setLeftPanelCollapsed((current) => !current);
  }
  function toggleRightPanel() {
    if (aiPanelOpen && aiPanelPosition === "right") {
      setAiPanelCollapsed((current) => !current);
      return;
    }
    setRightPanelCollapsed((current) => !current);
  }
  const appLayoutControls: UhuruAppLayoutControls = {
    hasLeftPanel: Boolean(
      leftPanelContent && !(aiPanelOpen && aiPanelPosition === "left"),
    ),
    hasRightPanel: Boolean(
      resolvedRightPanel && !(aiPanelOpen && aiPanelPosition === "right"),
    ),
    isMobileViewport,
    leftPanelCollapsed: effectiveLeftPanelCollapsed && !leftPanelHoverExpanded,
    leftPanelExpandIcon: resolvedLeftPanelConfig?.expandIcon,
    onToggleLeftPanel: () => {
      if (isMobileViewport) {
        openMobileSidebar();
        return;
      }

      toggleLeftPanel();
    },
    onToggleRightPanel: () => {
      if (isMobileViewport) {
        openMobileRightPanel();
        return;
      }

      toggleRightPanel();
    },
    rightPanelCollapsed: effectiveRightPanelCollapsed && !rightPanelHoverExpanded,
    rightPanelExpandIcon: resolvedRightPanelConfig?.expandIcon,
  };

  return (
    <div
      className={cn(
        "flex min-h-screen w-full flex-col bg-[var(--uhuru-layout-background,var(--uhuru-bg-base))] text-[var(--uhuru-text-primary)]",
        className,
      )}
    >
      {leftPanelContent || resolvedRightPanel ? (
        <div
          aria-hidden={!mobilePanelOpen}
          className={cn(
            "pointer-events-none fixed inset-0 z-50 bg-[var(--uhuru-overlay-scrim)] opacity-0 transition-opacity duration-300 md:hidden",
            mobilePanelOpen ? "pointer-events-auto opacity-100" : "",
          )}
          onClick={() => {
            setMobileSidebarOpen(false);
            setMobileRightPanelOpen(false);
          }}
        >
          {leftPanelContent ? <div
            className={cn(
              "absolute inset-y-0 left-0 h-full min-w-0 max-w-[calc(100vw-16px)] w-[min(88vw,320px)] overflow-hidden bg-[var(--uhuru-surface-default)] shadow-[var(--uhuru-shadow-lg)] transition-transform duration-300 ease-out",
              mobileSidebarOpen ? "translate-x-0" : "-translate-x-full",
            )}
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-center justify-between border-b border-[var(--uhuru-border-subtle)] px-3 py-2.5">
              <div className="min-w-0 flex-1">{resolvedLeftPanelConfig?.header}</div>
              <button
                aria-label="Close left panel"
                className="grid h-9 w-9 place-items-center rounded-[var(--uhuru-radius-sm)] border border-[var(--uhuru-border-default)] text-[var(--uhuru-text-primary)]"
                onClick={() => setMobileSidebarOpen(false)}
                type="button"
              >
                <X size={16} weight="regular" />
              </button>
            </div>
            <div className="flex h-[calc(100%-57px)] min-h-0 flex-col">
              <div className="min-h-0 flex-1 overflow-auto">{leftPanelContent}</div>
              {resolvedLeftPanelConfig?.beforeFooter ? (
                <div className="border-t border-[var(--uhuru-border-subtle)] px-3 py-2.5">
                  {resolvedLeftPanelConfig.beforeFooter}
                </div>
              ) : null}
              <PanelFooterRoutes routes={resolvedLeftPanelConfig?.footerRoutes} />
              {resolvedLeftPanelConfig?.footer ? (
                <div className="border-t border-[var(--uhuru-border-subtle)] px-3 py-2.5">
                  {resolvedLeftPanelConfig.footer}
                </div>
              ) : null}
            </div>
          </div> : null}

          {resolvedRightPanel ? <div
            className={cn(
              "absolute inset-y-0 right-0 h-full min-w-0 max-w-[calc(100vw-16px)] w-[min(88vw,340px)] overflow-hidden bg-[var(--uhuru-surface-default)] shadow-[var(--uhuru-shadow-lg)] transition-transform duration-300 ease-out",
              mobileRightPanelOpen ? "translate-x-0" : "translate-x-full",
            )}
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex items-center justify-between border-b border-[var(--uhuru-border-subtle)] px-3 py-2.5">
              <div className="min-w-0 flex-1">{resolvedRightPanelConfig?.header}</div>
              <button
                aria-label="Close right panel"
                className="grid h-9 w-9 place-items-center rounded-[var(--uhuru-radius-sm)] border border-[var(--uhuru-border-default)] text-[var(--uhuru-text-primary)]"
                onClick={() => setMobileRightPanelOpen(false)}
                type="button"
              >
                <X size={16} weight="regular" />
              </button>
            </div>
            <div className="flex h-[calc(100%-57px)] min-h-0 flex-col">
              <div className="min-h-0 flex-1 overflow-auto">{resolvedRightPanel}</div>
              {resolvedRightPanelConfig?.beforeFooter ? (
                <div className="border-t border-[var(--uhuru-border-subtle)] px-3 py-2.5">
                  {resolvedRightPanelConfig.beforeFooter}
                </div>
              ) : null}
              <PanelFooterRoutes routes={resolvedRightPanelConfig?.footerRoutes} />
              {resolvedRightPanelConfig?.footer ? (
                <div className="border-t border-[var(--uhuru-border-subtle)] px-3 py-2.5">
                  {resolvedRightPanelConfig.footer}
                </div>
              ) : null}
            </div>
          </div> : null}
        </div>
      ) : null}

      {showHeader ? (
        <header
          ref={headerRef}
          className="relative sticky top-0 z-40 col-span-full bg-[var(--uhuru-surface-default)]"
        >
          <UhuruAppLayoutControlsContext.Provider value={appLayoutControls}>
            {header}
          </UhuruAppLayoutControlsContext.Provider>
        </header>
      ) : null}

      <div
        className={cn(
          "grid min-h-0 min-w-0 flex-1",
          leftPanelContent && resolvedRightPanel
            ? "md:grid-cols-[auto_minmax(0,1fr)] xl:grid-cols-[auto_minmax(0,1fr)_auto]"
            : leftPanelContent
              ? "md:grid-cols-[auto_minmax(0,1fr)]"
              : resolvedRightPanel
                ? "grid-cols-1 xl:grid-cols-[minmax(0,1fr)_auto]"
                : "grid-cols-1",
        )}
      >
        {leftPanelContent ? <ResizablePanel
          ariaLabel={resolvedLeftPanelConfig?.ariaLabel}
          className={cn("hidden md:flex", scrollMode === "page" ? "md:sticky md:self-start md:overflow-hidden" : "")}
          collapsed={effectiveLeftPanelCollapsed}
          collapsedWidth={resolvedLeftPanelConfig?.collapsedSize ?? 64}
          defaultWidth={resolvedLeftPanelConfig?.defaultSize ?? 280}
          enabled={leftPanelResizeEnabled}
          collapsible={resolvedLeftPanelConfig?.collapsible && leftTogglePlacement === "panel"}
          showRail={resolvedLeftPanelConfig?.showRail}
          expandOnHover={resolvedLeftPanelConfig?.expandOnHover}
          iconHoverAnimation={resolvedLeftPanelConfig?.iconHoverAnimation}
          onHoverExpandedChange={setLeftPanelHoverExpanded}
          maxWidth={resolvedLeftPanelConfig?.maxSize ?? 420}
          header={resolvedLeftPanelConfig?.header}
          onToggleCollapsed={toggleLeftPanel}
          beforeFooter={resolvedLeftPanelConfig?.beforeFooter}
          footer={resolvedLeftPanelConfig?.footer}
          footerRoutes={resolvedLeftPanelConfig?.footerRoutes}
          minWidth={resolvedLeftPanelConfig?.minSize ?? 240}
          style={scrollMode === "page" ? { top: stickyPanelTop, height: `calc(100dvh - ${stickyPanelTop}px)` } : undefined}
          side="left"
        >
          {leftPanelContent}
        </ResizablePanel> : null}

        <div className="min-w-0">
          <main className={cn("min-w-0", scrollMode === "content" ? "overflow-auto" : "")}>
            <div className="px-4 py-4 lg:px-6 lg:py-6">{panelRoute?.activeRoute?.element ?? children}</div>
          </main>

          {bottomPanel ? (
            <UhuruPanel config={bottomPanelConfig} side="bottom">
              {bottomPanel}
            </UhuruPanel>
          ) : null}
        </div>

        {resolvedRightPanel ? (
          <ResizablePanel
            ariaLabel={resolvedRightPanelConfig?.ariaLabel}
          className={cn(
            "hidden xl:flex",
            scrollMode === "page" ? "xl:sticky xl:self-start xl:overflow-hidden" : "",
          )}
            collapsed={effectiveRightPanelCollapsed}
            collapsedWidth={resolvedRightPanelConfig?.collapsedSize ?? 64}
            defaultWidth={resolvedRightPanelConfig?.defaultSize ?? 320}
            collapsible={resolvedRightPanelConfig?.collapsible && rightTogglePlacement === "panel"}
            showRail={resolvedRightPanelConfig?.showRail}
            enabled={rightPanelResizeEnabled}
            expandOnHover={resolvedRightPanelConfig?.expandOnHover}
            iconHoverAnimation={resolvedRightPanelConfig?.iconHoverAnimation}
            onHoverExpandedChange={setRightPanelHoverExpanded}
            header={resolvedRightPanelConfig?.header}
            maxWidth={resolvedRightPanelConfig?.maxSize ?? 440}
            minWidth={resolvedRightPanelConfig?.minSize ?? 260}
            onToggleCollapsed={toggleRightPanel}
            style={scrollMode === "page" ? { top: stickyPanelTop, height: `calc(100dvh - ${stickyPanelTop}px)` } : undefined}
            side="right"
          >
            <div className="flex h-full min-h-0 flex-col">
              <div className="min-h-0 flex-1 overflow-auto">{resolvedRightPanel}</div>
              {resolvedRightPanelConfig?.beforeFooter && !effectiveRightPanelCollapsed ? (
                <div className="border-t border-[var(--uhuru-border-subtle)] px-3 py-2.5">{resolvedRightPanelConfig.beforeFooter}</div>
              ) : null}
              {resolvedRightPanelConfig?.footer && !effectiveRightPanelCollapsed ? (
                <div className="border-t border-[var(--uhuru-border-subtle)] px-3 py-2.5">{resolvedRightPanelConfig.footer}</div>
              ) : null}
              <PanelFooterRoutes collapsed={effectiveRightPanelCollapsed && !rightPanelHoverExpanded} routes={resolvedRightPanelConfig?.footerRoutes} />
            </div>
          </ResizablePanel>
        ) : null}
      </div>

    </div>
  );
}

export function UhuruAppLayout(props: UhuruAppLayoutProps) {
  const aiPanelPosition = props.aiPanelConfig?.position ?? "left";
  const aiPanelMissingContent = Boolean(
    props.aiPanelConfig?.enabled && !props.aiPanelConfig.content,
  );
  const aiPanelError = aiPanelMissingContent
    ? "The AI panel is enabled but aiPanelConfig.content is missing. Pass an AiPanel or another AI conversation surface as content."
    : undefined;
  const fabPortal =
    props.fab && typeof document !== "undefined"
      ? createPortal(
          <div className="uhuru-floating-fab">
            <div className="pointer-events-auto">{props.fab}</div>
          </div>,
          document.querySelector<HTMLElement>("[data-uhuru-root]") ?? document.body,
        )
      : null;

  return (
    <UhuruPanelRouteProvider>
      <UhuruAiPanelProvider
        config={{
          defaultOpen: props.aiPanelConfig?.defaultOpen,
          enabled: Boolean(props.aiPanelConfig?.enabled && !aiPanelMissingContent),
          error: aiPanelError,
          onOpenChange: props.aiPanelConfig?.onOpenChange,
          open: props.aiPanelConfig?.open,
          position: aiPanelPosition,
        }}
      >
        <UhuruAppLayoutFrame {...props} />
        {fabPortal}
      </UhuruAiPanelProvider>
    </UhuruPanelRouteProvider>
  );
}