import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

"use client";

import { useEffect, useState } from "react";

/**
 * Returns true only on devices that have a true hover (mouse / trackpad).
 * Touch devices fire phantom `:hover` on tap that sticks until tap-elsewhere
 * — gate hover-only effects (scale lifts, magnetic pulls) behind this.
 */
export function useHoverCapable() {
  const [canHover, setCanHover] = useState(false);

  useEffect(() => {
    if (typeof window === "undefined" || !window.matchMedia) return;
    const mq = window.matchMedia("(hover: hover) and (pointer: fine)");
    const update = () => setCanHover(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  return canHover;
}

"use client";

import { useState } from "react";

/**
 * Runs `start` during the render in which `open` becomes true.
 *
 * Opening a list starts a fresh session — an empty query, the highlight back at
 * the top — and that is a resolution, not a side effect: a passive effect runs
 * after the commit, so the new session would carry the last one's state for a
 * window in which a key press can land.
 *
 * `start` may only set state belonging to the calling component. Anything that
 * reaches outside it — a consumer's callback, a DOM write, moving focus — is a
 * side effect, and React rejects a callback that sets another component's state
 * during this one's render. Put those in an effect keyed to `open`.
 */
export function useOnOpen(open: boolean, start: () => void) {
  const [wasOpen, setWasOpen] = useState(open);
  if (open !== wasOpen) {
    setWasOpen(open);
    if (open) start();
  }
}

"use client";
// asharca.github.io/ui/components/blocks/workspace-shell

import type { ComponentPropsWithRef, ReactNode } from "react";
import {
  AnimatedSidebarProvider,
  type AnimatedSidebarProviderProps,
} from "@/components/motion/animated-sidebar";
import { cn } from "@/lib/utils";

export interface WorkspaceShellProps extends AnimatedSidebarProviderProps {
  sidebar?: ReactNode;
  tabBar?: ReactNode;
  mobileHeader?: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  /** content: this pane scrolls; none: the editor/chat child owns scrolling. */
  scroll?: "content" | "none";
  contentProps?: Omit<ComponentPropsWithRef<"div">, "children">;
}

const hasSlot = (node: ReactNode) => node != null && typeof node !== "boolean";

/** The beUI sidebar provider owns navigation state; the host owns tabs and data.
 * Set a height on the shell. Tabs and content share one alignment line, and the
 * first active tab removes only the adjoining top-left corner of the surface.
 * data-workspace-shell identifies this composition without replacing beUI's
 * own data-slot="sidebar-wrapper" or introducing a second layout wrapper.
 */
export function WorkspaceShell({
  sidebar, tabBar, mobileHeader, header, footer, children, className, style,
  scroll = "content", contentProps, ...props
}: WorkspaceShellProps) {
  const sidebarInset = hasSlot(sidebar) && "md:ml-[var(--workspace-gap,0px)]";
  return (
    <AnimatedSidebarProvider
      {...props}
      data-workspace-shell=""
      style={{ "--sidebar-width": "14rem", "--sidebar-width-icon": "4rem", ...style }}
      className={cn("h-full min-h-0 w-full overflow-hidden bg-[var(--workspace-shell-background,var(--muted))] text-foreground", className)}
    >
      {sidebar}
      <div data-slot="workspace-body" className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
        {hasSlot(mobileHeader) && <div data-slot="workspace-mobile-header" className="flex h-12 shrink-0 items-center gap-2 px-2 md:hidden">{mobileHeader}</div>}
        {hasSlot(tabBar) && <div data-slot="workspace-shell-tabs" className={cn("peer/workspace-tabs mx-[var(--workspace-gap,0.5rem)] min-w-0 shrink-0", sidebarInset)}>{tabBar}</div>}
        <div data-slot="workspace-surface" className={cn(
          "m-[var(--workspace-gap,0.5rem)] flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[var(--workspace-radius,0.75rem)] bg-[var(--workspace-surface,var(--background))]",
          sidebarInset,
          hasSlot(tabBar) && "mt-0 peer-has-[[data-leading-active=true]]/workspace-tabs:rounded-tl-none",
        )}>
          {hasSlot(header) && <div data-slot="workspace-header" className="min-w-0 shrink-0">{header}</div>}
          <div {...contentProps} data-slot="workspace-content" data-scroll={scroll} className={cn("min-h-0 min-w-0 flex-1", scroll === "content" ? "overflow-auto overscroll-contain" : "flex flex-col overflow-hidden", contentProps?.className)}>{children}</div>
          {hasSlot(footer) && <div data-slot="workspace-footer" className="min-w-0 shrink-0">{footer}</div>}
        </div>
      </div>
    </AnimatedSidebarProvider>
  );
}

/** Invoke synchronously from a user action. null means the browser blocked it.
 * Only the host decides whether to remove a tab and what state may be copied.
 */
export function openWorkspaceWindow(href: string | URL, prepare?: (popup: Window) => void): Window | null {
  const url = new URL(href, window.location.href);
  if (!["http:", "https:"].includes(url.protocol) || url.origin !== window.location.origin || url.username || url.password) {
    throw new Error("工作区窗口必须使用不含凭据的同源 HTTP(S) 地址。");
  }
  const popup = window.open("about:blank", "_blank", "popup,width=1100,height=760");
  if (!popup) return null;
  try {
    popup.opener = null;
    prepare?.(popup);
    popup.location.replace(url.href);
    return popup;
  } catch (error) {
    popup.close();
    throw error;
  }
}

"use client";
// asharca.github.io/ui/components/blocks/workspace-shell

import { ArrowLeft, ArrowRight, ExternalLink, MoreHorizontal, Pin, PinOff, Plus, X } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
import { Button } from "@/components/motion/button/base";
import { MorphPopover, MorphPopoverTrigger, MorphPopoverContent } from "@/components/motion/popover-morph";
import { SPRING_LAYOUT } from "@/lib/ease";
import { cn } from "@/lib/utils";

type MenuPoint = { x: number; y: number };
const LONG_PRESS_DELAY = 520;
const LONG_PRESS_TOLERANCE = 10;

export interface WorkspaceTab {
  id: string;
  title: string;
  icon?: ReactNode;
  pinned?: boolean;
  dirty?: boolean;
  closable?: boolean;
  detachable?: boolean;
  tabId?: string;
  panelId?: string;
}
export interface WorkspaceTabBarProps {
  tabs: WorkspaceTab[];
  activeTabId: string;
  onSelect: (id: string) => void;
  onClose?: (id: string) => void;
  onReorder?: (sourceId: string, targetId: string) => void;
  onPinnedChange?: (id: string, pinned: boolean) => void;
  onOpenInNewWindow?: (id: string) => void;
  onNewTab?: () => void;
  actions?: ReactNode;
  closeOnMiddleClick?: boolean;
  closeOnDoubleClick?: boolean;
  className?: string;
}
interface TabAction { key: string; label: string; icon: ReactNode; disabled?: boolean; run: () => void }

/** Per-tab action menu. One beUI MorphPopover serves every invocation: the ⋯
 *  button, right-click, long-press and Shift+F10 all open this same panel.
 *  `openAt` positions without moving focus; a real trigger click just toggles. */
function TabActions({ title, items, restore, openRequest, onOpenHandled, anchorTabId }: {
  title: string;
  items: TabAction[];
  restore: () => void;
  openRequest: { point: MenuPoint; invocation: number } | null;
  onOpenHandled: () => void;
  anchorTabId: string;
}) {
  const [open, setOpen] = useState(false);
  const panel = useRef<HTMLDivElement>(null);
  const popover = useRef<HTMLDivElement>(null);
  const anchor = useRef<HTMLElement | null>(null);
  useLayoutEffect(() => {
    if (!open) return;
    // beUI portals mount in an effect. Wait one frame for the actual actions.
    const frame = requestAnimationFrame(() => panel.current?.querySelector<HTMLButtonElement>("button:not(:disabled)")?.focus());
    return () => cancelAnimationFrame(frame);
  }, [open]);
  useLayoutEffect(() => {
    if (!openRequest) return;
    anchor.current = popover.current?.querySelector<HTMLElement>(`[data-tab-menu-anchor="${anchorTabId}"]`) ?? null;
    setOpen(false);
    setOpen(true);
    onOpenHandled();
  }, [openRequest, anchorTabId, onOpenHandled]);
  return <span ref={popover} className="contents">
    <MorphPopover open={open} onOpenChange={(next) => { setOpen(next); if (!next) restore(); }}>
      {!openRequest && <MorphPopoverTrigger><Button variant="ghost" size="icon" className="size-6 rounded-md" aria-label={`${title}操作`}><MoreHorizontal className="size-3.5" /></Button></MorphPopoverTrigger>}
      <MorphPopoverContent role="menu" align="end" radius={10} className="w-48 p-1">
        <div ref={panel} inert={!open}>
          {items.map((item) => <Button key={item.key} role="menuitem" variant="ghost" size="sm" disabled={item.disabled} className="w-full justify-start rounded-md px-2 text-xs"
            onClick={() => { item.run(); setOpen(false); restore(); }}>{item.icon}{item.label}</Button>)}
        </div>
      </MorphPopoverContent>
    </MorphPopover>
  </span>;
}

/** Browser-like tabs joined to the content surface. Only the selected surface
 * moves; controls stay in place. Selection/order/dirty confirmation are host-owned.
 */
interface TabMenuHostProps {
  tab: WorkspaceTab;
  index: number;
  selected: boolean;
  items: TabAction[];
  instance: string;
  tabs: WorkspaceTab[];
  refs: React.MutableRefObject<Map<string, HTMLButtonElement>>;
  onSelect: (id: string) => void;
  close: (tab: WorkspaceTab) => void;
  closeOnMiddleClick: boolean;
  closeOnDoubleClick: boolean;
  onReorder: boolean;
  move: (tab: WorkspaceTab, target?: WorkspaceTab) => void;
  selectAt: (index: number) => void;
  restore: (id: string) => void;
  canClose: (tab: WorkspaceTab) => boolean;
  onClose: boolean;
}

/** One tab plus its sibling controls. Right-click, touch long-press and
 *  Shift+F10/CopyAll open the same MorphPopover as the ⋯ button — the
 *  ContextMenu copy is gone, so there is a single menu to maintain. */
function TabMenuHost({ tab, index, selected, items, instance, tabs, refs, onSelect, close, closeOnMiddleClick, closeOnDoubleClick, onReorder, move, selectAt, restore, canClose, onClose }: TabMenuHostProps) {
  const reduce = useReducedMotion();
  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
  const touchOrigin = useRef<MenuPoint | null>(null);
  const [openRequest, setOpenRequest] = useState<{ point: MenuPoint; invocation: number } | null>(null);

  const cancelLongPress = useCallback(() => {
    if (longPressTimer.current) {
      clearTimeout(longPressTimer.current);
      longPressTimer.current = null;
    }
    touchOrigin.current = null;
  }, []);
  useEffect(() => cancelLongPress, [cancelLongPress]);

  const openMenuAt = useCallback((point: MenuPoint) => {
    setOpenRequest((current) => ({ point, invocation: (current?.invocation ?? 0) + 1 }));
  }, []);

  const onContextMenu = (event: ReactMouseEvent<HTMLElement>) => {
    if (!items.length) return;
    event.preventDefault();
    cancelLongPress();
    openMenuAt({ x: event.clientX, y: event.clientY });
  };
  // Touch/pen: hold to open, like the platform context menu. A drag cancels.
  const onPointerDown = (event: ReactPointerEvent<HTMLElement>) => {
    if (!items.length) return;
    const pressToOpen = event.pointerType === "touch" || event.pointerType === "pen";
    if (pressToOpen) {
      const origin = { x: event.clientX, y: event.clientY };
      touchOrigin.current = origin;
      longPressTimer.current = setTimeout(() => {
        longPressTimer.current = null;
        touchOrigin.current = null;
        openMenuAt(origin);
      }, LONG_PRESS_DELAY);
    }
  };
  const onPointerMove = (event: ReactPointerEvent<HTMLElement>) => {
    const origin = touchOrigin.current;
    if (origin && Math.hypot(event.clientX - origin.x, event.clientY - origin.y) > LONG_PRESS_TOLERANCE) cancelLongPress();
  };
  // Keyboard: Menu key or Shift+F10 opens at the tab, matching ContextMenu's contract.
  const onKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {
    if (event.key === "Delete") { event.preventDefault(); close(tab); }
    if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
      if (!items.length) return;
      event.preventDefault();
      const rect = event.currentTarget.getBoundingClientRect();
      openMenuAt({ x: rect.left + Math.min(24, rect.width / 2), y: rect.top + rect.height / 2 });
    }
    if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
      event.preventDefault();
      const step = (event.key === "ArrowLeft" ? -1 : 1) * (getComputedStyle(event.currentTarget).direction === "rtl" ? -1 : 1);
      if (event.altKey) move(tab, tabs[index + step]); else selectAt(index + step);
    }
    if (event.key === "Home" || event.key === "End") { event.preventDefault(); selectAt(event.key === "Home" ? 0 : tabs.length - 1); }
  };

  return (
    /* biome-ignore lint/a11y/useSemanticElements: This groups a tab and sibling actions, not form fields. */
    <div role="group" aria-label={`${tab.title}标签及操作`} data-slot="workspace-tab" data-tab-key={tab.id} data-active={selected} tabIndex={-1}
      draggable={onReorder}
      onContextMenu={onContextMenu}
      onPointerDown={onPointerDown}
      onPointerMove={onPointerMove}
      onPointerUp={cancelLongPress}
      onPointerCancel={cancelLongPress}
      onKeyDown={onKeyDown}
      onDragStart={(event) => { event.dataTransfer.setData("text/plain", `${instance}:${tab.id}`); event.dataTransfer.effectAllowed = "move"; }}
      onDragOver={(event) => { if (onReorder) event.preventDefault(); }}
      onDrop={(event) => { event.preventDefault(); const key = event.dataTransfer.getData("text/plain"); const source = tabs.find((item) => `${instance}:${item.id}` === key); if (source) move(source, tab); }}
      className="group relative isolate flex h-10 shrink-0 items-center rounded-t-[var(--workspace-radius,0.75rem)] px-1 pb-0.5 outline-none">
      {selected && <motion.span aria-hidden="true" data-slot="workspace-tab-selection" initial={false}
        layoutId={reduce ? undefined : `${instance}-surface`} transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
        className={cn("pointer-events-none absolute inset-0 -z-10 rounded-t-[var(--workspace-radius,0.75rem)] bg-[var(--workspace-surface,var(--background))] after:absolute after:-right-2 after:bottom-0 after:size-2 after:bg-[radial-gradient(circle_at_top_right,transparent_70%,var(--workspace-surface,var(--background))_72%)]", index > 0 && "before:absolute before:-left-2 before:bottom-0 before:size-2 before:bg-[radial-gradient(circle_at_top_left,transparent_70%,var(--workspace-surface,var(--background))_72%)]")} />}
      <button ref={(node) => { if (node) refs.current.set(tab.id, node); else refs.current.delete(tab.id); }} type="button" role="tab"
        id={tab.tabId} aria-controls={tab.panelId} aria-selected={selected} tabIndex={selected ? 0 : -1}
        onClick={() => onSelect(tab.id)}
        onAuxClick={(event) => { if (event.button === 1 && closeOnMiddleClick) { event.preventDefault(); close(tab); } }}
        onDoubleClick={() => { if (closeOnDoubleClick) close(tab); }}
        className="inline-flex h-8 max-w-48 items-center gap-2 rounded-md px-2.5 text-xs text-muted-foreground outline-none aria-selected:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
        {tab.icon && <span aria-hidden="true" className="inline-flex shrink-0 [&_svg]:size-3.5">{tab.icon}</span>}
        {tab.pinned && <Pin aria-hidden="true" className="size-3 shrink-0" />}
        <span className="truncate" title={tab.title}>{tab.title}</span>
        {tab.dirty && <><span aria-hidden="true" className="size-1.5 shrink-0 rounded-full bg-current" /><span className="sr-only">（未保存）</span></>}
      </button>
      {items.length > 0 && <TabActions title={tab.title} items={items} restore={() => restore(tab.id)} openRequest={openRequest} onOpenHandled={() => setOpenRequest(null)} anchorTabId={tab.id} />}
      {onClose && !tab.pinned && <Button variant="ghost" size="icon" className="mr-1 size-6 rounded-md" aria-label={`关闭 ${tab.title}`} disabled={!canClose(tab)} onClick={() => close(tab)}><X aria-hidden="true" className="size-3.5" /></Button>}
    </div>
  );
}

export function WorkspaceTabBar({ tabs, activeTabId, onSelect, onClose, onReorder, onPinnedChange, onOpenInNewWindow, onNewTab, actions, closeOnMiddleClick = true, closeOnDoubleClick = false, className }: WorkspaceTabBarProps) {
  const instance = useId();
  const refs = useRef(new Map<string, HTMLButtonElement>());
  const scroller = useRef<HTMLDivElement>(null);
  const closing = useRef<string | null>(null);
  const currentId = tabs.some((tab) => tab.id === activeTabId) ? activeTabId : tabs[0]?.id;
  const canClose = (tab: WorkspaceTab) => Boolean(onClose && !tab.pinned && tab.closable !== false && tabs.length > 1);
  const restore = (id: string) => (refs.current.get(id) ?? refs.current.get(currentId) ?? refs.current.get(tabs[0]?.id))?.focus({ preventScroll: true });
  useLayoutEffect(() => {
    if (closing.current && !tabs.some((tab) => tab.id === closing.current)) {
      closing.current = null;
      (refs.current.get(currentId) ?? refs.current.get(tabs[0]?.id))?.focus({ preventScroll: true });
    }
    const node = scroller.current;
    const active = refs.current.get(currentId)?.closest<HTMLElement>("[data-slot='workspace-tab']");
    if (!node || !active) return;
    const bounds = node.getBoundingClientRect();
    const rect = active.getBoundingClientRect();
    if (rect.left < bounds.left) node.scrollLeft += rect.left - bounds.left;
    else if (rect.right > bounds.right) node.scrollLeft += rect.right - bounds.right;
  }, [currentId, tabs]);
  const close = (tab: WorkspaceTab) => { if (canClose(tab)) { closing.current = tab.id; onClose?.(tab.id); } };
  const move = (tab: WorkspaceTab, target?: WorkspaceTab) => {
    if (!target || tab.id === target.id || Boolean(tab.pinned) !== Boolean(target.pinned)) return;
    onReorder?.(tab.id, target.id);
    restore(tab.id);
  };
  const selectAt = (index: number) => {
    const target = tabs[(index + tabs.length) % tabs.length];
    if (target) { onSelect(target.id); restore(target.id); }
  };
  const menuItems = (tab: WorkspaceTab, index: number) => {
    const items: TabAction[] = [];
    if (onOpenInNewWindow) items.push({ key: "detach", label: "在独立窗口打开", icon: <ExternalLink className="size-3.5" />, disabled: tab.detachable === false, run: () => onOpenInNewWindow(tab.id) });
    if (onPinnedChange) items.push({ key: "pin", label: tab.pinned ? "取消固定" : "固定标签", icon: tab.pinned ? <PinOff className="size-3.5" /> : <Pin className="size-3.5" />, run: () => onPinnedChange(tab.id, !tab.pinned) });
    if (onReorder) {
      items.push({ key: "left", label: "向左移动", icon: <ArrowLeft className="size-3.5" />, disabled: !tabs[index - 1] || Boolean(tabs[index - 1].pinned) !== Boolean(tab.pinned), run: () => move(tab, tabs[index - 1]) });
      items.push({ key: "right", label: "向右移动", icon: <ArrowRight className="size-3.5" />, disabled: !tabs[index + 1] || Boolean(tabs[index + 1].pinned) !== Boolean(tab.pinned), run: () => move(tab, tabs[index + 1]) });
    }
    if (onClose) items.push({ key: "close", label: "关闭标签", icon: <X className="size-3.5" />, disabled: !canClose(tab), run: () => close(tab) });
    return items;
  };
  return <div data-slot="workspace-tab-strip" data-leading-active={tabs[0]?.id === currentId} className={cn("flex h-11 max-w-full min-w-0 shrink-0 items-end", className)}>
    <motion.div layoutScroll ref={scroller} data-slot="workspace-tab-bar" className="min-w-0 flex-1 overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
      {/* Each tab owns sibling action buttons; never put controls inside a tab button. */}
      <div role="tablist" aria-label="工作区标签" className="flex h-11 min-w-max items-end gap-1 pt-1">
        {tabs.map((tab, index) => {
          const selected = tab.id === currentId;
          const items = menuItems(tab, index);
          return <TabMenuHost key={tab.id} tab={tab} index={index} selected={selected} items={items} instance={instance} tabs={tabs}
            refs={refs} onSelect={onSelect} close={close} closeOnMiddleClick={closeOnMiddleClick}
            closeOnDoubleClick={closeOnDoubleClick} onReorder={Boolean(onReorder)} move={move} selectAt={selectAt}
            restore={restore} canClose={canClose} onClose={Boolean(onClose)} />;
        })}
      </div>
    </motion.div>
    {(onNewTab || actions) && <div data-slot="workspace-tab-actions" className="flex h-11 shrink-0 items-center gap-1 pl-1">
      {onNewTab && <Button variant="ghost" size="icon" aria-label="新建标签" onClick={onNewTab}><Plus className="size-4" /></Button>}{actions}
    </div>}
  </div>;
}

"use client";
// asharca.github.io/ui/components/blocks/workspace-shell

import { motion, useReducedMotion } from "motion/react";
import { PanelLeft, X } from "lucide-react";
import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
import {
  AnimatedSidebar, AnimatedSidebarClose, AnimatedSidebarContent,
  AnimatedSidebarFooter, AnimatedSidebarGroup,
  AnimatedSidebarHeader, AnimatedSidebarMenu, AnimatedSidebarMenuButton,
  AnimatedSidebarMenuItem, AnimatedSidebarMenuSub, AnimatedSidebarMenuSubButton,
  AnimatedSidebarMenuSubItem, AnimatedSidebarTrigger, useAnimatedSidebar,
} from "@/components/motion/animated-sidebar";
import { EASE_OUT, SPRING_LAYOUT } from "@/lib/ease";
import { useHoverCapable } from "@/lib/hooks/use-hover-capable";
import { useOnOpen } from "@/lib/hooks/use-on-open";
import { cn } from "@/lib/utils";

export interface WorkspaceSidebarItem {
  id: string;
  label: string;
  icon?: ReactNode;
  badge?: ReactNode;
  href?: string;
  disabled?: boolean;
  /** Exactly one nested level. Parents toggle their children instead of navigating. */
  children?: Omit<WorkspaceSidebarItem, "children">[];
}
export interface WorkspaceSidebarGroup { id: string; title?: string; items: WorkspaceSidebarItem[] }
export interface WorkspaceSidebarProps {
  groups: WorkspaceSidebarGroup[];
  activeId?: string;
  onSelect?: (id: string) => void;
  title?: string;
  /** Brand mark rendered in the header instead of the plain title text. */
  logo?: ReactNode;
  footer?: ReactNode;
  className?: string;
}

function WorkspaceNavigationItem({ item, activeId, onSelect, compact }: {
  item: WorkspaceSidebarItem;
  activeId?: string;
  onSelect?: (id: string) => void;
  compact: boolean;
}) {
  const children = item.children?.length ? item.children : undefined;
  const activeChild = children?.some((child) => child.id === activeId) ?? false;
  const [expanded, setExpanded] = useState(activeChild);
  const [previousActive, setPreviousActive] = useState(activeId);
  if (previousActive !== activeId) {
    setPreviousActive(activeId);
    if (activeChild) setExpanded(true);
  }
  return <AnimatedSidebarMenuItem>
    <AnimatedSidebarMenuButton
      isActive={activeId === item.id || (compact && activeChild)}
      ariaExpanded={children ? !compact && expanded : undefined}
      onSelect={() => children ? setExpanded((current) => compact || !current) : onSelect?.(item.id)}
      href={children ? undefined : item.href} icon={item.icon} badge={item.badge} disabled={item.disabled}
      className={cn("min-h-9 gap-2 overflow-visible rounded-lg px-2 text-xs [&>span:first-child:not([aria-hidden])]:rounded-lg [&>span[aria-hidden=true]]:size-5 [&_svg]:size-[18px] [&>span.absolute]:bg-[var(--workspace-surface,var(--background))]", activeChild && !compact && "bg-foreground/5 text-foreground")}
    >
      {item.label}
    </AnimatedSidebarMenuButton>
    {children && <div inert={compact || !expanded || item.disabled} aria-hidden={compact || !expanded || item.disabled}>
      <AnimatedSidebarMenuSub open={expanded} className="ml-4 gap-1 border-foreground/10 pl-3">
        {children.map((child) => <AnimatedSidebarMenuSubItem key={child.id}>
          <AnimatedSidebarMenuSubButton href={child.href} icon={child.icon}
            disabled={item.disabled || child.disabled} isActive={activeId === child.id}
            onSelect={() => onSelect?.(child.id)}
            className={cn("min-h-9 [&_svg]:size-3.5", activeId === child.id && "bg-[var(--workspace-surface,var(--background))] font-medium hover:bg-[var(--workspace-surface,var(--background))]")}
          >
            <span className="flex min-w-0 items-center gap-2"><span className="truncate">{child.label}</span>{child.badge != null && <span className="ml-auto shrink-0 rounded bg-muted px-1 text-[10px] text-muted-foreground">{child.badge}</span>}</span>
          </AnimatedSidebarMenuSubButton>
        </AnimatedSidebarMenuSubItem>)}
      </AnimatedSidebarMenuSub>
    </div>}
  </AnimatedSidebarMenuItem>;
}

/** Composition of beUI primitives, not a second copy of the sidebar engine.
 *  The footer stays mounted and interactive while collapsed: hosts put their
 *  icon-sized workspace/avatar popovers there and manage their own visibility. */
export function WorkspaceSidebar({ groups, activeId, onSelect, title = "工作区", logo, footer, className }: WorkspaceSidebarProps) {
  const { open, isMobile } = useAnimatedSidebar();
  const reduced = useReducedMotion() ?? false;
  const compact = !open && !isMobile;
  const canHover = useHoverCapable();
  const [hovered, setHovered] = useState(false);
  const [focused, setFocused] = useState(false);
  useOnOpen(compact, () => setHovered(false));
  const showToggle = !compact || !logo || (canHover && hovered) || focused;
  const toggleRef = useRef<HTMLButtonElement>(null);
  useLayoutEffect(() => {
    if (compact && document.activeElement instanceof HTMLElement) {
      const panel = toggleRef.current?.closest('[data-slot="sidebar"]');
      if (panel?.getAttribute("data-state") === "collapsed" && panel.contains(document.activeElement)) {
        const footer = panel.querySelector('[data-slot="sidebar-footer"]');
        if (!(footer instanceof HTMLElement && footer.contains(document.activeElement))) toggleRef.current?.focus();
      }
    }
  }, [compact]);
  // Opacity must not inherit spring velocity when hover reverses mid-flight.
  const transition = reduced ? { duration: 0 } : {
    ...SPRING_LAYOUT,
    opacity: { type: "tween" as const, duration: 0.14, ease: EASE_OUT },
  };
  return <AnimatedSidebar ariaLabel={`${title}导航`} variant="inset"
    className={cn(!isMobile && "h-full", className)} panelClassName="static m-0 h-full rounded-none bg-transparent">
    <AnimatedSidebarHeader className="px-3.5 pt-2 pb-0">
      <motion.div
        initial={false}
        animate={{ height: compact ? 36 : 64 }}
        transition={transition}
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        onFocusCapture={(event) => setFocused(event.target.matches(":focus-visible"))}
        onBlurCapture={() => setFocused(false)}
        className="relative flex w-full flex-row items-center"
      >
        {isMobile ? (
          <>
            <span className="flex min-w-0 flex-1 items-center gap-2 text-xs font-semibold">
              {logo && <span className="grid size-7 shrink-0 place-items-center">{logo}</span>}
              <span className="truncate">{title}</span>
            </span>
            <AnimatedSidebarClose aria-label="关闭工作区导航" className="size-9 shrink-0"><X className="size-4" /></AnimatedSidebarClose>
          </>
        ) : (
          <>
            {logo && <motion.span
              initial={false}
              animate={{ y: compact && showToggle && !reduced ? 20 : 0, opacity: compact && showToggle ? 0 : 1 }}
              transition={transition}
              aria-hidden="true"
              className="pointer-events-none absolute left-0 grid size-9 place-items-center"
            >
              <span className="grid size-7 place-items-center">{logo}</span>
            </motion.span>}
            {/* The reveal edge and trigger share the sidebar's actual width.
                No measured-width spring chasing the sidebar's own spring. */}
            <div aria-hidden={compact} className="pointer-events-none absolute inset-y-0 left-0 right-9 overflow-hidden">
              <motion.span
                initial={false}
                animate={{ x: compact && !reduced ? -8 : 0 }}
                transition={transition}
                className={cn("flex h-full items-center whitespace-nowrap text-xs font-semibold", logo ? "pl-11" : "pl-2")}
              >
                {title}
              </motion.span>
            </div>
            <AnimatedSidebarTrigger
              ref={toggleRef}
              aria-label={compact ? "展开工作区侧栏" : "折叠工作区侧栏"}
              className="absolute right-0 z-10 size-9 overflow-hidden rounded-lg focus-visible:ring-inset"
            >
              <motion.span
                initial={false}
                animate={{ x: showToggle || reduced ? 0 : 36, opacity: showToggle ? 1 : 0 }}
                transition={transition}
                className="grid size-9 shrink-0 place-items-center"
              >
                <PanelLeft className="size-[18px]" />
              </motion.span>
            </AnimatedSidebarTrigger>
          </>
        )}
      </motion.div>
    </AnimatedSidebarHeader>
    <AnimatedSidebarContent className="gap-6 px-3.5 py-3 [scrollbar-width:none]">
      {groups.map((group) => <AnimatedSidebarGroup key={group.id} role="group" aria-label={group.title} className="px-0 py-0">
        <AnimatedSidebarMenu className="gap-1">
          {group.items.map((item) => <WorkspaceNavigationItem key={item.id} item={item} activeId={activeId} onSelect={onSelect} compact={compact} />)}
        </AnimatedSidebarMenu>
      </AnimatedSidebarGroup>)}
    </AnimatedSidebarContent>
    {footer && <AnimatedSidebarFooter className="mx-3.5 w-auto border-t border-border/60 px-0 pt-3 pb-3">{footer}</AnimatedSidebarFooter>}
  </AnimatedSidebar>;
}