<template>
  <v-card>
    <v-card-title>Trigger scan</v-card-title>
    <v-card-text>
      <div v-if="store.activeBatch" class="d-flex align-center mb-3" style="gap: 12px;">
        <v-progress-circular
          indeterminate color="accent" size="20"
        />
        <span>
          {{ store.activeBatch.scan_mode === 'deep' ? 'Deep scanning' : 'Scanning' }}
          {{ store.activeBatch.source_path || '/import' }} —
          imported {{ store.activeBatch.imported }},
          <template v-if="store.activeBatch.scan_mode === 'deep'">
            refreshed {{ store.activeBatch.refreshed || 0 }},
          </template>
          skipped {{ store.activeBatch.skipped }},
          failed {{ store.activeBatch.failed }} /
          {{ store.activeBatch.total_files }} files
        </span>
        <v-spacer />
        <v-btn
          variant="text" rounded="pill" size="small" color="warning"
          :loading="clearing" @click="onClearStuck"
        >
          Clear stuck
        </v-btn>
      </div>

      <p class="text-body-2 mb-3">
        <span v-if="!store.activeBatch">
          <strong>Quick scan</strong> walks <code>/import</code> and enqueues
          new files only.
          <strong>Deep scan</strong> additionally re-walks already-imported
          files so updated sidecar metadata (post title/date/attribution) and
          previously-NULL phashes / artist links get refreshed. Use after
          bulk-downloading fresh sidecars for existing content. Both modes
          route non-media + sidecar pairs through PostAttachment capture.
        </span>
        <span v-else>
          An active batch is in progress. Wait for it to finish, or click
          <em>Clear stuck</em> above if it has been wedged with no
          measurable progress.
        </span>
      </p>

      <div class="d-flex flex-wrap" style="gap: 12px;">
        <v-btn
          color="primary" rounded="pill"
          :disabled="!!store.activeBatch"
          :loading="busy === 'quick'"
          @click="trigger('quick')"
        >
          <v-icon start>mdi-magnify-scan</v-icon>
          Quick scan
        </v-btn>
        <v-btn
          color="secondary" rounded="pill" variant="tonal"
          :disabled="!!store.activeBatch"
          :loading="busy === 'deep'"
          @click="trigger('deep')"
        >
          <v-icon start>mdi-magnify-plus-outline</v-icon>
          Deep scan
        </v-btn>
      </div>

      <v-alert v-if="store.triggerError" type="error" variant="tonal" class="mt-3" closable>
        {{ store.triggerError }}
      </v-alert>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { ref } from 'vue'
import { useImportStore } from '../../stores/import.js'

const store = useImportStore()
const busy = ref(null)
const clearing = ref(false)

async function trigger(mode) {
  busy.value = mode
  try { await store.triggerScan(mode) } catch {} finally { busy.value = null }
}

async function onClearStuck() {
  clearing.value = true
  try {
    await store.clearStuck()
  } catch {
    // store surfaces error via triggerError if needed
  } finally {
    clearing.value = false
  }
}
</script>
