<script setup lang="ts">
import type { ReportTask } from '@/types'
import { formatTimeLabel, statusTone } from '@/utils/format'

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

defineEmits<{
  'update:selectedTaskId': [value: string]
  download: [kind: 'html' | 'md' | 'pdf', taskId: string]
}>()
</script>

<template>
  <aside class="queue-board archive-panel">
    <div class="queue-board__head">
      <div>
        <p class="archive-kicker">Report Queue</p>
        <h3 class="archive-card-title">任务队列</h3>
      </div>
      <span class="archive-chip">
        <span class="archive-chip__dot" />
        {{ tasks.length }} Active
      </span>
    </div>

    <div v-if="tasks.length" class="queue-list">
      <button
        v-for="task in tasks"
        :key="task.task_id"
        class="queue-item"
        :class="{ 'queue-item--active': task.task_id === selectedTaskId }"
        type="button"
        @click="$emit('update:selectedTaskId', task.task_id)"
      >
        <div class="queue-item__head">
          <span class="archive-kicker">{{ task.status === 'completed' ? 'Completed' : task.status }}</span>
          <time>{{ formatTimeLabel(task.updated_at) }}</time>
        </div>
        <strong>{{ task.query || '未命名报告任务' }}</strong>
        <p>{{ task.error_message || '等待报告预览与交付输出。' }}</p>
        <div class="queue-item__foot">
          <span class="archive-chip" :data-tone="statusTone(task.status)">
            <span class="archive-chip__dot" />
            {{ task.progress }}%
          </span>
        </div>
      </button>
    </div>

    <div v-else class="archive-empty">
      <p>暂无报告任务。</p>
    </div>
  </aside>
</template>

<style scoped>
.queue-board,
.queue-list {
  display: grid;
  gap: 16px;
}

.queue-board {
  position: sticky;
  top: 122px;
}

.queue-board__head,
.queue-item__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.queue-item {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(24, 35, 31, 0.08);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: var(--shadow-soft);
  text-align: left;
  cursor: pointer;
}

.queue-item--active {
  border-right: 4px solid rgba(141, 103, 56, 0.56);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 241, 232, 0.92));
}

.queue-item time {
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.queue-item strong {
  color: var(--primary);
}

.queue-item p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.8;
}

@media (max-width: 1360px) {
  .queue-board {
    position: static;
  }
}
</style>