<template>
  <WidgetShell title="Upcoming maintenance" icon="mdi-wrench-clock" :loading="loading" :editing="editing" @refresh="load" @remove="$emit('remove')">
    <v-list density="compact" class="py-0">
      <v-list-item v-for="(a, i) in rows" :key="i" class="px-0">
        <template #prepend><v-icon :icon="a.severity === 'critical' ? 'mdi-alert' : 'mdi-clock-outline'" :color="a.severity === 'critical' ? 'error' : 'warning'" size="small" /></template>
        <v-list-item-title class="text-body-2">{{ a.title }}</v-list-item-title>
        <v-list-item-subtitle class="text-caption">due {{ a.due_date || '—' }}</v-list-item-subtitle>
      </v-list-item>
      <v-list-item v-if="!rows.length && !loading"><span class="quiet text-body-2">No upcoming maintenance.</span></v-list-item>
    </v-list>
  </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, rows: [] }; },
  mounted() { this.load(); },
  methods: {
    async load() {
      this.loading = true;
      try {
        const alerts = (await (await apiRequest('/api/alerts?status=open', this.token)).json()).alerts || [];
        this.rows = alerts
          .filter((a) => /mainten|pm|service/i.test(a.type || ''))
          .sort((a, b) => String(a.due_date || '').localeCompare(String(b.due_date || '')))
          .slice(0, 5);
      } catch { this.rows = []; } finally { this.loading = false; }
    }
  }
};
</script>
