Supervisor/components/BackupList.vue

<template>
  <div class="backup-list-card card-glow">
    <div class="card-header">
      <h2 class="card-title">{{ title }}</h2>
    </div>

    <div v-if="!folder" class="empty-state">
      <IconifyIcon icon="mdi:folder-open-outline" class="text-3xl text-m-muted/40" />
      <p class="mt-2 font-mono text-xs text-m-muted/50">
        Selectionnez un dossier
      </p>
    </div>

    <div v-else-if="loading" class="file-list">
      <div
        v-for="n in 6"
        :key="`backup-skeleton-${n}`"
        class="file-row animate-shimmer"
      >
        <TextSkeleton custom-class="h-4 w-48" />
        <CircleSkeleton custom-class="h-5 w-5 rounded" />
      </div>
    </div>

    <div v-else-if="backups.length === 0" class="empty-state">
      <IconifyIcon icon="mdi:file-hidden" class="text-3xl text-m-muted/40" />
      <p class="mt-2 font-mono text-xs text-m-muted/50">
        Aucun backup trouve
      </p>
    </div>

    <div v-else class="file-list">
      <button
        v-for="file in backups"
        :key="file"
        class="file-row"
        @click="downloadBackup(file)"
      >
        <div class="flex min-w-0 items-center gap-2.5">
          <IconifyIcon icon="mdi:file-document-outline" class="text-base text-m-accent flex-shrink-0" />
          <span class="truncate font-mono text-xs text-m-text">
            {{ file }}
          </span>
        </div>
        <IconifyIcon
          icon="mdi:download"
          class="text-base text-m-muted flex-shrink-0 transition-colors duration-200"
        />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import {Icon as IconifyIcon} from "@iconify/vue"
import CircleSkeleton from "~/components/skeleton/CircleSkeleton.vue"
import TextSkeleton from "~/components/skeleton/TextSkeleton.vue"
import { downloadApiFile, useApiAuthHeader } from "~/composables/useApiAuth"

const props = defineProps<{
  folder: string | null
}>()

const backups = ref<string[]>([])
const loading = ref(false)
const apiAuthHeader = useApiAuthHeader()
const title = computed(() => {
  if (!props.folder) return "Fichiers"
  return `Backup — ${props.folder.toUpperCase()}`
})

const downloadBackup = async (file: string) => {
  if (!props.folder) return
  const url = `/api/download?folder=${encodeURIComponent(props.folder)}&file=${encodeURIComponent(file)}`
  await downloadApiFile(url, file)
}

watch(() => props.folder, async (folder) => {
  if (!folder) {
    loading.value = false
    backups.value = []
    return
  }

  loading.value = true
  try {
    const data = await $fetch<string[]>(`/api/backups?folder=${encodeURIComponent(folder)}`, {
      headers: apiAuthHeader
    })
    backups.value = data
  } catch (error) {
    console.error("Erreur récupération backups:", error)
    backups.value = []
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.backup-list-card {
  background: rgb(var(--m-secondary));
  border-radius: 12px;
  padding: 1.25rem;
  transition: background-color 0.4s ease;
}

.card-header {
  margin-bottom: 0.75rem;
}

.card-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: rgb(var(--m-text));
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  max-height: calc((2.875rem * 5) + (0.375rem * 4));
  overflow-y: auto;
  padding-right: 0.25rem;
}

.file-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem;
  border-radius: 8px;
  background: rgb(var(--m-tertiary));
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.file-row:hover {
  border-color: rgb(var(--m-accent) / 0.15);
  background: rgb(var(--m-accent) / 0.06);
}

.file-row:hover .text-m-muted {
  color: rgb(var(--m-accent));
}
</style>