<template>
  <WidgetShell title="Recent activity" icon="mdi-history" :loading="loading" :editing="editing" @refresh="load" @remove="$emit('remove')">
    <v-list density="compact" class="py-0">
      <v-list-item v-for="log in rows" :key="log.id" class="px-0">
        <template #prepend><v-icon icon="mdi-circle-small" /></template>
        <v-list-item-title class="text-body-2">{{ log.action }} {{ log.entity_type }}</v-list-item-title>
        <v-list-item-subtitle class="text-caption">{{ log.actor_name || 'System' }} · {{ shortDate(log.created_at) }}</v-list-item-subtitle>
      </v-list-item>
      <v-list-item v-if="!rows.length && !loading"><span class="quiet text-body-2">No recent activity.</span></v-list-item>
    </v-list>
  </WidgetShell>
</template>
<script>
import WidgetShell from './WidgetShell.vue';
import { apiRequest } from '../../services/api';
import { shortDate } from '../../utils/format';
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: {
    shortDate,
    async load() {
      this.loading = true;
      try { this.rows = (await (await apiRequest('/api/dashboard', this.token)).json()).auditTrail; }
      catch { this.rows = []; } finally { this.loading = false; }
    }
  }
};
</script>
