<template>
  <div class="knowledge-ingest">
    <!-- 第一步：上传区域 -->
    <div class="section upload-section">
      <h3>步骤1: 上传文件夹到MinIO</h3>

      <!-- 文件夹选择 -->
      <input
        type="file"
        ref="folderInput"
        style="display: none"
        webkitdirectory
        multiple
        @change="handleFolderSelect"
        :disabled="processCompleted"
      />
      <el-button
        type="primary"
        @click="$refs.folderInput.click()"
        :disabled="processCompleted"
      >
        选择文件夹
      </el-button>

      <!-- 文件列表预览 -->
      <div v-if="selectedFiles.length > 0" class="file-list">
        <h4>待上传文件（共 {{ selectedFiles.length }} 个）</h4>
        <el-tree
          :data="fileTree"
          :props="{ label: 'name', children: 'children' }"
          default-expand-all
          class="tree-view"
        />
      </div>

      <!-- 上传按钮 -->
      <el-button
        type="success"
        :loading="uploading"
        @click="uploadFolder"
        :disabled="selectedFiles.length === 0 || uploading || processCompleted"
        class="action-btn"
      >
        {{ uploading ? '上传中...' : '开始上传' }}
      </el-button>
    </div>

    <!-- 第二步：RAG入库区域 -->
    <div v-if="showIngestSection" class="section ingest-section">
      <el-divider />
      <h3>步骤2: RAG知识库入库</h3>

      <el-alert title="上传成功！" type="success" :closable="false" show-icon>
        <div class="upload-info">
          <span>
            文件夹ID:
            <strong>{{ uploadResult.folderId }}</strong>
          </span>
          <span>
            文件数量:
            <strong>{{ uploadResult.fileCount }}</strong>
          </span>
          <span>
            存储桶:
            <strong>{{ uploadResult.bucketName }}</strong>
          </span>
        </div>
      </el-alert>

      <el-button
        type="warning"
        :loading="ingesting"
        @click="startRagIngest"
        :disabled="ingesting || ingestCompleted || processCompleted"
        class="action-btn"
      >
        {{
          ingesting ? '入库中...' : ingestCompleted ? '已完成' : '开始RAG入库'
        }}
      </el-button>

      <!-- ✅ 进度条显示条件：进行中 或 已完成 -->
      <div v-if="ingesting || ingestCompleted" class="progress-area">
        <h4>RAG入库进度</h4>
        <el-progress
          :percentage="ingestProgress"
          :status="ingestStatus"
          :stroke-width="20"
          :text-inside="true"
        />
        <p v-if="currentFile" class="current-file">
          正在处理: {{ currentFile }}
        </p>

        <!-- ✅ 完成提示 -->
        <div v-if="ingestCompleted" class="completion-status">
          <el-icon class="success-icon" :size="48" color="#67C23A">
            <CircleCheckFilled />
          </el-icon>
          <p class="complete-text">✅ RAG入库已完成！</p>
          <p class="complete-detail">
            共处理 {{ uploadResult.fileCount }} 个文件
          </p>
        </div>
      </div>

      <!-- ✅ 修改后的刷新按钮区域 -->
      <div v-if="processCompleted" class="refresh-section">
        <el-divider />
        <el-button
          type="primary"
          size="large"
          @click="resetAllData"
          class="refresh-btn"
        >
          <el-icon><RefreshRight /></el-icon>
          开始新流程
        </el-button>
        <p class="refresh-hint">点击按钮将重置所有数据，开始新的上传入库流程</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ElMessage, ElIcon } from 'element-plus'
import { CircleCheckFilled, RefreshRight } from '@element-plus/icons-vue'
import {
  submitRagIngestTask,
  getRagIngestProgress,
  uploadFolder,
} from '@/api/rag'
import { getUserRoles } from '@/api/sysFRole'
import { GetUserinfo } from '@/api/login'

