<template>
  <v-card>
    <v-card-title>Thumbnail backfill</v-card-title>
    <v-card-text>
      <p class="text-body-2 mb-3">
        Scan the library for images with no thumbnail, or whose thumbnail file
        is missing or corrupt on disk. Repair candidates are re-enqueued for
        thumbnail generation. Safe to re-run.
      </p>
      <v-btn color="primary" rounded="pill" :loading="busy" @click="run">
        <v-icon start>mdi-image-refresh</v-icon> Run backfill now
      </v-btn>
      <span v-if="done" class="ml-3 text-caption">Enqueued.</span>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { ref } from 'vue'
import { useThumbnailsStore } from '../../stores/thumbnails.js'
const store = useThumbnailsStore()
const busy = ref(false)
const done = ref(false)
async function run () {
  busy.value = true
  try { await store.triggerBackfill(); done.value = true }
  catch (e) { window.__fcToast?.({ text: e.message, type: 'error' }) }
  finally { busy.value = false }
}
</script>
