<template>
  <div v-if="postId != null" class="fc-postinfo">
    <template v-if="info && info.data">
      <div class="fc-postinfo__main">
        <span class="fc-postinfo__platform">
          {{ info.data.source.platform }}
        </span>
        <span class="fc-postinfo__title">
          {{ info.data.post.title || `Post ${info.data.post.external_post_id}` }}
        </span>
        <RouterLink
          class="fc-postinfo__artist"
          :to="`/artist/${info.data.artist.slug}`"
        >by {{ info.data.artist.name }}</RouterLink>
        <span v-if="date" class="fc-postinfo__date">{{ date }}</span>
        <span
          v-if="info.data.post.attachment_count != null"
          class="fc-postinfo__count"
        >{{ info.data.post.attachment_count }} files</span>
        <a
          v-if="info.data.post.url" :href="info.data.post.url"
          target="_blank" rel="noopener noreferrer"
        >↗ original post</a>
        <a
          v-for="at in (info.data.attachments || [])" :key="at.id"
          class="fc-postinfo__attach"
          :href="at.download_url" :download="at.original_filename"
        >⬇ {{ at.original_filename }}</a>
      </div>
    </template>
    <span v-else-if="info && info.error" class="fc-postinfo__title">
      Post not found
    </span>
    <v-btn size="x-small" variant="text" @click="clear">× Clear</v-btn>
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGalleryStore } from '../../stores/gallery.js'
import { useProvenanceStore } from '../../stores/provenance.js'
import { formatPostDate } from '../../utils/date.js'

const gallery = useGalleryStore()
const prov = useProvenanceStore()
const route = useRoute()
const router = useRouter()

const postId = computed(() => gallery.filter.post_id)

watch(
  postId,
  (id) => { if (id != null) prov.loadForPost(id) },
  { immediate: true }
)

const info = computed(() =>
  postId.value == null ? null : prov.postInfo(postId.value)
)
const date = computed(() =>
  info.value && info.value.data
    ? formatPostDate(info.value.data.post.date)
    : null
)

function clear() {
  const q = { ...route.query }
  delete q.post_id
  router.push({ query: q })
}
</script>

<style scoped>
.fc-postinfo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: rgb(var(--v-theme-surface));
  border-left: 3px solid rgb(var(--v-theme-accent));
  border-radius: 4px;
}
.fc-postinfo__main {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  flex: 1; min-width: 0;
}
.fc-postinfo__platform {
  font-size: 12px; text-transform: lowercase;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-postinfo__title {
  font-weight: 600; color: rgb(var(--v-theme-on-surface));
}
.fc-postinfo__artist { color: rgb(var(--v-theme-accent)); text-decoration: none; }
.fc-postinfo__date, .fc-postinfo__count {
  font-size: 13px; color: rgb(var(--v-theme-on-surface-variant));
}
.fc-postinfo__main a { color: rgb(var(--v-theme-accent)); text-decoration: none; }
.fc-postinfo__attach {
  font-size: 13px; color: rgb(var(--v-theme-accent));
  text-decoration: none;
}
</style>
