<template>
  <div class="history-view">
    <!-- 頁面標題 -->
    <div class="page-header">
      <h1 class="page-title">歷史記錄</h1>
      <div class="page-actions">
        <el-button @click="exportHistory">
          <el-icon><Download /></el-icon>
          匯出記錄
        </el-button>
      </div>
    </div>

    <!-- 篩選區域 -->
    <div class="content-card">
      <div class="filters-section">
        <div class="filters-row">
          <div class="filter-group">
            <label>時間範圍:</label>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              start-placeholder="開始日期"
              end-placeholder="結束日期"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              @change="handleDateRangeChange"
            />
          </div>
          
          <div class="filter-group">
            <label>狀態:</label>
            <el-select v-model="filters.status" @change="handleFilterChange">
              <el-option label="全部" value="all" />
              <el-option label="已完成" value="COMPLETED" />
              <el-option label="失敗" value="FAILED" />
            </el-select>
          </div>
          
          <div class="filter-group">
            <label>檔案類型:</label>
            <el-select v-model="filters.fileType" @change="handleFilterChange">
              <el-option label="全部" value="all" />
              <el-option label="Word" value="doc" />
              <el-option label="PowerPoint" value="ppt" />
              <el-option label="Excel" value="xls" />
              <el-option label="PDF" value="pdf" />
            </el-select>
          </div>
          
          <div class="filter-actions">
            <el-button @click="clearFilters">
              <el-icon><Close /></el-icon>
              清除篩選
            </el-button>
          </div>
        </div>
        
        <div class="search-row">
          <el-input
            v-model="filters.search"
            placeholder="搜尋檔案名稱..."
            style="width: 300px"
            clearable
            @input="handleSearchChange"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 統計概覽 -->
    <div class="stats-section">
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon primary">
            <el-icon><Files /></el-icon>
          </div>
          <div class="stat-value">{{ filteredJobs.length }}</div>
          <div class="stat-label">總記錄數</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon success">
            <el-icon><SuccessFilled /></el-icon>
          </div>
          <div class="stat-value">{{ completedCount }}</div>
          <div class="stat-label">成功完成</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon warning">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-value">${{ totalCost.toFixed(4) }}</div>
          <div class="stat-label">總成本</div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon info">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-value">{{ avgProcessingTime }}</div>
          <div class="stat-label">平均處理時間</div>
        </div>
      </div>
    </div>

    <!-- 歷史記錄列表 -->
    <div class="content-card">
      <div class="card-body">
        <div v-if="loading" class="loading-state">
          <el-skeleton :rows="5" animated />
        </div>
        
        <div v-else-if="filteredJobs.length === 0" class="empty-state">
          <el-icon class="empty-icon"><Document /></el-icon>
          <div class="empty-title">無歷史記錄</div>
          <div class="empty-description">
            在所選時間範圍內沒有找到符合條件的記錄
          </div>
        </div>
        
        <div v-else>
          <!-- 表格模式 -->
          <div class="view-toggle">
            <el-radio-group v-model="viewMode">
              <el-radio-button label="table">表格檢視</el-radio-button>
              <el-radio-button label="card">卡片檢視</el-radio-button>
            </el-radio-group>
          </div>
          
          <!-- 表格檢視 -->
          <div v-if="viewMode === 'table'" class="table-view">
            <el-table :data="paginatedJobs" style="width: 100%">
              <el-table-column prop="original_filename" label="檔案名稱" min-width="200">
                <template #default="{ row }">
                  <div class="file-info">
                    <div class="file-icon" :class="getFileExtension(row.original_filename)">
                      {{ getFileExtension(row.original_filename).toUpperCase() }}
                    </div>
                    <span class="file-name">{{ row.original_filename }}</span>
                  </div>
                </template>
              </el-table-column>
              
              <el-table-column prop="file_size" label="檔案大小" width="100">
                <template #default="{ row }">
                  {{ formatFileSize(row.file_size) }}
                </template>
              </el-table-column>
              
              <el-table-column prop="target_languages" label="翻譯語言" width="150">
                <template #default="{ row }">
                  <div class="language-tags">
                    <el-tag 
                      v-for="lang in row.target_languages.slice(0, 2)" 
                      :key="lang"
                      size="small"
                      type="primary"
                    >
                      {{ getLanguageText(lang) }}
                    </el-tag>
                    <el-tag v-if="row.target_languages.length > 2" size="small" type="info">
                      +{{ row.target_languages.length - 2 }}
                    </el-tag>
                  </div>
                </template>
              </el-table-column>
              
              <el-table-column prop="status" label="狀態" width="100">
                <template #default="{ row }">
                  <el-tag :type="getStatusTagType(row.status)" size="small">
                    {{ getStatusText(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
              
              <el-table-column prop="total_cost" label="成本" width="100">
                <template #default="{ row }">
                  ${{ (row.total_cost || 0).toFixed(4) }}
                </template>
              </el-table-column>
              
              <el-table-column prop="created_at" label="建立時間" width="130">
                <template #default="{ row }">
                  {{ formatDate(row.created_at) }}
                </template>
              </el-table-column>
              
              <el-table-column prop="completed_at" label="完成時間" width="130">
                <template #default="{ row }">
                  {{ row.completed_at ? formatDate(row.completed_at) : '-' }}
                </template>
              </el-table-column>
              
              <el-table-column label="操作" width="120" fixed="right">
                <template #default="{ row }">
                  <div class="table-actions">
                    <el-button type="text" size="small" @click="viewJobDetail(row.job_uuid)">
                      查看
                    </el-button>
                    <el-button 
                      v-if="row.status === 'COMPLETED'" 
                      type="text" 
                      size="small"
                      @click="downloadJob(row)"
                    >
                      下載
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          
          <!-- 卡片檢視 -->
          <div v-else class="card-view">
            <div class="history-cards">
              <div
                v-for="job in paginatedJobs"
                :key="job.job_uuid"
                class="history-card"
                @click="viewJobDetail(job.job_uuid)"
              >
                <div class="card-header">
                  <div class="file-info">
                    <div class="file-icon" :class="getFileExtension(job.original_filename)">
                      {{ getFileExtension(job.original_filename).toUpperCase() }}
                    </div>
                    <div class="file-details">
                      <div class="file-name">{{ job.original_filename }}</div>
                      <div class="file-meta">
                        {{ formatFileSize(job.file_size) }} • 
                        {{ formatDate(job.created_at) }}
                      </div>
                    </div>
                  </div>
                  <div class="card-status">
                    <el-tag :type="getStatusTagType(job.status)" size="small">
                      {{ getStatusText(job.status) }}
                    </el-tag>
                  </div>
                </div>
                
                <div class="card-content">
                  <div class="languages-section">
                    <div class="language-label">翻譯語言:</div>
                    <div class="language-tags">
                      <span 
                        v-for="lang in job.target_languages" 
                        :key="lang"
                        class="language-tag"
                      >
                        {{ getLanguageText(lang) }}
                      </span>
                    </div>
                  </div>
                  
                  <div class="stats-section">
                    <div class="stat-item" v-if="job.total_cost > 0">
                      <span class="stat-label">成本:</span>
                      <span class="stat-value">${{ job.total_cost.toFixed(4) }}</span>
                    </div>
                    <div class="stat-item" v-if="job.total_tokens > 0">
                      <span class="stat-label">Token:</span>
                      <span class="stat-value">{{ job.total_tokens.toLocaleString() }}</span>
                    </div>
                  </div>
                </div>
                
                <div class="card-footer" v-if="job.completed_at || job.processing_started_at">
                  <div class="time-info">
                    <div v-if="job.processing_started_at && job.completed_at">
                      處理時間: {{ calculateProcessingTime(job.processing_started_at, job.completed_at) }}
                    </div>
                    <div v-if="job.completed_at">
                      完成時間: {{ formatTime(job.completed_at) }}
                    </div>
                  </div>
                  <div class="card-actions" @click.stop>
                    <el-button 
                      v-if="job.status === 'COMPLETED'" 
                      type="primary" 
                      size="small"
                      @click="downloadJob(job)"
                    >
                      下載
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 分頁 -->
          <div class="pagination-section" v-if="totalPages > 1">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :total="filteredJobs.length"
              layout="total, prev, pager, next"
              @current-change="handlePageChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useJobsStore } from '@/stores/jobs'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash-es'
import {
  Download, Close, Search, Files, SuccessFilled, Money, Clock, Document
} from '@element-plus/icons-vue'

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

// 響應式數據
const loading = ref(false)
const viewMode = ref('table')
const dateRange = ref([])
const currentPage = ref(1)
const pageSize = ref(20)

const filters = ref({
  status: 'all',
  fileType: 'all',
  search: ''
})

// 語言映射
const languageMap = {
  'zh-TW': '繁中',
  'zh-CN': '簡中',
  'en': '英文',
  'ja': '日文',
  'ko': '韓文',
  'vi': '越文'
}

// 計算屬性
const allJobs = computed(() => jobsStore.jobs.filter(job => 
  job.status === 'COMPLETED' || job.status === 'FAILED'
))

const filteredJobs = computed(() => {
  let jobs = allJobs.value

  // 狀態篩選
  if (filters.value.status !== 'all') {
    jobs = jobs.filter(job => job.status === filters.value.status)
  }

  // 檔案類型篩選
  if (filters.value.fileType !== 'all') {
    jobs = jobs.filter(job => {
      const ext = getFileExtension(job.original_filename)
      switch (filters.value.fileType) {
        case 'doc': return ['docx', 'doc'].includes(ext)
        case 'ppt': return ['pptx', 'ppt'].includes(ext)
        case 'xls': return ['xlsx', 'xls'].includes(ext)
        case 'pdf': return ext === 'pdf'
        default: return true
      }
    })
  }

  // 日期範圍篩選
  if (dateRange.value && dateRange.value.length === 2) {
    const [startDate, endDate] = dateRange.value
    jobs = jobs.filter(job => {
      const jobDate = new Date(job.created_at).toDateString()
      return jobDate >= new Date(startDate).toDateString() && 
             jobDate <= new Date(endDate).toDateString()
    })
  }

  // 搜尋篩選
  if (filters.value.search.trim()) {
    const searchTerm = filters.value.search.toLowerCase().trim()
    jobs = jobs.filter(job =>
      job.original_filename.toLowerCase().includes(searchTerm)
    )
  }

  return jobs.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
})

const paginatedJobs = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return filteredJobs.value.slice(start, start + pageSize.value)
})

const totalPages = computed(() => Math.ceil(filteredJobs.value.length / pageSize.value))

const completedCount = computed(() => 
  filteredJobs.value.filter(job => job.status === 'COMPLETED').length
)

const totalCost = computed(() => 
  filteredJobs.value.reduce((sum, job) => sum + (job.total_cost || 0), 0)
)

const avgProcessingTime = computed(() => {
  const completedJobs = filteredJobs.value.filter(job => 
    job.status === 'COMPLETED' && job.processing_started_at && job.completed_at
  )
  
  if (completedJobs.length === 0) return '無資料'
  
  const totalMs = completedJobs.reduce((sum, job) => {
    const startTime = new Date(job.processing_started_at)
    const endTime = new Date(job.completed_at)
    return sum + (endTime - startTime)
  }, 0)
  
  const avgMs = totalMs / completedJobs.length
  const minutes = Math.floor(avgMs / 60000)
  const seconds = Math.floor((avgMs % 60000) / 1000)
  
  return `${minutes}分${seconds}秒`
})

// 方法
const handleFilterChange = () => {
  currentPage.value = 1
}

const handleSearchChange = debounce(() => {
  currentPage.value = 1
}, 300)

const handleDateRangeChange = () => {
  currentPage.value = 1
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const clearFilters = () => {
  filters.value.status = 'all'
  filters.value.fileType = 'all'
  filters.value.search = ''
  dateRange.value = []
  currentPage.value = 1
}

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

const downloadJob = async (job) => {
  try {
    if (job.target_languages.length === 1) {
      const ext = getFileExtension(job.original_filename)
      const filename = `${job.original_filename.replace(/\.[^/.]+$/, '')}_${job.target_languages[0]}_translated.${ext}`
      await jobsStore.downloadFile(job.job_uuid, job.target_languages[0], filename)
    } else {
      const filename = `${job.original_filename.replace(/\.[^/.]+$/, '')}_translated.zip`
      await jobsStore.downloadAllFiles(job.job_uuid, filename)
    }
  } catch (error) {
    console.error('下載失敗:', error)
  }
}

const exportHistory = () => {
  // 匯出 CSV 格式的歷史記錄
  const csvContent = [
    ['檔案名稱', '檔案大小', '目標語言', '狀態', '成本', '建立時間', '完成時間'].join(','),
    ...filteredJobs.value.map(job => [
      `"${job.original_filename}"`,
      formatFileSize(job.file_size),
      `"${job.target_languages.join(', ')}"`,
      getStatusText(job.status),
      (job.total_cost || 0).toFixed(4),
      formatDate(job.created_at),
      job.completed_at ? formatDate(job.completed_at) : ''
    ].join(','))
  ].join('\n')
  
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' })
  const link = document.createElement('a')
  const url = URL.createObjectURL(blob)
  link.setAttribute('href', url)
  link.setAttribute('download', `翻譯歷史記錄_${new Date().toISOString().slice(0, 10)}.csv`)
  link.click()
  
  ElMessage.success('歷史記錄已匯出')
}

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

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 formatDate = (timestamp) => {
  return new Date(timestamp).toLocaleDateString('zh-TW', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

const formatTime = (timestamp) => {
  const now = new Date()
  const time = new Date(timestamp)
  const diff = now - time
  
  if (diff < 86400000) return '今天'
  if (diff < 172800000) return '昨天'
  if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`
  
  return time.toLocaleDateString('zh-TW')
}

const calculateProcessingTime = (startTime, endTime) => {
  const start = new Date(startTime)
  const end = new Date(endTime)
  const diff = end - start
  
  const minutes = Math.floor(diff / 60000)
  const seconds = Math.floor((diff % 60000) / 1000)
  
  return `${minutes}分${seconds}秒`
}

const getLanguageText = (langCode) => {
  return languageMap[langCode] || langCode
}

const getStatusText = (status) => {
  const statusMap = {
    'COMPLETED': '已完成',
    'FAILED': '失敗'
  }
  return statusMap[status] || status
}

const getStatusTagType = (status) => {
  const typeMap = {
    'COMPLETED': 'success',
    'FAILED': 'danger'
  }
  return typeMap[status] || 'info'
}

// 生命週期
onMounted(async () => {
  loading.value = true
  try {
    await jobsStore.fetchJobs({ per_page: 100 })
  } catch (error) {
    console.error('載入歷史記錄失敗:', error)
  } finally {
    loading.value = false
  }
})

// 監聽檢視模式變化，重置分頁
watch(viewMode, () => {
  currentPage.value = 1
})
</script>

<style lang="scss" scoped>
.history-view {
  .filters-section {
    .filters-row {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-bottom: 16px;
      flex-wrap: wrap;
      
      .filter-group {
        display: flex;
        align-items: center;
        gap: 8px;
        
        label {
          font-size: 14px;
          color: var(--el-text-color-regular);
          white-space: nowrap;
        }
      }
      
      .filter-actions {
        margin-left: auto;
        
        @media (max-width: 768px) {
          margin-left: 0;
          width: 100%;
        }
      }
    }
    
    .search-row {
      display: flex;
      justify-content: flex-start;
    }
  }
  
  .stats-section {
    margin: 24px 0;
    
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }
  }
  
  .view-toggle {
    margin-bottom: 16px;
    display: flex;
    justify-content: flex-end;
  }
  
  .table-view {
    .file-info {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .file-icon {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        font-weight: bold;
        color: white;
        flex-shrink: 0;
        
        &.docx, &.doc { background-color: #2b579a; }
        &.pptx, &.ppt { background-color: #d24726; }
        &.xlsx, &.xls { background-color: #207245; }
        &.pdf { background-color: #ff0000; }
      }
      
      .file-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    
    .language-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    
    .table-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .card-view {
    .history-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      gap: 16px;
      
      @media (max-width: 480px) {
        grid-template-columns: 1fr;
      }
      
      .history-card {
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        padding: 16px;
        background: var(--el-bg-color);
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: var(--el-color-primary);
          box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
          transform: translateY(-1px);
        }
        
        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 12px;
          
          .file-info {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            flex: 1;
            min-width: 0;
            
            .file-icon {
              width: 36px;
              height: 36px;
              border-radius: 6px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 10px;
              font-weight: bold;
              color: white;
              flex-shrink: 0;
              
              &.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: 600;
                color: var(--el-text-color-primary);
                margin-bottom: 4px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              
              .file-meta {
                font-size: 12px;
                color: var(--el-text-color-secondary);
              }
            }
          }
        }
        
        .card-content {
          margin-bottom: 12px;
          
          .languages-section {
            margin-bottom: 8px;
            
            .language-label {
              font-size: 13px;
              color: var(--el-text-color-secondary);
              margin-bottom: 4px;
            }
            
            .language-tags {
              display: flex;
              flex-wrap: wrap;
              gap: 4px;
              
              .language-tag {
                display: inline-block;
                padding: 2px 6px;
                background-color: var(--el-color-primary-light-8);
                color: var(--el-color-primary);
                border: 1px solid var(--el-color-primary-light-5);
                border-radius: 3px;
                font-size: 11px;
                font-weight: 500;
              }
            }
          }
          
          .stats-section {
            display: flex;
            gap: 16px;
            font-size: 12px;
            
            .stat-item {
              display: flex;
              gap: 4px;
              
              .stat-label {
                color: var(--el-text-color-secondary);
              }
              
              .stat-value {
                color: var(--el-text-color-primary);
                font-weight: 500;
              }
            }
          }
        }
        
        .card-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-top: 8px;
          border-top: 1px solid var(--el-border-color-lighter);
          
          .time-info {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            line-height: 1.4;
          }
        }
      }
    }
  }
  
  .pagination-section {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
}

.loading-state {
  padding: 40px 0;
}
</style>