<template>
  <div class="admin-algorithms-container">
    <!-- 页面标题 -->
    <h1>算法仓库管理</h1>
    
    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="openAddRepoDialog">
          <el-icon><plus /></el-icon>
          添加算法仓库
        </el-button>
      <el-button type="info" @click="showGiteaConfigDialog = true">
        <el-icon><Setting /></el-icon>
        Gitea配置
      </el-button>
    </div>
    
    <!-- 仓库列表 -->
    <el-table :data="repos" style="width: 100%">
      <el-table-column prop="name" label="仓库名称" width="200" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="repo_url" label="仓库地址" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="180">
        <template #default="scope">
          {{ formatDate(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="scope">
          <el-button size="small" @click="editRepo(scope.row)">编辑</el-button>
          <el-button size="small" type="primary" @click="viewRepo(scope.row)">查看仓库</el-button>
          <el-button size="small" type="danger" @click="deleteRepo(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- Gitea配置对话框 -->
    <el-dialog
      v-model="showGiteaConfigDialog"
      :title="isEditingGiteaConfig ? '编辑Gitea配置' : 'Gitea配置'"
      width="50%"
    >
      <div class="gitea-config-header" v-if="!isEditingGiteaConfig">
        <el-button type="primary" @click="isEditingGiteaConfig = true">
          <el-icon><Edit /></el-icon>
          编辑配置
        </el-button>
      </div>
      
      <el-form :model="giteaConfigForm" :rules="giteaConfigRules" ref="giteaConfigFormRef">
        <el-form-item label="Gitea服务器URL" prop="serverUrl">
          <el-input 
            v-model="giteaConfigForm.serverUrl" 
            placeholder="请输入Gitea服务器URL，例如 https://gitea.example.com" 
            :disabled="!isEditingGiteaConfig"
          />
        </el-form-item>
        <el-form-item label="访问令牌" prop="accessToken">
          <el-input 
            v-model="giteaConfigForm.accessToken" 
            type="password" 
            placeholder="请输入Gitea访问令牌" 
            :disabled="!isEditingGiteaConfig"
          />
        </el-form-item>
        <el-form-item label="默认组织/用户" prop="defaultOwner">
          <el-input 
            v-model="giteaConfigForm.defaultOwner" 
            placeholder="请输入默认组织或用户名" 
            :disabled="!isEditingGiteaConfig"
          />
        </el-form-item>
        <el-form-item label="仓库前缀" prop="repoPrefix">
          <el-input 
            v-model="giteaConfigForm.repoPrefix" 
            placeholder="请输入仓库前缀，可选" 
            :disabled="!isEditingGiteaConfig"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEditGiteaConfig">取消</el-button>
          <el-button type="primary" @click="saveGiteaConfig" v-if="isEditingGiteaConfig">保存配置</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加算法仓库对话框 -->
    <el-dialog
      v-model="showAddRepoDialog"
      title="添加算法仓库"
      width="60%"
    >
      <el-form :model="repoForm" :rules="repoRules" ref="repoFormRef">
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="repoForm.name" placeholder="请输入仓库名称" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="repoForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入仓库描述"
          />
        </el-form-item>
        <el-form-item label="仓库类型" prop="type">
          <el-select v-model="repoForm.type" placeholder="选择仓库类型">
            <el-option label="代码仓库" value="code" />
            <el-option label="模型仓库" value="model" />
            <el-option label="混合仓库" value="hybrid" />
          </el-select>
        </el-form-item>
        <el-form-item label="Gitea服务器URL" prop="serverUrl">
          <el-input v-model="repoForm.serverUrl" placeholder="Gitea服务器URL" readonly :disabled="true" />
        </el-form-item>
        <el-form-item label="Git仓库名" prop="gitRepoName">
          <el-input v-model="repoForm.gitRepoName" placeholder="请输入Git仓库名" />
        </el-form-item>
        <el-form-item label="仓库地址" prop="repo_url">
          <el-input v-model="repoForm.repo_url" placeholder="完整仓库地址" readonly />
        </el-form-item>
        <el-form-item label="分支" prop="branch">
          <el-input v-model="repoForm.branch" placeholder="请输入仓库分支，默认为 main" />
        </el-form-item>
        <el-form-item label="本地路径" prop="local_path">
          <el-input v-model="repoForm.local_path" placeholder="请选择本地存储路径" readonly>
            <template #append>
              <el-button @click="selectLocalPath">
                <el-icon><Folder /></el-icon>
                选择文件夹
              </el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <input
        ref="folderInput"
        type="file"
        webkitdirectory
        multiple
        style="display: none"
        @change="handleFolderSelect"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAddRepoDialog = false">取消</el-button>
          <el-button type="primary" @click="addRepo">确定</el-button>
        </span>
      </template>
    </el-dialog>
    
    <!-- 编辑仓库对话框 -->
    <el-dialog
      v-model="showEditRepoDialog"
      title="编辑算法仓库"
      width="60%"
    >
      <el-form :model="editRepoForm" :rules="repoRules" ref="editRepoFormRef">
        <el-form-item label="仓库名称" prop="name">
          <el-input v-model="editRepoForm.name" placeholder="请输入仓库名称" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="editRepoForm.description"
            type="textarea"
            :rows="3"
            placeholder="请输入仓库描述"
          />
        </el-form-item>
        <el-form-item label="仓库类型" prop="type">
          <el-select v-model="editRepoForm.type" placeholder="选择仓库类型">
            <el-option label="代码仓库" value="code" />
            <el-option label="模型仓库" value="model" />
            <el-option label="混合仓库" value="hybrid" />
          </el-select>
        </el-form-item>
        <el-form-item label="Gitea服务器URL" prop="serverUrl">
          <el-input v-model="editRepoForm.serverUrl" placeholder="Gitea服务器URL" readonly :disabled="true" />
        </el-form-item>
        <el-form-item label="Git仓库名" prop="gitRepoName">
          <el-input v-model="editRepoForm.gitRepoName" placeholder="请输入Git仓库名" readonly disabled />
        </el-form-item>
        <el-form-item label="仓库地址" prop="repo_url">
          <el-input v-model="editRepoForm.repo_url" placeholder="完整仓库地址" readonly disabled />
        </el-form-item>
        <el-form-item label="分支" prop="branch">
          <el-input v-model="editRepoForm.branch" placeholder="请输入仓库分支，默认为 main" readonly disabled />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showEditRepoDialog = false">取消</el-button>
          <el-button type="primary" @click="updateRepo">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 上传进度对话框 -->
    <el-dialog
      v-model="isUploading"
      title="上传代码到Gitea"
      width="40%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="upload-progress-container">
        <el-progress :percentage="uploadProgress" :status="uploadProgress === 100 ? 'success' : ''" />
        <div class="upload-progress-text" v-if="uploadProgress < 100">
          正在上传代码到Gitea仓库，请稍候...
        </div>
        <div class="upload-progress-text" v-else>
          代码上传完成！
        </div>
      </div>
    </el-dialog>
    
    <!-- 文件选择器 - 移到主页面中，确保始终可用 -->
    <input
      ref="folderInput"
      type="file"
      webkitdirectory
      multiple
      style="display: none"
      @change="handleFolderSelect"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Plus, Setting, ArrowDown, UploadFilled, Edit, Folder } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 获取路由
const router = useRouter()

// 状态管理
const repos = ref<any[]>([])
const showAddRepoDialog = ref(false)
const showEditRepoDialog = ref(false)
const showGiteaConfigDialog = ref(false)
const isEditingGiteaConfig = ref(false)
const repoFormRef = ref<any>()
const editRepoFormRef = ref<any>()
const giteaConfigFormRef = ref<any>() // 部署状态
const folderInput = ref<HTMLInputElement>()
const selectedFiles = ref<File[]>([])
const currentEditingRepo = ref<any>(null)

// 打开添加仓库对话框
const openAddRepoDialog = () => {
  // 填充 Gitea 服务器 URL
  repoForm.value.serverUrl = giteaConfigForm.value.serverUrl
  // 重置其他字段
  repoForm.value.gitRepoName = ''
  repoForm.value.repo_url = ''
  repoForm.value.local_path = ''
  // 重置选中的文件
  selectedFiles.value = []
  // 显示对话框
  showAddRepoDialog.value = true
}

// 选择本地路径
const selectLocalPath = () => {
  if (folderInput.value) {
    folderInput.value.click()
  }
}

// 处理文件夹选择
const handleFolderSelect = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (target.files && target.files.length > 0) {
    // Chrome 浏览器对 webkitdirectory 有 1000 个文件的限制
    // 如果文件数量正好是 1000，可能是被浏览器截断了
    const CHROME_FILE_LIMIT = 1000
    if (target.files.length >= CHROME_FILE_LIMIT) {
      ElMessage.error(
        `错误：检测到 ${target.files.length} 个文件。\n\n` +
        `Chrome 浏览器对文件夹选择有 ${CHROME_FILE_LIMIT} 个文件的限制。\n\n` +
        `解决方案：\n` +
        `1. 排除不需要的目录（如 node_modules, .git, dist 等）\n` +
        `2. 将文件分成多个文件夹分批上传\n` +
        `3. 使用命令行工具（git）直接推送代码到 Gitea`
      )
      return  // 阻止继续
    }

    // 检查文件数量并给出警告（但不禁用功能）
    if (target.files.length > 500) {
      ElMessage.warning(`检测到较多文件 (${target.files.length} 个)，处理可能需要较长时间，请耐心等待。`)
    }

    // 清空之前选中的文件
    selectedFiles.value = []

    // 定义需要排除的文件和目录模式
    const excludePatterns = [
      // 编译输出目录
      /node_modules[\/\\]/,
      /dist[\/\\]/,
      /build[\/\\]/,
      /target[\/\\]/,
      /out[\/\\]/,
      /\.next[\/\\]/,
      /\.nuxt[\/\\]/,
      // 缓存和临时文件目录
      /__pycache__[\/\\]/,
      /\.pytest_cache[\/\\]/,
      /\.cache[\/\\]/,
      /\.temp[\/\\]/,
      /\.tmp[\/\\]/,
      // IDE 和编辑器目录
      /\.idea[\/\\]/,
      /\.vscode[\/\\]/,
      /\.vs[\/\\]/,
      // 版本控制目录
      /\.git[\/\\]/,
      /\.svn[\/\\]/,
      /\.hg[\/\\]/,
      // 日志文件
      /\.log$/,
      // 操作系统文件
      /\.DS_Store$/,
      /Thumbs\.db$/,
      /desktop\.ini$/,
      // 依赖锁文件(可选)
      /package-lock\.json$/,
      /yarn\.lock$/,
      /pnpm-lock\.yaml$/,
    ]

    // 保存选中的文件到数组并过滤排除的文件
    const excludedFiles: string[] = []
    for (let i = 0; i < target.files.length; i++) {
      const file = target.files[i] as File;
      // 确保我们保留相对路径信息
      (file as any).relativePath = (file as any).webkitRelativePath || file.name;

      // 检查是否应该排除
      const relativePath = (file as any).relativePath || file.name
      const shouldExclude = excludePatterns.some(pattern => pattern.test(relativePath))

      if (shouldExclude) {
        excludedFiles.push(relativePath)
      } else {
        selectedFiles.value.push(file)
      }
    }

    // 报告排除的文件
    if (excludedFiles.length > 0) {
      console.log(`自动排除了 ${excludedFiles.length} 个编译/缓存文件`)
      // 按目录分组统计
      const excludedDirs: { [key: string]: number } = {}
      excludedFiles.forEach(path => {
        const dir = path.split('/')[0]
        excludedDirs[dir] = (excludedDirs[dir] || 0) + 1
      })

      const excludeSummary = Object.entries(excludedDirs)
        .map(([dir, count]) => `${dir}: ${count}个`)
        .join(', ')

      ElMessage.success(
        `已自动排除 ${excludedFiles.length} 个编译/缓存文件 (${excludeSummary})`
      )
    }
    
    console.log('Selected files array:', selectedFiles.value)
    console.log('Number of files selected:', selectedFiles.value.length)
    
    // 显示所有选中的文件
    console.log('All selected files:')
    for (let i = 0; i < selectedFiles.value.length; i++) {
      const file = selectedFiles.value[i]
      console.log(`File ${i + 1}: ${file.name}`)
      console.log(`  Relative Path: ${(file as any).relativePath}`)
      console.log(`  Size: ${file.size} bytes`)
      console.log(`  Type: ${file.type}`)
    }
    
    // 获取第一个文件的路径，然后提取文件夹路径
    const firstFile = selectedFiles.value[0]
    if (firstFile) {
      console.log('First file details:')
      console.log(`  Name: ${firstFile.name}`)
      console.log(`  Relative Path: ${(firstFile as any).relativePath}`)
      
      const relativePath = (firstFile as any).relativePath
      if (relativePath && relativePath.includes('/')) {
        // 提取文件夹路径（移除文件名）
        const folderPath = relativePath.substring(0, relativePath.lastIndexOf('/'))
        repoForm.value.local_path = folderPath
        console.log('Selected folder:', folderPath)
      } else {
        // 如果没有相对路径，则使用文件名作为路径
        repoForm.value.local_path = firstFile.name
        console.log('Selected file path:', firstFile.name)
      }
    }
    
    // 重置输入，以便可以选择相同的文件夹
    // 注意：现在使用数组存储文件，所以重置输入不会丢失选中的文件
    if (folderInput.value) {
      console.log('Resetting file input to allow re-selection')
      folderInput.value.value = ''
    }

    // 检查是否有文件被选择
    if (selectedFiles.value.length > 0) {
      console.log('Files selected:', selectedFiles.value.length)
    }
  } else {
    console.log('No files selected')
    selectedFiles.value = []
  }
}

// 上传文件到服务器
const uploadFilesToServer = async (files: File[], algorithmId?: string) => {
  try {
    console.log('=== 开始上传文件 ===')
    console.log('Files array:', files)
    console.log('Number of files to upload:', files.length)
    console.log('Algorithm ID:', algorithmId)

    // 检查文件数量限制 (Chrome 浏览器限制为 1000)
    const MAX_FILES_PER_BATCH = 1000  // Chrome 浏览器限制
    if (files.length > MAX_FILES_PER_BATCH) {
      console.log(`文件数量超过限制 (${MAX_FILES_PER_BATCH} 个)`)
      ElMessage.error(
        `文件数量超过限制 (${files.length} 个)\n\n` +
        `Chrome 浏览器限制每次最多选择 ${MAX_FILES_PER_BATCH} 个文件。\n\n` +
        `建议：\n` +
        `1. 排除 node_modules, .git, dist 等目录\n` +
        `2. 分批选择文件夹上传\n` +
        `3. 使用 git 命令行直接推送`
      )
      return false
    }

    // 检查总文件大小
    let totalSize = 0;
    for (let i = 0; i < files.length; i++) {
      totalSize += files[i].size;
    }
    console.log(`Total upload size: ${totalSize} bytes (${(totalSize / (1024 * 1024)).toFixed(2)} MB)`);

    // 如果总大小超过一定限制，分批上传
    const MAX_BATCH_SIZE = 50 * 1024 * 1024; // 50MB per batch
    if (totalSize > MAX_BATCH_SIZE) {
      console.log('文件过大，分批上传...');
      return await uploadFilesInBatches(files, algorithmId, MAX_BATCH_SIZE);
    }

    const axios = await import('axios')

    const formData = new FormData()

    // 添加所有文件到 FormData
    console.log('=== 构建FormData ===')
    for (let i = 0; i < files.length; i++) {
      const file = files[i]
      // 使用保存的相对路径，而不是原始的 webkitRelativePath（可能在某些浏览器中不可用）
      const filePath = (file as any).relativePath || file.name
      console.log(`Adding file ${i + 1}/${files.length}: ${filePath}`)
      console.log(`  Size: ${file.size} bytes`)
      console.log(`  Type: ${file.type}`)
      formData.append('files', file, filePath)
    }

    // 添加算法ID
    const finalAlgorithmId = algorithmId || repoForm.value.gitRepoName
    formData.append('algorithm_id', finalAlgorithmId)
    console.log('Algorithm ID in form data:', finalAlgorithmId)

    // 显示FormData内容（仅用于调试）
    console.log('FormData keys:', Array.from(formData.keys()))

    // 上传文件
    console.log('=== 发送上传请求 ===')
    console.log('Sending request to /api/gitea/repos/upload')

    const response = await axios.default.post('/api/gitea/repos/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      // 监控上传进度
      onUploadProgress: (progressEvent) => {
        if (progressEvent.total) {
          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
          uploadProgress.value = progress
          console.log(`Upload progress: ${progress}% (${progressEvent.loaded}/${progressEvent.total} bytes)`)
        }
      },
      timeout: 600000 // 10分钟超时，支持大文件上传
    })

    console.log('=== 上传响应 ===')
    console.log('Status code:', response.status)
    console.log('Response data:', response.data)

    if (response.data.success) {
      console.log('✅ 文件上传成功')
    } else {
      console.log('❌ 文件上传失败')
    }

    return response.data.success
  } catch (error: any) {
    console.error('=== 上传文件失败 ===')
    console.error('Error:', error)
    console.error('Error message:', error.message)
    console.error('Error stack:', error.stack)
    console.error('Response:', error.response)
    console.error('Response data:', error.response?.data)
    console.error('Response status:', error.response?.status)

    // 检查是否是文件数量超过限制的错误
    if (error.response?.data?.detail?.includes('Maximum number of files')) {
      ElMessage.error(`文件数量超过限制，请减少文件数量后重试`)
    } else {
      ElMessage.error('文件上传失败，请检查网络连接或文件大小')
    }
    return false
  }
}

