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

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

const emit = defineEmits<{
  select: [taskId: string]
  retry: [taskId: string]
}>()
</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">
      <button
        v-for="task in tasks"
        :key="task.id"
        class="task-item"
        :class="{
          active: task.id === selectedTaskId,
          completed: task.status === 'completed',
          failed: task.status === 'failed',
        }"
        @click="emit('select', task.id)"
      >
        <div class="task-row">
          <strong class="truncate">{{ task.fileName }}</strong>
          <span
            class="subtle"
            :class="{ 'status-active': task.status !== 'completed' && task.status !== 'failed' && task.status !== 'queued' }"
          >{{ $t(`taskQueue.status.${task.status}`) }}</span>
        </div>
        <div class="progress">
          <div class="progress-bar" :style="{ width: `${task.progress}%` }" />
        </div>
        <div v-if="task.status === 'failed'" class="failed-footer">
          <p class="error-text">{{ task.error }}</p>
          <button class="retry-button" type="button" @click.stop="emit('retry', task.id)">{{ $t('taskQueue.retry') }}</button>
        </div>
      </button>
    </div>
  </aside>
</template>
