nex_docus/frontend/src/pages/Document/DocumentPage.jsx

import { useState, useEffect, useRef, useMemo } from 'react'
import { useParams, useNavigate, useSearchParams } from 'react-router-dom'
import { Layout, Menu, Spin, Button, Tooltip, message, Modal, Input, Space, Dropdown, Empty, Switch } from 'antd'
import { ShareAltOutlined, FileTextOutlined, FolderOutlined, FolderOpenOutlined, FilePdfOutlined, CopyOutlined, CloudDownloadOutlined, CloudUploadOutlined, ArrowLeftOutlined, ReloadOutlined, VerticalAlignTopOutlined } from '@ant-design/icons'
import ReactMarkdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
import rehypeSlug from 'rehype-slug'
import rehypeHighlight from 'rehype-highlight'
import 'highlight.js/styles/github.css'
import Highlighter from 'react-highlight-words'
import Mark from 'mark.js'
import GithubSlugger from 'github-slugger'
import { getProjectTree, getFileContent, getDocumentUrl, getExportPdfUrl } from '@/api/file'
import { gitPull, gitPush, getGitRepos } from '@/api/project'
import { getFileShareInfo, createOrUpdateFileShare, deleteFileShare } from '@/api/share'
import { searchDocuments } from '@/api/search'
import VirtualPDFViewer from '@/components/PDFViewer/VirtualPDFViewer'
import FloatingToc from '@/components/FloatingToc/FloatingToc'
import Toast from '@/components/Toast/Toast'
import ModeSwitch from '@/components/ModeSwitch/ModeSwitch'
import LargeMarkdownViewer, { isLargeMarkdownContent } from '@/components/LargeMarkdownViewer/LargeMarkdownViewer'
import './DocumentPage.css'

const { Sider, Content } = Layout
const MAX_TOC_ITEMS = 500

// 高亮渲染组件
const HighlightText = ({ text, keyword }) => {
  if (!keyword || !text) return text;
  return (
    <Highlighter
      highlightClassName="search-highlight"
      searchWords={[keyword]}
      autoEscape={true}
      textToHighlight={text}
    />
  )
}

