<template>
  <div v-if="store.loading && !store.overview" class="fc-artist__loading">
    <v-progress-circular indeterminate color="accent" size="36" />
  </div>

  <v-container v-else-if="store.notFound" class="pt-2 pb-6">
    <v-alert type="warning" variant="tonal">Artist not found.</v-alert>
  </v-container>

  <v-container v-else-if="store.error && !store.overview" class="pt-2 pb-6">
    <v-alert type="error" variant="tonal" closable>{{ store.error }}</v-alert>
  </v-container>

  <template v-else-if="store.overview">
    <ArtistHeader
      v-model="tab"
      :name="store.overview.name"
      :image-count="store.imageCount"
      :post-count="store.postCount"
      :last-added="store.lastAdded"
      @rename="onRename"
    />
    <v-container fluid class="pt-2 pb-4">
      <!-- "N new since last visit" banner. Visible only on the initial
           load that triggered the visit-mark; dismissable via close
           button or by switching tabs. Re-entry only re-shows if more
           content has arrived (overview returns 0 immediately after a
           previous visit). -->
      <v-alert
        v-if="unseenBanner"
        type="info" variant="tonal" density="compact"
        class="mb-3" closable
        @click:close="unseenBanner = false"
      >
        <span class="fc-artist__unseen-msg">
          <strong>{{ store.overview.unseen_count_at_visit }}</strong>
          new since last visit
        </span>
      </v-alert>
      <v-window v-model="tab">
        <v-window-item value="posts">
          <ArtistPostsTab
            :artist-id="store.overview.id"
            @switch-tab="(t) => tab = t"
          />
        </v-window-item>
        <v-window-item value="gallery">
          <ArtistGalleryTab :slug="slug" />
        </v-window-item>
        <v-window-item value="management">
          <ArtistManagementTab :overview="store.overview" />
        </v-window-item>
      </v-window>
    </v-container>
  </template>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'

import { useArtistStore } from '../stores/artist.js'
import { toast } from '../utils/toast.js'
import ArtistHeader from '../components/artist/ArtistHeader.vue'
import ArtistPostsTab from '../components/artist/ArtistPostsTab.vue'
import ArtistGalleryTab from '../components/artist/ArtistGalleryTab.vue'
import ArtistManagementTab from '../components/artist/ArtistManagementTab.vue'
import { useTabQuery } from '../composables/useTabQuery.js'

const VALID_TABS = ['posts', 'gallery', 'management']

const route = useRoute()
const store = useArtistStore()

const slug = computed(() => route.params.slug)
const { tab, resolve } = useTabQuery(
  VALID_TABS,
  () => ((store.postCount ?? 0) > 0 ? 'posts' : 'gallery'),
)

// Rename the artist's display name (#130). Slug/route unchanged, so no
// navigation — the header just reflects the new name; also refresh the tab title.
async function onRename (name) {
  try {
    await store.rename(name)
    document.title = `${store.overview.name} — FabledCurator`
  } catch (e) {
    toast({ text: `Rename failed: ${e.message}`, type: 'error' })
  }
}

// One-shot banner — reset on each new artist-slug load so it re-appears
// when navigating between artists that each have unseen content.
const unseenBanner = ref(false)

watch(slug, async (s) => {
  if (!s) return
  await store.load(s)
  document.title = store.overview
    ? `${store.overview.name} — FabledCurator`
    : 'FabledCurator'
  tab.value = resolve()
  unseenBanner.value = (store.overview?.unseen_count_at_visit || 0) > 0
}, { immediate: true })
</script>

<style scoped>
.fc-artist__loading {
  display: flex; justify-content: center; padding: 64px 0;
}
.fc-artist__unseen-msg {
  font-size: 14px;
}
</style>