// 分批上传文件
const uploadFilesInBatches = async (files: File[], algorithmId?: string, limit: number = 50 * 1024 * 1024) => {
  console.log('开始分批上传文件...');

  // 判断是基于文件数量还是文件大小分批
  const MAX_FILES_PER_BATCH = 1000  // Chrome 浏览器限制为 1000 个文件
  const isFileCountBatch = files.length > MAX_FILES_PER_BATCH

  // 按批次分割文件
  const batches: File[][] = [];
  let currentBatch: File[] = [];
  let currentBatchSize = 0;

  for (const file of files) {
    if (isFileCountBatch) {
      // 基于文件数量分批 (Chrome 限制 1000)
      if (currentBatch.length >= MAX_FILES_PER_BATCH) {
        batches.push([...currentBatch]);
        currentBatch = [file];
      } else {
        currentBatch.push(file);
      }
    } else {
      // 基于文件大小分批
      if (currentBatchSize + file.size > limit && currentBatch.length > 0) {
        batches.push([...currentBatch]);
        currentBatch = [file];
        currentBatchSize = file.size;
      } else {
        currentBatch.push(file);
        currentBatchSize += file.size;
      }
    }
  }

  // 添加最后一个批次
  if (currentBatch.length > 0) {
    batches.push(currentBatch);
  }

  console.log(`总共 ${files.length} 个文件分为 ${batches.length} 批`);
  console.log(`分批模式: ${isFileCountBatch ? '基于文件数量' : '基于文件大小'}`);

  // 逐批上传
  for (let i = 0; i < batches.length; i++) {
    console.log(`上传第 ${i + 1} 批文件，包含 ${batches[i].length} 个文件`);

    const batchResult = await uploadSingleBatch(batches[i], algorithmId);
    if (!batchResult) {
      console.error(`第 ${i + 1} 批上传失败`);
      return false;
    }

    // 更新进度
    const progressPerBatch = Math.floor(100 / batches.length);
    uploadProgress.value = Math.min(progressPerBatch * (i + 1), 90); // 最多到90%，保留10%给最后的推送
  }

  console.log('所有批次上传完成');
  return true;
};

