<template>
  <MaintenanceTile
    icon="mdi-playlist-check"
    :title="`Allowlisted tags (${store.rows.length})`"
    blurb="Tags auto-applied to images that score above their threshold."
  >
    <v-data-table-virtual
      :headers="headers" :items="store.rows" :loading="store.loading"
      height="360" density="compact"
      no-data-text="No tags on the allowlist yet — accept a suggestion to add one."
    >
      <template #item.min_confidence="{ item }">
        <v-text-field
          :model-value="item.min_confidence" type="number"
          density="compact" hide-details style="max-width: 100px;"
          :min="floor" max="1" step="0.05"
          @update:model-value="(v) => onThreshold(item.tag_id, v)"
        />
      </template>
      <template #item.actions="{ item }">
        <v-btn
          icon="mdi-delete" size="x-small" variant="text" color="error"
          @click="store.remove(item.tag_id)"
        />
      </template>
    </v-data-table-virtual>
  </MaintenanceTile>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useAllowlistStore } from '../../stores/allowlist.js'
import { useMLStore } from '../../stores/ml.js'
import MaintenanceTile from '../common/MaintenanceTile.vue'

const store = useAllowlistStore()
const ml = useMLStore()
// min_confidence can't be set below the tagger store floor — predictions
// below it aren't stored, so a lower threshold would behave identically to
// the floor. The backend clamps too (#764).
const floor = computed(() => ml.settings?.tagger_store_floor ?? 0.70)
const headers = [
  { title: 'Tag', key: 'tag_name', sortable: true },
  { title: 'Kind', key: 'tag_kind', sortable: true, width: 110 },
  { title: 'Min confidence', key: 'min_confidence', sortable: false, width: 140 },
  { title: '', key: 'actions', sortable: false, width: 60 }
]
onMounted(() => {
  store.load()
  if (!ml.settings) ml.loadSettings()
})

let debounce = null
function onThreshold(tagId, value) {
  if (debounce) clearTimeout(debounce)
  debounce = setTimeout(() => {
    const v = Math.max(parseFloat(value), floor.value)
    if (v > 0 && v <= 1) store.updateThreshold(tagId, v)
  }, 500)
}
</script>
