nex_docus/frontend/src/pages/ProjectList/ProjectList.jsx

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Card, Empty, Modal, Form, Input, Row, Col, Space, Button, Switch, message, Select, Table, Tag, Pagination } from 'antd'
import { PlusOutlined, FolderOutlined, TeamOutlined, EyeOutlined, CopyOutlined, DeleteOutlined, EditOutlined, FileOutlined, GithubOutlined, CheckOutlined, SwapOutlined, SettingOutlined } from '@ant-design/icons'
import { getMyProjects, getOwnedProjects, getSharedProjects, createProject, deleteProject, updateProject, getProjectMembers, addProjectMember, removeProjectMember, getGitRepos, createGitRepo, updateGitRepo, deleteGitRepo, transferProject } from '@/api/project'
import { getProjectShareInfo, updateProjectShareSettings } from '@/api/share'
import { getUserList } from '@/api/users'
import { searchDocuments } from '@/api/search'
import ListActionBar from '@/components/ListActionBar/ListActionBar'
import Toast from '@/components/Toast/Toast'
import './ProjectList.css'

function ProjectList({ type = 'my' }) {
  const [projects, setProjects] = useState([])
  const [loading, setLoading] = useState(false)
  const [modalVisible, setModalVisible] = useState(false)
  const [editModalVisible, setEditModalVisible] = useState(false)
  const [gitModalVisible, setGitModalVisible] = useState(false)
  const [membersModalVisible, setMembersModalVisible] = useState(false)
  const [currentProject, setCurrentProject] = useState(null)
  const [shareInfo, setShareInfo] = useState(null)
  const [hasPassword, setHasPassword] = useState(false)
  const [password, setPassword] = useState('')
  const [searchKeyword, setSearchKeyword] = useState('')
  const [searchResults, setSearchResults] = useState([])
  const [searching, setSearching] = useState(false)
  const [hasSearched, setHasSearched] = useState(false)
  const [members, setMembers] = useState([])
  const [users, setUsers] = useState([])
  const [loadingMembers, setLoadingMembers] = useState(false)
  const [form] = Form.useForm()
  const [editForm] = Form.useForm()
  const [gitForm] = Form.useForm()
  const [memberForm] = Form.useForm()
  const [transferModalVisible, setTransferModalVisible] = useState(false)
  const [transferForm] = Form.useForm()
  const navigate = useNavigate()
  const [currentPage, setCurrentPage] = useState(1)
  const pageSize = 8

  useEffect(() => {
    fetchProjects()
    setCurrentPage(1)
  }, [type])

  useEffect(() => {
    setCurrentPage(1)
  }, [searchKeyword])

  // ... (fetchProjects code)

  const handleOpenTransfer = async () => {
    setLoadingMembers(true)
    setTransferModalVisible(true)
    try {
      // 获取用户列表 (排除自己)
      const res = await getUserList({ page: 1, page_size: 100, status: 1 })
      const allUsers = res.data || []
      // 过滤掉当前所有者（也就是自己，虽然API也会校验）
      setUsers(allUsers.filter(u => u.id !== currentProject.owner_id))
    } catch (error) {
      message.error('加载用户列表失败')
    } finally {
      setLoadingMembers(false)
    }
  }

  const handleTransfer = async (values) => {
    Modal.confirm({
      title: '确认转移',
      content: '确定要将项目所有权转移给该用户吗？转移后您将变为管理员，无法再删除项目或转移所有权。',
      okText: '确认转移',
      okType: 'danger',
      onOk: async () => {
        try {
          await transferProject(currentProject.id, values.new_owner_id)
          message.success('项目所有权已转移')
          setTransferModalVisible(false)
          setEditModalVisible(false)
          transferForm.resetFields()
          fetchProjects()
        } catch (error) {
          console.error('Transfer error:', error)
          message.error('转移失败: ' + (error.response?.data?.detail || error.message))
        }
      }
    })
  }

  const fetchProjects = async () => {
    setLoading(true)
    try {
      let res
      if (type === 'my') {
        res = await getOwnedProjects()
      } else if (type === 'share') {
        res = await getSharedProjects()
      } else {
        res = await getMyProjects()
      }
      setProjects(res.data || [])
    } catch (error) {
      console.error('Fetch projects error:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleCreateProject = async (values) => {
    try {
      await createProject(values)
      Toast.success('创建成功', '项目已创建')
      setModalVisible(false)
      form.resetFields()
      fetchProjects()
    } catch (error) {
      console.error('Create project error:', error)
    }
  }

  const handleDeleteProject = async (projectId) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个项目吗？如果项目中存在文件，将无法删除。删除后将无法恢复！',
      okText: '确定删除',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          await deleteProject(projectId)
          Toast.success('删除成功', '项目已删除')
          fetchProjects()
        } catch (error) {
          console.error('Delete project error:', error)
          const errorMsg = error.response?.data?.detail || error.message || '删除失败'
          Toast.error('删除失败', errorMsg)
        }
      },
    })
  }

  // 打开编辑项目
  const handleEdit = (e, project) => {
    e.stopPropagation()
    setCurrentProject(project)
    editForm.setFieldsValue({
      name: project.name,
      description: project.description,
      is_public: project.is_public === 1,
    })
    setShareInfo(project.is_public === 1 ? null : { enabled: false, share_url: null, has_password: false, access_pass: null })
    setHasPassword(false)
    setPassword('')
    setEditModalVisible(true)
  }

  // 更新项目
  const handleUpdateProject = async (values) => {
    try {
      await updateProject(currentProject.id, {
        ...values,
        is_public: values.is_public ? 1 : 0,
      })
      message.success('项目更新成功')
      setEditModalVisible(false)
      editForm.resetFields()
      fetchProjects()
    } catch (error) {
      console.error('Update project error:', error)
      message.error('项目更新失败')
    }
  }

  useEffect(() => {
    if (!editModalVisible || !currentProject) return

    const isPublic = editForm.getFieldValue('is_public')
    if (!isPublic) {
      setShareInfo({ enabled: false, share_url: null, has_password: false, access_pass: null })
      return
    }

    ;(async () => {
      try {
        const res = await getProjectShareInfo(currentProject.id)
        setShareInfo(res.data)
        setHasPassword(res.data.has_password)
        setPassword(res.data.access_pass || '')
      } catch (error) {
        console.error('Get project share info error:', error)
      }
    })()
  }, [editModalVisible, currentProject, editForm])

  const currentEditPublic = Form.useWatch('is_public', editForm)
  const isPublicEnablePending = editModalVisible && currentEditPublic && currentProject?.is_public !== 1

  useEffect(() => {
    if (!editModalVisible || !currentProject) return

    if (!currentEditPublic) {
      setShareInfo({ enabled: false, share_url: null, has_password: false, access_pass: null })
      setHasPassword(false)
      setPassword('')
      return
    }

    if (currentProject.is_public !== 1) {
      setShareInfo(null)
      setHasPassword(false)
      setPassword('')
      return
    }

    ;(async () => {
      try {
        const res = await getProjectShareInfo(currentProject.id)
        setShareInfo(res.data)
        setHasPassword(res.data.has_password)
        setPassword(res.data.access_pass || '')
      } catch (error) {
        console.error('Refresh project share info error:', error)
      }
    })()
  }, [currentEditPublic, editModalVisible, currentProject, editForm])

  const [gitRepos, setGitRepos] = useState([])
  const [loadingRepos, setLoadingRepos] = useState(false)
  const [gitRepoModalVisible, setGitRepoModalVisible] = useState(false)
  const [editingRepo, setEditingRepo] = useState(null)
  const [repoForm] = Form.useForm()

  // 打开Git设置（仓库列表）
  const handleGitSettings = (e, project) => {
    e.stopPropagation()
    setCurrentProject(project)
    setGitModalVisible(true)
    fetchGitRepos(project.id)
  }

  // 加载Git仓库列表
  const fetchGitRepos = async (projectId) => {
    setLoadingRepos(true)
    try {
      const res = await getGitRepos(projectId)
      setGitRepos(res.data || [])
    } catch (error) {
      console.error('Fetch git repos error:', error)
      message.error('加载Git仓库失败')
    } finally {
      setLoadingRepos(false)
    }
  }

  // 打开添加仓库弹窗
  const handleAddRepo = () => {
    setEditingRepo(null)
    repoForm.resetFields()
    // 如果是第一个仓库，默认设为默认
    if (gitRepos.length === 0) {
      repoForm.setFieldsValue({ is_default: 1 })
    }
    setGitRepoModalVisible(true)
  }

  // 打开编辑仓库弹窗
  const handleEditRepo = (repo) => {
    setEditingRepo(repo)
    repoForm.setFieldsValue({
      ...repo,
      is_default: repo.is_default === 1,
    })
    setGitRepoModalVisible(true)
  }

  // 删除仓库
  const handleDeleteRepo = (repoId) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个Git仓库配置吗？',
      onOk: async () => {
        try {
          await deleteGitRepo(currentProject.id, repoId)
          message.success('删除成功')
          fetchGitRepos(currentProject.id)
        } catch (error) {
          console.error('Delete repo error:', error)
          message.error('删除失败')
        }
      },
    })
  }

  // 保存仓库（新增/更新）
  const handleSaveRepo = async (values) => {
    try {
      const data = {
        ...values,
        is_default: values.is_default ? 1 : 0,
      }
      
      if (editingRepo) {
        await updateGitRepo(currentProject.id, editingRepo.id, data)
        message.success('更新成功')
      } else {
        await createGitRepo(currentProject.id, data)
        message.success('添加成功')
      }
      
      setGitRepoModalVisible(false)
      fetchGitRepos(currentProject.id)
    } catch (error) {
      console.error('Save repo error:', error)
      message.error(editingRepo ? '更新失败' : '添加失败')
    }
  }

  const handleOpenProject = (projectId) => {
    navigate(`/projects/${projectId}/docs`)
  }

  // 复制分享链接
  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 (!checked) {
      try {
        await updateProjectShareSettings(currentProject.id, { access_pass: null })
        setHasPassword(false)
        setPassword('')
        message.success('已取消访问密码')
        const res = await getProjectShareInfo(currentProject.id)
        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 updateProjectShareSettings(currentProject.id, { access_pass: password })
      message.success('访问密码已设置')
      const res = await getProjectShareInfo(currentProject.id)
      setShareInfo(res.data)
      setHasPassword(true)
    } catch (error) {
      console.error('Save password error:', error)
      message.error('设置密码失败')
    }
  }

  // 打开成员管理
  const handleMembers = async (e, project) => {
    e.stopPropagation()
    setCurrentProject(project)
    setMembersModalVisible(true)
    setLoadingMembers(true)

    try {
      // 并行加载成员列表和用户列表（只获取普通用户 role_id=3）
      const [membersRes, usersRes] = await Promise.all([
        getProjectMembers(project.id),
        getUserList({ page: 1, page_size: 100, status: 1, role_id: 3 })
      ])

      console.log('Members Response:', membersRes)
      console.log('Users Response:', usersRes)

      const membersData = membersRes.data || []
      // 后端返回格式: { code: 200, message: "success", data: [...], total, page, page_size }
      const usersData = Array.isArray(usersRes.data) ? usersRes.data : []

      console.log('Setting members:', membersData)
      console.log('Setting users:', usersData)

      setMembers(membersData)
      setUsers(usersData)
    } catch (error) {
      console.error('Get members error:', error)
      console.error('Error details:', error.response)
      message.error('获取数据失败: ' + (error.response?.data?.detail || error.message))
    } finally {
      setLoadingMembers(false)
    }
  }

  // 添加成员
  const handleAddMember = async (values) => {
    try {
      await addProjectMember(currentProject.id, values)
      message.success('成员添加成功')
      memberForm.resetFields()
      // 刷新成员列表（带用户名信息）
      const res = await getProjectMembers(currentProject.id)
      setMembers(res.data || [])
    } catch (error) {
      console.error('Add member error:', error)
      const errorMsg = error.response?.data?.detail || error.message || '添加成员失败'
      message.error(errorMsg)
    }
  }

  // 删除成员
  const handleRemoveMember = async (userId) => {
    Modal.confirm({
      title: '确认删除',
      content: '确定要删除这个成员吗？',
      onOk: async () => {
        try {
          await removeProjectMember(currentProject.id, userId)
          message.success('成员删除成功')
          // 刷新成员列表（带用户名信息）
          const res = await getProjectMembers(currentProject.id)
          setMembers(res.data || [])
        } catch (error) {
          console.error('Remove member error:', error)
          const errorMsg = error.response?.data?.detail || error.message || '删除成员失败'
          message.error(errorMsg)
        }
      },
    })
  }

  // 处理搜索输入变化
  const handleSearchChange = (value) => {
    setSearchKeyword(value)
    // 如果清空了输入框，重置搜索状态
    if (!value || !value.trim()) {
      setSearchResults([])
      setHasSearched(false)
    }
  }

  // 处理搜索
  const handleSearch = async (keyword) => {
    setSearchKeyword(keyword)

    if (!keyword || !keyword.trim()) {
      // 清空搜索，显示所有项目
      setSearchResults([])
      setSearching(false)
      setHasSearched(false)
      return
    }

    setSearching(true)
    setHasSearched(true)
    try {
      const res = await searchDocuments(keyword.trim())
      setSearchResults(res.data || [])
    } catch (error) {
      console.error('Search error:', error)
      Toast.error('搜索失败', error.response?.data?.detail || error.message)
    } finally {
      setSearching(false)
    }
  }

  // 处理搜索结果点击
  const handleSearchResultClick = (item) => {
    if (item.type === 'project') {
      // 跳转到项目文档页
      navigate(`/projects/${item.project_id}/docs`)
    } else if (item.type === 'file') {
      // 跳转到文件
      navigate(`/projects/${item.project_id}/docs?file=${encodeURIComponent(item.file_path)}&keyword=${encodeURIComponent(searchKeyword)}`)
    }
  }

  // 过滤项目（仅在未使用全局搜索时进行本地过滤）
  const filteredProjects = !hasSearched && searchKeyword
    ? projects.filter((project) =>
      project.name.toLowerCase().includes(searchKeyword.toLowerCase()) ||
      (project.description && project.description.toLowerCase().includes(searchKeyword.toLowerCase()))
    )
    : projects

  const paginatedProjects = filteredProjects.slice((currentPage - 1) * pageSize, currentPage * pageSize)

  return (
    <div className="project-list-container">
      <ListActionBar
        actions={type === 'my' ? [
          {
            key: 'create',
            label: '创建项目',
            type: 'primary',
            icon: <PlusOutlined />,
            onClick: () => setModalVisible(true),
          },
        ] : []}
        search={{
          placeholder: '搜索项目或文件...',
          value: searchKeyword,
          onChange: handleSearchChange,
          onSearch: handleSearch,
        }}
        showRefresh
        onRefresh={fetchProjects}
      />

      {/* 搜索结果 */}
      {hasSearched && searchResults.length > 0 && (
        <div style={{ marginTop: 16, marginBottom: 16 }}>
          <div style={{ marginBottom: 8, color: '#666' }}>
            找到 {searchResults.length} 个结果
          </div>
          <Row gutter={[16, 16]}>
            {searchResults.map((item, index) => (
              <Col xs={24} sm={12} md={8} lg={6} key={`${item.type}-${item.project_id}-${index}`}>
                <Card
                  hoverable
                  className="project-card"
                  onClick={() => handleSearchResultClick(item)}
                >
                  <div className="project-card-icon">
                    {item.type === 'project' ? (
                      <FolderOutlined style={{ fontSize: 48, color: '#1890ff' }} />
                    ) : (
                      <FileOutlined style={{ fontSize: 48, color: '#52c41a' }} />
                    )}
                  </div>
                  <Space direction="vertical" style={{ width: '100%' }}>
                    <Space>
                      <h3 style={{ margin: 0 }}>
                        {item.type === 'project' ? item.project_name : item.file_name}
                      </h3>
                      <Tag color={item.type === 'project' ? 'blue' : 'green'}>
                        {item.match_type}
                      </Tag>
                    </Space>
                    {item.type === 'project' && (
                      <p className="project-description">
                        {item.project_description || '暂无描述'}
                      </p>
                    )}
                    {item.type === 'file' && (
                      <div style={{ fontSize: 12, color: '#666' }}>
                        <div>项目: {item.project_name}</div>
                        <div>路径: {item.file_path}</div>
                      </div>
                    )}
                  </Space>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      )}

      {/* 正常项目列表 */}
      {!hasSearched && (
        <>
          <Row gutter={[16, 16]} style={{ marginTop: 16 }}>
            {paginatedProjects.map((project) => (
              <Col xs={24} sm={12} md={8} lg={6} key={project.id}>
                <Card
                  hoverable
                  className="project-card"
                  onClick={() => handleOpenProject(project.id)}
                  actions={type === 'my' ? [
                    <SettingOutlined key="settings" onClick={(e) => handleEdit(e, project)} />,
                    <GithubOutlined key="git" onClick={(e) => handleGitSettings(e, project)} />,
                    <TeamOutlined key="members" onClick={(e) => handleMembers(e, project)} />,
                  ] : [
                    <EyeOutlined key="view" />,
                  ]}
                >
                  {/* 公开项目标识 */}
                  {project.is_public === 1 && (
                    <div className="project-card-public-badge">公开</div>
                  )}
                  <div className="project-card-icon">
                    <FolderOutlined style={{ fontSize: 48, color: '#1890ff' }} />
                  </div>
                  <h3>{project.name}</h3>
                  <p className="project-description">{project.description || '暂无描述'}</p>
                  <div className="project-meta">
                    <span>文档数: {project.doc_count || 0}</span>
                    {type === 'share' && project.owner_name && (
                      <span style={{ marginLeft: 12 }}>
                        所有者: {project.owner_nickname || project.owner_name}
                      </span>
                    )}
                    {type === 'share' && project.user_role && (
                      <span style={{ marginLeft: 12 }}>
                        角色: {project.user_role === 'admin' ? '管理者' : project.user_role === 'editor' ? '编辑者' : '查看者'}
                      </span>
                    )}
                  </div>
                </Card>
              </Col>
            ))}

            {filteredProjects.length === 0 && !loading && (
              <Col span={24}>
                <Empty description={type === 'my' ? "还没有项目，创建一个开始吧" : "还没有参与的项目"} />
              </Col>
            )}
          </Row>
          {filteredProjects.length > 0 && (
            <div style={{ marginTop: 24, display: 'flex', justifyContent: 'center' }}>
              <Pagination
                current={currentPage}
                pageSize={pageSize}
                total={filteredProjects.length}
                onChange={setCurrentPage}
                showSizeChanger={false}
                className="dot-pagination"
                itemRender={(page, type, originalElement) => {
                  if (type === 'page') {
                    return <span className="pagination-dot" />
                  }
                  return originalElement
                }}
              />
            </div>
          )}
        </>
      )}

      {/* 搜索无结果提示 */}
      {hasSearched && !searching && searchResults.length === 0 && (
        <div style={{ marginTop: 16 }}>
          <Empty description={`没有找到包含 "${searchKeyword}" 的项目或文件`} />
        </div>
      )}

      <Modal
        title="创建新项目"
        open={modalVisible}
        onCancel={() => {
          setModalVisible(false)
          form.resetFields()
        }}
        footer={null}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleCreateProject}
        >
          <Form.Item
            label="项目名称"
            name="name"
            rules={[{ required: true, message: '请输入项目名称' }]}
          >
            <Input placeholder="请输入项目名称" />
          </Form.Item>

          <Form.Item
            label="项目描述"
            name="description"
          >
            <Input.TextArea
              rows={4}
              placeholder="请输入项目描述（选填）"
            />
          </Form.Item>

          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                创建
              </Button>
              <Button onClick={() => {
                setModalVisible(false)
                form.resetFields()
              }}>
                取消
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="编辑项目"
        open={editModalVisible}
        onCancel={() => {
          setEditModalVisible(false)
          editForm.resetFields()
        }}
        footer={null}
      >
        <Form
          form={editForm}
          layout="vertical"
          onFinish={handleUpdateProject}
        >
          <Form.Item
            label="项目名称"
            name="name"
            rules={[{ required: true, message: '请输入项目名称' }]}
          >
            <Input placeholder="请输入项目名称" />
          </Form.Item>

          <Form.Item
            label="项目描述"
            name="description"
          >
            <Input.TextArea
              rows={4}
              placeholder="请输入项目描述（选填）"
            />
          </Form.Item>

          <Form.Item
            label="公开项目"
            name="is_public"
            valuePropName="checked"
          >
            <Switch />
          </Form.Item>

          <Form.Item label="项目公开分享">
            <Space direction="vertical" style={{ width: '100%' }} size="middle">
              {!editForm.getFieldValue('is_public') ? (
                <div style={{ color: '#8c8c8c', lineHeight: 1.7 }}>
                  开启“公开项目”后，才可以生成项目分享链接和配置访问密码。
                </div>
              ) : isPublicEnablePending ? (
                <div style={{ color: '#8c8c8c', lineHeight: 1.7 }}>
                  保存项目后将自动生成新的项目分享链接。
                </div>
              ) : (
                <>
                  <Input
                    value={shareInfo?.share_url ? `${window.location.origin}${shareInfo.share_url}` : '正在生成分享链接...'}
                    readOnly
                    addonAfter={
                      shareInfo?.share_url ? <CopyOutlined onClick={handleCopyLink} style={{ cursor: 'pointer' }} /> : null
                    }
                  />
                  <Space>
                    <span style={{ fontWeight: 500 }}>访问密码保护</span>
                    <Switch checked={hasPassword} onChange={handlePasswordToggle} />
                  </Space>
                  {hasPassword && (
                    <div>
                      <Input.Password
                        placeholder="请输入访问密码"
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                      />
                      <Button type="primary" onClick={handleSavePassword} style={{ marginTop: 8 }}>
                        保存密码
                      </Button>
                    </div>
                  )}
                </>
              )}
            </Space>
          </Form.Item>

          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'space-between' }}>
              <Space>
                <Button
                  danger
                  icon={<DeleteOutlined />}
                  onClick={() => {
                    setEditModalVisible(false)
                    editForm.resetFields()
                    handleDeleteProject(currentProject.id)
                  }}
                >
                  删除项目
                </Button>
                <Button
                  danger
                  icon={<SwapOutlined />}
                  onClick={handleOpenTransfer}
                >
                  转移所有权
                </Button>
              </Space>
              <Space>
                <Button type="primary" htmlType="submit">
                  更新
                </Button>
                <Button onClick={() => {
                  setEditModalVisible(false)
                  editForm.resetFields()
                }}>
                  取消
                </Button>
              </Space>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="转移项目所有权"
        open={transferModalVisible}
        onCancel={() => {
          setTransferModalVisible(false)
          transferForm.resetFields()
        }}
        onOk={() => transferForm.submit()}
        confirmLoading={loadingMembers}
      >
        <Form
          form={transferForm}
          layout="vertical"
          onFinish={handleTransfer}
        >
          <p style={{ color: '#f5222d', marginBottom: 16 }}>
            警告：转移所有权后，您将失去该项目的所有权并变为普通管理员，且无法撤销此操作。
          </p>
          <Form.Item
            name="new_owner_id"
            label="选择新所有者"
            rules={[{ required: true, message: '请选择新所有者' }]}
          >
            <Select
              placeholder="搜索用户"
              showSearch
              loading={loadingMembers}
              filterOption={(input, option) =>
                (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
              }
              options={users.map(user => ({
                value: user.id,
                label: user.nickname ? `${user.username} (${user.nickname})` : user.username,
              }))}
            />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="成员管理"
        open={membersModalVisible}
        onCancel={() => {
          setMembersModalVisible(false)
          memberForm.resetFields()
          setMembers([])
          setUsers([])
        }}
        footer={null}
        width={700}
      >
        <Space direction="vertical" style={{ width: '100%' }} size="large">
          <div>
            {users.length === 0 ? (
              <div style={{ marginBottom: 16, color: '#999' }}>
                {loadingMembers ? '正在加载用户列表...' : '没有可添加的用户'}
              </div>) : null}
            <Form
              form={memberForm}
              layout="inline"
              onFinish={handleAddMember}
            >
              <Form.Item
                name="user_id"
                rules={[{ required: true, message: '请选择用户' }]}
                style={{ width: 250 }}
              >
                <Select
                  placeholder={users.length > 0 ? "选择用户" : "没有可添加的用户"}
                  showSearch
                  loading={loadingMembers}
                  disabled={users.length === 0}
                  filterOption={(input, option) =>
                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                  }
                  options={users
                    .filter(user => !members.some(m => m.user_id === user.id))
                    .map(user => ({
                      value: user.id,
                      label: user.nickname ? `${user.username} (${user.nickname})` : user.username,
                    }))}
                  notFoundContent={loadingMembers ? "加载中..." : "没有找到用户"}
                />
              </Form.Item>
              <Form.Item
                name="role"
                rules={[{ required: true, message: '请选择角色' }]}
                initialValue="viewer"
                style={{ width: 150 }}
              >
                <Select placeholder="选择角色">
                  <Select.Option value="admin">管理员</Select.Option>
                  <Select.Option value="editor">编辑者</Select.Option>
                  <Select.Option value="viewer">查看者</Select.Option>
                </Select>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  htmlType="submit"
                  loading={loadingMembers}
                  disabled={users.length === 0}
                >
                  添加
                </Button>
              </Form.Item>
            </Form>
          </div>

          <div>
            <h4>当前成员</h4>
            {members.length === 0 ? (
              <Empty description="暂无成员" />
            ) : (
              <Table
                dataSource={members}
                rowKey="id"
                pagination={false}
                loading={loadingMembers}
                columns={[
                  {
                    title: '用户',
                    dataIndex: 'username',
                    key: 'username',
                    render: (username, record) => {
                      if (record.nickname) {
                        return `${username} (${record.nickname})`
                      }
                      return username || `用户ID: ${record.user_id}`
                    },
                  },
                  {
                    title: '角色',
                    dataIndex: 'role',
                    key: 'role',
                    render: (role) => {
                      const roleMap = {
                        admin: '管理员',
                        editor: '编辑者',
                        viewer: '查看者',
                      }
                      return roleMap[role] || role
                    },
                  },
                  {
                    title: '加入时间',
                    dataIndex: 'joined_at',
                    key: 'joined_at',
                    render: (time) => time ? new Date(time).toLocaleString('zh-CN') : '-',
                  },
                  {
                    title: '操作',
                    key: 'action',
                    render: (_, record) => {
                      const isOwner = record.user_id === currentProject?.owner_id
                      return (
                        <Button
                          type="link"
                          danger
                          onClick={() => handleRemoveMember(record.user_id)}
                          disabled={isOwner}
                          title={isOwner ? '不能删除项目所有者' : '删除成员'}
                        >
                          {isOwner ? '所有者' : '删除'}
                        </Button>
                      )
                    },
                  },
                ]}
              />
            )}
          </div>
        </Space>
      </Modal>

      <Modal
        title="Git仓库管理"
        open={gitModalVisible}
        onCancel={() => {
          setGitModalVisible(false)
          setGitRepos([])
        }}
        footer={null}
        width={800}
      >
        <div style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end' }}>
          <Button type="primary" icon={<PlusOutlined />} onClick={handleAddRepo}>
            添加仓库
          </Button>
        </div>
        
        <Table
          dataSource={gitRepos}
          rowKey="id"
          loading={loadingRepos}
          pagination={false}
          columns={[
            {
              title: '别名',
              dataIndex: 'name',
              key: 'name',
              render: (text, record) => (
                <Space>
                  {text}
                  {record.is_default === 1 && <Tag color="blue">默认</Tag>}
                </Space>
              )
            },
            {
              title: '仓库地址',
              dataIndex: 'repo_url',
              key: 'repo_url',
              ellipsis: true,
            },
            {
              title: '分支',
              dataIndex: 'branch',
              key: 'branch',
              width: 100,
            },
            {
              title: '操作',
              key: 'action',
              width: 150,
              render: (_, record) => (
                <Space>
                  <Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleEditRepo(record)}>编辑</Button>
                  <Button type="link" danger size="small" icon={<DeleteOutlined />} onClick={() => handleDeleteRepo(record.id)}>删除</Button>
                </Space>
              ),
            },
          ]}
        />
      </Modal>

      <Modal
        title={editingRepo ? "编辑仓库" : "添加仓库"}
        open={gitRepoModalVisible}
        onCancel={() => {
          setGitRepoModalVisible(false)
          repoForm.resetFields()
        }}
        footer={null}
      >
        <Form
          form={repoForm}
          layout="vertical"
          onFinish={handleSaveRepo}
        >
          <Form.Item
            label="仓库别名"
            name="name"
            rules={[{ required: true, message: '请输入别名（如：Origin, Backup）' }]}
          >
            <Input placeholder="例如：Origin" />
          </Form.Item>

          <Form.Item
            label="Git仓库地址"
            name="repo_url"
            rules={[{ required: true, message: '请输入Git仓库地址' }, { type: 'url', message: '请输入有效的URL' }]}
            extra="支持 HTTPS 协议"
          >
            <Input placeholder="https://github.com/username/repo.git" prefix={<GithubOutlined />} />
          </Form.Item>

          <Form.Item
            label="分支"
            name="branch"
            initialValue="main"
          >
            <Input placeholder="main" />
          </Form.Item>

          <Form.Item
            label="用户名"
            name="username"
            extra="私有仓库需填写"
          >
            <Input placeholder="Git用户名" />
          </Form.Item>

          <Form.Item
            label="Token/密码"
            name="token"
            extra="推荐使用 Personal Access Token"
          >
            <Input.Password placeholder="Git访问令牌" />
          </Form.Item>

          <Form.Item
            name="is_default"
            valuePropName="checked"
          >
            <Switch checkedChildren="默认仓库" unCheckedChildren="非默认" />
          </Form.Item>

          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setGitRepoModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit">保存</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default ProjectList