<template>
  <v-card class="mb-4">
    <CardHeading icon="mdi-download" title="Downloads (last 24h)">
      <v-spacer />
      <v-btn
        variant="text" size="small" rounded="pill"
        to="/subscriptions?tab=downloads"
      >
        Open subscriptions
        <v-icon end size="small">mdi-arrow-right</v-icon>
      </v-btn>
    </CardHeading>
    <v-card-text>
      <div class="d-flex align-center flex-wrap mb-2" style="gap: 8px">
        <v-chip size="small" variant="tonal" color="success">
          {{ stats.ok }} ok
        </v-chip>
        <v-chip
          size="small" variant="tonal"
          :color="stats.error ? 'error' : undefined"
        >
          {{ stats.error }} failed
        </v-chip>
        <v-chip v-if="stats.running" size="small" variant="tonal" color="accent">
          {{ stats.running }} running
        </v-chip>
        <v-chip v-if="stats.pending" size="small" variant="tonal">
          {{ stats.pending }} pending
        </v-chip>
        <v-chip v-if="stats.skipped" size="small" variant="tonal">
          {{ stats.skipped }} skipped
        </v-chip>
      </div>
      <p v-if="!failing.length" class="fc-muted text-body-2 mb-0">
        All subscription sources healthy.
      </p>
      <p v-else class="text-body-2 mb-0">
        <b class="fc-weak">{{ failing.length }}</b> failing source(s):
        <span class="fc-muted">{{ failingNames }}</span>
      </p>
    </v-card-text>
  </v-card>
</template>

<script setup>
import { computed, onMounted, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'

import CardHeading from '../common/CardHeading.vue'
import { useDownloadsStore } from '../../stores/downloads.js'

const store = useDownloadsStore()
const { stats, failing } = storeToRefs(store)
let pollId = null

const failingNames = computed(() => {
  const names = failing.value.map((s) => s.artist_name || s.url).slice(0, 3)
  const extra = failing.value.length - names.length
  return names.join(', ') + (extra > 0 ? ` +${extra} more` : '')
})

function poll() {
  store.loadStats(24)
  store.loadFailing()
}

onMounted(() => {
  poll()
  pollId = setInterval(() => { if (!document.hidden) poll() }, 30000)
})
onUnmounted(() => { if (pollId) clearInterval(pollId) })
</script>

<style scoped>
</style>
