<template>
  <div v-if="items.length" class="space-y-2 mt-4">
    <div
      v-for="item in items"
      :key="item.name"
      class="flex items-center gap-3 bg-white border border-gray-200 rounded-lg px-4 py-2.5"
    >
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-800 truncate">{{ item.name }}</p>

        <!-- Error state (non-quota) -->
        <p v-if="item.error" class="text-sm text-red-500 mt-0.5">{{ item.error }}</p>

        <!-- Done state -->
        <p v-else-if="item.done" class="text-sm text-green-600 mt-0.5">
          Done{{ item.topics?.length ? ` — classified as: ${item.topics.join(', ')}` : ' — no topics assigned' }}
        </p>

        <!-- Quota rejection error block (413 response — T-03-23, UI-SPEC) -->
        <div
          v-else-if="item.quotaError"
          role="alert"
          class="mt-1 p-3 rounded-lg bg-red-50 border border-red-200"
        >
          <p class="text-sm font-semibold text-red-700">Not enough storage</p>
          <p class="text-sm text-red-600 mt-1">
            This file ({{ (item.quotaError.rejected_bytes / 1048576).toFixed(1) }} MB) would exceed your quota.
          </p>
          <p class="text-sm text-red-600">
            You're using {{ (item.quotaError.used_bytes / 1048576).toFixed(1) }} MB of {{ (item.quotaError.limit_bytes / 1048576).toFixed(1) }} MB.
          </p>
          <!-- Plain anchor to avoid router-link import dependency in upload component -->
          <a href="/settings" class="text-sm text-red-600 underline hover:text-red-700 font-semibold">
            Manage storage →
          </a>
        </div>

        <!-- In-progress: progress bar + percentage + status -->
        <template v-else>
          <!-- Progress bar track + fill (UI-SPEC Upload Progress Bar Contract) -->
          <div
            v-if="item.progress !== undefined"
            class="w-full h-2 bg-gray-100 rounded-full mt-1 overflow-hidden"
          >
            <div
              role="progressbar"
              :aria-valuenow="item.progress"
              aria-valuemin="0"
              aria-valuemax="100"
              :aria-label="`Upload progress for ${item.name}`"
              class="h-full rounded-full transition-all duration-300 bg-indigo-500"
              :style="{ width: `${item.progress}%` }"
            ></div>
          </div>
          <!-- Percentage label (shown during upload, hidden after completion) -->
          <p
            v-if="item.progress !== undefined"
            class="text-sm text-gray-400 mt-1 text-right"
          >{{ item.progress }}%</p>
          <!-- Step status string (UI-SPEC Copywriting Contract) -->
          <p class="text-sm text-gray-400 mt-0.5">{{ item.status || 'Uploading…' }}</p>
        </template>
      </div>

      <!-- Icon slot: error / done / spinner -->
      <div class="shrink-0">
        <svg v-if="item.error || item.quotaError" class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
        </svg>
        <svg v-else-if="item.done" class="w-5 h-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
        </svg>
        <svg v-else class="w-5 h-5 text-indigo-400 animate-spin" fill="none" viewBox="0 0 24 24">
          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  items: { type: Array, default: () => [] },
})
</script>
