<template>
  <v-card class="fc-artistcard" @click="onCardClick">
    <div class="fc-artistcard__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-artistcard__noimg">
        No preview
      </div>
      <!-- Accent pill in the corner when this artist has content imported
           since the operator last opened their detail view. Caps at 99+
           to keep the layout compact; the actual count appears in the
           banner inside ArtistView. -->
      <span
        v-if="(card.unseen_count || 0) > 0"
        class="fc-artistcard__unseen"
        :aria-label="`${card.unseen_count} new since last visit`"
      >+{{ card.unseen_count > 99 ? '99+' : card.unseen_count }}</span>
    </div>
    <v-card-text class="fc-artistcard__body">
      <div class="fc-artistcard__name">{{ card.name }}</div>
      <div class="fc-artistcard__meta">
        <v-chip
          v-if="card.is_subscription"
          size="x-small" label prepend-icon="mdi-rss"
        >Subscription</v-chip>
        <span v-else />
        <span class="fc-artistcard__count">{{ card.image_count }}</span>
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({ card: { type: Object, required: true } })
const router = useRouter()

function onCardClick() {
  router.push({ name: 'artist', params: { slug: props.card.slug } })
}
</script>

<style scoped>
.fc-artistcard { cursor: pointer; }
.fc-artistcard__previews {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; aspect-ratio: 3 / 1;
  /* Floor so tall source images can't escape the slot. NO max-height: an
     aspect-ratio box capped by max-height shrinks its own WIDTH to keep the
     ratio, leaving dead space beside the previews on a wide (single-column)
     card. The grid below keeps columns ≲400px so the strip stays a sane height. */
  min-height: 120px;
  overflow: hidden;
  background: rgb(var(--v-theme-surface-light));
}
.fc-artistcard__unseen {
  position: absolute;
  top: 6px; right: 6px;
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--v-theme-on-accent, 0, 0, 0));
  background: rgb(var(--v-theme-accent));
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.fc-artistcard__previews img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.fc-artistcard__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-artistcard__body { padding: 8px 12px; }
.fc-artistcard__name { font-weight: 600; }
.fc-artistcard__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px;
}
.fc-artistcard__count {
  font-variant-numeric: tabular-nums;
  color: rgb(var(--v-theme-on-surface-variant));
}
</style>