// 上传单个批次
const uploadSingleBatch = async (batch: File[], algorithmId?: string) => {
  try {
    const axios = await import('axios');
    const formData = new FormData();
    
    for (let i = 0; i < batch.length; i++) {
      const file = batch[i];
      const filePath = (file as any).relativePath || file.name;
      formData.append('files', file, filePath);
    }
    
    const finalAlgorithmId = algorithmId || repoForm.value.gitRepoName;
    formData.append('algorithm_id', finalAlgorithmId);
    
    console.log(`上传批次，包含 ${batch.length} 个文件`);
    
    const response = await axios.default.post('/api/gitea/repos/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      },
      timeout: 600000 // 10分钟超时
    });
    
    return response.data.success;
  } catch (error: any) {
    console.error('批次上传失败:', error);
    return false;
  }
};

// 监听 Gitea 配置对话框的显示状态
watch(() => showGiteaConfigDialog.value, async (newValue) => {
  if (newValue) {
    // 打开对话框时，重置为非编辑模式并加载最新配置
    isEditingGiteaConfig.value = false
    await loadGiteaConfig()
  }
})

// Gitea配置表单
const giteaConfigForm = ref({
  serverUrl: '',
  accessToken: '',
  defaultOwner: '',
  repoPrefix: ''
})

