"use client";

import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import Link from "next/link";
import { useRouter, useSelectedLayoutSegments } from "next/navigation";
import {
  ArrowRightLeft,
  ArrowUpRight,
  ChevronRight,
  Copy,
  Edit3,
  GitMerge,
  Globe,
  Hash,
  LayoutGrid,
  Library,
  Link as LinkIcon,
  MoreHorizontal,
  PanelRightOpen,
  Plus,
  Search as SearchIcon,
  Share2,
  Shield,
  Star,
  Trash2,
  Upload,
  Users,
} from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "@/components/ui/drawer";
import { cn } from "@/lib/utils";
import type { DocumentNode } from "@/lib/documents";
import { buildDocumentTree } from "@/lib/documents";
import { useSidebarStore } from "@/store/sidebar";
import type { SidebarInitialData, SidebarSectionId } from "@/components/sidebar/types";
import { useSidebarData } from "@/hooks/use-sidebar-data";
import { PrivateTree } from "@/components/sidebar/private-tree";
import { buildSidebarSectionsFromTree, flattenDocumentTree } from "@/lib/sidebar-tree";
import { supabaseBrowser } from "@/lib/supabase/client";
import { useSearchPaletteStore } from "@/store/search-palette";
import { useEditorBridgeStore } from "@/store/editor-bridge";
import { FileTree } from "@/components/sidebar/file-tree";
import { buildVisibleRows } from "@/lib/file-tree/rows";
import type { FileTreeSelectionState } from "@/lib/file-tree/selection";  
import { reduceFileTreeSelection } from "@/lib/file-tree/selection";      
import type { FileTreeRow } from "@/lib/file-tree/types";
import { buildParentById, filterTopLevelDocIds, inferDropTargetDocId, isInvalidDocDrop } from "@/lib/file-tree/dnd";
import { isRealFileAsset } from "@/lib/file-tree/asset";
import { computeFileTreeDeleteTargets } from "@/lib/file-tree/delete";    
import {
  inferPasteTargetDocId,
  isTextInputTarget,
  readFileTreeClipboardPayload,
  writeFileTreeClipboardPayload,
} from "@/lib/file-tree/clipboard";
import type { MediaAsset } from "@/types/media";
import { AssetContextMenu } from "@/components/sidebar/asset-context-menu";
import { ASSETS_CHANGED_EVENT, DOCUMENTS_CHANGED_EVENT, emitAssetsChanged, emitDocumentsChanged } from "@/lib/events";

const TOP_BUTTONS = [
  { id: "search", icon: SearchIcon, label: "搜索" },
  { id: "graph", icon: Share2, label: "关系图" },
  { id: "import", icon: Upload, label: "导入" },
  { id: "members", icon: Users, label: "成员" },
  { id: "starred", icon: Star, label: "星标置顶" },
  { id: "public", icon: Globe, label: "公共页面" },
  { id: "shared", icon: Shield, label: "共享页面" },
  { id: "templates", icon: LayoutGrid, label: "模板中心" },
] as const;

const SECTION_ICONS: Record<Exclude<SidebarSectionId, "private">, React.ReactNode> = {
  starred: <Star className="h-4 w-4 text-[#f5a623]" />,
  public: <Globe className="h-4 w-4 text-[#60a5fa]" />,
  shared: <Shield className="h-4 w-4 text-[#9b87f5]" />,
  templates: <LayoutGrid className="h-4 w-4 text-[#34d399]" />,
};

const normalizeStoragePath = (storagePath: string): string => storagePath.replaceAll("\\", "/");

const extractMindmapIdFromStoragePath = (
  storagePath: string | null | undefined,
): string | null => {
  if (!storagePath) return null;
  const normalized = normalizeStoragePath(storagePath);

  const prefix = "mindmaps/";
  if (normalized.startsWith(prefix)) {
    const rest = normalized.slice(prefix.length);
    const id = rest.split("/")[0];
    return id ? id : null;
  }

  const marker = "/mindmaps/";
  const idx = normalized.indexOf(marker);
  if (idx === -1) return null;
  const rest = normalized.slice(idx + marker.length);
  const id = rest.split("/")[0];
  return id ? id : null;
};

interface SidebarProps {
  initialData: SidebarInitialData;
}

interface ContextMenuState {
  node: DocumentNode;
  x: number;
  y: number;
}