function DocumentPage() {
  const { projectId } = useParams()
  const navigate = useNavigate()
  const [searchParams, setSearchParams] = useSearchParams()
  const [fileTree, setFileTree] = useState([])
  const [selectedFile, setSelectedFile] = useState('')
  const [selectedNodeKey, setSelectedNodeKey] = useState('')
  const [markdownContent, setMarkdownContent] = useState('')
  const [loading, setLoading] = useState(false)
  const [openKeys, setOpenKeys] = useState([])
  const [tocItems, setTocItems] = useState([])
  const [shareModalVisible, setShareModalVisible] = useState(false)
  const [shareInfo, setShareInfo] = useState(null)
  const [hasPassword, setHasPassword] = useState(false)
  const [password, setPassword] = useState('')
  const [userRole, setUserRole] = useState('viewer')
  const [pdfUrl, setPdfUrl] = useState('')
  const [pdfFilename, setPdfFilename] = useState('')
  const [viewMode, setViewMode] = useState('markdown')
  const [gitRepos, setGitRepos] = useState([])
  const [projectName, setProjectName] = useState('')
  const [refreshing, setRefreshing] = useState(false)
  
  // 搜索相关状态
  const [searchKeyword, setSearchKeyword] = useState('')
  // 知识库引用跳转专用：只高亮定位，不触发全文搜索、不过滤文件树
  const [highlightKeyword, setHighlightKeyword] = useState('')
  const [matchedFilePaths, setMatchedFilePaths] = useState(new Set())
  const [isSearching, setIsSearching] = useState(false)
  const [modeSwitchValue, setModeSwitchValue] = useState('view')
  
  const contentRef = useRef(null)
  const largeMarkdownRef = useRef(null)
  const modeSwitchingRef = useRef(false)
  const [pdfToolbarTarget, setPdfToolbarTarget] = useState(null)
  const isLargeMarkdown = isLargeMarkdownContent(markdownContent)

  const getHeaderDisplay = (filePath) => {
    const resolvedPath = selectedNodeKey || filePath || 'README.md'
    const fileName = resolvedPath.split('/').filter(Boolean).pop() || 'README.md'
    const selectedNode = selectedNodeKey ? findNodeByKey(fileTree, selectedNodeKey) : null
    const isFolder = Boolean(selectedNode && !selectedNode.isLeaf)
    const isPdf = fileName.toLowerCase().endsWith('.pdf')
    const FileIcon = isFolder ? FolderOutlined : isPdf ? FilePdfOutlined : FileTextOutlined

    return {
      fileName,
      FileIcon,
      isPdf,
    }
  }

  const navigateWithTransition = (to) => {
    if (document.startViewTransition) {
      document.startViewTransition(() => navigate(to))
      return
    }
    navigate(to)
  }

  const updateSelectedParam = (path, isFile = true) => {
    const nextParams = new URLSearchParams(searchParams)
    nextParams.delete('file')
    nextParams.delete('selected')

    if (path) {
      nextParams.set(isFile ? 'file' : 'selected', path)
    }
    setSearchParams(nextParams, { replace: true })
  }

  const updateFileParam = (filePath) => {
    updateSelectedParam(filePath, true)
  }

  const expandParentFolders = (path) => {
    const parts = path.split('/')
    const allParentPaths = []
    let currentPath = ''

    for (let i = 0; i < parts.length - 1; i++) {
      currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i]
      allParentPaths.push(currentPath)
    }

    if (allParentPaths.length > 0) {
      setOpenKeys(prev => [...new Set([...prev, ...allParentPaths])])
    }
  }

  const selectFolder = (folderPath, { syncUrl = false } = {}) => {
    setSelectedFile('')
    setSelectedNodeKey(folderPath)
    setMarkdownContent('')
    setTocItems([])
    setViewMode('folder')
    expandParentFolders(`${folderPath}/placeholder`)

    if (syncUrl) {
      updateSelectedParam(folderPath, false)
    }
  }

  const openDocumentPath = (filePath, { syncUrl = false } = {}) => {
    setSelectedFile(filePath)
    setSelectedNodeKey(filePath)
    expandParentFolders(filePath)

    if (syncUrl) {
      updateFileParam(filePath)
    }

    if (filePath.toLowerCase().endsWith('.pdf')) {
      setPdfUrl(buildDocumentUrl(filePath))
      setPdfFilename(filePath.split('/').pop())
      setViewMode('pdf')
    } else {
      setViewMode('markdown')
      loadMarkdown(filePath)
    }
  }

  const buildDocumentUrl = (filePath, refreshKey = null) => {
    const params = new URLSearchParams()
    const token = localStorage.getItem('access_token')

    if (token) {
      params.set('token', token)
    }
    if (refreshKey) {
      params.set('refresh', String(refreshKey))
    }

    const query = params.toString()
    return `${getDocumentUrl(projectId, filePath)}${query ? `?${query}` : ''}`
  }

  useEffect(() => {
    loadFileTree()
  }, [projectId])

  const handleClose = () => {
    Modal.confirm({
      title: '确认退出',
      content: '确定要退出当前项目页面吗？',
      okText: '退出',
      cancelText: '取消',
      onOk: () => {
        if (userRole === 'owner') {
          navigate('/projects/my')
        } else {
          navigate('/projects/share')
        }
      },
    })
  }

  // 监听 URL 参数变化，处理文件导航和搜索
  useEffect(() => {
    // 只有当文件树加载完成后才处理导航，否则无法正确展开目录
    if (fileTree.length === 0) return

    const fileParam = searchParams.get('file')
    const selectedParam = searchParams.get('selected')
    const keywordParam = searchParams.get('keyword')
    const highlightParam = searchParams.get('hl')

    // 引用跳转：仅设置高亮关键词，交由渲染层高亮并滚动到命中位置
    if (highlightParam && highlightParam !== highlightKeyword) {
      setHighlightKeyword(highlightParam)
    } else if (!highlightParam && highlightKeyword) {
      setHighlightKeyword('')
    }
    
    // 处理搜索
    if (keywordParam && keywordParam !== searchKeyword) {
      handleSearch(keywordParam)
    }

    // 处理文件加载
    if (selectedParam) {
      const targetNode = findNodeByKey(fileTree, selectedParam)
      if (targetNode && !targetNode.isLeaf && selectedParam !== selectedNodeKey) {
        selectFolder(selectedParam)
      }
    } else if (fileParam) {
      const targetNode = findNodeByKey(fileTree, fileParam)
      if (targetNode && !targetNode.isLeaf) {
        selectFolder(fileParam, { syncUrl: true })
      } else if (fileParam !== selectedFile) {
        openDocumentPath(fileParam)
      }
    } else {
      // 如果没有指定文件，且当前没有选中文件，默认打开 README.md
      if (!selectedFile && !selectedNodeKey) {
        const readmeNode = findReadme(fileTree)
        if (readmeNode) {
          openDocumentPath(readmeNode.key, { syncUrl: true })
        }
      }
    }
  }, [searchParams, fileTree])

  // 处理搜索
  const handleSearch = async (value) => {
    // 先更新搜索状态，任何清理逻辑失败都不能阻断搜索
    setSearchKeyword(value)
    setHighlightKeyword('')
    try {
      // 清理引用跳转的 mark.js 高亮
      if (contentRef.current) {
        new Mark(contentRef.current).unmark({ className: 'citation-highlight' })
      }
      // 手动搜索时移除引用跳转定位参数，避免后续导航重新触发旧高亮
      if (searchParams.get('hl')) {
        const nextParams = new URLSearchParams(searchParams)
        nextParams.delete('hl')
        setSearchParams(nextParams, { replace: true })
      }
    } catch (error) {
      console.warn('清理引用高亮失败:', error)
    }
    if (!value.trim()) {
      setMatchedFilePaths(new Set())
      return
    }

    setIsSearching(true)
    try {
      const res = await searchDocuments(value, projectId)
      const paths = new Set(res.data.map(item => item.file_path))
      setMatchedFilePaths(paths)
      
      // 自动展开匹配的节点
      const keysToExpand = new Set(openKeys)
      res.data.forEach(item => {
        const parts = item.file_path.split('/')
        let currentPath = ''
        for (let i = 0; i < parts.length - 1; i++) {
          currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i]
          keysToExpand.add(currentPath)
        }
      })
      setOpenKeys(Array.from(keysToExpand))
    } catch (error) {
      console.error('Search error:', error)
    } finally {
      setIsSearching(false)
    }
  }

  // 过滤文件树
  const filteredTreeData = useMemo(() => {
    if (!searchKeyword.trim()) return fileTree

    const loop = (data) => {
      const result = []
      for (const node of data) {
        const titleMatch = node.title.toLowerCase().includes(searchKeyword.toLowerCase())
        const contentMatch = matchedFilePaths.has(node.key)
        
        if (node.children) {
          const children = loop(node.children)
          if (children.length > 0 || titleMatch) {
            result.push({ ...node, children })
          }
        } else {
          if (titleMatch || contentMatch) {
            result.push(node)
          }
        }
      }
      return result
    }
    return loop(fileTree)
  }, [fileTree, searchKeyword, matchedFilePaths])

  const loadGitRepos = async () => {
    try {
      const res = await getGitRepos(projectId)
      setGitRepos(res.data || [])
    } catch (error) {
      console.error('Load git repos error:', error)
    }
  }

  // 加载文件树
  const loadFileTree = async ({ throwOnError = false } = {}) => {
    try {
      const res = await getProjectTree(projectId)
      const data = res.data || {}
      const tree = data.tree || data || []  // 兼容新旧格式
      const role = data.user_role || 'viewer'
      const name = data.project_name

      setFileTree(tree)
      setUserRole(role)
      setProjectName(name)
      return tree
    } catch (error) {
      console.error('Load file tree error:', error)
      if (throwOnError) {
        throw error
      }
      return []
    }
  }

  // 查找根目录的 README.md
  const findReadme = (nodes) => {
    // 只在根目录查找
    for (const node of nodes) {
      if (node.title === 'README.md' && node.isLeaf) {
        return node
      }
    }
    return null
  }

  const findNodeByKey = (nodes, key) => {
    for (const node of nodes) {
      if (node.key === key) {
        return node
      }
      if (node.children?.length) {
        const found = findNodeByKey(node.children, key)
        if (found) {
          return found
        }
      }
    }
    return null
  }

  // 转换文件树为菜单项
  const convertTreeToMenuItems = (nodes) => {
    return nodes.map((node) => {
      const titleText = node.title.endsWith('.md') ? node.title.replace('.md', '') : node.title
      const labelNode = (
        <Tooltip title={node.title} placement="right">
          <span className="docs-menu-label">
            <span className="docs-menu-label-text">{titleText}</span>
            {node.is_shared && <ShareAltOutlined className="docs-menu-share-icon" title="已分享" />}
          </span>
        </Tooltip>
      )

      if (!node.isLeaf) {
        const isOpen = openKeys.includes(node.key)
        // 目录
        return {
          key: node.key,
          label: labelNode,
          icon: isOpen ? <FolderOpenOutlined /> : <FolderOutlined />,
          onTitleClick: () => selectFolder(node.key, { syncUrl: true }),
          children: node.children ? convertTreeToMenuItems(node.children) : [],
        }
      } else if (node.title && node.title.endsWith('.md')) {
        // Markdown 文件
        return {
          key: node.key,
          label: labelNode,
          icon: <FileTextOutlined />,
        }
      } else if (node.title && node.title.endsWith('.pdf')) {
        // PDF 文件
        return {
          key: node.key,
          label: labelNode,
          icon: <FilePdfOutlined style={{ color: '#f5222d' }} />,
        }
      }
      return null
    }).filter(Boolean)
  }

  // 加载 markdown 文件
  const loadMarkdown = async (filePath) => {
    setLoading(true)
    setTocItems([]) // 清空旧的目录数据
    try {
      const res = await getFileContent(projectId, filePath)
      setMarkdownContent(res.data?.content || '')

      // 滚动到顶部
      if (contentRef.current) {
        contentRef.current.scrollTo({ top: 0, behavior: 'auto' })
      }
    } catch (error) {
      console.error('Load markdown error:', error)
      setMarkdownContent('# 文档加载失败\n\n无法加载该文档，请稍后重试。')
    } finally {
      setLoading(false)
    }
  }

  // 提取 markdown 标题生成目录
  useEffect(() => {
    if (markdownContent && !isLargeMarkdown) {
      let canceled = false
      const schedule = window.requestIdleCallback || ((cb) => window.setTimeout(cb, 1))
      const cancel = window.cancelIdleCallback || window.clearTimeout

      const taskId = schedule(() => {
        if (canceled) return

      const slugger = new GithubSlugger()
      const headings = []
      const lines = markdownContent.split('\n')

      for (const line of lines) {
        const match = line.match(/^(#{1,6})\s+(.+)$/)
        if (match) {
          const level = match[1].length
          const title = match[2]
          // 使用标准的 github-slugger 生成 ID，确保与 rehype-slug 一致
          const key = slugger.slug(title)

          headings.push({
            key: `#${key}`,
            href: `#${key}`,
            title,
            level,
          })

          if (headings.length >= MAX_TOC_ITEMS) {
            break
          }
        }
      }

      setTocItems(headings)
      })

      return () => {
        canceled = true
        cancel(taskId)
      }
    } else {
      setTocItems([])
    }
  }, [markdownContent, isLargeMarkdown])

  // 搜索关键词命中后，文档加载完成滚动到第一个高亮处
  useEffect(() => {
    if (loading || !searchKeyword || !markdownContent) return
    if (viewMode !== 'markdown') return

    let canceled = false
    const timer = window.setTimeout(() => {
      if (canceled) return
      const container = contentRef.current
      const target = container?.querySelector('.search-highlight')
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'center' })
        // 临时强调被引用的位置，短暂后淡出
        target.classList.add('cited-highlight-flash')
        window.setTimeout(() => target.classList.remove('cited-highlight-flash'), 2400)
      }
    }, 260)

    return () => {
      canceled = true
      window.clearTimeout(timer)
    }
  }, [loading, markdownContent, searchKeyword, viewMode])

  // 知识库引用跳转（URL 带 hl）：用 mark.js 跨文本节点高亮并滚动定位。
  // 引文含 markdown 语法时，渲染后的 DOM 文本与原文不一致，且关键词可能
  // 跨行内元素边界，逐节点高亮匹配不上，因此统一走 mark.js。
  useEffect(() => {
    if (!highlightKeyword || loading || !markdownContent || viewMode !== 'markdown') {
      // hl 被清除或文档未就绪时同步清理 mark.js 残留
      if (!isLargeMarkdown && contentRef.current) {
        try {
          new Mark(contentRef.current).unmark({ className: 'citation-highlight' })
        } catch (error) {
          console.warn('清理引用高亮失败:', error)
        }
      }
      return
    }

    // 超大文档走虚拟滚动，定位到包含关键词的文档块
    if (isLargeMarkdown) {
      largeMarkdownRef.current?.scrollToKeyword?.(highlightKeyword)
      return
    }

    const container = contentRef.current
    if (!container) return

    let canceled = false
    const timer = window.setTimeout(() => {
      if (canceled) return
      try {
        const instance = new Mark(container)
        instance.unmark({ className: 'citation-highlight' })
        instance.mark(highlightKeyword, {
          className: 'citation-highlight',
          separateWordSearch: false,
          acrossElements: true,
          done: () => {
            const target = container.querySelector('.citation-highlight')
            if (target) {
              target.scrollIntoView({ behavior: 'smooth', block: 'center' })
              target.classList.add('cited-highlight-flash')
              window.setTimeout(() => target.classList.remove('cited-highlight-flash'), 2400)
            }
          },
        })
      } catch (error) {
        console.warn('引用高亮失败:', error)
      }
    }, 260)

    return () => {
      canceled = true
      window.clearTimeout(timer)
    }
  }, [loading, highlightKeyword, markdownContent, viewMode, isLargeMarkdown])

  // 处理菜单点击
  const handleMenuClick = ({ key }) => {
    const node = findNodeByKey(fileTree, key)
    if (!node) return

    if (!node.isLeaf) {
      selectFolder(key, { syncUrl: true })
      return
    }

    openDocumentPath(key, { syncUrl: true })
  }

  const scrollContentToTop = () => {
    if (isLargeMarkdown) {
      largeMarkdownRef.current?.scrollToTop()
      return
    }

    if (contentRef.current) {
      contentRef.current.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }

  const handleExportMarkdownPDF = () => {
    if (!selectedFile) return
    let url = getExportPdfUrl(projectId, selectedFile)
    const token = localStorage.getItem('access_token')
    if (token) {
      url += `&token=${encodeURIComponent(token)}`
    }
    window.open(url, '_blank')
  }

  // 解析相对路径
  const resolveRelativePath = (currentPath, relativePath) => {
    // 获取当前文件所在目录
    const currentDir = currentPath.substring(0, currentPath.lastIndexOf('/'))

    // 分割相对路径
    const parts = relativePath.split('/')
    const dirParts = currentDir ? currentDir.split('/') : []

    // 处理 ../ 和 ./
    for (const part of parts) {
      if (part === '..') {
        dirParts.pop()
      } else if (part !== '.' && part !== '') {
        dirParts.push(part)
      }
    }

    return dirParts.join('/')
  }

  const normalizeMarkdownHref = (href) => {
    if (!href) return href

    const [pathPart, hashPart = ''] = href.split('#')
    const [rawPath, searchPart = ''] = pathPart.split('?')

    const decodedPath = rawPath
      .split('/')
      .map((part) => {
        try {
          return decodeURIComponent(part)
        } catch (e) {
          return part
        }
      })
      .join('/')

    const rebuilt = searchPart ? `${decodedPath}?${searchPart}` : decodedPath
    return hashPart ? `${rebuilt}#${hashPart}` : rebuilt
  }

  const isExternalHref = (href) => {
    return Boolean(href && (/^[a-z][a-z\d+.-]*:/i.test(href) || href.startsWith('//')))
  }

  // 处理markdown内部链接点击
  const handleMarkdownLink = (e, href) => {
    const normalizedHref = normalizeMarkdownHref(href)

    // 检查是否是外部链接
    if (!normalizedHref || isExternalHref(normalizedHref)) {
      return // 外部链接，允许默认行为
    }

    // 检查是否是锚点链接
    if (normalizedHref.startsWith('#')) {
      return // 锚点链接，允许默认行为
    }

    // 检查是否是文档文件（.md 或 .pdf）
    const pathOnly = normalizedHref.split(/[?#]/)[0]
    const isMd = pathOnly.endsWith('.md')
    const isPdf = pathOnly.toLowerCase().endsWith('.pdf')

    if (!isMd && !isPdf) {
      return // 不是文档文件，允许默认行为
    }

    // 阻止默认跳转
    e.preventDefault()

    // 解析路径
    let targetPath
    if (pathOnly.startsWith('.') || pathOnly.startsWith('..')) {
      // 真正的相对路径，相对于当前文件
      targetPath = resolveRelativePath(selectedFile, pathOnly)
    } else {
      // 项目内绝对路径（由编辑器生成），相对于项目根目录
      targetPath = pathOnly.startsWith('/') ? pathOnly.substring(1) : pathOnly
    }

    // 自动展开父目录
    const lastSlashIndex = targetPath.lastIndexOf('/')
    if (lastSlashIndex !== -1) {
      const parentPath = targetPath.substring(0, lastSlashIndex)
      if (parentPath && !openKeys.includes(parentPath)) {
        // 收集所有父路径
        const pathParts = parentPath.split('/')
        const allParentPaths = []
        let currentPath = ''
        for (const part of pathParts) {
          currentPath = currentPath ? `${currentPath}/${part}` : part
          allParentPaths.push(currentPath)
        }
        setOpenKeys([...new Set([...openKeys, ...allParentPaths])])
      }
    }

    // 选中文件并加载
    setSelectedFile(targetPath)
    setSelectedNodeKey(targetPath)
    updateFileParam(targetPath)

    if (isPdf) {
      // PDF文件：切换到PDF模式
      setPdfUrl(buildDocumentUrl(targetPath))
      setPdfFilename(targetPath.split('/').pop())
      setViewMode('pdf')
    } else {
      // Markdown文件：加载内容
      setViewMode('markdown')
      loadMarkdown(targetPath)
    }
  }

  const handleGitPull = async (repoId = null, force = false) => {
    if (gitRepos.length === 0) {
      message.warning('未配置Git仓库')
      return
    }
    try {
      const res = await gitPull(projectId, repoId, force)
      message.success(res.message || 'Git Pull 成功')
      // Refresh tree
      loadFileTree()
      // Reload current file if open
      if (selectedFile) {
        loadMarkdown(selectedFile)
      }
    } catch (error) {
       console.error('Git Pull error:', error)
       const errorMsg = error.response?.data?.detail || 'Git Pull 失败'
       
       if (!force) {
         Modal.confirm({
           title: 'Git Pull 失败',
           content: (
             <div>
               <p>{errorMsg}</p>
               <p style={{ color: 'red', fontWeight: 'bold', marginTop: 8 }}>
                 是否强制重置到远程版本？
               </p>
               <p style={{ color: 'var(--text-color-secondary)', fontSize: 12 }}>
                 警告：这将丢失所有本地未提交的修改！
               </p>
             </div>
           ),
           okText: '强制重置',
           okType: 'danger',
           cancelText: '取消',
           onOk: () => handleGitPull(repoId, true)
         })
         return
       }
       
       message.error(errorMsg)
    }
  }

  const handleGitPush = async (repoId = null, force = false) => {
    if (gitRepos.length === 0) {
      message.warning('未配置Git仓库')
      return
    }
    try {
      const res = await gitPush(projectId, repoId, force)
      message.success(res.message || 'Git Push 成功')
    } catch (error) {
       console.error('Git Push error:', error)
       const errorMsg = error.response?.data?.detail || 'Git Push 失败'
       
       if (!force) {
         Modal.confirm({
           title: 'Git Push 失败',
           content: (
             <div>
               <p>{errorMsg}</p>
               <p style={{ color: 'red', fontWeight: 'bold', marginTop: 8 }}>
                 是否强制推送到远程？
               </p>
               <p style={{ color: 'var(--text-color-secondary)', fontSize: 12 }}>
                 警告：这将覆盖远程仓库的修改！
               </p>
             </div>
           ),
           okText: '强制推送',
           okType: 'danger',
           cancelText: '取消',
           onOk: () => handleGitPush(repoId, true)
         })
         return
       }
       
       message.error(errorMsg)
    }
  }

  const renderGitActions = () => {
    if (gitRepos.length <= 1) {
      // 0 或 1 个仓库，显示普通按钮
      return (
        <>
          <Tooltip title="Git Pull">
            <Button
              size="middle"
              icon={<CloudDownloadOutlined />}
              onClick={() => handleGitPull()}
            />
          </Tooltip>
          <Tooltip title="Git Push">
            <Button
              size="middle"
              icon={<CloudUploadOutlined />}
              onClick={() => handleGitPush()}
            />
          </Tooltip>
        </>
      )
    }

    // 多个仓库，显示下拉菜单
    const pullItems = gitRepos.map(repo => ({
      key: repo.id,
      label: repo.name + (repo.is_default ? ' (默认)' : ''),
      onClick: () => handleGitPull(repo.id),
    }))

    const pushItems = gitRepos.map(repo => ({
      key: repo.id,
      label: repo.name + (repo.is_default ? ' (默认)' : ''),
      onClick: () => handleGitPush(repo.id),
    }))

    if (gitRepos.length <= 1) {
      return (
        <>
          <Tooltip title="Git Pull">
            <Button
              size="middle"
              icon={<CloudDownloadOutlined />}
              onClick={() => handleGitPull()}
            />
          </Tooltip>
          <Tooltip title="Git Push">
            <Button
              size="middle"
              icon={<CloudUploadOutlined />}
              onClick={() => handleGitPush()}
            />
          </Tooltip>
        </>
      )
    }

    return (
      <>
        <Dropdown menu={{ items: pullItems }}>
          <Tooltip title="Git Pull">
            <Button
              size="middle"
              icon={<CloudDownloadOutlined />}
            />
          </Tooltip>
        </Dropdown>
        <Dropdown menu={{ items: pushItems }}>
          <Tooltip title="Git Push">
            <Button
              size="middle"
              icon={<CloudUploadOutlined />}
            />
          </Tooltip>
        </Dropdown>
      </>
    )
  }

  // 进入编辑模式
  const handleEdit = () => {
    const params = new URLSearchParams()
    if (selectedFile) {
      params.set('file', selectedFile)
    } else if (selectedNodeKey) {
      params.set('selected', selectedNodeKey)
    }
    const query = params.toString()
    navigateWithTransition(`/projects/${projectId}/editor${query ? `?${query}` : ''}`)
  }

  const handleRefresh = async () => {
    setRefreshing(true)
    try {
      await loadFileTree({ throwOnError: true })
      message.success('已刷新')
    } catch (error) {
      console.error('Refresh documents error:', error)
      message.error('刷新失败')
    } finally {
      setRefreshing(false)
    }
  }

  // 打开分享设置
  const handleShare = async () => {
    const selectedNode = selectedNodeKey ? findNodeByKey(fileTree, selectedNodeKey) : null
    if (!selectedNode || !selectedNode.isLeaf) {
      Toast.warning('提示', '请先选择一个文件再分享')
      return
    }

    try {
      const res = await getFileShareInfo(projectId, selectedNode.key)
      const nextShareInfo = res.data
      setShareInfo(nextShareInfo)
      setHasPassword(Boolean(nextShareInfo?.has_password))
      setPassword(nextShareInfo?.access_pass || '')
      setShareModalVisible(true)
    } catch (error) {
      console.error('Get share info error:', error)
      message.error('获取分享信息失败')
    }
  }

  // 复制分享链接
  const handleCopyLink = async () => {
    if (!shareInfo) return
    const fullUrl = `${window.location.origin}${shareInfo.share_url}`
    
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(fullUrl)
        Toast.success('复制成功', '分享链接已复制到剪贴板')
      } else {
        // Fallback for non-secure contexts or older browsers
        const textArea = document.createElement("textarea")
        textArea.value = fullUrl
        textArea.style.position = "fixed"
        textArea.style.left = "-9999px"
        textArea.style.top = "0"
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        const successful = document.execCommand('copy')
        document.body.removeChild(textArea)
        if (successful) {
           Toast.success('复制成功', '分享链接已复制到剪贴板')
        } else {
           Toast.error('复制失败', '请手动复制链接')
        }
      }
    } catch (err) {
      console.error('Failed to copy:', err)
      Toast.error('复制失败', '无法访问剪贴板')
    }
  }

  // 切换密码保护
  const handlePasswordToggle = async (checked) => {
    if (!selectedNodeKey) return

    if (!checked) {
      try {
        if (shareInfo?.share_url) {
          await createOrUpdateFileShare(projectId, { file_path: selectedNodeKey, access_pass: null })
        } else {
          await deleteFileShare(projectId, selectedNodeKey)
        }
        setHasPassword(false)
        setPassword('')
        message.success('已取消文件访问密码')
        await loadFileTree()
        const res = await getFileShareInfo(projectId, selectedNodeKey)
        setShareInfo(res.data)
      } catch (error) {
        console.error('Update settings error:', error)
        message.error('操作失败')
      }
    } else {
      setHasPassword(true)
    }
  }

  // 保存密码
  const handleSavePassword = async () => {
    if (!selectedNodeKey) {
      message.warning('请先选择文件')
      return
    }

    if (!password.trim()) {
      message.warning('请输入访问密码')
      return
    }
    try {
      const res = await createOrUpdateFileShare(projectId, {
        file_path: selectedNodeKey,
        access_pass: hasPassword ? password : null,
      })
      message.success('文件分享已更新')
      setShareInfo(res.data)
      await loadFileTree()
      const nextInfo = await getFileShareInfo(projectId, selectedNodeKey)
      setShareInfo(nextInfo.data)
      setHasPassword(Boolean(nextInfo.data?.has_password))
    } catch (error) {
      console.error('Save password error:', error)
      message.error('设置文件分享失败')
    }
  }

  const handleCreateShare = async () => {
    if (!selectedNodeKey) {
      message.warning('请先选择文件')
      return
    }

    try {
      const res = await createOrUpdateFileShare(projectId, {
        file_path: selectedNodeKey,
        access_pass: hasPassword ? password : null,
      })
      setShareInfo(res.data)
      setHasPassword(Boolean(res.data?.has_password))
      await loadFileTree()
      message.success('文件分享已创建')
    } catch (error) {
      console.error('Create file share error:', error)
      message.error('创建文件分享失败')
    }
  }

  const handleDisableShare = async () => {
    if (!selectedNodeKey) return

    try {
      await deleteFileShare(projectId, selectedNodeKey)
      setShareInfo(null)
      setHasPassword(false)
      setPassword('')
      await loadFileTree()
      message.success('文件分享已关闭')
    } catch (error) {
      console.error('Delete file share error:', error)
      message.error('关闭文件分享失败')
    }
  }

  const menuItems = convertTreeToMenuItems(filteredTreeData)

  // Markdown 内容高亮处理
  // 使用 components 替换文本节点，但这只对直接文本子节点有效
  // 对于深层嵌套，我们需要递归或使用 rehype 插件
  // 这里使用简单组件替换
  const markdownComponents = useMemo(() => {
    if (!searchKeyword) {
      return {
        a: ({ node, href, children, ...props }) => {
          const isExternal = isExternalHref(href);
          return (
            <a
              href={href}
              onClick={(e) => handleMarkdownLink(e, href)}
              target={isExternal ? '_blank' : undefined}
              rel={isExternal ? 'noopener noreferrer' : undefined}
              {...props}
            >
              {children}
            </a>
          );
        },
      }
    }

    // 搜索模式下，尝试高亮
    // 注意：这可能不完美，但比没有好
    const highlightRenderer = (Tag) => ({ node, children, ...props }) => {
      // 如果 children 是字符串，高亮
      if (typeof children === 'string') {
        return <Tag {...props}><HighlightText text={children} keyword={searchKeyword} /></Tag>
      }
      // 如果是数组，遍历
      if (Array.isArray(children)) {
        const newChildren = children.map((child, idx) => {
          if (typeof child === 'string') {
            return <HighlightText key={idx} text={child} keyword={searchKeyword} />
          }
          return child
        })
        return <Tag {...props}>{newChildren}</Tag>
      }
      return <Tag {...props}>{children}</Tag>
    }

    return {
      a: ({ node, href, children, ...props }) => {
        const isExternal = isExternalHref(href);
        return (
          <a
            href={href}
            onClick={(e) => handleMarkdownLink(e, href)}
            target={isExternal ? '_blank' : undefined}
            rel={isExternal ? 'noopener noreferrer' : undefined}
            {...props}
          >
            {typeof children === 'string' ? <HighlightText text={children} keyword={searchKeyword} /> : children}
          </a>
        );
      },
      p: highlightRenderer('p'),
      li: highlightRenderer('li'),
      h1: highlightRenderer('h1'),
      h2: highlightRenderer('h2'),
      h3: highlightRenderer('h3'),
      h4: highlightRenderer('h4'),
      h5: highlightRenderer('h5'),
      h6: highlightRenderer('h6'),
      span: highlightRenderer('span'),
      td: highlightRenderer('td'),
      th: highlightRenderer('th'),
      div: highlightRenderer('div'),
    }
  }, [searchKeyword])

  return (
    <div className="project-docs-page">
      <Layout className="docs-layout">
        {/* 左侧目录 */}
        <Sider width={280} className="docs-sider" theme="light">
          <div className="docs-sider-header">
            <div className="docs-sider-title-row">
              <button
                type="button"
                className="project-back-button"
                onClick={handleClose}
                aria-label="返回项目列表"
              >
                <ArrowLeftOutlined />
              </button>
              <h2 title={projectName}>{projectName}</h2>
            </div>
            <div className="docs-sider-actions">
              <div className="mode-actions-row">
                {/* 只有 owner/admin/editor 可以编辑和Git操作 */}
                {userRole !== 'viewer' ? (
                  <ModeSwitch
                    size="small"
                    value={modeSwitchValue}
                    onChange={(mode) => {
                      if (mode === 'edit' && !modeSwitchingRef.current) {
                        modeSwitchingRef.current = true
                        setModeSwitchValue('edit')
                        setTimeout(() => {
                          handleEdit()
                        }, 160)
                      }
                    }}
                  />
                ) : (
                  <div />
                )}
                <Space.Compact className="mode-actions-group">
                  {userRole !== 'viewer' && renderGitActions()}
                  <Tooltip title="分享">
                    <Button
                      size="middle"
                      icon={<ShareAltOutlined />}
                      onClick={handleShare}
                    />
                  </Tooltip>
                  <Tooltip title="刷新">
                    <Button
                      size="middle"
                      icon={<ReloadOutlined spin={refreshing} />}
                      onClick={handleRefresh}
                      disabled={refreshing}
                    />
                  </Tooltip>
                </Space.Compact>
              </div>
            </div>
          </div>

          {/* 搜索框 */}
          <div style={{ padding: '12px 16px 4px' }}>
            <Input.Search
              placeholder="搜索文档内容..."
              allowClear
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              onSearch={handleSearch}
              loading={isSearching}
              enterButton
            />
          </div>

          {filteredTreeData.length > 0 ? (
            <Menu
              mode="inline"
              selectedKeys={selectedNodeKey ? [selectedNodeKey] : []}
              openKeys={openKeys}
              onOpenChange={setOpenKeys}
              items={menuItems}
              onClick={handleMenuClick}
              className="docs-menu"
            />
          ) : (
            <div style={{ padding: '20px', textAlign: 'center', color: 'var(--text-color-secondary)' }}>
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="未找到匹配文档" />
            </div>
          )}
        </Sider>

        {/* 右侧内容区 */}
        <Layout className="docs-content-layout">
          <Content className="docs-content" ref={contentRef}>
            <div className="docs-content-header" title={selectedFile || 'README.md'}>
              {(() => {
                const { fileName, FileIcon, isPdf } = getHeaderDisplay(selectedFile)
                return (
                  <>
                    <div className="docs-header-title">
                      <span className="docs-header-item">
                        <FileIcon className="docs-header-icon" style={isPdf ? { color: '#f5222d' } : undefined} />
                        <span className="docs-header-text">{fileName}</span>
                      </span>
                    </div>
                    {viewMode === 'pdf' && <div className="docs-header-actions pdf-header-toolbar" ref={setPdfToolbarTarget} />}
                    {viewMode === 'markdown' && (
                      <Space className="docs-header-actions">
                        <Button
                          icon={<VerticalAlignTopOutlined />}
                          onClick={scrollContentToTop}
                          size="small"
                        >
                          回到顶部
                        </Button>
                        <Button
                          icon={<CloudDownloadOutlined />}
                          onClick={handleExportMarkdownPDF}
                          size="small"
                        >
                          下载PDF
                        </Button>
                      </Space>
                    )}
                  </>
                )
              })()}
            </div>
            <div className={`docs-content-wrapper ${viewMode === 'pdf' ? 'pdf-mode' : ''} ${isLargeMarkdown ? 'large-markdown-mode' : ''}`}>
              {loading ? (
                <div className="docs-loading">
                  <Spin size="large">
                    <div style={{ marginTop: 16 }}>加载中...</div>
                  </Spin>
                </div>
              ) : viewMode === 'pdf' ? (
                <VirtualPDFViewer
                  url={pdfUrl}
                  filename={pdfFilename}
                  toolbarTarget={pdfToolbarTarget}
                />
              ) : viewMode === 'folder' ? (
                <div className="docs-folder-placeholder">
                  <FolderOpenOutlined />
                  <span>已选择文件夹，请从左侧选择 Markdown 或 PDF 文件查看。</span>
                </div>
              ) : isLargeMarkdown ? (
                <LargeMarkdownViewer
                  ref={largeMarkdownRef}
                  content={markdownContent}
                  components={markdownComponents}
                  searchKeyword={searchKeyword}
                  renderTitle={(item, keyword) => <HighlightText text={item.title} keyword={keyword} />}
                />
              ) : (
                <div className="markdown-body">
                  <ReactMarkdown
                    remarkPlugins={[remarkGfm]}
                    rehypePlugins={[rehypeRaw, rehypeSlug, rehypeHighlight]}
                    components={markdownComponents}
                  >
                    {markdownContent}
                  </ReactMarkdown>
                </div>
              )}
            </div>

          </Content>

          {viewMode === 'markdown' && !isLargeMarkdown && (
            <FloatingToc
              items={tocItems}
              searchKeyword={searchKeyword}
              getContainer={() => contentRef.current}
              renderTitle={(item, keyword) => <HighlightText text={item.title} keyword={keyword} />}
            />
          )}
        </Layout>
      </Layout>

      {/* 分享模态框 */}
      {/* ... keeping the modal ... */}
      <Modal
        title="文件分享"
        open={shareModalVisible}
        onCancel={() => setShareModalVisible(false)}
        footer={null}
        width={500}
      >
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div>
            <label style={{ marginBottom: 8, display: 'block', fontWeight: 500 }}>
              当前文件
            </label>
            <Input value={selectedNodeKey || ''} readOnly />
          </div>

          {shareInfo?.share_url ? (
            <>
              <div>
                <label style={{ marginBottom: 8, display: 'block', fontWeight: 500 }}>
                  分享链接
                </label>
                <Input
                  value={`${window.location.origin}${shareInfo.share_url}`}
                  readOnly
                  addonAfter={
                    <CopyOutlined onClick={handleCopyLink} style={{ cursor: 'pointer' }} />
                  }
                />
              </div>

              <div>
                <Space>
                  <span style={{ fontWeight: 500 }}>访问密码保护</span>
                  <Switch checked={hasPassword} onChange={handlePasswordToggle} />
                </Space>
              </div>

              {hasPassword && (
                <Space.Compact style={{ width: '100%' }}>
                  <Input.Password
                    placeholder="请输入访问密码"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                  <Button type="primary" onClick={handleSavePassword}>
                    保存密码
                  </Button>
                </Space.Compact>
              )}
            </>
          ) : (
            <>
              <div style={{ color: 'var(--text-color-secondary)', lineHeight: 1.7 }}>
                当前文件尚未创建独立分享。
              </div>

              <Button type="primary" onClick={handleCreateShare}>
                创建文件分享
              </Button>
            </>
          )}
          {shareInfo?.share_url && (
            <Button danger onClick={handleDisableShare}>
              关闭文件分享
            </Button>
          )}
        </Space>
      </Modal>
    </div>
  )
}

export default DocumentPage