<template>
  <v-card>
    <v-card-title>Import filters</v-card-title>
    <v-card-text v-if="store.settings">
      <!-- Near-duplicate dedup sensitivity, hoisted to the top: it's the
           most-asked knob — too loose and edits/variants of the same image
           get dropped as duplicates on import. Slider with sane labelled
           stops for the gist + a number field for precision; both bind the
           same phash_threshold. -->
      <div class="fc-phash">
        <div class="fc-phash__title">Near-duplicate sensitivity</div>
        <div class="fc-help mb-1">
          How aggressively imports merge look-alike images (perceptual-hash
          distance). <strong>Lower it if edits/variants of the same image are
          being dropped as duplicates;</strong> raise it to collapse more
          look-alikes. Applies to new imports.
        </div>
        <v-row no-gutters class="align-center">
          <v-col cols="12" sm="9">
            <v-slider
              v-model="local.phash_threshold"
              :min="0" :max="16" :step="1"
              :ticks="PHASH_TICKS" show-ticks="always" tick-size="4"
              thumb-label color="accent" hide-details
              class="fc-phash__slider"
              @end="save"
            />
          </v-col>
          <v-col cols="8" sm="3" class="ps-sm-4 mt-2 mt-sm-0">
            <v-text-field
              v-model.number="local.phash_threshold"
              label="Distance" type="number" min="0"
              density="compact" hide-details @blur="save"
            />
          </v-col>
        </v-row>
      </div>

      <v-divider class="my-5" />

      <v-row>
        <v-col cols="12" sm="6">
          <v-text-field
            v-model.number="local.min_width" label="Min width (px)" type="number"
            density="compact" hide-details @blur="save"
          />
        </v-col>
        <v-col cols="12" sm="6">
          <v-text-field
            v-model.number="local.min_height" label="Min height (px)" type="number"
            density="compact" hide-details @blur="save"
          />
        </v-col>
        <v-col cols="12" sm="6">
          <v-switch
            v-model="local.skip_transparent" label="Skip mostly-transparent images"
            density="compact" hide-details color="primary" @change="save"
          />
        </v-col>
        <v-col cols="12" sm="6">
          <v-slider
            v-model="local.transparency_threshold" label="Transparency threshold"
            min="0" max="1" step="0.05" thumb-label hide-details color="accent"
            :disabled="!local.skip_transparent" @end="save"
          />
        </v-col>
        <v-col cols="12" sm="6">
          <v-switch
            v-model="local.skip_single_color" label="Skip near-single-color images"
            density="compact" hide-details color="primary" @change="save"
          />
        </v-col>
        <v-col cols="12" sm="6">
          <v-slider
            v-model="local.single_color_threshold" label="Single-color threshold"
            min="0.5" max="1" step="0.05" thumb-label hide-details color="accent"
            :disabled="!local.skip_single_color" @end="save"
          />
        </v-col>
      </v-row>

      <v-divider class="my-5" />

      <!-- Title-based WIP auto-tagging (task #1458). The switch gates the LIVE
           import hook; the button runs the one-off back-catalogue scan (an
           explicit action — it is deliberately not a scheduled sweep so it can't
           silently re-apply a WIP tag you removed by hand). -->
      <div class="fc-wip">
        <div class="fc-wip__title">WIP auto-tagging</div>
        <v-switch
          v-model="local.wip_title_tagging_enabled"
          label="Tag work-in-progress from post titles"
          density="compact" hide-details color="primary" @change="save"
        />
        <div class="fc-help mb-3">
          When a post's title says <strong>“WIP”</strong> or
          <strong>“work in progress”</strong>, new imports get the
          <code>wip</code> tag automatically — keeping unfinished pieces out of
          the Explore browse. Applies to new imports; run the scan below to catch
          posts already in your library.
        </div>
        <v-switch
          v-model="local.wip_soft_title_tagging_enabled"
          label="Also tag “sketch” / “doodle” titles (lower precision)"
          density="compact" hide-details color="primary" @change="save"
        />
        <div class="fc-help mb-3">
          Extends the above to softer cues (<code>sketch</code>, <code>doodle</code>,
          <code>scribble</code>). These stay <strong>visible</strong> and never train
          the tagging model — a daily audit flags any that actually look like finished
          art for review. Off by default.
        </div>
        <v-btn
          variant="tonal" color="primary" size="small"
          :loading="store.wipScanBusy" prepend-icon="mdi-magnify"
          @click="store.scanWipTitles()"
        >
          Scan existing posts for WIP titles
        </v-btn>
      </div>

      <v-alert v-if="store.settingsError" type="error" variant="tonal" class="mt-2" closable>
        {{ store.settingsError }}
      </v-alert>
    </v-card-text>
    <v-card-text v-else>
      <v-skeleton-loader type="paragraph" />
    </v-card-text>
  </v-card>
</template>

<script setup>
import { onMounted, reactive, watch } from 'vue'
import { useImportStore } from '../../stores/import.js'

const store = useImportStore()
// Self-sufficient since the Import tab dissolved (2026-07-02): this form now
// lives in Maintenance → Ingestion & filters and loads its own settings
// instead of relying on the old tab's mount hook.
onMounted(() => { if (!store.settings) store.loadSettings() })
// Labelled stops so the less-initiated get the gist without knowing what a
// Hamming distance is. 0 = byte-for-byte only; 10 = the shipped default.
const PHASH_TICKS = { 0: 'Exact', 4: 'Strict', 10: 'Default', 16: 'Loose' }
// Downloader + schedule-defaults fields moved to
// /subscriptions?tab=settings (operator decision 2026-05-27). This form
// now only owns image-import filters.
const local = reactive({
  min_width: 0, min_height: 0,
  skip_transparent: false, transparency_threshold: 0.9,
  skip_single_color: false, single_color_threshold: 0.95,
  phash_threshold: 10,
  wip_title_tagging_enabled: true,
  wip_soft_title_tagging_enabled: false,
})

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

async function save() {
  await store.patchSettings({ ...local })
}
</script>

<style scoped>
.fc-help {
  font-size: 12px;
  color: rgb(var(--v-theme-on-surface-variant));
  margin-top: 2px;
}
.fc-phash__title,
.fc-wip__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: rgb(var(--v-theme-on-surface));
}
.fc-wip code {
  font-size: 0.85em;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgb(var(--v-theme-surface-variant));
}
/* Headroom so the tick labels (Exact/Strict/Default/Loose) aren't clipped. */
.fc-phash__slider { margin-bottom: 18px; }
</style>
