<template>
  <MaintenanceTile
    icon="mdi-refresh"
    title="ML backfill"
    blurb="Re-run tagging + embeddings on images missing them."
    :open="busy"
  >
      <p class="text-body-2 mb-3">
        Re-run Camie + SigLIP on images missing predictions or embeddings
        for the current model versions. Safe to re-run.
      </p>
      <v-btn color="primary" rounded="pill" :loading="busy" @click="run">
        <v-icon start>mdi-refresh</v-icon> Run backfill now
      </v-btn>
      <span v-if="done" class="ml-3 text-caption">Enqueued.</span>
      <QueueStatusBar queue="ml" queue-label="ML" />
  </MaintenanceTile>
</template>

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