<template>
  <MaintenanceTile
    icon="mdi-image-refresh"
    title="Thumbnail backfill"
    blurb="Regenerate missing or broken thumbnails."
    :open="busy"
  >
      <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="result" class="ml-3 text-caption">
        Scanned <strong>{{ result.scanned }}</strong> · enqueued
        <strong>{{ result.enqueued }}</strong>
        <span v-if="result.regenerated > 0">
          ({{ result.regenerated }} regenerated)
        </span>
        · {{ result.ok }} ok
      </span>
      <QueueStatusBar queue="thumbnail" queue-label="Thumbnail" />
  </MaintenanceTile>
</template>

<script setup>
import { toast } from '../../utils/toast.js'
import { ref } from 'vue'
import { useThumbnailsStore } from '../../stores/thumbnails.js'
import MaintenanceTile from '../common/MaintenanceTile.vue'
import QueueStatusBar from './QueueStatusBar.vue'
const store = useThumbnailsStore()
const busy = ref(false)
const result = ref(null)
async function run () {
  busy.value = true
  result.value = null
  try { result.value = await store.triggerBackfill() }
  catch (e) { toast({ text: e.message, type: 'error' }) }
  finally { busy.value = false }
}
</script>
