<template>
  <!-- Sticky per-post translation override (#155). Quiet inline control under the
       post title: force a skipped legit-foreign title on, or knock a wrongly
       mis-translated one back to the original. The choice sticks through a
       Re-translate-all. -->
  <div class="fc-post-tx">
    <span class="fc-post-tx__label">Translation:</span>
    <v-menu :disabled="busy">
      <template #activator="{ props: menuProps }">
        <button
          type="button" class="fc-post-tx__btn" v-bind="menuProps" :disabled="busy"
          :aria-label="`Translation handling: ${currentLabel}`"
        >
          {{ currentLabel }}
          <v-icon size="14">mdi-menu-down</v-icon>
        </button>
      </template>
      <v-list density="compact" min-width="240" class="fc-post-tx__list">
        <v-list-item
          v-for="opt in OPTIONS" :key="opt.value"
          :active="opt.value === current" @click="choose(opt.value)"
        >
          <template #prepend>
            <v-icon size="small">{{ opt.icon }}</v-icon>
          </template>
          <v-list-item-title>{{ opt.label }}</v-list-item-title>
          <v-list-item-subtitle>{{ opt.help }}</v-list-item-subtitle>
        </v-list-item>
      </v-list>
    </v-menu>
    <v-progress-circular v-if="busy" indeterminate size="13" width="2" />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

import { usePostsStore } from '../../stores/posts.js'
import { toast } from '../../utils/toast.js'

const props = defineProps({ post: { type: Object, required: true } })
const posts = usePostsStore()
const busy = ref(false)

const OPTIONS = [
  { value: 'auto', label: 'Auto', icon: 'mdi-cog-outline',
    help: 'Translate only when confident enough' },
  { value: 'force', label: 'Force translate', icon: 'mdi-translate',
    help: 'Always translate, even at low confidence' },
  { value: 'original', label: 'Keep original', icon: 'mdi-translate-off',
    help: 'Never translate — keep the original text' },
]

const current = computed(() => props.post.translation_override || 'auto')
const currentLabel = computed(
  () => (OPTIONS.find((o) => o.value === current.value) || OPTIONS[0]).label,
)

async function choose (value) {
  if (value === current.value || busy.value) return
  busy.value = true
  try {
    const res = await posts.applyTranslationOverride(props.post.id, value)
    if (res.applied === 'queued') {
      toast({
        text: 'Saved — this post will translate on the next sweep (service offline).',
        type: 'info',
      })
    }
  } catch (e) {
    toast({ text: `Couldn't update translation: ${e.message}`, type: 'error' })
  } finally {
    busy.value = false
  }
}
</script>

<style scoped>
.fc-post-tx {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 2px 0 6px;
}
.fc-post-tx__label {
  font-size: 0.72rem;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-post-tx__btn {
  display: inline-flex; align-items: center; gap: 1px;
  padding: 0; background: none; border: 0; cursor: pointer;
  font-size: 0.72rem; font-weight: 700;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-post-tx__btn:hover { color: rgb(var(--v-theme-accent)); }
.fc-post-tx__btn:focus-visible {
  outline: 2px solid rgb(var(--v-theme-accent)); outline-offset: 1px;
  border-radius: 2px;
}
.fc-post-tx__btn:disabled { cursor: default; opacity: 0.6; }
.fc-post-tx__list :deep(.v-list-item-subtitle) {
  font-size: 0.7rem;
}
</style>
