<template>
  <v-card class="fc-activity-summary">
    <v-card-title class="d-flex align-center" style="gap: 10px;">
      <v-icon icon="mdi-pulse" size="small" />
      <span>System activity (last min)</span>
      <v-spacer />
      <v-btn
        variant="text" size="small" rounded="pill"
        @click="$emit('open-activity')"
      >
        View activity
        <v-icon end size="small">mdi-arrow-right</v-icon>
      </v-btn>
    </v-card-title>

    <v-card-text>
      <v-alert
        v-if="store.lastError"
        type="warning" variant="tonal" density="compact" class="mb-3"
      >
        {{ store.lastError }}
      </v-alert>

      <QueuesTable
        :queues="store.queues"
        :workers="store.workers"
        :recent-runs="store.recentRuns"
        compact
      />
    </v-card-text>
  </v-card>
</template>

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

import { useSystemActivityStore } from '../../stores/systemActivity.js'
import QueuesTable from './QueuesTable.vue'

defineEmits(['open-activity'])

const store = useSystemActivityStore()

let pollId = null

function pollOnce() {
  if (document.hidden) return
  store.loadQueues()
  store.loadWorkers()
  store.loadRecentRuns()
}

onMounted(() => {
  pollOnce()
  pollId = setInterval(pollOnce, 5000)
})
onUnmounted(() => {
  if (pollId) { clearInterval(pollId); pollId = null }
})
</script>

<style scoped>
.fc-activity-summary { border-radius: 8px; }
</style>