// Gitea配置表单验证规则
const giteaConfigRules = ref({
  serverUrl: [
    { required: true, message: '请输入Gitea服务器URL', trigger: 'blur' }
  ],
  accessToken: [
    { required: true, message: '请输入访问令牌', trigger: 'blur' }
  ],
  defaultOwner: [
    { required: true, message: '请输入默认组织或用户名', trigger: 'blur' }
  ]
})

// 仓库表单
const repoForm = ref({
  name: '',
  description: '',
  type: 'code',
  serverUrl: '',
  gitRepoName: '',
  repo_url: '',
  branch: 'main',
  local_path: ''
})

// 编辑仓库表单
const editRepoForm = ref({
  name: '',
  description: '',
  type: 'code',
  serverUrl: '',
  gitRepoName: '',
  repo_url: '',
  branch: 'main'
})

// 监听 Gitea 配置变化，更新仓库表单中的服务器URL
watch(() => giteaConfigForm.value.serverUrl, (newValue) => {
  repoForm.value.serverUrl = newValue
  // 重新计算仓库地址
  updateRepoUrl()
})

// 监听Git仓库名变化，更新完整仓库地址
watch(() => repoForm.value.gitRepoName, () => {
  updateRepoUrl()
})

// 更新仓库地址
const updateRepoUrl = () => {
  if (repoForm.value.serverUrl && repoForm.value.gitRepoName) {
    // 拼接完整仓库地址
    const serverUrl = repoForm.value.serverUrl.endsWith('/') ? repoForm.value.serverUrl.slice(0, -1) : repoForm.value.serverUrl
    // 考虑Gitea配置中的前缀
    const repoPrefix = giteaConfigForm.value.repoPrefix || ''
    const fullRepoName = repoPrefix + repoForm.value.gitRepoName
    repoForm.value.repo_url = `${serverUrl}/${giteaConfigForm.value.defaultOwner}/${fullRepoName}.git`
  } else {
    repoForm.value.repo_url = ''
  }
}

