<template>
  <WidgetShell title="Alerts" icon="mdi-bell-alert-outline" :loading="loading" :editing="editing" @refresh="load" @remove="$emit('remove')">
    <div class="stat-grid">
      <div class="stat crit"><div class="val">{{ critical }}</div><div class="lbl">Critical</div></div>
      <div class="stat warn"><div class="val">{{ warning }}</div><div class="lbl">Warning</div></div>
      <div class="stat"><div class="val">{{ total }}</div><div class="lbl">Open total</div></div>
    </div>
    <div v-if="!total && !loading" class="quiet text-caption mt-2">No open alerts.</div>
  </WidgetShell>
</template>
<script>
import WidgetShell from './WidgetShell.vue';
import { apiRequest } from '../../services/api';
export default {
  components: { WidgetShell },
  props: { token: { type: String, required: true }, editing: { type: Boolean, default: false }, config: { type: Object, default: () => ({}) } },
  emits: ['remove'],
  data() { return { loading: false, critical: 0, warning: 0, total: 0 }; },
  mounted() { this.load(); },
  methods: {
    async load() {
      this.loading = true;
      try {
        const alerts = (await (await apiRequest('/api/alerts?status=open', this.token)).json()).alerts || [];
        this.critical = alerts.filter((a) => a.severity === 'critical').length;
        this.warning = alerts.filter((a) => a.severity === 'warning').length;
        this.total = alerts.length;
      } catch { this.critical = this.warning = this.total = 0; } finally { this.loading = false; }
    }
  }
};
</script>
<style scoped>
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { border: 1px solid rgba(128,128,128,.18); border-radius: 8px; padding: 10px; text-align: center; }
.stat.crit { border-color: rgba(176,0,32,.5); }
.stat.warn { border-color: rgba(178,107,0,.5); }
.val { font-size: 1.6rem; font-weight: 700; }
.lbl { font-size: .72rem; opacity: .65; text-transform: uppercase; }
</style>
