<template>
  <header class="fc-artist-header">
    <div class="fc-artist-header__left">
      <h1 class="fc-artist-header__name">{{ name }}</h1>
      <span v-if="stats" class="fc-artist-header__stats">{{ stats }}</span>
    </div>
    <v-tabs
      :model-value="modelValue"
      color="accent"
      density="compact"
      class="fc-artist-header__tabs"
      @update:model-value="$emit('update:modelValue', $event)"
    >
      <v-tab value="posts">
        Posts
        <span v-if="postCount != null" class="fc-artist-header__tab-count">
          ({{ postCount }})
        </span>
      </v-tab>
      <v-tab value="gallery">
        Gallery
        <span v-if="imageCount != null" class="fc-artist-header__tab-count">
          ({{ imageCount }})
        </span>
      </v-tab>
      <v-tab value="management">Management</v-tab>
    </v-tabs>
  </header>
</template>

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

const props = defineProps({
  name:        { type: String, required: true },
  imageCount:  { type: Number, default: null },
  postCount:   { type: Number, default: null },
  lastAdded:   { type: String, default: null },
  modelValue:  { type: String, required: true },
})

defineEmits(['update:modelValue'])

const stats = computed(() => {
  const parts = []
  if (props.imageCount != null) {
    parts.push(`${props.imageCount} image${props.imageCount === 1 ? '' : 's'}`)
  }
  if (props.lastAdded) {
    parts.push(`last added ${props.lastAdded.slice(0, 10)}`)
  }
  return parts.join(' · ')
})
</script>

<style scoped>
/* Matches TopNav.vue's frosted recipe exactly — top:64px parks it under
   the 64px-tall TopNav with no visible seam. */
.fc-artist-header {
  position: sticky;
  top: 64px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(
    to bottom,
    rgba(20, 23, 26, 0.92) 0%,
    rgba(20, 23, 26, 0.65) 60%,
    rgba(20, 23, 26, 0) 100%
  );
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.fc-artist-header__left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  overflow: hidden;
}

.fc-artist-header__name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  margin: 0;
  color: rgb(var(--v-theme-on-surface));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-artist-header__stats {
  font-size: 13px;
  color: rgb(var(--v-theme-on-surface-variant));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-artist-header__tabs {
  flex: 0 0 auto;
}

.fc-artist-header__tab-count {
  margin-left: 4px;
  font-size: 12px;
  color: rgb(var(--v-theme-on-surface-variant));
  font-variant-numeric: tabular-nums;
}
</style>
