<template>
  <div class="fc-maint">
    <p class="text-body-2 mb-4">
      Operational backfills and tagging controls. The ML backfill and centroid
      recompute run nightly automatically; the allowlist auto-applies accepted
      tags to new and existing images. Use the cards below to trigger a
      one-off pass.
    </p>
    <div class="fc-maint__grid">
      <MLBackfillCard />
      <CentroidRecomputeCard />
      <ThumbnailBackfillCard />
    </div>
    <MLThresholdSliders class="mt-4" />
    <AllowlistTable class="mt-4" />
    <AliasTable class="mt-4" />
    <DbMaintenanceCard class="mt-6" />
    <BackupCard class="mt-6" />
    <!-- TagMaintenanceCard moved to Cleanup tab (v26.05.25.7) — it
         operates on the existing library which fits the Cleanup-tab
         theme, and clusters with the other audit cards. LegacyMigrationCard
         removed once the one-and-done GS/IR migration cutover completed. -->
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'

import MLBackfillCard from './MLBackfillCard.vue'
import CentroidRecomputeCard from './CentroidRecomputeCard.vue'
import ThumbnailBackfillCard from './ThumbnailBackfillCard.vue'
import MLThresholdSliders from './MLThresholdSliders.vue'
import AllowlistTable from './AllowlistTable.vue'
import AliasTable from './AliasTable.vue'
import DbMaintenanceCard from './DbMaintenanceCard.vue'
import BackupCard from './BackupCard.vue'
import { useSystemActivityStore } from '../../stores/systemActivity.js'

// Poll queue depths so each card's QueueStatusBar shows live pending
// counts — the operator can see a backfill is already queued/running
// before re-triggering it.
const activity = useSystemActivityStore()
let qTimer = null
onMounted(() => {
  activity.loadQueues()
  qTimer = setInterval(() => {
    if (!document.hidden) activity.loadQueues()
  }, 4000)
})
onUnmounted(() => {
  if (qTimer) { clearInterval(qTimer); qTimer = null }
})
</script>

<style scoped>
.fc-maint__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
</style>
