<template>
  <WidgetShell title="System status" icon="mdi-heart-pulse" :loading="loading" :editing="editing" @refresh="load" @remove="$emit('remove')">
    <div class="status-row">
      <v-icon :icon="ok ? 'mdi-check-circle' : 'mdi-alert-circle'" :color="ok ? 'success' : 'error'" />
      <span class="font-weight-medium">{{ ok ? 'All systems operational' : 'Service unreachable' }}</span>
    </div>
    <table class="kv mt-2">
      <tr><td>Application</td><td>{{ health.app || '—' }}</td></tr>
      <tr><td>API</td><td><v-chip size="x-small" :color="ok ? 'success' : 'error'" variant="tonal">{{ ok ? 'online' : 'offline' }}</v-chip></td></tr>
      <tr><td>Database</td><td class="mono text-truncate">{{ dbName }}</td></tr>
      <tr><td>Checked</td><td>{{ checkedAt }}</td></tr>
    </table>
  </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, ok: false, health: {}, checkedAt: '' }; },
  computed: { dbName() { return this.health.database ? String(this.health.database).split('/').pop() : '—'; } },
  mounted() { this.load(); },
  methods: {
    async load() {
      this.loading = true;
      try { this.health = await (await apiRequest('/api/health', this.token)).json(); this.ok = Boolean(this.health.ok); }
      catch { this.ok = false; this.health = {}; }
      finally { this.loading = false; this.checkedAt = new Date().toLocaleTimeString(); }
    }
  }
};
</script>
<style scoped>
.status-row { display: flex; align-items: center; gap: 8px; }
.kv { width: 100%; font-size: .82rem; }
.kv td { padding: 3px 0; }
.kv td:first-child { opacity: .6; width: 38%; }
.mono { font-family: monospace; font-size: .78rem; }
</style>
