<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">
          <v-text-field
            v-model.number="local.video_frame_interval_seconds"
            label="Frame interval (s)" type="number" min="0.5" step="0.5"
            density="comfortable" hide-details @change="save"
          />
        </v-col>
        <v-col cols="12" sm="6">
          <v-text-field
            v-model.number="local.video_max_frames"
            label="Max frames" type="number" min="1" step="1"
            density="comfortable" hide-details @change="save"
          />
        </v-col>
      </v-row>
    </div>
    <div v-else><v-skeleton-loader type="paragraph" /></div>
  </MaintenanceTile>
</template>

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

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

async function save() {
  const patch = {
    video_frame_interval_seconds: local.video_frame_interval_seconds,
    video_max_frames: local.video_max_frames
  }
  try { await store.patchSettings(patch) }
  catch (e) { toast({ text: e.message, type: 'error' }) }
}
</script>