// 仓库表单验证规则
const repoRules = ref({
  name: [
    { required: true, message: '请输入仓库名称', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入仓库描述', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择仓库类型', trigger: 'blur' }
  ],
  gitRepoName: [
    { required: true, message: '请输入Git仓库名', trigger: 'blur' }
  ]
})

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString()
}

// 加载仓库列表
const loadRepos = async () => {
  try {
    // 导入axios
    const axios = await import('axios')
    
    console.log('开始加载仓库列表...')
    
    // 调用后端API获取仓库列表
    const response = await axios.default.get('/api/repositories')
    
    console.log('仓库列表API响应:', response)
    console.log('响应状态:', response.status)
    console.log('响应数据:', response.data)
    console.log('响应数据类型:', typeof response.data)
    console.log('success字段:', response.data.success)
    console.log('repositories字段:', response.data.repositories)
    
    if (response.data.success) {
      repos.value = response.data.repositories
      console.log('仓库列表加载完成，共', repos.value.length, '个仓库')
      console.log('仓库列表:', repos.value)
    } else {
      console.error('加载仓库列表失败：success为false')
      ElMessage.error('加载仓库列表失败')
    }
  } catch (error) {
    console.error('加载仓库列表失败:', error)
    console.error('错误类型:', typeof error)
    console.error('错误详情:', error)
    ElMessage.error('加载仓库列表失败')
  }
}

// 上传进度状态
const uploadProgress = ref(0)
const isUploading = ref(false)

