<script setup>
// Обзор: состояние сервиса. Профиль и выход живут в каркасе (App.vue, #footer),
// heartbeat сессии — тоже там; здесь только healthz.
import { onMounted, ref } from "vue";
import { GnLoader, GnMetricCard, GnPageHeader, GnStatusCard } from "gnexus-ui-kit/vue";
import { healthz } from "../api.js";

const health = ref(null);
const error = ref(true); // пока не загружено — показать лоадер, не ошибку

onMounted(async () => {
  try {
    health.value = await healthz();
    error.value = false;
  } catch (ex) {
    error.value = `Сервис недоступен: ${ex.message}`;
  }
});
</script>

<template>
  <main class="container page">
    <GnPageHeader kicker="Synapse" title="Обзор" subtitle="Состояние хаба уведомлений" />

    <GnLoader v-if="error === true" />
    <GnStatusCard v-else-if="typeof error === 'string'" variant="error" icon="ph-warning-circle" :text="error" />

    <template v-else>
      <div class="metrics">
        <GnMetricCard label="Сервис" :value="health.status" icon="ph-broadcast" />
      </div>
      <GnStatusCard
        variant="info"
        icon="ph-info"
        title="Каркас"
        text="Дальше: схема БД (#34), API событий (#32), Ingestion (#31), Routing Engine (#30), доставки (#29, #28)."
      />
    </template>
  </main>
</template>

<style scoped>
/* Максимум 1440 по требованию макета; ниже — обычный поток. */
.page {
  max-width: 1440px;
  margin-inline: auto;
  padding-block: var(--gn-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gn-space-4);
}
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gn-space-4);
}
</style>