<template>
  <div class="upload-view">
    <!-- 頁面標題 -->
    <div class="page-header">
      <h1 class="page-title">檔案上傳</h1>
      <div class="page-actions">
        <el-button @click="$router.push('/jobs')">
          <el-icon><List /></el-icon>
          查看任務列表
        </el-button>
      </div>
    </div>

    <div class="upload-content">
      <!-- 上傳區域 -->
      <div class="content-card">
        <div class="card-header">
          <h3 class="card-title">選擇要翻譯的檔案</h3>
          <div class="card-subtitle">
            支援 DOCX、DOC、PPTX、XLSX、XLS、PDF 格式，單檔最大 25MB
          </div>
        </div>
        
        <div class="card-body">
          <!-- 檔案上傳器 -->
          <el-upload
            ref="uploadRef"
            class="upload-dragger"
            :class="{ disabled: uploading }"
            drag
            :multiple="true"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :http-request="() => {}" 
            :disabled="uploading"
          >
            <div class="upload-content-inner">
              <el-icon class="upload-icon">
                <UploadFilled />
              </el-icon>
              <div class="upload-text">
                <div class="upload-title">拖拽檔案至此或點擊選擇檔案</div>
                <div class="upload-hint">
                  支援 .docx, .doc, .pptx, .xlsx, .xls, .pdf 格式
                </div>
              </div>
            </div>
          </el-upload>

          <!-- 已選擇的檔案列表 -->
          <div v-if="selectedFiles.length > 0" class="selected-files">
            <div class="files-header">
              <h4>已選擇的檔案 ({{ selectedFiles.length }})</h4>
              <el-button type="text" @click="clearFiles" :disabled="uploading">
                <el-icon><Delete /></el-icon>
                清空
              </el-button>
            </div>
            
            <div class="files-list">
              <div
                v-for="(file, index) in selectedFiles"
                :key="index"
                class="file-item"
              >
                <div class="file-icon">
                  <div class="file-type" :class="getFileExtension(file.name)">
                    {{ getFileExtension(file.name).toUpperCase() }}
                  </div>
                </div>
                
                <div class="file-info">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-details">
                    <span class="file-size">{{ formatFileSize(file.size) }}</span>
                    <span class="file-type-text">{{ getFileTypeText(file.name) }}</span>
                  </div>
                </div>
                
                <div class="file-actions">
                  <el-button 
                    type="text" 
                    size="small" 
                    @click="removeFile(index)"
                    :disabled="uploading"
                  >
                    <el-icon><Close /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 翻譯設定 -->
      <div class="content-card" v-if="selectedFiles.length > 0">
        <div class="card-header">
          <h3 class="card-title">翻譯設定</h3>
        </div>
        
        <div class="card-body">
          <el-form
            ref="translationFormRef"
            :model="translationForm"
            :rules="translationRules"
            label-width="120px"
            size="large"
          >
            <el-form-item label="來源語言" prop="sourceLanguage">
              <el-select
                v-model="translationForm.sourceLanguage"
                placeholder="請選擇來源語言"
                style="width: 100%"
                :disabled="uploading"
              >
                <el-option label="自動偵測" value="auto" />
                <el-option label="繁體中文" value="zh-TW" />
                <el-option label="簡體中文" value="zh-CN" />
                <el-option label="英文" value="en" />
                <el-option label="日文" value="ja" />
                <el-option label="韓文" value="ko" />
                <el-option label="越南文" value="vi" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="目標語言" prop="targetLanguages">
              <el-select
                v-model="translationForm.targetLanguages"
                multiple
                placeholder="請選擇目標語言（可多選）"
                style="width: 100%"
                :disabled="uploading"
                collapse-tags
                collapse-tags-tooltip
              >
                <el-option label="英文" value="en" />
                <el-option label="越南文" value="vi" />
                <el-option label="繁體中文" value="zh-TW" />
                <el-option label="簡體中文" value="zh-CN" />
                <el-option label="日文" value="ja" />
                <el-option label="韓文" value="ko" />
                <el-option label="泰文" value="th" />
                <el-option label="印尼文" value="id" />
                <el-option label="馬來文" value="ms" />
              </el-select>
              <div class="form-tip">
                <el-icon><InfoFilled /></el-icon>
                可以同時選擇多個目標語言，系統會分別生成對應的翻譯檔案
              </div>
            </el-form-item>
            
            <el-form-item>
              <div class="translation-actions">
                <el-button
                  type="primary"
                  size="large"
                  :loading="uploading"
                  :disabled="selectedFiles.length === 0 || translationForm.targetLanguages.length === 0"
                  @click="startTranslation"
                >
                  <el-icon><Upload /></el-icon>
                  {{ uploading ? '上傳中...' : `開始翻譯 (${selectedFiles.length} 個檔案)` }}
                </el-button>
                
                <el-button size="large" @click="resetForm" :disabled="uploading">
                  重置
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 上傳進度 -->
      <div class="content-card" v-if="uploading || uploadResults.length > 0">
        <div class="card-header">
          <h3 class="card-title">上傳進度</h3>
        </div>
        
        <div class="card-body">
          <div class="upload-progress">
            <!-- 總體進度 -->
            <div class="overall-progress" v-if="uploading">
              <div class="progress-info">
                <span>整體進度: {{ currentFileIndex + 1 }} / {{ selectedFiles.length }}</span>
                <span>{{ Math.round(overallProgress) }}%</span>
              </div>
              <el-progress
                :percentage="overallProgress"
                :stroke-width="8"
                :show-text="false"
                status="success"
              />
            </div>

            <!-- 個別檔案進度 -->
            <div class="files-progress">
              <div
                v-for="(result, index) in uploadResults"
                :key="index"
                class="file-progress-item"
                :class="result.status"
              >
                <div class="file-info">
                  <div class="file-icon">
                    <div class="file-type" :class="getFileExtension(result.filename)">
                      {{ getFileExtension(result.filename).toUpperCase() }}
                    </div>
                  </div>
                  <div class="file-details">
                    <div class="file-name">{{ result.filename }}</div>
                    <div class="file-status">
                      <el-icon v-if="result.status === 'success'">
                        <SuccessFilled />
                      </el-icon>
                      <el-icon v-else-if="result.status === 'error'">
                        <CircleCloseFilled />
                      </el-icon>
                      <el-icon v-else>
                        <Loading />
                      </el-icon>
                      <span>{{ getUploadStatusText(result.status) }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="file-progress" v-if="result.status === 'uploading'">
                  <el-progress
                    :percentage="result.progress || 0"
                    :stroke-width="4"
                    :show-text="false"
                  />
                </div>
                
                <div class="file-actions" v-if="result.status === 'success'">
                  <el-button
                    type="text"
                    size="small"
                    @click="viewJob(result.jobUuid)"
                  >
                    查看任務
                  </el-button>
                </div>
              </div>
            </div>

            <!-- 完成後的操作 -->
            <div class="upload-complete-actions" v-if="!uploading && uploadResults.length > 0">
              <el-button type="primary" @click="$router.push('/jobs')">
                <el-icon><List /></el-icon>
                查看所有任務
              </el-button>
              <el-button @click="resetUpload">
                <el-icon><RefreshRight /></el-icon>
                重新上傳
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useJobsStore } from '@/stores/jobs'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  List, UploadFilled, Delete, Close, Upload, InfoFilled,
  SuccessFilled, CircleCloseFilled, Loading, RefreshRight
} from '@element-plus/icons-vue'