// 添加仓库
const addRepo = async () => {
  try {
    // 验证表单
    if (!repoForm.value.name || !repoForm.value.description || !repoForm.value.type || !repoForm.value.gitRepoName) {
      ElMessage.error('请填写完整的仓库信息')
      return
    }
    
    // 导入axios
    const axios = await import('axios')
    
    // 调用后端API添加仓库
    const response = await axios.default.post('/api/repositories', {
      name: repoForm.value.name,
      description: repoForm.value.description,
      type: repoForm.value.type,
      repo_url: repoForm.value.repo_url,
      branch: repoForm.value.branch,
      local_path: repoForm.value.local_path
    })
    
    if (response.data.success) {
      // 显示上传进度对话框
      isUploading.value = true
      uploadProgress.value = 0
      
      try {
        // 计算包含前缀的完整仓库名称
        // 前端根据配置添加前缀，后端直接使用
        const repoPrefix = giteaConfigForm.value.repoPrefix || ''
        const fullRepoName = repoPrefix + repoForm.value.gitRepoName
        
        // 首先在Gitea上创建仓库
        const createResponse = await axios.default.post('/api/gitea/repos/create', {
          algorithm_id: fullRepoName,
          algorithm_name: repoForm.value.name,
          description: repoForm.value.description
        })
        
        console.log('仓库创建响应:', createResponse.data)
        
        // 然后克隆仓库（如果需要）
        try {
          const cloneResponse = await axios.default.post('/api/gitea/repos/clone', {
            repo_url: repoForm.value.repo_url,
            algorithm_id: fullRepoName,
            branch: repoForm.value.branch
          })
          console.log('仓库克隆响应:', cloneResponse.data)
        } catch (cloneError: any) {
          console.log('仓库克隆可能不需要或失败，继续执行...', cloneError.message)
        }
        
        // 上传文件到服务器
        console.log('Selected files before upload:', selectedFiles.value)
        if (selectedFiles.value && selectedFiles.value.length > 0) {
          console.log('Uploading files...')
          const uploadSuccess = await uploadFilesToServer(selectedFiles.value, fullRepoName)
          if (!uploadSuccess) {
            ElMessage.warning('文件上传失败，但仓库创建成功')
          } else {
            console.log('Files uploaded successfully')
          }
        } else {
          console.log('No files selected for upload')
        }
        
        // 最后推送代码到Gitea仓库
        const pushResponse = await axios.default.post('/api/gitea/repos/push', {
          algorithm_id: fullRepoName,
          message: `Initial commit for ${repoForm.value.name}`
        })
        
        if (pushResponse.data.success) {
          ElMessage.success('仓库添加成功，代码已上传到Gitea')
        } else {
          ElMessage.warning('仓库添加成功，但代码上传失败')
          console.error('推送失败响应:', pushResponse.data)
        }
      } catch (error: any) {
        console.error('上传代码失败:', error)
        console.error('错误详情:', error.response?.data || error.message)
        ElMessage.warning('仓库添加成功，但代码上传失败')
      } finally {
        // 完成上传
        uploadProgress.value = 100
        setTimeout(() => {
          isUploading.value = false
          showAddRepoDialog.value = false
          
          // 重新加载仓库列表
          loadRepos()
          
          // 重置表单
          repoForm.value = {
            name: '',
            description: '',
            type: 'code',
            serverUrl: '',
            gitRepoName: '',
            repo_url: '',
            branch: 'main',
            local_path: ''
          }
          // 清空选中的文件
          selectedFiles.value = []
        }, 500)
      }
    } else {
      ElMessage.error('添加仓库失败')
    }
  } catch (error: any) {
    console.error('添加仓库失败:', error)
    console.error('错误详情:', error.response?.data || error.message)
    ElMessage.error('添加仓库失败')
  }
}

// 编辑仓库
const editRepo = async (repo: any) => {
  console.log('编辑仓库:', repo)
  
  try {
    // 导入axios
    const axios = await import('axios')
    
    // 调用后端API获取仓库详细信息
    const response = await axios.default.get(`/api/repositories/${repo.id}`)
    
    if (response.data.success) {
      const repoDetails = response.data.repository
      
      // 填充编辑表单
      editRepoForm.value = {
        name: repoDetails.name,
        description: repoDetails.description,
        type: repoDetails.type,
        serverUrl: giteaConfigForm.value.serverUrl,
        gitRepoName: extractRepoName(repoDetails.repo_url),
        repo_url: repoDetails.repo_url,
        branch: repoDetails.branch
      }
      
      currentEditingRepo.value = repoDetails
      showEditRepoDialog.value = true
    } else {
      ElMessage.error('获取仓库信息失败')
    }
  } catch (error) {
    console.error('获取仓库信息失败:', error)
    ElMessage.error('获取仓库信息失败')
  }
}

// 从仓库URL中提取仓库名称
const extractRepoName = (repoUrl: string) => {
  if (!repoUrl) return ''
  
  // 从类似 https://gitea.example.com/owner/repo.git 的URL中提取repo部分
  const urlParts = repoUrl.split('/')
  if (urlParts.length > 0) {
    const lastPart = urlParts[urlParts.length - 1]
    // 移除.git后缀
    return lastPart.replace('.git', '')
  }
  return ''
}

