<template>
  <div class="fc-qbar" :class="`fc-qbar--${state}`" :title="hint">
    <v-icon size="14" class="fc-qbar__icon">{{ icon }}</v-icon>
    <span>{{ label }}</span>
  </div>
</template>

<script setup>
import { computed } from 'vue'

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

const props = defineProps({
  // Celery queue these buttons feed (see celery_app.task_routes).
  queue: { type: String, required: true },
  queueLabel: { type: String, default: '' },
})

const store = useSystemActivityStore()

// Redis LLEN per queue from /api/system/activity/queues; null when the
// broker read failed or hasn't loaded yet.
const depth = computed(() => {
  const q = store.queues?.queues
  return q ? (q[props.queue] ?? null) : null
})
const state = computed(() => {
  if (depth.value == null) return 'unknown'
  return depth.value > 0 ? 'busy' : 'idle'
})
const icon = computed(() => ({
  busy: 'mdi-progress-clock',
  idle: 'mdi-check-circle-outline',
  unknown: 'mdi-help-circle-outline',
}[state.value]))
const qname = computed(() => props.queueLabel || props.queue)
const label = computed(() => {
  if (depth.value == null) return `${qname.value} queue · status unavailable`
  if (depth.value === 0) return `${qname.value} queue idle — nothing pending`
  return `${depth.value} pending in the ${qname.value} queue`
})
const hint = computed(() =>
  state.value === 'busy'
    ? `The ${qname.value} queue already has ${depth.value} task(s) waiting — running again now just adds to that backlog.`
    : '',
)
</script>

<style scoped>
.fc-qbar {
  display: flex; align-items: center; gap: 6px;
  margin-top: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.fc-qbar__icon { flex: 0 0 auto; }
.fc-qbar--idle,
.fc-qbar--unknown {
  color: rgb(var(--v-theme-on-surface-variant));
  background: rgb(var(--v-theme-on-surface) / 0.04);
}
.fc-qbar--busy {
  color: rgb(var(--v-theme-warning));
  background: rgb(var(--v-theme-warning) / 0.12);
  font-weight: 600;
}
</style>
