"use client"

import * as React from "react"

import {
  EDGE_RESIZE_HANDLE_CLASS,
  EDGE_RESIZE_HANDLE_LEFT_CLASS,
  startEdgeResizeDrag,
  verticalResizeSeparatorAria,
} from "../../lib/edge-resize-handle"
import { usePersistedState } from "../../lib/persisted-state"
import {
  NAV_FLYOUT_CHROME,
  NAV_FLYOUT_INSET_LEFT,
  NAV_FLYOUT_INSET_RIGHT,
  NAV_FLYOUT_INSET_Y,
  SECONDARY_PANEL_BODY_STACK,
  navFlyoutMaxWidth,
} from "../../lib/nav-flyout-inset"
import { cn } from "../../lib/utils"

export const SECONDARY_PANEL_WIDTH_DEFAULT = 256
export const SECONDARY_PANEL_WIDTH_MIN = 200
export const SECONDARY_PANEL_WIDTH_MAX = 480
export const SECONDARY_PANEL_WIDTH_KEY = "shell:secondary-panel-width"

/** Default width for the Ask Leo right rail (panel mode). */
export const ASK_LEO_PANEL_WIDTH_DEFAULT = 320
export const ASK_LEO_PANEL_WIDTH_KEY = "shell:ask-leo-panel-width"

export function clampSecondaryPanelWidth(width: number) {
  return Math.min(
    SECONDARY_PANEL_WIDTH_MAX,
    Math.max(SECONDARY_PANEL_WIDTH_MIN, width),
  )
}

export interface NestedSecondaryPanelShellProps {
  /** When false, the shell is visually hidden (no width). */
  open: boolean
  /** Icon-only rail (same width token as primary `Sidebar` collapsible icon mode). */
  compact: boolean
  /**
   * High-zoom / mobile flyout — fixed panel stacked above the shell edge
   * (same anchor, higher z-index). Takes no flex layout space.
   */
  overlay?: false | "mobile" | "desktop"
  /** Rail side — secondary nav is left; Ask Leo is right. */
  side?: "left" | "right"
  /** `data-slot` on the outer `<nav>` — defaults to `secondary-panel`. */
  dataSlot?: string
  /** Persisted width key — defaults to the library secondary panel. */
  widthPersistKey?: string
  /** Initial width when no persisted value exists. */
  widthDefault?: number
  /**
   * When false, a parent `ResizablePanel` owns width (no edge handle / px style).
   * Use for docked rails inside `ResizablePanelGroup`. Default true for overlay /
   * compact / legacy hosts.
   */
  ownSize?: boolean
  children: React.ReactNode
  /** Forwarded to the outer `<nav>`. */
  "aria-label"?: string
  className?: string
  /** Inner scroll wrapper — Ask Leo passes `overflow-hidden` for a pinned composer. */
  contentClassName?: string
}

/**
 * Shared chrome for a nested hub rail — full width vs icon rail.
 * Fill uses `--secondary-panel-bg` — one step lighter than `--sidebar` (elevation 1).
 *
 * Docked expanded rails prefer parent `ResizablePanel` + `ResizableHandle withHandle`
 * (`ownSize={false}`). Overlay / compact keep an edge handle when `ownSize` is true.
 */
