<template>
  <!-- Chip-card row: visible border + hover/focus state unifies the
       name, score, and action buttons as one "object" (operator-asked
       2026-06-01). The row itself is informational; the explicit
       Accept button + 3-dot menu are the action affordances. -->
  <div class="fc-suggestion">
    <span class="fc-suggestion__name">
      {{ suggestion.display_name }}
      <span v-if="suggestion.creates_new_tag" class="fc-suggestion__new"
        title="No matching tag yet — accepting creates it">+ new</span>
      <span v-else-if="suggestion.via_alias" class="fc-suggestion__alias"
        :title="`Mapped from the tagger's “${suggestion.raw_name}” via an alias`">alias</span>
    </span>
    <span class="fc-suggestion__score">{{ scorePct }}</span>
    <v-btn
      class="fc-suggestion__accept"
      size="small" variant="tonal" color="accent"
      density="compact" rounded="pill"
      :aria-label="`Accept ${suggestion.display_name}`"
      @click="$emit('accept', suggestion)"
    >
      Accept
    </v-btn>
    <!-- Modal-safe kebab is baked into KebabMenu (this row lives in the
         teleported image modal — #711). -->
    <KebabMenu
      class="fc-suggestion__menu" size="small" variant="outlined"
      :label="`More actions for ${suggestion.display_name}`"
    >
      <!-- Alias is a tagger-prediction remap, so only offer it for tagger
           suggestions with a raw model key that aren't already aliased.
           Centroid hits (raw_name null) have nothing to alias. -->
      <v-list-item
        v-if="suggestion.raw_name && !suggestion.via_alias"
        @click="$emit('alias', suggestion)"
      >
        <v-list-item-title>Treat as alias for…</v-list-item-title>
      </v-list-item>
      <v-list-item
        v-if="suggestion.via_alias"
        @click="$emit('remove-alias', suggestion)"
      >
        <v-list-item-title>Remove alias</v-list-item-title>
      </v-list-item>
      <v-list-item @click="$emit('dismiss', suggestion)">
        <v-list-item-title>Dismiss for this image</v-list-item-title>
      </v-list-item>
    </KebabMenu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import KebabMenu from '../common/KebabMenu.vue'

const props = defineProps({ suggestion: { type: Object, required: true } })
defineEmits(['accept', 'alias', 'remove-alias', 'dismiss'])

const scorePct = computed(() => `${Math.round(props.suggestion.score * 100)}%`)
</script>

<style scoped>
.fc-suggestion {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; margin-bottom: 4px;
  background: rgb(var(--v-theme-surface));
  border: 1px solid rgb(var(--v-theme-surface-light));
  border-radius: 6px;
  transition: background 120ms ease, border-color 120ms ease;
}
.fc-suggestion:hover {
  background: rgb(var(--v-theme-surface-light));
  border-color: rgb(var(--v-theme-accent), 0.4);
}
.fc-suggestion__name {
  flex: 1; min-width: 0;
  font-size: 14px;
  color: rgb(var(--v-theme-on-surface));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fc-suggestion__new {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  color: rgb(var(--v-theme-accent));
  background: rgba(var(--v-theme-accent), 0.12);
  border: 1px solid rgb(var(--v-theme-accent), 0.4);
  padding: 1px 6px; border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fc-suggestion__alias {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  color: rgb(var(--v-theme-on-surface-variant));
  background: rgb(var(--v-theme-surface-light));
  border: 1px solid rgb(var(--v-theme-surface-light));
  padding: 1px 6px; border-radius: 999px;
  margin-left: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fc-suggestion__score {
  flex: 0 0 auto; min-width: 38px; text-align: right;
  font-size: 11px;
  color: rgb(var(--v-theme-on-surface-variant, var(--v-theme-on-surface)));
  font-family: 'JetBrains Mono', monospace;
}
/* Vuetify's compact density doesn't shrink the tonal button enough
   for a tight row; clamp the min-width so Accept stays compact. */
.fc-suggestion__accept :deep(.v-btn__content) {
  font-size: 12px; letter-spacing: 0.02em;
}
.fc-suggestion__menu {
  flex: 0 0 auto;
}
</style>