// Router 和 Stores
const router = useRouter()
const jobsStore = useJobsStore()

// 組件引用
const uploadRef = ref()
const translationFormRef = ref()

// 響應式數據
const selectedFiles = ref([])
const uploading = ref(false)
const currentFileIndex = ref(0)
const uploadResults = ref([])

// 表單數據
const translationForm = reactive({
  sourceLanguage: 'auto',
  targetLanguages: []
})

// 表單驗證規則
const translationRules = {
  targetLanguages: [
    { required: true, message: '請至少選擇一個目標語言', trigger: 'change' },
    {
      type: 'array',
      min: 1,
      message: '請至少選擇一個目標語言',
      trigger: 'change'
    }
  ]
}

// 支援的檔案類型
const supportedTypes = {
  'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  'doc': 'application/msword',
  'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  'ppt': 'application/vnd.ms-powerpoint',
  'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  'xls': 'application/vnd.ms-excel',
  'pdf': 'application/pdf'
}

// 計算屬性
const overallProgress = computed(() => {
  if (uploadResults.value.length === 0) return 0
  
  const totalProgress = uploadResults.value.reduce((sum, result) => {
    if (result.status === 'success') return sum + 100
    if (result.status === 'error') return sum + 100
    return sum + (result.progress || 0)
  }, 0)
  
  return (totalProgress / selectedFiles.value.length)
})