export function Sidebar({ initialData }: SidebarProps) {
  const { open, setOpen, width, setWidth, collapsedSections, toggleSection, setSectionCollapsed, trashConfirm, setTrashConfirm } =
    useSidebarStore();
  const sectionsTrayOpen = useSidebarStore((state) => state.sectionsTrayOpen);
  const toggleSectionsTray = useSidebarStore((state) => state.toggleSectionsTray);
  const setSectionsTrayOpen = useSidebarStore((state) => state.setSectionsTrayOpen);
  const viewMode = useSidebarStore((state) => state.viewMode);
  const setViewMode = useSidebarStore((state) => state.setViewMode);
  const openSearchPalette = useSearchPaletteStore((state) => state.openSearch); 
  const sidebarQuery = useSidebarData(initialData);
  const sidebarData = sidebarQuery.data ?? initialData;
  const segments = useSelectedLayoutSegments();
  const router = useRouter();
  const activeId = segments?.[1] ?? "";
  const editorBridge = useEditorBridgeStore((state) => state.bridge);

  const [tree, setTree] = useState<DocumentNode[]>(() => buildDocumentTree(sidebarData.documents));
  const [filter, setFilter] = useState("");
  const [expanded, setExpanded] = useState<Set<string>>(() => collectNodeIds(tree));
  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
  const [workspaceMenuOpen, setWorkspaceMenuOpen] = useState(false);
  const [trashOpen, setTrashOpen] = useState(false);
  const [trashSearch, setTrashSearch] = useState("");
  const [trashTab, setTrashTab] = useState<"documents" | "assets">("documents");
  const [emptyingTrash, setEmptyingTrash] = useState(false);
  const [mediaAssets, setMediaAssets] = useState<MediaAsset[]>(sidebarData.mediaAssets ?? []);
  const [mindmapAssets, setMindmapAssets] = useState<MediaAsset[]>(sidebarData.mindmapAssets ?? []);
  const [tableAssets, setTableAssets] = useState<MediaAsset[]>(sidebarData.tableAssets ?? []);
  const [assetMenu, setAssetMenu] = useState<{ asset: MediaAsset; x: number; y: number } | null>(
    null,
  );
  const [fileTreeSelection, setFileTreeSelection] = useState<FileTreeSelectionState>(() => ({
    selectedRowIds: new Set(),
    anchorRowId: null,
    focusedRowId: null,
  }));

  const workspaceMenuRef = useRef<HTMLDivElement>(null);
  const fileTreeContainerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setTree(() => {
      const nextTree = buildDocumentTree(sidebarData.documents);
      setExpanded((expandedPrev) => collectNodeIds(nextTree, new Set(expandedPrev)));
      return nextTree;
    });
  }, [sidebarData.documents]);

  useEffect(() => {
    setMediaAssets(sidebarData.mediaAssets ?? []);
  }, [sidebarData.mediaAssets]);

  useEffect(() => {
    setMindmapAssets(sidebarData.mindmapAssets ?? []);
  }, [sidebarData.mindmapAssets]);

  useEffect(() => {
    setTableAssets(sidebarData.tableAssets ?? []);
  }, [sidebarData.tableAssets]);

  useEffect(() => {
    setFileTreeSelection({ selectedRowIds: new Set(), anchorRowId: null, focusedRowId: null });
  }, [mediaAssets, mindmapAssets, tableAssets, sidebarData.documents]);

  useEffect(() => {
    setOpen(false);
  }, [activeId, setOpen]);

  useEffect(() => {
    const handler = (event: Event) => {
      const custom = event as CustomEvent<{ docId?: string; asset?: MediaAsset }>;
      const asset = custom.detail?.asset as MediaAsset | undefined;
      if (asset?.id) {
        if (asset.asset_type === "mindmap") {
          setMindmapAssets((prev) => {
            if (prev.find((item) => item.id === asset.id)) return prev;
            return [asset, ...prev];
          });
        } else if (asset.asset_type === "luckysheet") {
          setTableAssets((prev) => {
            if (prev.find((item) => item.id === asset.id)) return prev;
            return [asset, ...prev];
          });
        } else {
          setMediaAssets((prev) => {
            if (prev.find((item) => item.id === asset.id)) return prev;
            return [asset, ...prev];
          });
        }
      }
      void sidebarQuery.refetch();
    };
    window.addEventListener(ASSETS_CHANGED_EVENT, handler);
    window.addEventListener(DOCUMENTS_CHANGED_EVENT, handler);
    return () => {
      window.removeEventListener(ASSETS_CHANGED_EVENT, handler);
      window.removeEventListener(DOCUMENTS_CHANGED_EVENT, handler);
    };
  }, [sidebarQuery]);

  useEffect(() => {
    const onSaved = () => void sidebarQuery.refetch();
    const onDeleted = () => void sidebarQuery.refetch();
    window.addEventListener("online-table-saved", onSaved as EventListener);
    window.addEventListener("online-table-deleted", onDeleted as EventListener);
    return () => {
      window.removeEventListener("online-table-saved", onSaved as EventListener);
      window.removeEventListener("online-table-deleted", onDeleted as EventListener);
    };
  }, [sidebarQuery]);

  const refreshTree = useCallback(async () => {
    await sidebarQuery.refetch();
  }, [sidebarQuery]);

  useEffect(() => {
    const channel = supabaseBrowser
      .channel("documents-feed")
      .on(
        "postgres_changes",
        { event: "*", schema: "public", table: "documents" },
        () => {
          void refreshTree();
        },
      )
      .subscribe();
    return () => {
      supabaseBrowser.removeChannel(channel);
    };
  }, [refreshTree]);

  useEffect(() => {
    const channel = supabaseBrowser
      .channel("media-assets-feed")
      .on(
        "postgres_changes",
        {
          event: "*",
          schema: "public",
          table: "media_assets",
          filter: `workspace_id=eq.${sidebarData.activeWorkspaceId}`,
        },
        () => {
          void sidebarQuery.refetch();
        },
      )
      .subscribe();
    return () => {
      supabaseBrowser.removeChannel(channel);
    };
  }, [sidebarData.activeWorkspaceId, sidebarQuery]);

  const sections = useMemo(() => buildSidebarSectionsFromTree(tree), [tree]);
  const starredNodes = useMemo(() => sections.find((section) => section.id === "starred")?.nodes ?? [], [sections]);
  const publicNodes = useMemo(() => sections.find((section) => section.id === "public")?.nodes ?? [], [sections]);
  const sharedNodes = useMemo(() => sections.find((section) => section.id === "shared")?.nodes ?? [], [sections]);
  const templateNodes = useMemo(() => sections.find((section) => section.id === "templates")?.nodes ?? [], [sections]);
  const privateTree = useMemo(() => sections.find((section) => section.id === "private")?.nodes ?? [], [sections]);
  const filteredPrivateTree = useMemo(
    () => (filter ? filterTree(privateTree, filter.toLowerCase()) : privateTree),
    [filter, privateTree],
  );
  const flattenedPrivate = useMemo(
    () => flattenDocumentTree(privateTree, expanded),
    [privateTree, expanded],
  );
  const filteredTrash = useMemo(() => {
    const keyword = trashSearch.trim().toLowerCase();
    if (!keyword) {
      return sidebarData.trashedDocuments;
    }
    return sidebarData.trashedDocuments.filter((item) =>
      (item.title ?? "无标题").toLowerCase().includes(keyword),
    );
  }, [sidebarData.trashedDocuments, trashSearch]);

  const filteredTrashedMediaAssets = useMemo(() => {
    const assets = [
      ...(sidebarData.trashedMediaAssets ?? []),
      ...(sidebarData.trashedMindmapAssets ?? []),
    ];
    const keyword = trashSearch.trim().toLowerCase();
    if (!keyword) {
      return assets;
    }
    return assets.filter((item) => (item.file_name ?? "未命名附件").toLowerCase().includes(keyword));
  }, [sidebarData.trashedMediaAssets, sidebarData.trashedMindmapAssets, trashSearch]);

  const mindmapChildrenSnapshot = useMemo(() => {
    const mapping = sidebarData.mindmapAssetChildren ?? {};
    const mindmapDocById = new Map<string, string>(
      (mindmapAssets ?? [])
        .filter((asset) => asset.asset_type === "mindmap")
        .map((asset) => [asset.id, asset.document_id]),
    );
    const mindmapIds = new Set(mindmapDocById.keys());

    const mediaById = new Map<string, MediaAsset>(
      (mediaAssets ?? []).map((asset) => [asset.id, asset]),
    );

    const childAssetsByMindmapId: Record<string, MediaAsset[]> = {};
    const childIds = new Set<string>();
    const assigned = new Set<string>();

    // 物理目录：storage_path 归属到 mindmaps/<mindmapId>/ 的附件，作为导图文件夹内容
    (mediaAssets ?? []).forEach((asset) => {
      const sp = asset.storage_path;
      if (!sp || typeof sp !== "string") return;
      const mindmapId = extractMindmapIdFromStoragePath(sp);
      if (!mindmapId) return;
      if (!mindmapIds.has(mindmapId)) return;
      const docId = mindmapDocById.get(mindmapId);
      if (docId && asset.document_id !== docId) return;
      if (assigned.has(asset.id)) return;
      assigned.add(asset.id);
      childIds.add(asset.id);
      if (!childAssetsByMindmapId[mindmapId]) childAssetsByMindmapId[mindmapId] = [];
      childAssetsByMindmapId[mindmapId].push(asset);
    });

    // 引用图片：从 mindmap JSON 解析出的 assetIds，也放到导图文件夹下（去重）
    (mindmapAssets ?? []).forEach((mindmapAsset) => {
      const ids = mapping[mindmapAsset.id] ?? [];
      if (!Array.isArray(ids) || ids.length === 0) return;
      ids.forEach((id) => {
        const asset = mediaById.get(id);
        if (!asset) return;
        if (asset.document_id !== mindmapAsset.document_id) return;
        if (assigned.has(asset.id)) return;
        assigned.add(asset.id);
        childIds.add(asset.id);
        if (!childAssetsByMindmapId[mindmapAsset.id]) childAssetsByMindmapId[mindmapAsset.id] = [];
        childAssetsByMindmapId[mindmapAsset.id].push(asset);
      });
    });

    return { childAssetsByMindmapId, childIds };
  }, [mediaAssets, mindmapAssets, sidebarData.mindmapAssetChildren]);

  const assetsByDoc = useMemo(() => {
    const map: Record<string, MediaAsset[]> = {};
    const assets = [
      ...((mediaAssets ?? []).filter(
        (asset) => !mindmapChildrenSnapshot.childIds.has(asset.id),
      )),
      ...(mindmapAssets ?? []),
      ...(tableAssets ?? []),
    ];

    assets.forEach((asset) => {
      if (!map[asset.document_id]) {
        map[asset.document_id] = [];
      }
      const exists = map[asset.document_id].some((a) => a.id === asset.id && a.asset_type === asset.asset_type);
      if (!exists) {
        map[asset.document_id].push(asset);
      }
    });
    return map;
  }, [mediaAssets, mindmapAssets, tableAssets, mindmapChildrenSnapshot.childIds]);

  const [expandedAssetFolders, setExpandedAssetFolders] = useState<Set<string>>(() => new Set());

  const fileTreeRows = useMemo(
    () =>
      buildVisibleRows({
        nodes: filteredPrivateTree,
        expanded,
        assetsByDoc,
        assetChildrenByAssetId: mindmapChildrenSnapshot.childAssetsByMindmapId,
        expandedAssetFolderIds: expandedAssetFolders,
      }),
    [assetsByDoc, expanded, expandedAssetFolders, filteredPrivateTree, mindmapChildrenSnapshot.childAssetsByMindmapId],
  );

  const fileTreeVisibleRowIds = useMemo(() => fileTreeRows.map((row) => row.rowId), [fileTreeRows]);
  const fileTreeRowById = useMemo(() => new Map(fileTreeRows.map((row) => [row.rowId, row])), [fileTreeRows]);

  const docParentById = useMemo(
    () =>
      buildParentById(
        (sidebarData.documents ?? []).map((doc) => ({
          id: doc.id,
          parentId: doc.parent_id ?? null,
        })),
      ),
    [sidebarData.documents],
  );

  const childrenCountByParentId = useMemo(() => {
    const map = new Map<string | null, number>();
    (sidebarData.documents ?? []).forEach((doc) => {
      const parentId = doc.parent_id ?? null;
      map.set(parentId, (map.get(parentId) ?? 0) + 1);
    });
    return map;
  }, [sidebarData.documents]);

  const activeWorkspace =
    sidebarData.workspaces.find((workspace) => workspace.id === sidebarData.activeWorkspaceId) ??
    sidebarData.workspaces[0];

  const handleOpenDocument = useCallback(
    (documentId: string, mode: "main" | "sidebar") => {
      const targetPath = `/documents/${documentId}`;
      if (mode === "main") {
        router.push(targetPath);
        setOpen(false);
        return;
      }
      if (typeof window !== "undefined") {
        const sidebarUrl = `${buildDocumentUrl(documentId)}?preview=sidebar`;
        window.open(sidebarUrl, "_blank", "noopener,noreferrer");
      }
    },
    [router, setOpen],
  );

  const handleCopyLink = useCallback(async (node: DocumentNode, includeTitle = false) => {
    const url = buildDocumentUrl(node.id);
    const payload = includeTitle ? `${node.title ?? "无标题"}\n${url}` : url;
    await copyText(payload, includeTitle ? "标题 + 链接已复制" : "页面链接已复制");
  }, []);

  const handleCopyReference = useCallback(async (node: DocumentNode, mode: "inline" | "embed") => {
    const template = mode === "inline" ? `((${node.id}))` : `{{${node.id}}}`;
    await copyText(template, mode === "inline" ? "行内引用已复制" : "嵌入引用已复制");
  }, []);

  const handleCopyId = useCallback(async (node: DocumentNode) => {
    await copyText(node.id, "页面 ID 已复制");
  }, []);

  const handleDuplicateDocument = useCallback(
    async (node: DocumentNode) => {
      const response = await fetch("/api/documents/duplicate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ documentId: node.id }),
      });
      if (!response.ok) {
        window.alert("复制失败，请稍后再试");
        return;
      }
      await refreshTree();
    },
    [refreshTree],
  );

  const handleEmbedPrompt = useCallback(async (node: DocumentNode) => {
    if (typeof window === "undefined") {
      return;
    }
    const target = window.prompt("输入希望嵌入到的页面 ID");
    if (!target) {
      return;
    }
    const response = await fetch("/api/documents/embed", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ sourceId: node.id, targetId: target.trim() }),
    });
    if (!response.ok) {
      window.alert("嵌入失败，请检查目标页面 ID");
      return;
    }
    window.alert("已在目标页面末尾插入引用块");
  }, []);

  const toggleExpand = useCallback((id: string) => {
    setExpanded((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  }, []);

  const knownMindmapFolderIdsRef = useRef<Set<string>>(new Set());
  useEffect(() => {
    setExpandedAssetFolders((prev) => {
      const next = new Set(prev);
      (mindmapAssets ?? []).forEach((asset) => {
        if (asset.asset_type !== "mindmap") return;
        if (knownMindmapFolderIdsRef.current.has(asset.id)) return;
        knownMindmapFolderIdsRef.current.add(asset.id);
        next.add(asset.id);
      });
      return next;
    });
  }, [mindmapAssets]);

  const toggleAssetFolderExpand = useCallback((assetId: string) => {
    setExpandedAssetFolders((prev) => {
      const next = new Set(prev);
      if (next.has(assetId)) next.delete(assetId);
      else next.add(assetId);
      return next;
    });
  }, []);

  const handleOpenAsset = useCallback((asset: MediaAsset) => {
    if (asset.asset_type === "mindmap") {
      router.push(`/mindmap/${asset.document_id}/${asset.id}`);
      setOpen(false);
      return;
    }
    if (asset.asset_type === "luckysheet") {
      if (activeId && activeId === asset.document_id && editorBridge?.openTableFullScreen) {
        editorBridge.openTableFullScreen(asset.id);
        setOpen(false);
        return;
      }
      router.push(`/documents/${asset.document_id}?openTableId=${encodeURIComponent(asset.id)}`);
      setOpen(false);
      return;
    }
    const url = asset.signed_url ?? asset.file_url;
    if (!url) {
      window.alert("暂无可用的文件链接");
      return;
    }
    if (typeof window !== "undefined") {
      window.open(url, "_blank", "noopener,noreferrer");
    }
  }, [activeId, editorBridge, router, setOpen]);

  const handleFileTreeBlankMouseDown = useCallback(() => {
    setFileTreeSelection((prev) => reduceFileTreeSelection(prev, { type: "clear" }));
  }, []);

  const handleFileTreeRowClick = useCallback(
    (row: FileTreeRow, event: React.MouseEvent) => {
      setFileTreeSelection((prev) =>
        reduceFileTreeSelection(prev, {
          type: "click",
          rowId: row.rowId,
          visibleRowIds: fileTreeVisibleRowIds,
          modifiers: {
            shiftKey: event.shiftKey,
            ctrlKey: event.ctrlKey,
            metaKey: event.metaKey,
          },
        }),
      );

      // 与 VS Code 的单击打开不同：为了避免误触导致重资源文件（思维导图/表格等）被
      // 直接打开，我们在“无修饰键”的单击时只跳转到对应页面的 index.md（即文档本身）。
      if (event.button !== 0) return;
      if (event.shiftKey || event.ctrlKey || event.metaKey) return;

      const targetDocId = row.docId;
      if (!targetDocId) return;
      if (activeId && activeId === targetDocId) return;

      // doc/index/asset 都统一跳转到所属页面（index.md）
      handleOpenDocument(targetDocId, "main");
    },
    [activeId, fileTreeVisibleRowIds, handleOpenDocument],
  );

  const handleFileTreeRowDragStart = useCallback((row: FileTreeRow) => {
    setFileTreeSelection((prev) => {
      if (prev.selectedRowIds.has(row.rowId)) return prev;
      return reduceFileTreeSelection(prev, {
        type: "click",
        rowId: row.rowId,
        visibleRowIds: fileTreeVisibleRowIds,
        modifiers: { shiftKey: false, ctrlKey: false, metaKey: false },
      });
    });
  }, [fileTreeVisibleRowIds]);

  const handleFileTreeRowDoubleClick = useCallback(
    (row: FileTreeRow, _event?: React.MouseEvent) => {
      if (row.kind === "asset" || row.kind === "asset-folder") {
        handleOpenAsset(row.asset);
        return;
      }
      handleOpenDocument(row.docId, "main");
    },
    [handleOpenAsset, handleOpenDocument],
  );

  const handleFileTreeRowContextMenu = useCallback(
    (row: FileTreeRow, event: React.MouseEvent) => {
      event.preventDefault();
      event.stopPropagation();
      setFileTreeSelection((prev) =>
        reduceFileTreeSelection(prev, { type: "contextmenu", rowId: row.rowId }),
      );

      if (row.kind === "asset" || row.kind === "asset-folder") {
        setAssetMenu({ asset: row.asset, x: event.clientX, y: event.clientY }); 
        return;
      }

      setContextMenu({
        node: row.node,
        x: event.clientX,
        y: event.clientY,
      });
    },
    [],
  );

  useEffect(() => {
    const handler = async (event: KeyboardEvent) => {
      const isCopy =
        (event.ctrlKey || event.metaKey) &&
        !event.altKey &&
        (event.key === "c" || event.key === "C");
      const isPaste =
        (event.ctrlKey || event.metaKey) &&
        !event.altKey &&
        (event.key === "v" || event.key === "V");

      if (!isCopy && !isPaste) {
        return;
      }

      if (isTextInputTarget(event.target)) {
        return;
      }

      const container = fileTreeContainerRef.current;
      const activeElement = document.activeElement;
      if (!container || !activeElement || !container.contains(activeElement)) {
        return;
      }

      if (isCopy) {
        if (fileTreeSelection.selectedRowIds.size === 0) {
          return;
        }
        event.preventDefault();
        const orderedRowIds = fileTreeRows
          .filter((row) => fileTreeSelection.selectedRowIds.has(row.rowId))
          .map((row) => row.rowId);
        await writeFileTreeClipboardPayload({
          type: "mnote-file-tree",
          version: 1,
          action: "copy",
          rowIds: orderedRowIds,
        });
        return;
      }

      if (isPaste) {
        event.preventDefault();
        const payload = await readFileTreeClipboardPayload();
        if (!payload || payload.rowIds.length === 0) {
          return;
        }

        const targetDocId = inferPasteTargetDocId({
          focusedRowId: fileTreeSelection.focusedRowId,
          rowById: fileTreeRowById,
          activeDocId: activeId || null,
        });
        if (!targetDocId) {
          setTimeout(() => window.alert("请选择一个目标页面后再粘贴"), 0);
          return;
        }

        const rows = payload.rowIds
          .map((rowId) => fileTreeRowById.get(rowId as any))
          .filter(Boolean) as FileTreeRow[];

        const docItemsMap = new Map<string, boolean>();
        rows.forEach((row) => {
          if (row.kind === "doc") {
            docItemsMap.set(row.docId, true);
          } else if (row.kind === "index") {
            if (!docItemsMap.has(row.docId)) {
              docItemsMap.set(row.docId, false);
            }
          }
        });

        if (docItemsMap.size > 0) {
          const resp = await fetch("/api/documents/copy-tree", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              items: Array.from(docItemsMap.entries()).map(([documentId, recursive]) => ({
                documentId,
                recursive,
              })),
              targetParentId: targetDocId,
            }),
          });
          if (!resp.ok) {
            const data = await resp.json().catch(() => ({}));
            setTimeout(() => window.alert(data?.error ?? "粘贴页面失败"), 0);
            return;
          }
          await sidebarQuery.refetch();
          emitDocumentsChanged(targetDocId);
        }

        const assetRows = rows.filter((row) => row.kind === "asset") as Extract<FileTreeRow, { kind: "asset" }>[];
        const copyableAssetIds = assetRows.filter((row) => isRealFileAsset(row.asset)).map((row) => row.asset.id);

        if (copyableAssetIds.length > 0) {
          const resp = await fetch("/api/media/batch", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              action: "copy",
              assetIds: copyableAssetIds,
              targetDocumentId: targetDocId,
            }),
          });
          if (!resp.ok) {
            const data = await resp.json().catch(() => ({}));
            setTimeout(() => window.alert(data?.error ?? "粘贴附件失败"), 0);
            return;
          }
          await sidebarQuery.refetch();
          emitAssetsChanged(targetDocId);
        } else if (docItemsMap.size === 0) {
          setTimeout(() => window.alert("没有可粘贴的真实文件（mindmap.json 等虚拟附件暂不支持）"), 0);
        }
      }
    };

    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [
    activeId,
    fileTreeRowById,
    fileTreeRows,
    fileTreeSelection.focusedRowId,
    fileTreeSelection.selectedRowIds,
    sidebarQuery,
  ]);

  const handleCopyAssetLink = useCallback(
    async (asset: MediaAsset) => {
      if (asset.asset_type === "mindmap") {
        await copyText(buildMindmapUrl(asset.document_id, asset.id), "思维导图链接已复制");
        return;
      }
      if (asset.asset_type === "luckysheet") {
        await copyText(buildTableUrl(asset.id), "表格链接已复制");
        return;
      }
      const url = asset.signed_url ?? asset.file_url ?? "";
      if (!url) {
        window.alert("暂无可用的文件链接");
        return;
      }
      await copyText(url, "附件链接已复制");
    },
    [],
  );

  const handleCopyAssetPath = useCallback(async (asset: MediaAsset) => {        
    const path =
      asset.asset_type === "mindmap"
        ? ((asset.file_url ? asset.file_url.replace(/^\//, "") : "") ||
          `documents/${asset.document_id}/${asset.file_name ?? "mindmap.json"}`)
        : asset.asset_type === "luckysheet"
          ? (`tables/${asset.id}`)
        : asset.storage_path || asset.file_url || asset.file_name || "附件";    
    await copyText(path, "存储路径已复制");
  }, []);

  const handleDownloadAsset = useCallback(async (asset: MediaAsset) => {        
    if (asset.asset_type === "mindmap") {
      const resp = await fetch(`/api/mindmap/${asset.document_id}/${asset.id}`);
      if (!resp.ok) {
        window.alert("下载失败");
        return;
      }
      const payload = await resp.json().catch(() => null);
      const data = payload?.data ?? {};
      const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = asset.file_name ?? "mindmap.json";
      a.click();
      URL.revokeObjectURL(url);
      return;
    }
    if (asset.asset_type === "luckysheet") {
      window.alert("在线表格暂不支持下载（后续可做导出 JSON/Excel）");
      return;
    }
    const url = asset.signed_url ?? asset.file_url;
    if (!url) {
      window.alert("暂无可用的下载链接");
      return;
    }
    if (typeof window !== "undefined") {
      window.open(url, "_blank", "noopener,noreferrer");
    }
  }, []);

  const handleRenameAsset = useCallback(
    async (asset: MediaAsset) => {
      if (asset.asset_type === "mindmap") {
        window.alert("思维导图暂不支持重命名");
        return;
      }
      if (asset.asset_type === "luckysheet") {
        const currentTitle =
          (asset.file_name ?? "").toLowerCase().endsWith(".luckysheet")
            ? (asset.file_name ?? "").slice(0, -".luckysheet".length)
            : (asset.file_name ?? "");
        const input = window.prompt("输入新表格名", currentTitle);
        if (!input || !input.trim()) return;
        const newTitle = input.trim();
        const resp = await fetch(`/api/tables/${asset.id}`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ title: newTitle }),
        });
        if (!resp.ok) {
          const payload = await resp.json().catch(() => ({}));
          window.alert(payload?.error ?? "重命名失败");
          return;
        }
        window.dispatchEvent(new CustomEvent("online-table-saved", { detail: { tableId: asset.id } }));
        await sidebarQuery.refetch();
        setAssetMenu(null);
        return;
      }
      const input = window.prompt("输入新文件名", asset.file_name ?? "");       
      if (!input || !input.trim()) return;
      const newName = input.trim();
      const resp = await fetch("/api/media/batch", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "rename", assetIds: [asset.id], newName }),
      });
      if (!resp.ok) {
        const payload = await resp.json().catch(() => ({}));
        window.alert(payload?.error ?? "重命名失败");
        return;
      }
      await sidebarQuery.refetch();
      setAssetMenu(null);
      emitAssetsChanged(asset.document_id);
    },
    [sidebarQuery],
  );

  const handleMoveAsset = useCallback(
    async (asset: MediaAsset) => {
      if (asset.asset_type === "mindmap") {
        window.alert("思维导图文件无需移动，请在页面中直接编辑");
        return;
      }
      if (asset.asset_type === "luckysheet") {
        window.alert("在线表格暂不支持移动（后续可实现跨页面迁移）");
        return;
      }
      const target = window.prompt("输入目标页面 ID", asset.document_id);       
      if (!target || !target.trim()) return;
      const resp = await fetch("/api/media/batch", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          action: "move",
          assetIds: [asset.id],
          targetDocumentId: target.trim(),
        }),
      });
      if (!resp.ok) {
        const payload = await resp.json().catch(() => ({}));
        window.alert(payload?.error ?? "移动失败");
        return;
      }
      await sidebarQuery.refetch();
      setAssetMenu(null);
      emitAssetsChanged(asset.document_id);
      emitAssetsChanged(target.trim());
    },
    [sidebarQuery],
  );

  const handleDeleteAssets = useCallback(
    async (assetIds: string[], assetHint?: MediaAsset) => {
      const uniqueAssetIds = Array.from(new Set(assetIds));
      const assets = uniqueAssetIds
        .map((id) => mediaAssets.find((item) => item.id === id) ?? mindmapAssets.find((item) => item.id === id) ?? tableAssets.find((item) => item.id === id))
        .filter(Boolean) as MediaAsset[];

      if (assetHint && !assets.find((item) => item.id === assetHint.id)) {
        assets.unshift(assetHint);
      }

      const mindmapAssetsToDelete = assets.filter((item) => item.asset_type === "mindmap");
      const tableAssetsToDelete = assets.filter((item) => item.asset_type === "luckysheet");
      const fileAssetsToDelete = assets.filter(
        (item) => item.asset_type !== "mindmap" && item.asset_type !== "luckysheet",
      );
      const mindmapIdsByDocId = new Map<string, string[]>();
      mindmapAssetsToDelete.forEach((item) => {
        const prev = mindmapIdsByDocId.get(item.document_id) ?? [];
        prev.push(item.id);
        mindmapIdsByDocId.set(item.document_id, prev);
      });
      const fileAssetIdsByDocId = new Map<string, string[]>();
      fileAssetsToDelete.forEach((item) => {
        const prev = fileAssetIdsByDocId.get(item.document_id) ?? [];
        prev.push(item.id);
        fileAssetIdsByDocId.set(item.document_id, prev);
      });
      const fileAssetIds = Array.from(fileAssetIdsByDocId.values()).flat();

      for (const asset of mindmapAssetsToDelete) {
        const resp = await fetch(`/api/mindmap/${asset.document_id}/${asset.id}`, { method: "DELETE" });
        if (!resp.ok) {
          const payload = await resp.json().catch(() => ({}));
          window.alert(payload?.error ?? "删除思维导图失败");
          return;
        }
      }

      for (const asset of tableAssetsToDelete) {
        const resp = await fetch(`/api/tables/${asset.id}`, { method: "DELETE" });
        if (!resp.ok) {
          const payload = await resp.json().catch(() => ({}));
          window.alert(payload?.error ?? "删除在线表格失败");
          return;
        }
        window.dispatchEvent(new CustomEvent("online-table-deleted", { detail: { tableId: asset.id } }));
      }

      if (fileAssetIds.length > 0) {
        const resp = await fetch("/api/media/batch", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ action: "delete", assetIds: fileAssetIds }),
        });
        if (!resp.ok) {
          const payload = await resp.json().catch(() => ({}));
          window.alert(payload?.error ?? "删除失败");
          return;
        }
      }

      if (uniqueAssetIds.length > 0) {
        const mindmapSet = new Set(mindmapAssetsToDelete.map((item) => item.id));
        const tableSet = new Set(tableAssetsToDelete.map((item) => item.id));
        const fileSet = new Set(fileAssetsToDelete.map((item) => item.id));
        setMediaAssets((prev) => prev.filter((item) => !fileSet.has(item.id)));
        setMindmapAssets((prev) => prev.filter((item) => !mindmapSet.has(item.id)));
        setTableAssets((prev) => prev.filter((item) => !tableSet.has(item.id)));
      }
      setAssetMenu(null);
      mindmapIdsByDocId.forEach((ids, docId) => emitAssetsChanged(docId, undefined, undefined, false, ids));
      fileAssetIdsByDocId.forEach((ids, docId) => emitAssetsChanged(docId, undefined, ids));
      await sidebarQuery.refetch();
    },
    [mediaAssets, mindmapAssets, sidebarQuery, tableAssets],
  );

  const handleDeleteFileTreeSelection = useCallback(async () => {
    const { docIds, assetIds } = computeFileTreeDeleteTargets({
      visibleRows: fileTreeRows,
      selectedRowIds: fileTreeSelection.selectedRowIds,
      parentById: docParentById,
    });

    if (docIds.length === 0 && assetIds.length === 0) {
      return;
    }

    const docText = docIds.length > 0 ? `${docIds.length} 个页面（删除到垃圾桶）` : "";
    const selectedAssets = assetIds
      .map((id) => mediaAssets.find((item) => item.id === id) ?? mindmapAssets.find((item) => item.id === id) ?? tableAssets.find((item) => item.id === id))
      .filter(Boolean) as MediaAsset[];
    const mindmapCount = selectedAssets.filter((item) => item.asset_type === "mindmap").length;
    const tableCount = selectedAssets.filter((item) => item.asset_type === "luckysheet").length;
    const fileCount = selectedAssets.filter((item) => item.asset_type !== "mindmap" && item.asset_type !== "luckysheet").length;
    const unknownCount = Math.max(0, assetIds.length - mindmapCount - tableCount - fileCount);
    const assetTextParts: string[] = [];
    if (fileCount > 0) assetTextParts.push(`${fileCount} 个附件（删除，10 分钟内可撤销）`);
    if (mindmapCount > 0) assetTextParts.push(`${mindmapCount} 个思维导图（删除）`);
    if (tableCount > 0) assetTextParts.push(`${tableCount} 个在线表格（删除）`);
    if (unknownCount > 0) assetTextParts.push(`${unknownCount} 个对象（删除）`);
    const assetText = assetTextParts.length > 0 ? assetTextParts.join(" + ") : "";
    const joinText = docText && assetText ? " + " : "";
    const ok = window.confirm(`确认删除选中的 ${docText}${joinText}${assetText} 吗？`);
    if (!ok) return;

    try {
      if (docIds.length > 0) {
        const results = await Promise.all(
          docIds.map(async (documentId) => {
            const resp = await fetch("/api/documents/delete", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ documentId }),
            });
            return { documentId, ok: resp.ok };
          }),
        );
        const failed = results.filter((item) => !item.ok).map((item) => item.documentId);
        if (failed.length > 0) {
          window.alert(`部分页面删除失败：${failed.slice(0, 5).join(", ")}${failed.length > 5 ? "…" : ""}`);
          return;
        }

        docIds.forEach((documentId) => emitDocumentsChanged(documentId));
        if (activeId && docIds.includes(activeId)) {
          router.push("/");
        }
      }

      if (assetIds.length > 0) {
        await handleDeleteAssets(assetIds);
      }

      await refreshTree();
      setContextMenu(null);
      setFileTreeSelection((prev) => reduceFileTreeSelection(prev, { type: "clear" }));
    } catch (error) {
      window.alert(error instanceof Error ? error.message : "删除失败");
    }
  }, [
    activeId,
    docParentById,
    fileTreeRows,
    fileTreeSelection.selectedRowIds,
    handleDeleteAssets,
    mediaAssets,
    mindmapAssets,
    tableAssets,
    refreshTree,
    router,
  ]);

  const handleResizeStart = useCallback(
    (event: React.MouseEvent) => {
      event.preventDefault();
      const startX = event.clientX;
      const startWidth = width;
      const onMove = (moveEvent: MouseEvent) => {
        const delta = moveEvent.clientX - startX;
        const targetWidth = Math.min(420, Math.max(240, startWidth + delta));
        setWidth(targetWidth);
      };
      const onUp = () => {
        document.removeEventListener("mousemove", onMove);
        document.removeEventListener("mouseup", onUp);
      };
      document.addEventListener("mousemove", onMove);
      document.addEventListener("mouseup", onUp);
    },
    [setWidth, width],
  );

  const handleCreate = useCallback(
    async (parentId: string | null) => {
      const response = await fetch("/api/documents/create", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ parentId }),
      });

      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        window.alert(payload?.error ?? "新建页面失败，请稍后再试");
        return;
      }

      const payload = (await response.json()) as DocumentNode;
      const nextNode: DocumentNode = {
        ...payload,
        access_scope: payload.access_scope ?? "private",
        is_template: payload.is_template ?? false,
        updated_at: payload.updated_at ?? payload.created_at,
        title: payload.title ?? "无标题",
        children: [],
      };

      setTree((prev) => insertNode(prev, parentId, Number.MAX_SAFE_INTEGER, nextNode));
      setExpanded((prev) => {
        const next = new Set(prev);
        if (parentId) {
          next.add(parentId);
        }
        if (!parentId) {
          next.add(nextNode.id);
        }
        return next;
      });

      await refreshTree();
      router.push(`/documents/${nextNode.id}`);
    },
    [refreshTree, router],
  );

  const handleRename = useCallback(
    async (documentId: string, currentTitle: string | null) => {
      const title = window.prompt("输入新的标题", currentTitle ?? "无标题") ?? "";
      if (!title.trim()) {
        return;
      }
      await fetch("/api/documents/title", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ documentId, title: title.trim() }),
      });
      await refreshTree();
    },
    [refreshTree],
  );

  const moveLocalNode = useCallback((currentTree: DocumentNode[], nodeId: string, parentId: string | null, index: number) => {
    const cloned = cloneNodes(currentTree);
    const { removed, tree: withoutTarget } = removeNode(cloned, nodeId);
    if (!removed) {
      return currentTree;
    }
    const next = insertNode(withoutTarget, parentId, index, removed);
    return next;
  }, []);

  const handleMove = useCallback(
    async (documentId: string, parentId: string | null, index: number) => {
      setTree((prev) => moveLocalNode(prev, documentId, parentId, index));
      if (parentId) {
        setExpanded((prev) => new Set(prev).add(parentId));
      }
      await fetch("/api/documents/move", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          documentId,
          parentId,
          position: index,
        }),
      });
      await refreshTree();
    },
    [moveLocalNode, refreshTree, setExpanded],
  );

  const handleFileTreeDropFiles = useCallback(
    (docId: string, files: FileList, targetRow?: FileTreeRow) => {
      void (async () => {
        const droppedFiles = Array.from(files ?? []);
        if (droppedFiles.length === 0) return;

        const targetMindmapId = (() => {
          if (!targetRow) return null;
          if (targetRow.kind === "asset-folder" && targetRow.asset.asset_type === "mindmap") {
            return targetRow.asset.id;
          }
          if (targetRow.kind === "asset") {
            return extractMindmapIdFromStoragePath(targetRow.asset.storage_path);
          }
          return null;
        })();

        if (targetMindmapId) {
          setExpandedAssetFolders((prev) => new Set(prev).add(targetMindmapId));
        }

        const inferredTargetDocId =
          docId ||
          inferPasteTargetDocId({
            focusedRowId: fileTreeSelection.focusedRowId,
            rowById: fileTreeRowById,
            activeDocId: activeId || null,
          }) ||
          "";

        if (!inferredTargetDocId) {
          setTimeout(() => window.alert("请选择一个目标页面后再拖入文件"), 0);
          return;
        }

        const targetDoc = sidebarData.documents.find((doc) => doc.id === inferredTargetDocId) ?? null;
        const workspaceId = targetDoc?.workspace_id ?? sidebarData.activeWorkspaceId ?? "";
        if (!workspaceId) {
          setTimeout(() => window.alert("无法识别当前工作区，上传失败"), 0);
          return;
        }

        const errors: string[] = [];
        for (const file of droppedFiles) {
          try {
            const form = new FormData();
            form.append("file", file);
            form.append("workspaceId", workspaceId);
            form.append("documentId", inferredTargetDocId);
            if (targetMindmapId) {
              form.append("mindmapId", targetMindmapId);
            }
            const resp = await fetch("/api/media/upload", { method: "POST", body: form });
            if (!resp.ok) {
              const payload = await resp.json().catch(() => ({}));
              errors.push(`${file.name}: ${payload?.error ?? "上传失败"}`);
              continue;
            }
            const payload = (await resp.json()) as { asset?: MediaAsset };
            if (payload.asset?.id) {
              emitAssetsChanged(inferredTargetDocId, payload.asset);
              // 拖拽文件进文件树：如果落点就是当前打开的页面，则把文件也插入到主编辑区
              if (inferredTargetDocId === activeId && !targetMindmapId) {
                editorBridge?.insertMediaAsset?.(payload.asset);
              }
            } else {
              errors.push(`${file.name}: 返回数据缺少 asset`);
            }
          } catch (err) {
            errors.push(`${file.name}: ${(err as Error).message}`);
          }
        }

        await sidebarQuery.refetch();

        if (errors.length > 0) {
          setTimeout(() => {
            const shown = errors.slice(0, 6).join("\n");
            window.alert(
              errors.length === 1
                ? `部分文件上传失败：\n${shown}`
                : `部分文件上传失败（${errors.length}个）：\n${shown}${errors.length > 6 ? "\n..." : ""}`,
            );
          }, 0);
        }
      })();
    },
    [
      activeId,
      editorBridge,
      fileTreeRowById,
      fileTreeSelection.focusedRowId,
      sidebarData.activeWorkspaceId,
      sidebarData.documents,
      sidebarQuery,
    ],
  );

  const handleFileTreeInternalDrop = useCallback(
    (args: { targetRow: FileTreeRow; rowIds: string[]; copy: boolean }) => {    
      void (async () => {
        const targetDocId = inferDropTargetDocId(args.targetRow);
        if (!targetDocId) {
          setTimeout(() => window.alert("无法识别拖拽目标页面"), 0);
          return;
        }

        const targetMindmapId = (() => {
          if (args.targetRow.kind === "asset-folder" && args.targetRow.asset.asset_type === "mindmap") {
            return args.targetRow.asset.id;
          }
          if (args.targetRow.kind === "asset") {
            return extractMindmapIdFromStoragePath(args.targetRow.asset.storage_path);
          }
          return null;
        })();

        const targetSubPath = targetMindmapId ? `mindmaps/${targetMindmapId}` : undefined;

        if (targetMindmapId) {
          setExpandedAssetFolders((prev) => new Set(prev).add(targetMindmapId));
        }

        const uniqueRowIds: string[] = [];
        const seen = new Set<string>();
        args.rowIds.forEach((id) => {
          if (!id || seen.has(id)) return;
          seen.add(id);
          uniqueRowIds.push(id);
        });

        const rows = uniqueRowIds
          .map((rowId) => fileTreeRowById.get(rowId as any))
          .filter(Boolean) as FileTreeRow[];

        const docIds = rows.filter((row) => row.kind === "doc").map((row) => row.docId);
        const assetRows = rows.filter((row) => row.kind === "asset") as Extract<FileTreeRow, { kind: "asset" }>[];
        const copyableAssetIds = assetRows.filter((row) => isRealFileAsset(row.asset)).map((row) => row.asset.id);

        if (docIds.length === 0 && copyableAssetIds.length === 0) {
          setTimeout(() => window.alert("没有可拖拽的对象（虚拟附件暂不支持）"), 0);
          return;
        }

        if (args.copy) {
          if (docIds.length > 0) {
            const resp = await fetch("/api/documents/copy-tree", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                items: docIds.map((documentId) => ({ documentId, recursive: true })),
                targetParentId: targetDocId,
              }),
            });
            if (!resp.ok) {
              const payload = await resp.json().catch(() => ({}));
              setTimeout(() => window.alert(payload?.error ?? "复制页面失败"), 0);
              return;
            }
            await sidebarQuery.refetch();
            emitDocumentsChanged(targetDocId);
          }

          if (copyableAssetIds.length > 0) {
            const resp = await fetch("/api/media/batch", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                action: "copy",
                assetIds: copyableAssetIds,
                targetDocumentId: targetDocId,
                targetSubPath,
              }),
            });
            if (!resp.ok) {
              const payload = await resp.json().catch(() => ({}));
              setTimeout(() => window.alert(payload?.error ?? "复制附件失败"), 0);
              return;
            }
            await sidebarQuery.refetch();
            emitAssetsChanged(targetDocId);
          }

          return;
        }

        const topLevelDocIds = filterTopLevelDocIds(docIds, docParentById);
        if (topLevelDocIds.length > 0) {
          if (
            isInvalidDocDrop({
              sourceDocIds: topLevelDocIds,
              targetParentId: targetDocId,
              parentById: docParentById,
            })
          ) {
            setTimeout(() => window.alert("不能把页面移动到自身或其子页面中"), 0);
            return;
          }

          const baseIndex = childrenCountByParentId.get(targetDocId) ?? 0;
          setTree((prev) => {
            let next = prev;
            topLevelDocIds.forEach((id, offset) => {
              next = moveLocalNode(next, id, targetDocId, baseIndex + offset);
            });
            return next;
          });
          setExpanded((prev) => new Set(prev).add(targetDocId));

          for (let i = 0; i < topLevelDocIds.length; i += 1) {
            await fetch("/api/documents/move", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                documentId: topLevelDocIds[i],
                parentId: targetDocId,
                position: baseIndex + i,
              }),
            });
          }
          await refreshTree();
          emitDocumentsChanged(targetDocId);
        }

        if (copyableAssetIds.length > 0) {
          const resp = await fetch("/api/media/batch", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              action: "move",
              assetIds: copyableAssetIds,
              targetDocumentId: targetDocId,
              targetSubPath,
            }),
          });
          if (!resp.ok) {
            const payload = await resp.json().catch(() => ({}));
            setTimeout(() => window.alert(payload?.error ?? "移动附件失败"), 0);
            return;
          }
          await sidebarQuery.refetch();
          const sourceDocIds = new Set(assetRows.map((row) => row.asset.document_id));
          sourceDocIds.forEach((id) => emitAssetsChanged(id));
          emitAssetsChanged(targetDocId);
        }
      })();
    },
    [
      childrenCountByParentId,
      docParentById,
      fileTreeRowById,
      moveLocalNode,
      refreshTree,
      sidebarQuery,
    ],
  );

  const handleMovePrompt = useCallback(
    async (node: DocumentNode) => {
      if (typeof window === "undefined") {
        return;
      }
      const target = window.prompt("输入目标父页面 ID（留空表示移动到根目录）", node.parent_id ?? "");
      if (target === null) {
        return;
      }
      const trimmed = target.trim();
      await handleMove(node.id, trimmed.length > 0 ? trimmed : null, 0);
    },
    [handleMove],
  );

  const handleDelete = useCallback(
    async (documentId: string) => {
      await fetch("/api/documents/delete", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ documentId }),
      });
      await refreshTree();
      emitDocumentsChanged(documentId);
      if (activeId === documentId) {
        router.push("/");
      }
    },
    [activeId, refreshTree, router],
  );

  const handleConvertToChild = useCallback(
    async (documentId: string) => {
      const flat = flattenedPrivate;
      const currentIndex = flat.findIndex((item) => item.node.id === documentId);
      if (currentIndex <= 0) {
        return;
      }
      const targetParentId = flat[currentIndex - 1].node.id;
      await handleMove(documentId, targetParentId, flat[currentIndex - 1].node.children.length);
    },
    [flattenedPrivate, handleMove],
  );

  const confirmTrashAction = useCallback(
    (message: string) => {
      if (!trashConfirm) {
        return true;
      }
      return window.confirm(message);
    },
    [trashConfirm],
  );

  const handleRestoreFromTrash = useCallback(
    async (documentId: string) => {
      if (!confirmTrashAction("确认恢复该页面吗？")) {
        return;
      }
      await fetch("/api/documents/restore", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ documentId }),
      });
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    },
    [confirmTrashAction, refreshTree, sidebarQuery],
  );

  const handlePurgeFromTrash = useCallback(
    async (documentId: string) => {
      if (!confirmTrashAction("彻底删除后将无法找回，是否继续？")) {
        return;
      }
      await fetch("/api/documents/purge", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ documentId }),
      });
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    },
    [confirmTrashAction, refreshTree, sidebarQuery],
  );

  const handleEmptyTrash = useCallback(async () => {
    if (!sidebarData.activeWorkspaceId) {
      window.alert("暂无可清空的工作空间");
      return;
    }
    if (!confirmTrashAction("清空垃圾桶后将无法恢复，是否继续？")) {
      return;
    }
    setEmptyingTrash(true);
    try {
      const response = await fetch("/api/documents/empty-trash", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ workspaceId: sidebarData.activeWorkspaceId }),
      });
      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        window.alert(payload?.error ?? "清空垃圾桶失败，请稍后再试");
        return;
      }
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    } finally {
      setEmptyingTrash(false);
    }
  }, [confirmTrashAction, refreshTree, sidebarData.activeWorkspaceId, sidebarQuery]);

  const handleRestoreMediaAssetFromTrash = useCallback(
    async (assetId: string) => {
      if (!confirmTrashAction("确认恢复该附件吗？")) {
        return;
      }
      const response = await fetch("/api/media/batch", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "restore", assetIds: [assetId] }),
      });
      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        window.alert(payload?.error ?? "恢复附件失败，请稍后再试");
        return;
      }
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    },
    [confirmTrashAction, refreshTree, sidebarQuery],
  );

  const handlePurgeMediaAssetFromTrash = useCallback(
    async (assetId: string) => {
      if (!confirmTrashAction("彻底删除后将无法恢复，是否继续？")) {
        return;
      }
      const response = await fetch("/api/media/purge", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ assetId }),
      });
      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        window.alert(payload?.error ?? "彻底删除附件失败，请稍后再试");
        return;
      }
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    },
    [confirmTrashAction, refreshTree, sidebarQuery],
  );

  const handleEmptyMediaTrash = useCallback(async () => {
    if (!sidebarData.activeWorkspaceId) {
      window.alert("暂无可清空的工作空间");
      return;
    }
    if (!confirmTrashAction("清空附件垃圾桶后将无法恢复，是否继续？")) {
      return;
    }
    setEmptyingTrash(true);
    try {
      const [mediaResp, mindmapResp] = await Promise.all([
        fetch("/api/media/empty-trash", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ workspaceId: sidebarData.activeWorkspaceId }),
        }),
        fetch("/api/mindmap-trash/empty", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ workspaceId: sidebarData.activeWorkspaceId }),
        }),
      ]);
      if (!mediaResp.ok) {
        const payload = await mediaResp.json().catch(() => ({}));
        window.alert(payload?.error ?? "清空附件垃圾桶失败，请稍后再试");
        return;
      }
      if (!mindmapResp.ok) {
        const payload = await mindmapResp.json().catch(() => ({}));
        window.alert(payload?.error ?? "清空思维导图垃圾桶失败，请稍后再试");
        return;
      }
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    } finally {
      setEmptyingTrash(false);
    }
  }, [confirmTrashAction, refreshTree, sidebarData.activeWorkspaceId, sidebarQuery]);

  const handleRestoreMindmapFromTrash = useCallback(
    async (documentId: string, mindmapId: string) => {
      if (!confirmTrashAction("确认恢复该思维导图吗？")) {
        return;
      }
      const response = await fetch(`/api/mindmap/${documentId}/${mindmapId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "restore" }),
      });
      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        window.alert(payload?.error ?? "恢复思维导图失败，请稍后再试");
        return;
      }
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    },
    [confirmTrashAction, refreshTree, sidebarQuery],
  );

  const handlePurgeMindmapFromTrash = useCallback(
    async (documentId: string, mindmapId: string) => {
      if (!confirmTrashAction("彻底删除后将无法恢复，是否继续？")) {
        return;
      }
      const response = await fetch(`/api/mindmap/${documentId}/${mindmapId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action: "purge" }),
      });
      if (!response.ok) {
        const payload = await response.json().catch(() => ({}));
        window.alert(payload?.error ?? "彻底删除思维导图失败，请稍后再试");
        return;
      }
      await Promise.all([sidebarQuery.refetch(), refreshTree()]);
    },
    [confirmTrashAction, refreshTree, sidebarQuery],
  );

  const handleWorkspaceSwitch = useCallback(
    async (workspaceId: string) => {
      if (workspaceId === sidebarData.activeWorkspaceId) {
        setWorkspaceMenuOpen(false);
        return;
      }
      await fetch("/api/workspaces/switch", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ workspaceId }),
      });
      setWorkspaceMenuOpen(false);
      await sidebarQuery.refetch();
    },
    [sidebarData.activeWorkspaceId, sidebarQuery],
  );

  const openContextMenu = useCallback((event: React.MouseEvent, node: DocumentNode) => {
    event.preventDefault();
    event.stopPropagation();
    setContextMenu({
      node,
      x: event.clientX,
      y: event.clientY,
    });
  }, []);

  const handleTopButtonClick = useCallback(
    (buttonId: (typeof TOP_BUTTONS)[number]["id"]) => {
      if (buttonId === "search") {
        openSearchPalette();
        return;
      }
      if (
        buttonId === "starred" ||
        buttonId === "public" ||
        buttonId === "shared" ||
        buttonId === "templates"
      ) {
        setViewMode("section");
        setSectionsTrayOpen(true);
        setSectionCollapsed(buttonId, false);
        return;
      }
      window.alert("该功能即将上线，敬请期待");
    },
    [openSearchPalette, setSectionCollapsed, setSectionsTrayOpen, setViewMode],
  );

  useEffect(() => {
    if (!contextMenu) {
      return;
    }
    const closeMenu = () => setContextMenu(null);
    window.addEventListener("click", closeMenu);
    return () => window.removeEventListener("click", closeMenu);
  }, [contextMenu]);

  useEffect(() => {
    if (!workspaceMenuOpen) {
      return;
    }
    const handleClickOutside = (event: MouseEvent) => {
      if (
        workspaceMenuRef.current &&
        !workspaceMenuRef.current.contains(event.target as Node)
      ) {
        setWorkspaceMenuOpen(false);
      }
    };
    window.addEventListener("click", handleClickOutside);
    return () => window.removeEventListener("click", handleClickOutside);
  }, [workspaceMenuOpen]);

  const sidebarBody = (
    <div className="flex h-full min-w-0 flex-col">
      <div className="border-b border-[#f1f1f1] p-3">
        <div className="text-xs text-gray-400">当前工作空间</div>
        <div className="mt-1 flex items-center justify-between">
          <div>
            <div className="text-base font-semibold text-gray-900">{activeWorkspace?.name ?? "我的空间"}</div>
            <div className="text-xs text-gray-500">{activeWorkspace?.type === "team" ? "团队空间" : "个人空间"}</div>
          </div>
          <div className="relative" ref={workspaceMenuRef}>
            <button
              type="button"
              className="rounded-md border border-[#e1e1e1] px-2 py-1 text-xs text-gray-600 hover:bg-gray-50"
              onClick={(event) => {
                event.preventDefault();
                setWorkspaceMenuOpen((prev) => !prev);
              }}
            >
              切换
            </button>
            {workspaceMenuOpen && (
              <div className="absolute right-0 z-20 mt-2 w-56 rounded-md border border-[#eaeaea] bg-white shadow-lg">
                {sidebarData.workspaces.map((workspace) => (
                  <button
                    type="button"
                    key={workspace.id}
                    className={cn(
                      "flex w-full items-center justify-between px-3 py-2 text-left text-sm hover:bg-gray-50",
                      workspace.id === activeWorkspace?.id && "bg-[#f5f7fb]",
                    )}
                    onClick={() => void handleWorkspaceSwitch(workspace.id)}
                  >
                    <span>{workspace.name}</span>
                    {workspace.id === activeWorkspace?.id ? (
                      <span className="text-xs text-[#2563eb]">当前</span>
                    ) : (
                      <span className="text-xs text-gray-400">{workspace.memberCount} 人</span>
                    )}
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>

      <div className="grid grid-cols-4 gap-2 border-b border-[#f1f1f1] p-3">
        {TOP_BUTTONS.map((button) => (
          <button
            key={button.id}
            type="button"
            title={button.label}
            aria-label={button.label}
            className="flex h-12 items-center justify-center rounded-md border border-transparent text-gray-500 hover:border-[#d6e3ff] hover:bg-[#f5f7fb] hover:text-[#2563eb]"
            onClick={() => handleTopButtonClick(button.id)}
          >
            <button.icon className="h-5 w-5" />
            <span className="sr-only">{button.label}</span>
          </button>
        ))}
      </div>

      <div className="flex-1 min-w-0 overflow-hidden">
        <div className="flex h-full min-w-0 flex-col overflow-y-auto overflow-x-hidden">
          <div className="border-b border-[#f1f1f1] p-3">
            <div className="flex items-center gap-2 text-sm text-gray-500">
              <Library className="h-4 w-4" />
              页面树
            </div>
            <div className="mt-2 flex items-center gap-2">
              <Input
                className="h-8 flex-1 rounded-md border-[#eeeeee]"
                placeholder="搜索页面"
                value={filter}
                onChange={(event) => setFilter(event.target.value)}
              />
              <div className="flex rounded-md border border-[#e5e7eb] bg-white">
                <button
                  type="button"
                  className={cn(
                    "px-3 py-1 text-xs",
                    viewMode === "section" ? "bg-[#2563eb] text-white" : "text-gray-600",
                  )}
                  onClick={() => setViewMode("section")}
                >
                  分组
                </button>
                <button
                  type="button"
                  className={cn(
                    "px-3 py-1 text-xs",
                    viewMode === "filesystem" ? "bg-[#2563eb] text-white" : "text-gray-600",
                  )}
                  onClick={() => setViewMode("filesystem")}
                >
                  文件
                </button>
              </div>
            </div>
          </div>

          {viewMode === "section" ? (
            <>
              <button
                type="button"
                className="flex w-full items-center justify-between border-b border-[#f1f1f1] px-4 py-3 text-sm font-medium text-gray-600 hover:bg-gray-50"
                onClick={toggleSectionsTray}
              >
                <span className="flex items-center gap-2">
                  <Star className="h-4 w-4 text-[#f5a623]" />
                  星标 / 公共 / 共享 / 模板
                </span>
                <ChevronRight
                  className={cn(
                    "h-4 w-4 text-gray-400 transition-transform",
                    sectionsTrayOpen && "rotate-90",
                  )}
                />
              </button>

              {sectionsTrayOpen ? (
                <>
                  <SectionList
                    label="星标置顶"
                    icon={SECTION_ICONS.starred}
                    nodes={starredNodes}
                    collapsed={collapsedSections.starred}
                    onToggle={() => toggleSection("starred")}
                  />
                  <SectionList
                    label="公共页面"
                    icon={SECTION_ICONS.public}
                    nodes={publicNodes}
                    collapsed={collapsedSections.public}
                    onToggle={() => toggleSection("public")}
                  />
                  <SectionList
                    label="共享页面"
                    icon={SECTION_ICONS.shared}
                    nodes={sharedNodes}
                    collapsed={collapsedSections.shared}
                    onToggle={() => toggleSection("shared")}
                  />
                  <SectionList
                    label="模板中心"
                    icon={SECTION_ICONS.templates}
                    nodes={templateNodes}
                    collapsed={collapsedSections.templates}
                    onToggle={() => toggleSection("templates")}
                  />
                </>
              ) : null}

              <div className="flex flex-1 flex-col border-t border-[#f1f1f1]">
                <button
                  type="button"
                  className="flex items-center justify-between px-4 py-3 text-sm font-medium text-gray-600"
                  onClick={() => toggleSection("private")}
                >
                  <span>私有 / 我的页面</span>
                  <MoreHorizontal className="h-4 w-4 text-gray-400" />
                </button>
                {!collapsedSections.private ? (
                  <div className="flex-1 px-1 pb-2">
                    <div className="h-full rounded-md border border-[#eff2f6] bg-white">
                      <PrivateTree
                        nodes={filteredPrivateTree}
                        expanded={expanded}
                        activeId={activeId}
                        onToggleExpand={toggleExpand}
                        onMove={handleMove}
                        onCreateChild={handleCreate}
                        onContextMenu={openContextMenu}
                      />
                    </div>
                  </div>
                ) : (
                  <div className="px-4 pb-2 text-xs text-gray-400">已折叠</div>
                )}
              </div>
            </>
          ) : (
            <div className="flex flex-1 flex-col border-t border-[#f1f1f1]">
              <div className="flex-1 px-1 pb-2">
                <div
                  ref={fileTreeContainerRef}
                  data-testid="file-tree-container"
                  className="h-full w-full min-w-0 overflow-x-hidden rounded-md border border-[#eff2f6] bg-white"
                >
                  <FileTree
                    rows={fileTreeRows}
                    activeId={activeId}
                    selectedRowIds={fileTreeSelection.selectedRowIds}     
                    onRowClick={handleFileTreeRowClick}
                    onRowDoubleClick={(row, event) => handleFileTreeRowDoubleClick(row, event)}
                    onRowContextMenu={handleFileTreeRowContextMenu}
                    onRowDragStart={(row) => handleFileTreeRowDragStart(row)}
                    onToggleExpand={toggleExpand}
                    onToggleAssetFolderExpand={toggleAssetFolderExpand}
                    onCreateChild={handleCreate}
                    onBlankMouseDown={handleFileTreeBlankMouseDown}
                    onDropFiles={handleFileTreeDropFiles}
                    onInternalDrop={handleFileTreeInternalDrop}
                  />
                </div>
              </div>
            </div>
          )}

          <div className="border-t border-[#f1f1f1] p-3">
            <Button className="w-full justify-center gap-2" variant="outline" onClick={() => handleCreate(null)}>
              <Plus className="h-4 w-4" />
              新建页面
            </Button>
            <button
              type="button"
              className="mt-3 flex w-full items-center justify-between rounded-md border border-[#e8e8e8] px-3 py-2 text-sm text-gray-600 hover:bg-gray-50"
              onClick={() => setTrashOpen(true)}
            >
              <span className="flex items-center gap-2">
                <Trash2 className="h-4 w-4 text-gray-500" />
                垃圾桶
              </span>
              <span className="text-xs text-gray-400">
                {sidebarData.trashedDocuments.length +
                  (sidebarData.trashedMediaAssets?.length ?? 0) +
                  (sidebarData.trashedMindmapAssets?.length ?? 0)}{" "}
                条
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );

  return (
    <>
      <aside className="hidden h-full min-w-0 overflow-hidden md:flex" style={{ width }}>
        <div className="flex h-full min-w-0 flex-1 flex-col overflow-hidden border-r border-[#e9edf5] bg-white">
          {sidebarBody}
        </div>
        <div className="w-1 cursor-col-resize bg-transparent" onMouseDown={handleResizeStart} />
      </aside>
      <Drawer open={open} onOpenChange={setOpen}>
        <DrawerContent className="max-h-[92vh]">
          <DrawerHeader className="text-left">
            <DrawerTitle>页面目录</DrawerTitle>
          </DrawerHeader>
          <div className="px-4 pb-6">{sidebarBody}</div>
        </DrawerContent>
      </Drawer>
      {contextMenu && (
        <ContextMenu
          contextMenu={contextMenu}
          onClose={() => setContextMenu(null)}
          onOpenRight={(node) => handleOpenDocument(node.id, "sidebar")}
          onMove={handleMovePrompt}
          onEmbed={handleEmbedPrompt}
          onCopyLink={handleCopyLink}
          onCopyReference={handleCopyReference}
          onCopyId={handleCopyId}
          onDuplicate={handleDuplicateDocument}
          onRename={() => void handleRename(contextMenu.node.id, contextMenu.node.title)}
          onCreateChild={() => void handleCreate(contextMenu.node.id)}
          onConvertChild={() => void handleConvertToChild(contextMenu.node.id)}
          onDelete={() => void handleDeleteFileTreeSelection()}
        />
      )}
      {assetMenu && (
        <AssetContextMenu
          asset={assetMenu.asset}
          position={{ x: assetMenu.x, y: assetMenu.y }}
          onClose={() => setAssetMenu(null)}
          onOpen={handleOpenAsset}
          onCopyLink={handleCopyAssetLink}
          onCopyPath={handleCopyAssetPath}
          onRename={handleRenameAsset}
          onMove={handleMoveAsset}
          onDelete={() => void handleDeleteFileTreeSelection()}
          onDownload={handleDownloadAsset}
        />
      )}
      <Drawer open={trashOpen} onOpenChange={setTrashOpen}>
        <DrawerContent className="max-h-[90vh]">
          <DrawerHeader className="text-left">
            <DrawerTitle>垃圾桶</DrawerTitle>
            {trashTab === "documents" ? (
              <p className="mt-1 text-xs text-gray-500">180 天内的记录都可以在这里恢复。</p>
            ) : (
              <p className="mt-1 text-xs text-gray-500">
                附件删除后 10 分钟内可撤销；也可在此手动清空（不可撤销）。
              </p>
            )}
          </DrawerHeader>
          <div className="space-y-4 px-4 pb-6">
            <div className="flex gap-2">
              <button
                type="button"
                className={`rounded-md border px-3 py-1 text-sm ${
                  trashTab === "documents"
                    ? "border-[#d7e5ff] bg-[#eff5ff] text-[#2563eb]"
                    : "border-[#e8e8e8] text-gray-600 hover:bg-gray-50"
                }`}
                onClick={() => setTrashTab("documents")}
              >
                页面 ({sidebarData.trashedDocuments.length})
              </button>
              <button
                type="button"
                className={`rounded-md border px-3 py-1 text-sm ${
                  trashTab === "assets"
                    ? "border-[#d7e5ff] bg-[#eff5ff] text-[#2563eb]"
                    : "border-[#e8e8e8] text-gray-600 hover:bg-gray-50"
                }`}
                onClick={() => setTrashTab("assets")}
              >
                附件 (
                {(sidebarData.trashedMediaAssets?.length ?? 0) + (sidebarData.trashedMindmapAssets?.length ?? 0)}
                )
              </button>
            </div>
            <Input
              placeholder={trashTab === "documents" ? "搜索删除的页面..." : "搜索删除的附件..."}
              value={trashSearch}
              onChange={(event) => setTrashSearch(event.target.value)}
            />
            <div className="flex flex-wrap items-center justify-between gap-2 text-sm text-gray-600">
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={trashConfirm}
                  onChange={(event) => setTrashConfirm(event.target.checked)}
                />
                操作确认
              </label>
              <Button
                type="button"
                size="sm"
                variant="destructive"
                onClick={() => void (trashTab === "documents" ? handleEmptyTrash() : handleEmptyMediaTrash())}
                disabled={emptyingTrash}
              >
                {emptyingTrash
                  ? "清空中..."
                  : trashTab === "documents"
                    ? "清空垃圾桶"
                    : "清空附件垃圾桶"}
              </Button>
            </div>
            <div className="rounded-lg border border-[#eaeaea]">
              {trashTab === "documents" ? (
                filteredTrash.length === 0 ? (
                  <div className="p-4 text-sm text-gray-400">暂无已删除页面</div>
                ) : (
                  filteredTrash.map((item) => (
                    <div
                      key={item.id}
                      className="flex items-center justify-between border-b border-[#f3f3f3] px-3 py-2 text-sm last:border-b-0"
                    >
                      <div>
                        <div className="font-medium text-gray-800">{item.title || "无标题"}</div>
                        <div className="text-xs text-gray-400">
                          删除时间：{new Date(item.deleted_at).toLocaleString()}
                        </div>
                      </div>
                      <div className="flex gap-2">
                        <button
                          type="button"
                          className="rounded-md border border-[#d7e5ff] px-2 py-1 text-xs text-[#2563eb] hover:bg-[#eff5ff]"
                          onClick={() => void handleRestoreFromTrash(item.id)}
                        >
                          恢复
                        </button>
                        <button
                          type="button"
                          className="rounded-md border border-red-100 px-2 py-1 text-xs text-red-500 hover:bg-red-50"
                          onClick={() => void handlePurgeFromTrash(item.id)}
                        >
                          彻底删除
                        </button>
                      </div>
                    </div>
                  ))
                )
              ) : filteredTrashedMediaAssets.length === 0 ? (
                <div className="p-4 text-sm text-gray-400">暂无已删除附件</div>
              ) : (
                filteredTrashedMediaAssets.map((item) => (
                  <div
                    key={item.id}
                    className="flex items-center justify-between border-b border-[#f3f3f3] px-3 py-2 text-sm last:border-b-0"
                  >
                    <div className="min-w-0 pr-2">
                      <div className="truncate font-medium text-gray-800">{item.file_name || "未命名附件"}</div>
                      <div className="text-xs text-gray-400">
                        删除时间：{item.deleted_at ? new Date(item.deleted_at).toLocaleString() : "-"}
                      </div>
                      <div className="text-xs text-gray-400">
                        类型：{item.mime_type ?? item.asset_type ?? "unknown"}
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <button
                        type="button"
                        className="rounded-md border border-[#d7e5ff] px-2 py-1 text-xs text-[#2563eb] hover:bg-[#eff5ff]"
                        onClick={() =>
                          void (item.asset_type === "mindmap"
                            ? handleRestoreMindmapFromTrash(item.document_id, item.id)
                            : handleRestoreMediaAssetFromTrash(item.id))
                        }
                      >
                        恢复
                      </button>
                      <button
                        type="button"
                        className="rounded-md border border-red-100 px-2 py-1 text-xs text-red-500 hover:bg-red-50"
                        onClick={() =>
                          void (item.asset_type === "mindmap"
                            ? handlePurgeMindmapFromTrash(item.document_id, item.id)
                            : handlePurgeMediaAssetFromTrash(item.id))
                        }
                      >
                        彻底删除
                      </button>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        </DrawerContent>
      </Drawer>
    </>
  );
}

interface SectionListProps {
  label: string;
  icon: React.ReactNode;
  nodes: DocumentNode[];
  collapsed: boolean;
  onToggle: () => void;
}

function SectionList({ label, icon, nodes, collapsed, onToggle }: SectionListProps) {
  return (
    <div className="border-b border-[#f5f5f5]">
      <button
        type="button"
        className="flex w-full items-center justify-between px-4 py-3 text-sm font-medium text-gray-600"
        onClick={onToggle}
      >
        <span className="flex items-center gap-2">
          {icon}
          {label}
        </span>
        <span className="text-xs text-gray-400">{nodes.length}</span>
      </button>
      {!collapsed && (
        <div className="space-y-1 px-4 pb-3">
          {nodes.length === 0 ? (
            <div className="text-xs text-gray-400">暂无内容</div>
          ) : (
            nodes.map((node) => (
              <Link
                key={node.id}
                href={`/documents/${node.id}`}
                className="block truncate rounded-md px-2 py-1 text-sm text-gray-600 hover:bg-[#f5f7fb] hover:text-[#2563eb]"
              >
                {node.title || "无标题"}
              </Link>
            ))
          )}
        </div>
      )}
    </div>
  );
}

interface ContextMenuProps {
  contextMenu: ContextMenuState;
  onClose: () => void;
  onOpenRight: (node: DocumentNode) => void;
  onMove: (node: DocumentNode) => void;
  onEmbed: (node: DocumentNode) => void;
  onCopyLink: (node: DocumentNode, withTitle?: boolean) => void;
  onCopyReference: (node: DocumentNode, mode: "inline" | "embed") => void;
  onCopyId: (node: DocumentNode) => void;
  onDuplicate: (node: DocumentNode) => void;
  onRename: () => void;
  onCreateChild: () => void;
  onConvertChild: () => void;
  onDelete: () => void;
}

function ContextMenu({
  contextMenu,
  onClose,
  onOpenRight,
  onMove,
  onEmbed,
  onCopyLink,
  onCopyReference,
  onCopyId,
  onDuplicate,
  onRename,
  onCreateChild,
  onConvertChild,
  onDelete,
}: ContextMenuProps) {
  const { node } = contextMenu;
  const menuRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ top: contextMenu.y, left: contextMenu.x });

  useLayoutEffect(() => {
    const clampPosition = () => {
      const element = menuRef.current;
      if (!element) {
        setPosition({ top: contextMenu.y, left: contextMenu.x });
        return;
      }
      const rect = element.getBoundingClientRect();
      const padding = 12;
      const maxLeft = Math.max(padding, window.innerWidth - rect.width - padding);
      const maxTop = Math.max(padding, window.innerHeight - rect.height - padding);
      const left = Math.min(Math.max(padding, contextMenu.x), maxLeft);
      const top = Math.min(Math.max(padding, contextMenu.y), maxTop);
      setPosition({ top, left });
    };
    clampPosition();
    window.addEventListener("resize", clampPosition);
    return () => window.removeEventListener("resize", clampPosition);
  }, [contextMenu]);

  const handleAction = (action: () => void) => {
    action();
    onClose();
  };

  const buttonClass =
    "flex w-full items-center gap-2 rounded-sm px-3 py-2 text-left text-sm text-gray-700 hover:bg-[#f5f7fb]";

  return (
    <div
      ref={menuRef}
      className="fixed z-50 rounded-xl border border-[#ececec] bg-white p-1 text-sm text-gray-700 shadow-2xl"
      style={{ top: position.top, left: position.left, minWidth: 220 }}
    >
      <button
        type="button"
        className={buttonClass}
        onClick={() => handleAction(() => onOpenRight(node))}
      >
        <PanelRightOpen className="h-4 w-4 text-[#2563eb]" />
        <span>在右侧边栏打开</span>
        <span className="ml-auto text-[11px] text-gray-400">Alt + O</span>
      </button>
      <button
        type="button"
        className={buttonClass}
        onClick={() => handleAction(() => onMove(node))}
      >
        <ArrowRightLeft className="h-4 w-4 text-gray-500" />
        <span>移动到...</span>
      </button>
      <button
        type="button"
        className={buttonClass}
        onClick={() => handleAction(() => onEmbed(node))}
      >
        <GitMerge className="h-4 w-4 text-gray-500" />
        <span>嵌入到...</span>
      </button>
      <div className="relative">
        <button type="button" className={`${buttonClass} pr-6`} onClick={() => handleAction(() => onCopyLink(node))}>
          <LinkIcon className="h-4 w-4 text-gray-500" />
          <span>复制访问链接</span>
        </button>
        <button
          type="button"
          className={`${buttonClass} pr-6`}
          onClick={() => handleAction(() => onCopyLink(node, true))}
        >
          <LinkIcon className="h-4 w-4 text-gray-500" />
          <span>复制访问链接（带标题）</span>
        </button>
      </div>
      <div className="relative group">
        <button type="button" className={`${buttonClass} pr-6`}>
          <Copy className="h-4 w-4 text-gray-500" />
          <span>复制页面引用链接</span>
          <ChevronRight className="ml-auto h-3.5 w-3.5 text-gray-400" />
        </button>
        <div className="invisible absolute left-full top-0 z-50 ml-1 min-w-[180px] rounded-md border border-[#e5e5e5] bg-white py-1 shadow-xl group-hover:visible">
          <button
            type="button"
            className={buttonClass}
            onClick={() => handleAction(() => onCopyReference(node, "inline"))}
          >
            (( 行内页面引用
          </button>
          <button
            type="button"
            className={buttonClass}
            onClick={() => handleAction(() => onCopyReference(node, "embed"))}
          >
            {"{{ 嵌入页面引用"}
          </button>
        </div>
      </div>
      <button
        type="button"
        className={buttonClass}
        onClick={() => handleAction(() => onCopyId(node))}
      >
        <Hash className="h-4 w-4 text-gray-500" />
        <span>复制页面 ID</span>
      </button>
      <button
        type="button"
        className={buttonClass}
        onClick={() => handleAction(() => onDuplicate(node))}
      >
        <Copy className="h-4 w-4 text-gray-500" />
        <span>拷贝副本</span>
      </button>
      <div className="my-1 border-t border-[#f2f2f2]" />
      <button type="button" className={buttonClass} onClick={() => handleAction(onRename)}>
        <Edit3 className="h-4 w-4 text-gray-500" />
        <span>重命名</span>
      </button>
      <button type="button" className={buttonClass} onClick={() => handleAction(onCreateChild)}>
        <Plus className="h-4 w-4 text-gray-500" />
        <span>新建子页面</span>
      </button>
      <button type="button" className={buttonClass} onClick={() => handleAction(onConvertChild)}>
        <ArrowUpRight className="h-4 w-4 text-gray-500" />
        <span>转为上一个子页面</span>
      </button>
      <button
        type="button"
        className="mt-1 flex w-full items-center gap-2 rounded-sm px-3 py-2 text-left text-sm text-red-500 hover:bg-red-50"
        onClick={() => handleAction(onDelete)}
      >
        <Trash2 className="h-4 w-4" />
        <span>删除到垃圾桶</span>
      </button>
    </div>
  );
}

const cloneNodes = (nodes: DocumentNode[]): DocumentNode[] =>
  nodes.map((node) => ({
    ...node,
    children: cloneNodes(node.children),
  }));

const removeNode = (
  nodes: DocumentNode[],
  targetId: string,
): { removed: DocumentNode | null; tree: DocumentNode[] } => {
  let removed: DocumentNode | null = null;
  const nextTree = nodes
    .map((node) => {
      if (removed) return node;
      if (node.id === targetId) {
        removed = node;
        return null;
      }
      const { removed: childRemoved, tree: childTree } = removeNode(node.children, targetId);
      if (childRemoved) {
        removed = childRemoved;
        return { ...node, children: childTree };
      }
      return node;
    })
    .filter(Boolean) as DocumentNode[];
  return { removed, tree: nextTree };
};

const insertNode = (nodes: DocumentNode[], parentId: string | null, index: number, newNode: DocumentNode): DocumentNode[] => {
  if (!parentId) {
    const next = [...nodes];
    next.splice(Math.min(index, next.length), 0, newNode);
    return next;
  }
  return nodes.map((node) => {
    if (node.id === parentId) {
      const children = [...node.children];
      const targetIndex = Math.min(index, children.length);
      children.splice(targetIndex, 0, newNode);
      return { ...node, children };
    }
    return { ...node, children: insertNode(node.children, parentId, index, newNode) };
  });
};

const filterTree = (nodes: DocumentNode[], keyword: string): DocumentNode[] => {
  if (!keyword) {
    return nodes;
  }
  const filtered: DocumentNode[] = [];
  nodes.forEach((node) => {
    const childMatches = filterTree(node.children, keyword);
    const title = (node.title ?? "").toLowerCase();
    if (title.includes(keyword) || childMatches.length > 0) {
      filtered.push({ ...node, children: childMatches });
    }
  });
  return filtered;
};

function collectNodeIds(nodes: DocumentNode[], bag: Set<string> = new Set()): Set<string> {
  nodes.forEach((node) => {
    bag.add(node.id);
    collectNodeIds(node.children, bag);
  });
  return bag;
}

const buildDocumentUrl = (documentId: string): string => {
  if (typeof window === "undefined" || !window.location) {
    return `/documents/${documentId}`;
  }
  return `${window.location.origin}/documents/${documentId}`;
};

const buildMindmapUrl = (documentId: string, mindmapId: string): string => {
  if (typeof window === "undefined" || !window.location) {
    return `/mindmap/${documentId}/${mindmapId}`;
  }
  return `${window.location.origin}/mindmap/${documentId}/${mindmapId}`;
};

const buildTableUrl = (tableId: string): string => {
  if (typeof window === "undefined" || !window.location) {
    return `/tables/${tableId}/view`;
  }
  return `${window.location.origin}/tables/${tableId}/view`;
};

const copyText = async (text: string, successMessage: string) => {
  if (typeof navigator !== "undefined" && navigator.clipboard) {
    try {
      await navigator.clipboard.writeText(text);
      window.alert(successMessage);
      return;
    } catch {
      // ignore and fallback
    }
  }
  window.prompt("复制失败，请手动复制内容", text);
};