<script setup lang="ts">
import { ref } from 'vue'
import type { SubtitleTask } from '../lib/types'

const props = defineProps<{
  tasks: SubtitleTask[]
  selectedTaskId: string
}>()

const emit = defineEmits<{
  select: [taskId: string]
  retry: [taskId: string]
  retryTranslate: [taskId: string]
  delete: [taskId: string]
}>()

const expandedTasks = ref<Set<string>>(new Set())

function toggleExpand(taskId: string, event: MouseEvent) {
  event.stopPropagation()
  const next = new Set(expandedTasks.value)
  if (next.has(taskId)) {
    next.delete(taskId)
  } else {
    next.add(taskId)
  }
  expandedTasks.value = next
}

function hasSubWork(task: SubtitleTask): boolean {
  return task.status !== 'queued' && task.status !== 'failed'
}

function isActive(task: SubtitleTask): boolean {
  return task.status !== 'completed' && task.status !== 'failed' && task.status !== 'queued'
}
</script>

<template>
  <aside class="panel sidebar-panel">
    <div class="panel-title">
      <div>
        <strong>{{ $t('taskQueue.title') }}</strong>
        <p class="panel-subtitle">{{ $t('taskQueue.subtitle') }}</p>
      </div>
      <span class="badge">{{ tasks.length }}</span>
    </div>

    <div v-if="tasks.length === 0" class="empty-state">
      {{ $t('taskQueue.empty') }}
    </div>

    <div v-else class="list-stack">
      <div
        v-for="task in tasks"
        :key="task.id"
        class="task-item-wrapper"
      >
        <button
          class="task-item"
          :class="{
            active: task.id === selectedTaskId,
            completed: task.status === 'completed',
            failed: task.status === 'failed',
            expanded: expandedTasks.has(task.id),
          }"
          @click="emit('select', task.id)"
        >
          <div class="task-row">
            <div class="task-name-row">
              <button
                class="expand-toggle"
                :class="{ expanded: expandedTasks.has(task.id) }"
                @click="toggleExpand(task.id, $event)"
              >
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                  <polyline points="9 18 15 12 9 6" />
                </svg>
              </button>
              <strong class="truncate">{{ task.fileName }}</strong>
            </div>
            <span
              class="subtle"
              :class="{ 'status-active': isActive(task) }"
            >{{ $t(`taskQueue.status.${task.status}`) }}</span>
          </div>
          <div class="progress">
            <div class="progress-bar" :style="{ width: `${task.progress}%` }" />
          </div>

          <div v-if="expandedTasks.has(task.id) && hasSubWork(task)" class="sub-stages">
            <div class="sub-stage">
              <div class="sub-stage-label">
                <span>{{ $t('taskQueue.subStage.extracting') }}</span>
                <span class="sub-stage-pct">{{ Math.round(task.subStageProgress.extracting) }}%</span>
              </div>
              <div class="progress sub-progress">
                <div
                  class="progress-bar sub-progress-bar"
                  :style="{ width: `${Math.round(task.subStageProgress.extracting)}%` }"
                  :class="{ done: task.subStageProgress.extracting >= 100 }"
                />
              </div>
            </div>
            <div class="sub-stage">
              <div class="sub-stage-label">
                <span>{{ $t('taskQueue.subStage.vad') }}</span>
                <span class="sub-stage-pct">{{ Math.round(task.subStageProgress.vad) }}%</span>
              </div>
              <div class="progress sub-progress">
                <div
                  class="progress-bar sub-progress-bar"
                  :style="{ width: `${Math.round(task.subStageProgress.vad)}%` }"
                  :class="{ done: task.subStageProgress.vad >= 100 }"
                />
              </div>
            </div>
            <div class="sub-stage">
              <div class="sub-stage-label">
                <span>{{ $t('taskQueue.subStage.transcribing') }}</span>
                <span class="sub-stage-pct">{{ Math.round(task.subStageProgress.transcribing) }}%</span>
              </div>
              <div class="progress sub-progress">
                <div
                  class="progress-bar sub-progress-bar"
                  :style="{ width: `${Math.round(task.subStageProgress.transcribing)}%` }"
                  :class="{ done: task.subStageProgress.transcribing >= 100 }"
                />
              </div>
            </div>
            <div class="sub-stage">
              <div class="sub-stage-label">
                <span>{{ $t('taskQueue.subStage.translating') }}</span>
                <span class="sub-stage-pct">{{ Math.round(task.subStageProgress.translating) }}%</span>
              </div>
              <div class="progress sub-progress">
                <div
                  class="progress-bar sub-progress-bar"
                  :style="{ width: `${Math.round(task.subStageProgress.translating)}%` }"
                  :class="{ done: task.subStageProgress.translating >= 100 }"
                />
              </div>
            </div>
          </div>

          <div v-if="expandedTasks.has(task.id) && task.status === 'queued'" class="sub-stages">
            <div class="sub-stage-label queued-hint">{{ $t('taskQueue.queuedHint') }}</div>
          </div>

          <div v-if="task.status === 'failed'" class="failed-footer">
            <p class="error-text">{{ task.error }}</p>
            <div class="retry-actions">
              <button class="retry-button" type="button" @click.stop="emit('retry', task.id)">{{ $t('taskQueue.retry') }}</button>
              <button
                v-if="task.segments.length > 0"
                class="retry-button secondary"
                type="button"
                @click.stop="emit('retryTranslate', task.id)"
              >{{ $t('taskQueue.retryTranslate') }}</button>
            </div>
          </div>

          <button
            class="delete-button"
            type="button"
            :title="$t('taskQueue.delete')"
            @click.stop="emit('delete', task.id)"
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="3 6 5 6 21 6" />
              <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
            </svg>
          </button>
        </button>
      </div>
    </div>
  </aside>
</template>