// 更新仓库
const updateRepo = async () => {
  try {
    // 验证表单
    if (!editRepoForm.value.name || !editRepoForm.value.description || 
        !editRepoForm.value.type || !editRepoForm.value.gitRepoName) {
      ElMessage.error('请填写完整的仓库信息')
      return
    }
    
    // 导入axios
    const axios = await import('axios')
    
    console.log('正在更新仓库:', {
      repoId: currentEditingRepo.value.id,
      name: editRepoForm.value.name,
      description: editRepoForm.value.description,
      type: editRepoForm.value.type
    })
    
    // 调用后端API更新仓库 - 只更新名称、描述和类型
    const response = await axios.default.put(`/api/repositories/${currentEditingRepo.value.id}`, {
      name: editRepoForm.value.name,
      description: editRepoForm.value.description,
      type: editRepoForm.value.type
    })
    
    if (response.data.success) {
      // 同时更新 Gitea 仓库信息
      try {
        // 直接使用gitRepoName作为algorithm_id，因为它已经包含了前缀
        // 从仓库URL中提取的gitRepoName已经是完整的仓库名称（包含前缀）
        const algorithmId = editRepoForm.value.gitRepoName
        
        console.log('更新Gitea仓库信息，使用algorithm_id:', algorithmId)
        
        // 调用 Gitea API 更新仓库信息 - 只更新描述，不更新名称
        const giteaResponse = await axios.default.patch('/api/gitea/repos/update', {
          algorithm_id: algorithmId,
          description: editRepoForm.value.description,
          private: false  // 暂时默认为公开仓库，后续可以添加专门的私有仓库选项
        })
        
        console.log('发送到Gitea API的参数:', {
          algorithm_id: algorithmId,
          description: editRepoForm.value.description,
          private: false
        })
        
        console.log('Gitea仓库更新响应:', giteaResponse.data)
        
        // 显示Gitea更新成功的消息
        if (giteaResponse.data.success) {
          console.log('Gitea仓库信息更新成功')
        } else {
          console.log('Gitea仓库信息更新失败')
        }
      } catch (giteaError) {
        console.error('更新Gitea仓库信息失败:', giteaError)
        console.error('错误详情:', giteaError.response?.data || giteaError.message)
        // Gitea更新失败不影响本地更新的成功状态
        ElMessage.warning('本地仓库更新成功，但Gitea仓库信息更新失败')
      }
      
      ElMessage.success('仓库更新成功')
      showEditRepoDialog.value = false
      currentEditingRepo.value = null
      
      // 重新加载仓库列表
      await loadRepos()
      
      // 重置表单
      editRepoForm.value = {
        name: '',
        description: '',
        type: 'code',
        serverUrl: '',
        gitRepoName: '',
        repo_url: '',
        branch: 'main'
      }
    } else {
      ElMessage.error('更新仓库失败')
    }
  } catch (error: any) {
    console.error('更新仓库失败:', error)
    console.error('错误详情:', error.response?.data || error.message)
    ElMessage.error('更新仓库失败')
  }
}

