<template>
  <v-card>
    <v-card-title>Allowlisted tags ({{ store.rows.length }})</v-card-title>
    <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="0.05" 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>
  </v-card>
</template>

<script setup>
import { onMounted } from 'vue'
import { useAllowlistStore } from '../../stores/allowlist.js'

const store = useAllowlistStore()
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())

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