export default {
  components: {
    ElIcon,
    CircleCheckFilled,
    RefreshRight,
  },

  data() {
    return {
      selectedFiles: [],
      fileTree: [],
      uploading: false,
      uploadResult: null,
      ingesting: false,
      ingestProgress: 0,
      ingestStatus: '',
      currentFile: '',
      taskId: null,
      ingestCompleted: false,
      processCompleted: false, // ✅ 新增：标记整个流程是否结束
    }
  },

  computed: {
    showIngestSection() {
      // ✅ 流程结束后仍然显示，只是按钮禁用
      return Boolean(this.uploadResult?.folderId) && !this.uploading
    },
  },

  methods: {
    handleFolderSelect(event) {
      // ✅ 流程结束后禁用选择
      if (this.processCompleted) return

      const files = Array.from(event.target.files)
      if (files.length === 0) return

      // ✅ 检查文件大小（例如：限制单个文件 100MB）
      const MAX_FILE_SIZE = 200 * 1024 * 1024 * 1024 // 100MB
      const oversizedFiles = files.filter(f => f.size > MAX_FILE_SIZE)

      if (oversizedFiles.length > 0) {
        // 显示错误提示（自动换行）
        ElMessage.error({
          message: `以下文件超过 2GB 限制：\n${oversizedFiles
            .map(f => f.name)
            .join('\n')}`,
          duration: 5000, // 显示5秒
          showClose: true,
          dangerouslyUseHTMLString: true, // 支持HTML（可选）
        })

        // 清空文件输入框和已选文件
        this.$refs.folderInput.value = null
        this.selectedFiles = []
        this.fileTree = []
        return // 中断后续操作
      }

      this.selectedFiles = files.map(file => ({
        file: file,
        relativePath: file.webkitRelativePath,
        size: file.size,
      }))
      this.buildFileTree()
    },

    buildFileTree() {
      const tree = { name: '根目录', children: {} }
      this.selectedFiles.forEach(({ relativePath }) => {
        const parts = relativePath.split('/').filter(p => p)
        let current = tree.children
        parts.forEach(part => {
          if (!current[part]) {
            current[part] = { name: part, children: {} }
          }
          current = current[part].children
        })
      })
      this.fileTree = this.convertToTreeData(tree.children)
    },

    convertToTreeData(children) {
      return Object.keys(children).map(key => {
        const node = children[key]
        return {
          name: node.name,
          children:
            Object.keys(node.children).length > 0
              ? this.convertToTreeData(node.children)
              : undefined,
        }
      })
    },

    async uploadFolder() {
      // ✅ 流程结束后禁用上传
      if (this.processCompleted) return

      this.uploading = true
      this.uploadResult = null

      const formData = new FormData()
      this.selectedFiles.forEach(({ file, relativePath }) => {
        formData.append('files', file)
        formData.append('relativePaths', relativePath)
      })

      const folderName = this.$refs.folderInput.files[0].webkitRelativePath.split(
        '/'
      )[0]
      formData.append('sender', 'user')
      formData.append('folderName', folderName)

      try {
        const res = await uploadFolder(formData)
        if (res.code === 200 && res.data) {
          this.uploadResult = res.data
          ElMessage.success(`上传成功！共 ${res.data.fileCount} 个文件`)
        } else {
          throw new Error(res.message || `上传失败 (code: ${res.code})`)
        }
      } catch (error) {
        const msg = error.response?.data?.message || error.message || '上传失败'
        ElMessage.error(msg)
      } finally {
        this.uploading = false
      }
    },

    async startRagIngest() {
      // ✅ 流程结束后禁用入库
      if (this.processCompleted) return

      if (!this.uploadResult?.folderId) {
        ElMessage.warning('请先完成文件上传')
        return
      }

      this.ingesting = true
      this.ingestCompleted = false
      this.ingestProgress = 0
      this.ingestStatus = ''
      this.currentFile = ''

      try {
        const userInfoRes = await GetUserinfo()
        const userId = userInfoRes.data.id

        const roleRes = await getUserRoles(userId)
        const userRoles = roleRes.data || []

        const userRoleCode = userRoles.some(r => r?.roleCode === 'admin')
          ? 'admin'
          : userRoles[0]?.roleCode || 'default'

        const res = await submitRagIngestTask(
          this.uploadResult.folderId,
          userRoleCode
        )

        if (res.code === 200 && res.data) {
          this.taskId = res.data.taskId
          ElMessage.success(`入库任务已提交，角色: ${userRoleCode}`)
          this.pollIngestProgress(this.taskId, userRoleCode)
        } else {
          throw new Error(res.message || '提交失败')
        }
      } catch (error) {
        const msg = error.response?.data?.message || error.message || '入库失败'
        ElMessage.error(msg)
        this.ingesting = false
      }
    },

    pollIngestProgress(taskId, userRoleCode) {
      let retryCount = 0
      const maxRetries = 10

      const interval = setInterval(async () => {
        try {
          const res = await getRagIngestProgress(taskId, userRoleCode)

          const { code, data } = res
          if (code === 200 && data) {
            this.ingestProgress = data.progress || 0
            this.currentFile = data.currentFile || ''

            switch (data.status) {
              case 'completed':
                this.ingestStatus = 'success'
                clearInterval(interval)
                this.ingesting = false
                this.ingestCompleted = true
                this.processCompleted = true // ✅ 标记整个流程结束
                ElMessage.success('RAG入库完成！')
                // ✅ 可以添加一个提示
                ElMessage.info('请点击"开始新流程"按钮进行下一次操作')
                break
              case 'failed':
                this.ingestStatus = 'exception'
                clearInterval(interval)
                this.ingesting = false
                ElMessage.error(`入库失败: ${data.errorMessage}`)
                break
              default:
                retryCount = 0
            }
          } else {
            throw new Error('查询进度失败')
          }
        } catch (error) {
          console.error('轮询错误:', error)
          if (retryCount++ >= maxRetries) {
            clearInterval(interval)
            this.ingesting = false
            ElMessage.error('进度查询失败')
          }
        }
      }, 1500)
    },

    // ✅ 新增：刷新页面方法
    refreshPage() {
      // 方式1: 使用 Vue Router (推荐)
      this.$router.go(0)

      // 方式2: 使用 location.reload()
      // location.reload()

      // 方式3: 重置所有数据（不刷新页面）
      // this.resetAllData()
    },

    // ✅ 修改：重置所有数据而不刷新页面
    resetAllData() {
      // 重置所有数据
      this.selectedFiles = []
      this.fileTree = []
      this.uploading = false
      this.uploadResult = null
      this.ingesting = false
      this.ingestProgress = 0
      this.ingestStatus = ''
      this.currentFile = ''
      this.taskId = null
      this.ingestCompleted = false
      this.processCompleted = false

      // 清空文件输入框
      if (this.$refs.folderInput) {
        this.$refs.folderInput.value = null
      }

      // 显示成功提示
      ElMessage.success('页面已重置，可以开始新流程')
    },
  },
}
</script>

<style lang="css" scoped>
@import 'knowledge-ingest.css';

/* ✅ 新增：完成状态样式 */
.complete-text {
  margin-top: 10px;
  font-size: 16px;
  color: #67c23a;
  font-weight: bold;
  text-align: center;
}

.complete-detail {
  font-size: 14px;
  color: #909399;
  text-align: center;
  margin-top: 5px;
}

.completion-status {
  margin-top: 20px;
  text-align: center;
  padding: 20px;
  background: #f0f9ff;
  border-radius: 8px;
  border: 1px solid #b3e19d;
}

.success-icon {
  margin-bottom: 10px;
}

/* ✅ 新增：刷新按钮区域样式 */
.refresh-section {
  margin-top: 30px;
  text-align: center;
  padding: 20px;
  background: #fef0f0;
  border-radius: 8px;
  border: 1px solid #fbc4c4;
}

.refresh-btn {
  margin-bottom: 10px;
}

.refresh-hint {
  color: #f56c6c;
  font-size: 12px;
  margin: 5px 0 0 0;
}

/* 禁用状态按钮 */
.action-btn:disabled,
input[type='file']:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
</style>
