<template>
  <div class="extract-tab">
    <h2>视频抽帧</h2>
    
    <div class="form-group">
      <label>选择文件夹：</label>
      <div class="input-group">
        <input 
          type="text" 
          v-model="folderPath" 
          placeholder="请选择包含视频文件的目录"
          readonly
        />
        <button @click="selectFolder">选择文件夹</button>
      </div>
    </div>

    <div class="form-group" v-if="videos.length > 0">
      <label>视频文件：</label>
      <div class="video-list">
        <div v-for="(video, index) in videos" :key="index" class="video-item">
          {{ getFileName(video) }}
        </div>
      </div>
      <p class="hint">共 {{ videos.length }} 个视频文件</p>
    </div>

    <div class="form-group">
      <label>每个视频生成数量：</label>
      <input 
        type="number" 
        v-model.number="extractCount" 
        :min="1" 
        :disabled="isProcessing"
      />
    </div>

    <div class="form-group">
      <button 
        class="btn-primary" 
        @click="startExtract"
        :disabled="!canExtract || isProcessing"
      >
        {{ isProcessing ? '处理中...' : '开始抽帧' }}
      </button>
      <button 
        class="btn-secondary" 
        @click="startModify"
        :disabled="!canModify || isProcessing"
        style="margin-left: 10px;"
      >
        {{ isProcessing ? '处理中...' : '开始修改元数据' }}
      </button>
    </div>

    <div v-if="helpInfo" class="help-info">
      {{ helpInfo }}
    </div>

    <div v-if="results.length > 0" class="results">
      <h3>处理结果</h3>
      <div class="result-summary">
        <p>成功: {{ successCount }} 个</p>
        <p>失败: {{ failCount }} 个</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ExtractService, FileService } from '../../bindings/videoconcat/services/index.js'

const folderPath = ref('')
const videos = ref([])
const extractCount = ref(1)
const isProcessing = ref(false)
const helpInfo = ref('')
const results = ref([])

const canExtract = computed(() => {
  return folderPath.value && videos.value.length > 0 && extractCount.value > 0 && !isProcessing.value
})

const canModify = computed(() => {
  return folderPath.value && videos.value.length > 0 && !isProcessing.value
})

const successCount = computed(() => {
  return results.value.filter(r => r.success).length
})

const failCount = computed(() => {
  return results.value.filter(r => !r.success).length
})

const selectFolder = async () => {
  try {
    // 调用后端选择文件夹对话框
    const selectedPath = await FileService.SelectFolder()
    if (selectedPath && selectedPath.trim()) {
      folderPath.value = selectedPath.trim()
      
      // 调用后端列出视频
      try {
        videos.value = await ExtractService.ListVideos(folderPath.value)
      } catch (error) {
        alert('列出视频失败: ' + error.message)
      }
    }
  } catch (error) {
    console.error('选择文件夹失败:', error)
    alert('选择文件夹失败: ' + (error.message || '未知错误'))
  }
}

const getFileName = (path) => {
  return path.split('/').pop() || path.split('\\').pop() || path
}

const startExtract = async () => {
  if (!canExtract.value) return

  isProcessing.value = true
  results.value = []
  helpInfo.value = `开始处理，每个视频将生成 ${extractCount.value} 个抽帧视频...`

  try {
    const request = {
      folderPath: folderPath.value,
      extractCount: extractCount.value
    }

    const total = videos.value.length * extractCount.value
    helpInfo.value = `处理中... (0/${total})`
    
    try {
      const extractResults = await ExtractService.ExtractFrames(request)
      if (extractResults) {
        results.value = extractResults
        helpInfo.value = `全部完成! 共处理 ${total} 个任务，成功 ${successCount.value} 个，失败 ${failCount.value} 个`
      }
    } catch (error) {
      alert('抽帧失败: ' + error.message)
      helpInfo.value = '处理失败'
    }
  } catch (error) {
    alert('抽帧失败: ' + error.message)
    helpInfo.value = '处理失败: ' + error.message
  } finally {
    isProcessing.value = false
  }
}

const startModify = async () => {
  if (!canModify.value) return

  isProcessing.value = true
  results.value = []
  helpInfo.value = '开始修改元数据...'

  try {
    const total = videos.value.length
    helpInfo.value = `处理中... (0/${total})`
    
    const modifyResults = await ExtractService.ModifyVideosMetadata(folderPath.value)
    if (modifyResults) {
      results.value = modifyResults
      helpInfo.value = `全部完成! 共处理 ${total} 个任务，成功 ${successCount.value} 个，失败 ${failCount.value} 个`
    }
  } catch (error) {
    alert('修改失败: ' + error.message)
    helpInfo.value = '处理失败: ' + error.message
  } finally {
    isProcessing.value = false
  }
}
</script>

<style scoped>
.extract-tab {
  max-width: 900px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.input-group {
  display: flex;
  gap: 10px;
}

.input-group input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-group button {
  padding: 8px 16px;
  background: #7163ba;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.input-group button:hover {
  background: #5a5080;
}

input[type="number"] {
  width: 100px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.hint {
  margin-top: 5px;
  color: #888;
  font-size: 14px;
}

.btn-primary {
  padding: 12px 24px;
  background: #7163ba;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.btn-primary:hover:not(:disabled) {
  background: #5a5080;
}

.btn-primary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn-secondary {
  padding: 12px 24px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.btn-secondary:hover:not(:disabled) {
  background: #5a6268;
}

.btn-secondary:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.video-list {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  max-height: 200px;
  overflow-y: auto;
}

.video-item {
  padding: 8px;
  border-bottom: 1px solid #eee;
}

.video-item:last-child {
  border-bottom: none;
}

.help-info {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
  white-space: pre-line;
  line-height: 1.6;
}

.results {
  margin-top: 30px;
}

.results h3 {
  margin-bottom: 15px;
}

.result-summary {
  padding: 15px;
  background: white;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.result-summary p {
  margin: 5px 0;
}
</style>

