<template>
  <MaintenanceTile
    icon="mdi-filmstrip"
    title="Video embedding"
    blurb="How videos are sampled into frames before embedding."
  >
    <div v-if="store.settings">
      <div class="text-caption fc-muted mb-3">
        Videos are embedded by sampling frames at a fixed cadence and mean-pooling
        their SigLIP embeddings. The interval sets the cadence; the cap bounds how
        many frames a long video samples.
      </div>
      <v-row>
        <v-col cols="12" sm="6">
          <SettingNumberField
            v-model="local.video_frame_interval_seconds"
            label="Frame interval (s)" :min="0.5" :step="0.5"
            density="comfortable" max-width="none" @change="onSave"
          />
        </v-col>
        <v-col cols="12" sm="6">
          <SettingNumberField
            v-model="local.video_max_frames"
            label="Max frames" :min="1" :step="1"
            density="comfortable" max-width="none" @change="onSave"
          />
        </v-col>
      </v-row>
    </div>
    <div v-else><v-skeleton-loader type="paragraph" /></div>
  </MaintenanceTile>
</template>

<script setup>
import { reactive, watch } from 'vue'
import { useMLStore } from '../../stores/ml.js'
import MaintenanceTile from '../common/MaintenanceTile.vue'
import SettingNumberField from '../common/SettingNumberField.vue'
import { useSettingSave } from '../../composables/useSettingSave.js'

const store = useMLStore()
const { save } = useSettingSave(store.patchSettings)
const local = reactive({})
watch(() => store.settings, (s) => { if (s) Object.assign(local, s) }, { immediate: true })

// SettingNumberField clamps interval to ≥0.5 and max-frames to ≥1 before this
// fires, so an out-of-range value never reaches the API.
function onSave() {
  save({
    video_frame_interval_seconds: Number(local.video_frame_interval_seconds),
    video_max_frames: Number(local.video_max_frames),
  })
}
</script>
