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, 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 } from '@/api/file'
import { getProjectShareInfo, updateShareSettings } from '@/api/share'
import MainLayout from '@/components/MainLayout/MainLayout'
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 contentRef = useRef(null)

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

  // 加载文件树
  const loadFileTree = async () => {
    try {
      const res = await getProjectTree(projectId)
      const tree = res.data || []
      setFileTree(tree)

      // 默认打开 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 />,
        }
      }
      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)
    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 // 锚点链接，允许默认行为
    }

    // 其他所有链接都视为内部文档链接，阻止默认跳转
    e.preventDefault()

    // 如果不是 .md 文件，忽略
    if (!href.endsWith('.md')) {
      return
    }

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

    // 解析相对路径
    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)
    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 (
    <MainLayout>
      <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">
                <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">
                {loading ? (
                  <div className="docs-loading">
                    <Spin size="large" tip="加载中..." />
                  </div>
                ) : (
                  <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>

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

            {/* 右侧TOC面板 */}
            {!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>
    </MainLayout>
  )
}

export default DocumentPage