// 删除仓库
const deleteRepo = async (repoId: string) => {
  try {
    await ElMessageBox.confirm('确定要删除这个仓库吗？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    // 导入axios
    const axios = await import('axios')
    
    // 调用后端API删除仓库
    const response = await axios.default.delete(`/api/repositories/${repoId}`)
    
    if (response.data.success) {
      ElMessage.success('仓库删除成功')
      await loadRepos()
    } else {
      ElMessage.error('删除仓库失败')
    }
  } catch (error) {
    // 用户取消删除
  }
}

// 查看仓库
const viewRepo = (repo: any) => {
  console.log('查看仓库:', repo)
  
  // 构建Gitea仓库URL
  const serverUrl = giteaConfigForm.value.serverUrl
  const owner = giteaConfigForm.value.defaultOwner
  let repoName = ''
  
  // 从repo_url中提取仓库名称
  if (repo.repo_url) {
    // 例如：从 https://gitea.example.com/owner/repo.git 中提取 repo
    const urlParts = repo.repo_url.split('/')
    if (urlParts.length > 0) {
      const lastPart = urlParts[urlParts.length - 1]
      repoName = lastPart.replace('.git', '')
    }
  }
  
  if (serverUrl && owner && repoName) {
    const repoUrl = `${serverUrl}/${owner}/${repoName}`
    console.log('打开仓库URL:', repoUrl)
    window.open(repoUrl, '_blank')
  } else {
    ElMessage.warning('无法打开仓库，请检查Gitea配置')
    console.error('缺少必要的配置信息:', { serverUrl, owner, repoName })
  }
}

// 保存Gitea配置
const saveGiteaConfig = async () => {
  try {
    // 验证表单
    if (!giteaConfigForm.value.serverUrl || !giteaConfigForm.value.accessToken || !giteaConfigForm.value.defaultOwner) {
      ElMessage.error('请填写完整的Gitea配置信息')
      return
    }
    
    // 导入axios
    const axios = await import('axios')
    
    // 调用后端API保存配置
    const response = await axios.default.post('/api/gitea/config', {
      server_url: giteaConfigForm.value.serverUrl,
      access_token: giteaConfigForm.value.accessToken,
      default_owner: giteaConfigForm.value.defaultOwner,
      repo_prefix: giteaConfigForm.value.repoPrefix || ''
    })
    
    if (response.data.success) {
      ElMessage.success('Gitea配置保存成功')
      showGiteaConfigDialog.value = false
    } else {
      ElMessage.error('保存配置失败')
    }
  } catch (error) {
    console.error('保存Gitea配置失败:', error)
    ElMessage.error('保存Gitea配置失败')
  }
}

// 创建Gitea仓库
const createGiteaRepo = (algorithm: any) => {
  console.log('创建Gitea仓库:', algorithm)
  // 这里需要实现创建仓库的逻辑
  ElMessage.info('创建仓库功能开发中')
}

// 克隆Gitea仓库
const cloneGiteaRepo = (algorithm: any) => {
  console.log('克隆Gitea仓库:', algorithm)
  // 这里需要实现克隆仓库的逻辑
  ElMessage.info('克隆仓库功能开发中')
}

// 推送代码到Gitea仓库
const pushToGiteaRepo = (algorithm: any) => {
  console.log('推送代码到Gitea仓库:', algorithm)
  // 这里需要实现推送代码的逻辑
  ElMessage.info('推送代码功能开发中')
}

// 从Gitea仓库拉取代码
const pullFromGiteaRepo = (algorithm: any) => {
  console.log('从Gitea仓库拉取代码:', algorithm)
  // 这里需要实现拉取代码的逻辑
  ElMessage.info('拉取代码功能开发中')
}

// 取消编辑Gitea配置
const cancelEditGiteaConfig = () => {
  if (isEditingGiteaConfig.value) {
    // 如果正在编辑，取消编辑模式并重新加载配置
    isEditingGiteaConfig.value = false
    loadGiteaConfig()
  } else {
    // 如果不在编辑模式，关闭对话框
    showGiteaConfigDialog.value = false
  }
}

// 加载已保存的Gitea配置
const loadGiteaConfig = async () => {
  try {
    // 导入axios
    const axios = await import('axios')
    
    const response = await axios.default.get('/api/gitea/config')
    
    if (response.data) {
      const config = response.data
      giteaConfigForm.value = {
        serverUrl: config.server_url || '',
        accessToken: config.access_token || '',
        defaultOwner: config.default_owner || '',
        repoPrefix: config.repo_prefix || ''
      }
    }
  } catch (error) {
    console.error('加载Gitea配置失败:', error)
    // 配置不存在时不显示错误
  }
}

// 组件挂载时加载仓库列表和Gitea配置
onMounted(async () => {
  await loadRepos()
  await loadGiteaConfig()
})
</script>

<style scoped>
.admin-algorithms-container {
  padding: 20px;
}

.action-bar {
  margin-bottom: 20px;
}

/* 步骤样式 */
.step-content {
  padding: 30px 0;
}

.step-content h3 {
  margin-bottom: 20px;
  color: #333;
}

/* 部署方式选择 */
.deployment-option {
  width: 30%;
  min-width: 300px;
  margin-right: 20px;
}

.option-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.option-icon {
  font-size: 32px;
  margin-right: 20px;
  color: #409EFF;
}

.option-text {
  flex: 1;
}

.option-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.option-desc {
  font-size: 14px;
  color: #666;
}

/* 代码编辑器 */
.code-editor {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

/* 模型上传 */
.model-uploader {
  margin-bottom: 20px;
}

/* 部署结果 */
.deployment-result {
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.result-details {
  margin-top: 20px;
}

.error-message {
  margin-top: 20px;
  padding: 10px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 4px;
  color: #f56c6c;
}

/* 部署中状态 */
.deploying {
  min-height: 400px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.deploying-content {
  width: 100%;
  max-width: 800px;
}

/* 部署日志 */
.deployment-logs {
  margin-top: 30px;
}

.deployment-logs h4 {
  margin-bottom: 15px;
  color: #333;
}

.logs-card {
  max-height: 400px;
  overflow: hidden;
}

.logs-container {
  max-height: 350px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
}

.log-item {
  margin-bottom: 8px;
  line-height: 1.4;
}

.log-item:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.02);
  padding: 2px 4px;
  border-radius: 2px;
}

/* 跳过步骤 */
.skip-step {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* 上传进度对话框样式 */
.upload-progress-container {
  padding: 20px;
}

.upload-progress-text {
  margin-top: 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .deployment-option {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .admin-algorithms-container {
    padding: 10px;
  }
  
  .step-content {
    padding: 20px 0;
  }
  
  .option-content {
    padding: 15px;
  }
  
  .option-icon {
    font-size: 24px;
    margin-right: 15px;
  }
  
  .upload-progress-container {
    padding: 10px;
  }
}
</style>
