<template>
  <section class="fc-suggestions" aria-label="Tag suggestions">
    <h3 class="fc-suggestions__title">Suggestions</h3>

    <div v-if="store.loading" class="fc-suggestions__skeleton">
      <div v-for="i in 4" :key="i" class="fc-suggestions__skel-row" />
    </div>
    <v-alert v-else-if="store.error" type="error" variant="tonal" density="compact">
      {{ store.error }}
    </v-alert>
    <div v-else-if="isEmpty" class="text-caption">
      No suggestions above threshold.
    </div>

    <template v-else>
      <SuggestionsCategoryGroup
        v-for="cat in peopleCats" :key="cat"
        v-show="store.byCategory[cat] && store.byCategory[cat].length"
        :label="labelFor(cat)" :items="store.byCategory[cat] || []"
        @accept="onAccept" @alias="onAlias" @dismiss="store.dismiss"
      />
      <SuggestionsCategoryGroup
        v-if="store.byCategory.general && store.byCategory.general.length"
        label="General" :items="store.byCategory.general"
        collapsible :default-open="false"
        @accept="onAccept" @alias="onAlias" @dismiss="store.dismiss"
      />
    </template>

    <v-dialog v-model="aliasDialog" max-width="480">
      <AliasPickerDialog
        v-if="aliasTarget"
        :category="aliasTarget.category"
        @confirm="onAliasConfirm" @cancel="aliasDialog = false"
      />
    </v-dialog>
  </section>
</template>

<script setup>
import { toast } from '../../utils/toast.js'
import { computed, ref, watch } from 'vue'
import { useSuggestionsStore, CATEGORY_LABELS } from '../../stores/suggestions.js'
import SuggestionsCategoryGroup from './SuggestionsCategoryGroup.vue'
import AliasPickerDialog from './AliasPickerDialog.vue'

const props = defineProps({ imageId: { type: Number, required: true } })
const store = useSuggestionsStore()

const peopleCats = ['artist', 'character', 'copyright']
function labelFor(c) { return CATEGORY_LABELS[c] || c }

const isEmpty = computed(() =>
  Object.values(store.byCategory).every(list => !list || list.length === 0)
)

watch(() => props.imageId, (id) => { if (id != null) store.load(id) }, { immediate: true })

async function onAccept(s) {
  try { await store.accept(s) }
  catch (e) { toast({ text: `Accept failed: ${e.message}`, type: 'error' }) }
}

const aliasDialog = ref(false)
const aliasTarget = ref(null)
function onAlias(s) { aliasTarget.value = s; aliasDialog.value = true }
async function onAliasConfirm(canonicalTagId) {
  try {
    await store.aliasAccept(aliasTarget.value, canonicalTagId)
    aliasDialog.value = false
  } catch (e) {
    toast({ text: `Alias failed: ${e.message}`, type: 'error' })
  }
}
</script>

<style scoped>
.fc-suggestions {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgb(var(--v-theme-surface-light));
}
.fc-suggestions__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px; font-weight: 500;
  color: rgb(var(--v-theme-on-surface));
  margin-bottom: 8px;
}
.fc-suggestions__skeleton { display: flex; flex-direction: column; gap: 8px; }
.fc-suggestions__skel-row {
  height: 18px; border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgb(var(--v-theme-surface)) 0%,
    rgb(var(--v-theme-surface-light)) 50%,
    rgb(var(--v-theme-surface)) 100%
  );
  background-size: 200% 100%;
  animation: fc-shimmer 1.4s infinite;
}
@keyframes fc-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
</style>
