import { useState, useEffect, useRef } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { Layout, Menu, Spin, FloatButton, Button, Tooltip, message, Anchor, Modal, Input, Switch, Space } from 'antd'
import { EditOutlined, VerticalAlignTopOutlined, ShareAltOutlined, SettingOutlined, MenuFoldOutlined, MenuUnfoldOutlined, FileTextOutlined, FolderOutlined, FilePdfOutlined, CopyOutlined, LockOutlined } 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 { getProjectTree, getFileContent, getDocumentUrl } from '@/api/file'
import { getProjectShareInfo, updateShareSettings } from '@/api/share'
import PDFViewer from '@/components/PDFViewer/PDFViewer'
import './DocumentPage.css'

const { Sider, Content } = Layout

function DocumentPage() {
  const { projectId } = useParams()
  const navigate = useNavigate()
  const [fileTree, setFileTree] = useState([])
  const [selectedFile, setSelectedFile] = useState('')
  const [markdownContent, setMarkdownContent] = useState('')
  const [loading, setLoading] = useState(false)
  const [openKeys, setOpenKeys] = useState([])
  const [tocCollapsed, setTocCollapsed] = useState(false)
  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') // 用户角色：owner/admin/editor/viewer
  const [pdfViewerVisible, setPdfViewerVisible] = useState(false)
  const [pdfUrl, setPdfUrl] = useState('')
  const [pdfFilename, setPdfFilename] = useState('')
  const [viewMode, setViewMode] = useState('markdown') // 'markdown' or 'pdf'
  const contentRef = useRef(null)

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

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

      setFileTree(tree)
      setUserRole(role)

      // 默认打开 README.md
      const readmeNode = findReadme(tree)
      if (readmeNode) {
        setSelectedFile(readmeNode.key)
        loadMarkdown(readmeNode.key)
      }
    } catch (error) {
      console.error('Load file tree error:', error)
    }
  }

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

  // 转换文件树为菜单项
  const convertTreeToMenuItems = (nodes) => {
    return nodes.map((node) => {
      if (!node.isLeaf) {
        // 目录
        return {
          key: node.key,
          label: node.title,
          icon: <FolderOutlined />,
          children: node.children ? convertTreeToMenuItems(node.children) : [],
        }
      } else if (node.title && node.title.endsWith('.md')) {
        // Markdown 文件
        return {
          key: node.key,
          label: node.title.replace('.md', ''),
          icon: <FileTextOutlined />,
        }
      } else if (node.title && node.title.endsWith('.pdf')) {
        // PDF 文件
        return {
          key: node.key,
          label: node.title,
          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: 'smooth' })
      }
    } catch (error) {
      console.error('Load markdown error:', error)
      setMarkdownContent('# 文档加载失败\n\n无法加载该文档，请稍后重试。')
    } finally {
      setLoading(false)
    }
  }

  // 提取 markdown 标题生成目录
  useEffect(() => {
    if (markdownContent) {
      const headings = []
      const lines = markdownContent.split('\n')

      lines.forEach((line) => {
        const match = line.match(/^(#{1,6})\s+(.+)$/)
        if (match) {
          const level = match[1].length
          const title = match[2]
          const key = title.toLowerCase().replace(/[^a-z0-9\u4e00-\u9fa5]+/g, '-')

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

      setTocItems(headings)
    }
  }, [markdownContent])

  // 处理菜单点击
  const handleMenuClick = ({ key }) => {
    setSelectedFile(key)

    // 检查是否是PDF文件
    if (key.toLowerCase().endsWith('.pdf')) {
      // 显示PDF - 添加token到URL
      let url = getDocumentUrl(projectId, key)
      const token = localStorage.getItem('access_token')
      if (token) {
        url += `?token=${encodeURIComponent(token)}`
      }
      setPdfUrl(url)
      setPdfFilename(key.split('/').pop())
      setViewMode('pdf')
    } else {
      // 加载Markdown文件
      setViewMode('markdown')
      loadMarkdown(key)
    }
  }

  // 解析相对路径
  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('/')
  }

  // 处理markdown内部链接点击
  const handleMarkdownLink = (e, href) => {
    // 检查是否是外部链接
    if (!href || href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
      return // 外部链接，允许默认行为
    }

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

    // 检查是否是文档文件（.md 或 .pdf）
    const isMd = href.endsWith('.md')
    const isPdf = href.toLowerCase().endsWith('.pdf')

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

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

    // 先解码 href（因为 Markdown 中的链接可能已经是 URL 编码的）
    let decodedHref = href
    try {
      decodedHref = decodeURIComponent(href)
    } catch (e) {
      // 解码失败，使用原始值
    }

    // 解析相对路径
    const targetPath = resolveRelativePath(selectedFile, decodedHref)

    // 自动展开父目录
    const parentPath = targetPath.substring(0, targetPath.lastIndexOf('/'))
    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)

    if (isPdf) {
      // PDF文件：切换到PDF模式
      let url = getDocumentUrl(projectId, targetPath)
      const token = localStorage.getItem('access_token')
      if (token) {
        url += `?token=${encodeURIComponent(token)}`
      }
      setPdfUrl(url)
      setPdfFilename(targetPath.split('/').pop())
      setViewMode('pdf')
    } else {
      // Markdown文件：加载内容
      setViewMode('markdown')
      loadMarkdown(targetPath)
    }
  }

  // 进入编辑模式
  const handleEdit = () => {
    navigate(`/projects/${projectId}/editor`)
  }

  // 打开分享设置
  const handleShare = async () => {
    try {
      const res = await getProjectShareInfo(projectId)
      setShareInfo(res.data)
      setHasPassword(res.data.has_password)
      setPassword(res.data.access_pass || '')  // 显示已设置的密码
      setShareModalVisible(true)
    } catch (error) {
      console.error('Get share info error:', error)
      message.error('获取分享信息失败')
    }
  }

  // 复制分享链接
  const handleCopyLink = () => {
    if (!shareInfo) return
    const fullUrl = `${window.location.origin}${shareInfo.share_url}`
    navigator.clipboard.writeText(fullUrl)
    message.success('分享链接已复制')
  }

  // 切换密码保护
  const handlePasswordToggle = async (checked) => {
    if (!checked) {
      // 取消密码
      try {
        await updateShareSettings(projectId, { access_pass: null })
        setHasPassword(false)
        setPassword('')
        message.success('已取消访问密码')
        // 刷新分享信息
        const res = await getProjectShareInfo(projectId)
        setShareInfo(res.data)
      } catch (error) {
        console.error('Update settings error:', error)
        message.error('操作失败')
      }
    } else {
      setHasPassword(true)
    }
  }

  // 保存密码
  const handleSavePassword = async () => {
    if (!password.trim()) {
      message.warning('请输入访问密码')
      return
    }
    try {
      await updateShareSettings(projectId, { access_pass: password })
      message.success('访问密码已设置')
      // 刷新分享信息
      const res = await getProjectShareInfo(projectId)
      setShareInfo(res.data)
      setHasPassword(true)
    } catch (error) {
      console.error('Save password error:', error)
      message.error('设置密码失败')
    }
  }

  const menuItems = convertTreeToMenuItems(fileTree)

  return (
    <div className="project-docs-page">
      <Layout className="docs-layout">
          {/* 左侧目录 */}
          <Sider width={280} className="docs-sider" theme="light">
            <div className="docs-sider-header">
              <h2>项目文档（浏览模式）</h2>
              <div className="docs-sider-actions">
                {/* 只有 owner/admin/editor 可以编辑 */}
                {userRole !== 'viewer' && (
                  <Tooltip title="编辑模式">
                    <Button
                      type="link"
                      size="middle"
                      icon={<EditOutlined />}
                      onClick={handleEdit}
                    />
                  </Tooltip>
                )}
                <Tooltip title="分享">
                  <Button
                    type="text"
                    size="middle"
                    icon={<ShareAltOutlined />}
                    onClick={handleShare}
                  />
                </Tooltip>
                <Tooltip title="设置">
                  <Button
                    type="text"
                    size="middle"
                    icon={<SettingOutlined />}
                    onClick={() => message.info('设置功能开发中')}
                  />
                </Tooltip>
              </div>
            </div>

            <Menu
              mode="inline"
              selectedKeys={[selectedFile]}
              openKeys={openKeys}
              onOpenChange={setOpenKeys}
              items={menuItems}
              onClick={handleMenuClick}
              className="docs-menu"
            />
          </Sider>

          {/* 右侧内容区 */}
          <Layout className="docs-content-layout">
            <Content className="docs-content" ref={contentRef}>
              <div className={`docs-content-wrapper ${viewMode === 'pdf' ? 'pdf-mode' : ''}`}>
                {loading ? (
                  <div className="docs-loading">
                    <Spin size="large">
                      <div style={{ marginTop: 16 }}>加载中...</div>
                    </Spin>
                  </div>
                ) : viewMode === 'pdf' ? (
                  <PDFViewer
                    url={pdfUrl}
                    filename={pdfFilename}
                  />
                ) : (
                  <div className="markdown-body">
                    <ReactMarkdown
                      remarkPlugins={[remarkGfm]}
                      rehypePlugins={[rehypeRaw, rehypeSlug, rehypeHighlight]}
                      components={{
                        a: ({ node, href, children, ...props }) => (
                          <a
                            href={href}
                            onClick={(e) => handleMarkdownLink(e, href)}
                            {...props}
                          >
                            {children}
                          </a>
                        ),
                      }}
                    >
                      {markdownContent}
                    </ReactMarkdown>
                  </div>
                )}
              </div>

              {/* 返回顶部按钮 - 仅在markdown模式显示 */}
              {viewMode === 'markdown' && (
                <FloatButton
                  icon={<VerticalAlignTopOutlined />}
                  type="primary"
                  style={{ right: tocCollapsed ? 24 : 280 }}
                  onClick={() => {
                    if (contentRef.current) {
                      contentRef.current.scrollTo({ top: 0, behavior: 'smooth' })
                    }
                  }}
                />
              )}
            </Content>

            {/* 右侧TOC面板 - 仅在markdown模式显示 */}
            {viewMode === 'markdown' && !tocCollapsed && (
              <Sider width={250} theme="light" className="docs-toc-sider">
                <div className="toc-header">
                  <h3>文档索引</h3>
                  <Button
                    type="text"
                    size="small"
                    icon={<MenuFoldOutlined />}
                    onClick={() => setTocCollapsed(true)}
                  />
                </div>
                <div className="toc-content">
                  {tocItems.length > 0 ? (
                    <Anchor
                      affix={false}
                      offsetTop={0}
                      getContainer={() => contentRef.current}
                      items={tocItems.map((item) => ({
                        key: item.key,
                        href: item.href,
                        title: (
                          <div style={{ paddingLeft: `${(item.level - 1) * 12}px`, display: 'flex', alignItems: 'center', gap: '4px' }}>
                            <FileTextOutlined style={{ fontSize: '12px', color: '#8c8c8c' }} />
                            {item.title}
                          </div>
                        ),
                      }))}
                    />
                  ) : (
                    <div className="toc-empty">当前文档无标题</div>
                  )}
                </div>
              </Sider>
            )}
          </Layout>

          {/* TOC展开按钮 */}
          {tocCollapsed && (
            <Button
              type="primary"
              icon={<MenuUnfoldOutlined />}
              className="toc-toggle-btn"
              onClick={() => setTocCollapsed(false)}
            >
              文档索引
            </Button>
          )}
        </Layout>

        {/* 分享模态框 */}
        <Modal
          title="分享项目"
          open={shareModalVisible}
          onCancel={() => setShareModalVisible(false)}
          footer={null}
          width={500}
        >
          {shareInfo && (
            <Space direction="vertical" style={{ width: '100%' }} size="large">
              <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 && (
                <div>
                  <Input.Password
                    placeholder="请输入访问密码"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                  <Button
                    type="primary"
                    onClick={handleSavePassword}
                    style={{ marginTop: 8 }}
                  >
                    保存密码
                  </Button>
                </div>
              )}
            </Space>
          )}
        </Modal>
      </div>
  )
}

export default DocumentPage