// 方法
const handleBeforeUpload = (file) => {
  // 檢查檔案類型
  const extension = getFileExtension(file.name)
  if (!supportedTypes[extension]) {
    ElMessage.error(`不支援的檔案類型: ${extension}`)
    return false
  }
  
  // 檢查檔案大小
  const maxSize = 25 * 1024 * 1024 // 25MB
  if (file.size > maxSize) {
    ElMessage.error(`檔案大小不能超過 25MB，當前檔案: ${formatFileSize(file.size)}`)
    return false
  }
  
  // 檢查是否已存在
  const exists = selectedFiles.value.some(f => f.name === file.name)
  if (exists) {
    ElMessage.warning('檔案已存在於列表中')
    return false
  }
  
  // 添加到選擇列表
  selectedFiles.value.push(file)
  ElMessage.success(`已添加檔案: ${file.name}`)
  
  return false // 阻止自動上傳
}

const removeFile = (index) => {
  const filename = selectedFiles.value[index].name
  selectedFiles.value.splice(index, 1)
  ElMessage.info(`已移除檔案: ${filename}`)
}

const clearFiles = async () => {
  try {
    await ElMessageBox.confirm('確定要清空所有已選檔案嗎？', '確認清空', {
      confirmButtonText: '確定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    selectedFiles.value = []
    ElMessage.success('已清空檔案列表')
  } catch (error) {
    // 用戶取消
  }
}

const startTranslation = async () => {
  try {
    // 驗證表單
    const valid = await translationFormRef.value.validate()
    if (!valid) {
      return
    }
    
    if (selectedFiles.value.length === 0) {
      ElMessage.warning('請先選擇要翻譯的檔案')
      return
    }
    
    // 開始上傳
    uploading.value = true
    currentFileIndex.value = 0
    uploadResults.value = []
    
    // 為每個檔案創建上傳記錄
    selectedFiles.value.forEach(file => {
      uploadResults.value.push({
        filename: file.name,
        status: 'waiting',
        progress: 0,
        jobUuid: null,
        error: null
      })
    })
    
    // 逐個上傳檔案
    for (let i = 0; i < selectedFiles.value.length; i++) {
      currentFileIndex.value = i
      const file = selectedFiles.value[i]
      const resultIndex = i
      
      try {
        // 更新狀態為上傳中
        uploadResults.value[resultIndex].status = 'uploading'
        
        // 創建 FormData
        const formData = new FormData()
        formData.append('file', file)
        formData.append('source_language', translationForm.sourceLanguage)
        formData.append('target_languages', JSON.stringify(translationForm.targetLanguages))
        
        // 上傳檔案
        const result = await jobsStore.uploadFile(formData, (progress) => {
          uploadResults.value[resultIndex].progress = progress
        })
        
        // 上傳成功
        uploadResults.value[resultIndex].status = 'success'
        uploadResults.value[resultIndex].progress = 100
        uploadResults.value[resultIndex].jobUuid = result.job_uuid
        
      } catch (error) {
        console.error(`檔案 ${file.name} 上傳失敗:`, error)
        uploadResults.value[resultIndex].status = 'error'
        uploadResults.value[resultIndex].error = error.message || '上傳失敗'
        ElMessage.error(`檔案 ${file.name} 上傳失敗: ${error.message || '未知錯誤'}`)
      }
    }
    
    // 檢查上傳結果
    const successCount = uploadResults.value.filter(r => r.status === 'success').length
    const failCount = uploadResults.value.filter(r => r.status === 'error').length
    
    if (successCount > 0) {
      ElMessage.success(`成功上傳 ${successCount} 個檔案`)
    }
    
    if (failCount > 0) {
      ElMessage.error(`${failCount} 個檔案上傳失敗`)
    }
    
  } catch (error) {
    console.error('批量上傳失敗:', error)
    ElMessage.error('批量上傳失敗')
  } finally {
    uploading.value = false
  }
}

const resetForm = () => {
  selectedFiles.value = []
  translationForm.sourceLanguage = 'auto'
  translationForm.targetLanguages = []
  uploadResults.value = []
  translationFormRef.value?.resetFields()
}

const resetUpload = () => {
  uploadResults.value = []
  currentFileIndex.value = 0
}

const viewJob = (jobUuid) => {
  router.push(`/job/${jobUuid}`)
}

const getFileExtension = (filename) => {
  return filename.split('.').pop().toLowerCase()
}

const getFileTypeText = (filename) => {
  const ext = getFileExtension(filename)
  const typeMap = {
    'docx': 'Word 文件',
    'doc': 'Word 文件',
    'pptx': 'PowerPoint 簡報',
    'ppt': 'PowerPoint 簡報',
    'xlsx': 'Excel 試算表',
    'xls': 'Excel 試算表',
    'pdf': 'PDF 文件'
  }
  return typeMap[ext] || ext.toUpperCase()
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
}

const getUploadStatusText = (status) => {
  const statusMap = {
    'waiting': '等待中',
    'uploading': '上傳中',
    'success': '上傳成功',
    'error': '上傳失敗'
  }
  return statusMap[status] || status
}

// 生命週期
onMounted(() => {
  // 載入使用者偏好設定（如果有的話）
  const savedSettings = localStorage.getItem('translation_settings')
  if (savedSettings) {
    try {
      const settings = JSON.parse(savedSettings)
      translationForm.sourceLanguage = settings.sourceLanguage || 'auto'
      translationForm.targetLanguages = settings.targetLanguages || []
    } catch (error) {
      console.error('載入設定失敗:', error)
    }
  }
})

// 監聽表單變化，保存設定
watch([() => translationForm.sourceLanguage, () => translationForm.targetLanguages], () => {
  const settings = {
    sourceLanguage: translationForm.sourceLanguage,
    targetLanguages: translationForm.targetLanguages
  }
  localStorage.setItem('translation_settings', JSON.stringify(settings))
}, { deep: true })
</script>

<style lang="scss" scoped>
.upload-view {
  .upload-content {
    .content-card {
      &:not(:last-child) {
        margin-bottom: 24px;
      }
      
      .card-subtitle {
        font-size: 13px;
        color: var(--el-text-color-secondary);
        margin-top: 4px;
      }
    }
  }
  
  .upload-dragger {
    :deep(.el-upload-dragger) {
      border: 2px dashed var(--el-border-color);
      border-radius: 8px;
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-9);
      }
      
      &.is-dragover {
        border-color: var(--el-color-primary);
        background-color: var(--el-color-primary-light-8);
      }
    }
    
    &.disabled :deep(.el-upload-dragger) {
      cursor: not-allowed;
      opacity: 0.6;
      
      &:hover {
        border-color: var(--el-border-color);
        background-color: transparent;
      }
    }
    
    .upload-content-inner {
      text-align: center;
      
      .upload-icon {
        font-size: 48px;
        color: var(--el-color-primary);
        margin-bottom: 16px;
      }
      
      .upload-title {
        font-size: 16px;
        font-weight: 500;
        color: var(--el-text-color-primary);
        margin-bottom: 8px;
      }
      
      .upload-hint {
        font-size: 13px;
        color: var(--el-text-color-secondary);
      }
    }
  }
  
  .selected-files {
    margin-top: 24px;
    
    .files-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      h4 {
        margin: 0;
        color: var(--el-text-color-primary);
        font-size: 16px;
      }
    }
    
    .files-list {
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      overflow: hidden;
      
      .file-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--el-border-color-lighter);
        transition: background-color 0.3s ease;
        
        &:last-child {
          border-bottom: none;
        }
        
        &:hover {
          background-color: var(--el-fill-color-light);
        }
        
        .file-icon {
          margin-right: 12px;
          
          .file-type {
            width: 32px;
            height: 32px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: bold;
            color: white;
            
            &.docx, &.doc {
              background-color: #2b579a;
            }
            
            &.pptx, &.ppt {
              background-color: #d24726;
            }
            
            &.xlsx, &.xls {
              background-color: #207245;
            }
            
            &.pdf {
              background-color: #ff0000;
            }
          }
        }
        
        .file-info {
          flex: 1;
          min-width: 0;
          
          .file-name {
            font-weight: 500;
            color: var(--el-text-color-primary);
            margin-bottom: 2px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .file-details {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: var(--el-text-color-secondary);
            
            @media (max-width: 480px) {
              flex-direction: column;
              gap: 2px;
            }
          }
        }
      }
    }
  }
  
  .form-tip {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: var(--el-color-info-light-9);
    border-radius: 4px;
    font-size: 13px;
    color: var(--el-color-info);
    line-height: 1.4;
    
    .el-icon {
      margin-top: 1px;
      flex-shrink: 0;
    }
  }
  
  .translation-actions {
    display: flex;
    gap: 12px;
    
    @media (max-width: 480px) {
      flex-direction: column;
      
      .el-button {
        width: 100%;
      }
    }
  }
  
  .upload-progress {
    .overall-progress {
      margin-bottom: 24px;
      
      .progress-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-size: 14px;
        color: var(--el-text-color-regular);
      }
    }
    
    .files-progress {
      .file-progress-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid var(--el-border-color-lighter);
        
        &:last-child {
          border-bottom: none;
        }
        
        &.success {
          .file-status {
            color: var(--el-color-success);
          }
        }
        
        &.error {
          .file-status {
            color: var(--el-color-danger);
          }
        }
        
        &.uploading {
          .file-status {
            color: var(--el-color-primary);
          }
        }
        
        .file-info {
          display: flex;
          align-items: center;
          flex: 1;
          min-width: 0;
          
          .file-icon {
            margin-right: 12px;
            
            .file-type {
              width: 28px;
              height: 28px;
              border-radius: 4px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 9px;
              font-weight: bold;
              color: white;
              
              &.docx, &.doc { background-color: #2b579a; }
              &.pptx, &.ppt { background-color: #d24726; }
              &.xlsx, &.xls { background-color: #207245; }
              &.pdf { background-color: #ff0000; }
            }
          }
          
          .file-details {
            flex: 1;
            min-width: 0;
            
            .file-name {
              font-weight: 500;
              color: var(--el-text-color-primary);
              margin-bottom: 2px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            
            .file-status {
              display: flex;
              align-items: center;
              gap: 4px;
              font-size: 13px;
              
              .el-icon {
                font-size: 14px;
              }
            }
          }
        }
        
        .file-progress {
          width: 120px;
          margin: 0 16px;
        }
        
        .file-actions {
          margin-left: 16px;
        }
      }
    }
    
    .upload-complete-actions {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 24px;
      
      @media (max-width: 480px) {
        flex-direction: column;
      }
    }
  }
}
</style>