<template>
  <v-card>
    <v-card-title>Suggestion thresholds</v-card-title>
    <v-card-text v-if="store.settings">
      <v-row v-for="f in fields" :key="f.key">
        <v-col cols="12">
          <v-slider
            v-model="local[f.key]" :label="f.label"
            min="0" max="1" step="0.05" thumb-label hide-details
            color="accent" @end="save"
          />
        </v-col>
      </v-row>
    </v-card-text>
    <v-card-text v-else><v-skeleton-loader type="paragraph" /></v-card-text>
  </v-card>
</template>

<script setup>
import { toast } from '../../utils/toast.js'
import { reactive, watch } from 'vue'
import { useMLStore } from '../../stores/ml.js'

const store = useMLStore()
// 'artist' (FC-2d-vii-c) and 'copyright' (2026-06-01) retired as
// suggestion categories; their threshold rows are gone.
const fields = [
  { key: 'suggestion_threshold_character', label: 'Character' },
  { key: 'suggestion_threshold_general', label: 'General' },
  { key: 'centroid_similarity_threshold', label: 'Centroid similarity' }
]
const local = reactive({})
watch(() => store.settings, (s) => { if (s) Object.assign(local, s) }, { immediate: true })

async function save() {
  const patch = {}
  for (const f of fields) patch[f.key] = local[f.key]
  try { await store.patchSettings(patch) }
  catch (e) { toast({ text: e.message, type: 'error' }) }
}
</script>
