<template>
  <v-card class="fc-tagcard" @click="onCardClick">
    <div class="fc-tagcard__previews">
      <img
        v-for="(t, i) in card.preview_thumbnails" :key="i"
        :src="t" alt="" loading="lazy"
      />
      <div v-if="card.preview_thumbnails.length === 0" class="fc-tagcard__noimg">
        No preview
      </div>
    </div>
    <v-card-text class="fc-tagcard__body">
      <div class="fc-tagcard__name">
        <template v-if="!editing">
          {{ card.name }}
          <v-icon
            v-if="card.is_system" size="14" icon="mdi-shield-outline"
            class="fc-tagcard__system"
            title="System tag — tagged items are excluded from training other concepts"
          />
          <span v-if="card.kind === 'character' && card.fandom_name"
                class="fc-tagcard__fandom">— {{ card.fandom_name }}</span>
          <v-icon
            v-if="!card.is_system"
            class="fc-tagcard__edit" size="14" icon="mdi-pencil"
            @click.stop="startEdit"
          />
          <v-icon
            v-if="card.kind === 'series'"
            class="fc-tagcard__edit" size="14"
            icon="mdi-book-open-page-variant"
            title="Manage series" @click.stop="$emit('manage', card.id)"
          />
          <v-icon
            v-if="card.kind === 'series'"
            class="fc-tagcard__edit" size="14" icon="mdi-book-open"
            title="Read series" @click.stop="$emit('read', card.id)"
          />
        </template>
        <v-text-field
          v-else
          v-model="draft"
          density="compact" variant="outlined" hide-details
          autofocus
          @click.stop
          @keydown.stop.enter="submit"
          @keydown.stop.esc="cancel"
          @blur="cancel"
        />
      </div>
      <div class="fc-tagcard__meta">
        <v-chip size="x-small" label>{{ card.kind }}</v-chip>
        <div class="fc-tagcard__meta-right">
          <span class="fc-tagcard__count">{{ card.image_count }}</span>
          <KebabMenu class="fc-tagcard__menu" :label="`Actions for ${card.name}`">
            <v-list-item
              v-if="card.kind === 'character'"
              title="Set fandom…"
              prepend-icon="mdi-book-open-page-variant"
              @click="$emit('set-fandom', card)"
            />
            <v-list-item
              title="Aliases…"
              prepend-icon="mdi-tag-multiple"
              @click="$emit('aliases', card)"
            />
            <!-- System tags (#128): merge-away and delete are refused
                 server-side — the hygiene machinery keys on the row — so
                 don't offer them. Aliases stay (mapping model outputs ONTO
                 a system tag is useful). -->
            <v-list-item
              v-if="!card.is_system"
              title="Merge with…"
              prepend-icon="mdi-call-merge"
              @click="$emit('merge-with', card)"
            />
            <v-list-item
              v-if="!card.is_system"
              title="Delete tag"
              prepend-icon="mdi-delete"
              base-color="error"
              @click="$emit('delete', card)"
            />
          </KebabMenu>
        </div>
      </div>
    </v-card-text>
  </v-card>
</template>

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

const props = defineProps({ card: { type: Object, required: true } })
const emit = defineEmits([
  'open', 'rename', 'manage', 'read', 'merge-with', 'delete', 'set-fandom',
  'aliases',
])

const editing = ref(false)
const draft = ref('')

function onCardClick() {
  if (!editing.value) emit('open', props.card.id)
}
function startEdit() {
  draft.value = props.card.name
  editing.value = true
}
function cancel() {
  editing.value = false
}
function submit() {
  const name = draft.value.trim()
  editing.value = false
  if (name && name !== props.card.name) {
    emit('rename', { id: props.card.id, name })
  }
}
</script>

<style scoped>
.fc-tagcard { cursor: pointer; }
.fc-tagcard__previews {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; aspect-ratio: 3 / 1;
  /* Explicit floor + ceiling so tall source images can't escape the
     preview slot even on browsers where aspect-ratio doesn't compute
     (older Safari, embedded webviews). */
  min-height: 150px; max-height: 220px;
  overflow: hidden;
  background: rgb(var(--v-theme-surface-light));
}
.fc-tagcard__previews img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.fc-tagcard__noimg {
  grid-column: 1 / -1; display: flex; align-items: center;
  justify-content: center;
  color: rgb(var(--v-theme-on-surface-variant)); font-size: 12px;
}
.fc-tagcard__body { padding: 8px 12px; }
.fc-tagcard__name { font-weight: 600; }
.fc-tagcard__fandom { font-weight: 400; opacity: 0.7; }
.fc-tagcard__system { opacity: 0.6; margin-left: 2px; }
.fc-tagcard__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.fc-tagcard__count { font-variant-numeric: tabular-nums; opacity: 0.8; }
.fc-tagcard__edit {
  opacity: 0;
  margin-left: 6px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.fc-tagcard:hover .fc-tagcard__edit { opacity: .6; }
.fc-tagcard__edit:hover { opacity: 1; }
.fc-tagcard__meta-right {
  display: flex; align-items: center; gap: 4px;
}
.fc-tagcard__menu {
  opacity: 0;
  transition: opacity .15s ease;
}
.fc-tagcard:hover .fc-tagcard__menu { opacity: .6; }
.fc-tagcard__menu:hover { opacity: 1; }
</style>
