<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>
    <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>
    <v-menu>
      <template #activator="{ props }">
        <v-btn
          class="fc-suggestion__menu"
          icon="mdi-dots-vertical" size="small"
          variant="outlined" density="compact"
          :aria-label="`More actions for ${suggestion.display_name}`"
          v-bind="props"
        />
      </template>
      <v-list density="compact">
        <v-list-item @click="$emit('alias', suggestion)">
          <v-list-item-title>Treat as alias for…</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>
      </v-list>
    </v-menu>
  </div>
</template>

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

const props = defineProps({ suggestion: { type: Object, required: true } })
defineEmits(['accept', '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__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>
