<template>
  <v-card>
    <v-card-title class="fc-aliasdlg__title">
      Aliases for <strong>{{ tag?.name }}</strong>
    </v-card-title>
    <v-card-text>
      <p class="text-caption mb-3">
        Model keys the tagger predicts that resolve to this tag — so a prediction
        like <code>{{ exampleKey }}</code> shows as “{{ tag?.name }}” instead of a
        separate tag. Create new aliases from a suggestion’s ⋮ menu in the image
        view; here you can see and remove them.
      </p>

      <div v-if="loading" class="fc-aliasdlg__loading">
        <v-progress-circular indeterminate color="accent" size="24" />
      </div>
      <v-alert v-else-if="error" type="error" variant="tonal" density="compact">
        {{ error }}
      </v-alert>
      <div v-else-if="rows.length === 0" class="text-caption fc-aliasdlg__empty">
        No aliases yet. In the image view, open a tagger suggestion’s ⋮ menu and
        choose “Treat as alias for…” to map it to this tag.
      </div>
      <v-list v-else density="compact" class="fc-aliasdlg__list">
        <v-list-item
          v-for="r in rows" :key="`${r.alias_string}/${r.alias_category}`"
        >
          <template #prepend>
            <code class="fc-aliasdlg__key">{{ r.alias_string }}</code>
          </template>
          <v-list-item-subtitle>{{ r.alias_category }}</v-list-item-subtitle>
          <template #append>
            <v-btn
              icon="mdi-delete" size="x-small" variant="text" color="error"
              :aria-label="`Remove alias ${r.alias_string}`"
              @click="remove(r)"
            />
          </template>
        </v-list-item>
      </v-list>
    </v-card-text>
    <v-card-actions>
      <v-spacer />
      <v-btn @click="$emit('close')">Close</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useApi } from '../../composables/useApi.js'

const props = defineProps({ tag: { type: Object, required: true } })
defineEmits(['close'])

const api = useApi()
const rows = ref([])
const loading = ref(false)
const error = ref(null)

// Illustrative booru-style key for the helper copy (lowercase, underscores).
const exampleKey = computed(() =>
  (props.tag?.name || 'tag').toLowerCase().replace(/\s+/g, '_')
)

async function reload() {
  loading.value = true
  error.value = null
  try {
    rows.value = await api.get(`/api/tags/${props.tag.id}/aliases`)
  } catch (e) {
    error.value = e.message || String(e)
  } finally {
    loading.value = false
  }
}

async function remove(r) {
  await api.delete(
    `/api/aliases/${encodeURIComponent(r.alias_string)}/${encodeURIComponent(r.alias_category)}`
  )
  rows.value = rows.value.filter(
    x => !(x.alias_string === r.alias_string && x.alias_category === r.alias_category)
  )
}

onMounted(reload)
</script>

<style scoped>
.fc-aliasdlg__loading,
.fc-aliasdlg__empty { padding: 12px 0; }
.fc-aliasdlg__key,
code {
  background: rgb(var(--v-theme-surface-light));
  padding: 1px 6px; border-radius: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
}
</style>