export function NestedSecondaryPanelShell({
  open,
  compact,
  overlay = false,
  side = "left",
  dataSlot = "secondary-panel",
  widthPersistKey = SECONDARY_PANEL_WIDTH_KEY,
  widthDefault = SECONDARY_PANEL_WIDTH_DEFAULT,
  ownSize = true,
  children,
  "aria-label": ariaLabel = "Secondary navigation",
  className,
  contentClassName,
}: NestedSecondaryPanelShellProps) {
  const [width, setWidth] = usePersistedState(
    widthPersistKey,
    widthDefault,
  )
  const [isResizing, setIsResizing] = React.useState(false)
  const widthRef = React.useRef(width)
  React.useEffect(() => {
    widthRef.current = width
  })

  const expandedWidth = clampSecondaryPanelWidth(width)
  const isOverlay = overlay !== false
  const layoutExpanded = open && (!compact || isOverlay)
  const showEdgeResizeHandle =
    ownSize && open && !compact && !isOverlay

  const overlayStackClass = isOverlay
    ? cn(
        side === "right" ? NAV_FLYOUT_INSET_RIGHT : NAV_FLYOUT_INSET_LEFT,
        NAV_FLYOUT_INSET_Y,
      )
    : undefined

  const overlayMaxWidth = isOverlay
    ? navFlyoutMaxWidth(expandedWidth)
    : undefined

  const startResize = React.useCallback(
    (event: React.MouseEvent) => {
      const startW = clampSecondaryPanelWidth(widthRef.current)
      setIsResizing(true)
      startEdgeResizeDrag(
        event,
        clientX => {
          const delta =
            side === "right" ? event.clientX - clientX : clientX - event.clientX
          setWidth(clampSecondaryPanelWidth(startW + delta))
        },
        () => setIsResizing(false),
      )
    },
    [setWidth, side],
  )

  const resizeHandleClass =
    side === "right" ? EDGE_RESIZE_HANDLE_LEFT_CLASS : EDGE_RESIZE_HANDLE_CLASS

  // Compact icon rails also sit in a parent `ResizablePanel` — fill that panel
  // or the group background shows as a fake "gap" beside a short white strip.
  const sizedByParent = open && !ownSize && !isOverlay

  return (
    <nav
      aria-label={ariaLabel}
      data-slot={dataSlot}
      data-state={open ? "open" : "closed"}
      data-side={side}
      data-layout={open ? (layoutExpanded ? "expanded" : "icon") : "closed"}
      data-overlay={isOverlay ? overlay : undefined}
      data-resizing={isResizing ? "true" : undefined}
      data-own-size={ownSize ? "true" : "false"}
      style={
        sizedByParent
          ? { width: "100%", minWidth: "100%", maxWidth: "100%", height: "100%" }
          : layoutExpanded
            ? isOverlay
              ? {
                  width: expandedWidth,
                  minWidth: expandedWidth,
                  maxWidth: overlayMaxWidth,
                }
              : {
                  width: expandedWidth,
                  minWidth: expandedWidth,
                  maxWidth: expandedWidth,
                }
            : undefined
      }
      suppressHydrationWarning
      className={cn(
        "flex min-h-0 flex-col",
        !isOverlay && showEdgeResizeHandle && "relative overflow-hidden",
        !isOverlay && ownSize && "transition-[width,margin,opacity] duration-200 ease-out",
        isOverlay &&
          cn(
            "fixed z-[70] flex min-h-0 flex-col bg-[var(--secondary-panel-bg)]",
            NAV_FLYOUT_CHROME,
            "transition-[opacity,transform] duration-200 ease-out",
            overlayStackClass,
          ),
        isResizing && "transition-none",
        open
          ? isOverlay
            ? cn("pointer-events-auto opacity-100", className)
            : cn(
                // Docked rail matches flush `SidebarInset` — square, no gutter,
                // no lift. Overlay flyouts keep sheet chrome via `data-overlay`
                // + Compact CSS. Edge vs canvas comes from compact border rules.
                "min-h-0 overflow-hidden bg-[var(--secondary-panel-bg)]",
                sizedByParent
                  ? "size-full min-h-0"
                  : cn(
                      "shrink-0 self-stretch",
                      compact ? "w-12 min-w-12 max-w-12" : "min-w-0",
                    ),
                className,
              )
          : isOverlay
            ? "pointer-events-none fixed z-[70] opacity-0"
            : "h-0 min-h-0 shrink overflow-hidden border-0 p-0 m-0 min-w-0 w-0 max-w-0 opacity-0 pointer-events-none",
      )}
    >
      <div
        className={cn(
          SECONDARY_PANEL_BODY_STACK,
          open ? "min-w-0" : "hidden min-w-0 w-0 p-0",
          contentClassName,
        )}
      >
        {children}
      </div>
      {showEdgeResizeHandle ? (
        <div
          {...verticalResizeSeparatorAria({
            label: side === "right" ? "Resize Ask Leo panel" : "Resize secondary panel",
            valueNow: expandedWidth,
            valueMin: SECONDARY_PANEL_WIDTH_MIN,
            valueMax: SECONDARY_PANEL_WIDTH_MAX,
          })}
          data-slot="secondary-panel-resize-handle"
          onMouseDown={startResize}
          className={resizeHandleClass}
        />
      ) : null}
    </nav>
  )
}