<template>
  <v-container class="py-6" max-width="900">
    <PostsFilterBar
      :artist-id="artistFilter"
      :platform="platformFilter"
      @update:filters="onFilters"
    />

    <v-alert v-if="store.error" type="error" variant="tonal" closable class="mb-3">
      {{ String(store.error) }}
    </v-alert>

    <div v-if="store.loading && store.items.length === 0" class="fc-posts__loading">
      <v-progress-circular indeterminate color="accent" size="36" />
    </div>

    <div v-else-if="store.items.length === 0 && store.done" class="fc-posts__empty">
      <p>No posts yet. Subscribe to a source on the
        <RouterLink to="/subscriptions">Subscriptions</RouterLink>
        tab to start capturing posts.
      </p>
    </div>

    <div v-else>
      <PostCard v-for="p in store.items" :key="p.id" :post="p" />

      <div ref="sentinel" class="fc-posts__sentinel">
        <v-progress-circular v-if="store.loading" indeterminate color="accent" size="24" />
        <span v-else-if="store.done" class="fc-posts__end">End of stream</span>
      </div>
    </div>
  </v-container>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { usePostsStore } from '../stores/posts.js'
import PostsFilterBar from '../components/posts/PostsFilterBar.vue'
import PostCard from '../components/posts/PostCard.vue'

const route = useRoute()
const router = useRouter()
const store = usePostsStore()

const artistFilter = computed(() => {
  const raw = route.query.artist_id
  return raw == null ? null : Number(raw)
})
const platformFilter = computed(() => route.query.platform || null)

const sentinel = ref(null)
let observer = null

async function reload() {
  await store.loadInitial({
    artist_id: artistFilter.value,
    platform: platformFilter.value,
  })
}

function onFilters({ artist_id, platform }) {
  const q = { ...route.query }
  if (artist_id == null) delete q.artist_id
  else q.artist_id = String(artist_id)
  if (!platform) delete q.platform
  else q.platform = platform
  router.replace({ query: q })
}

watch(() => [artistFilter.value, platformFilter.value], reload)

onMounted(async () => {
  await reload()
  observer = new IntersectionObserver((entries) => {
    if (entries.some(e => e.isIntersecting)) {
      store.loadMore()
    }
  }, { rootMargin: '400px 0px' })
  if (sentinel.value) observer.observe(sentinel.value)
})

onUnmounted(() => {
  if (observer) observer.disconnect()
})
</script>

<style scoped>
.fc-posts__loading,
.fc-posts__empty {
  display: flex;
  justify-content: center;
  padding: 2rem;
  color: rgb(var(--v-theme-on-surface-variant));
}
.fc-posts__sentinel {
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
  min-height: 2rem;
}
.fc-posts__end {
  color: rgb(var(--v-theme-on-surface-variant));
  font-size: 0.85rem;
}
</style>
