<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";
import { t } from "../i18n/index.js";

const health = ref(null);
const loading = ref(true);
const error = ref("");

onMounted(async () => {
  try {
    health.value = await healthz();
  } catch (ex) {
    error.value = t("dashboard.errorUnavailable", { message: ex.message });
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <main class="container page">
    <GnPageHeader kicker="Synapse" :title="t('dashboard.title')" :subtitle="t('dashboard.subtitle')" />

    <GnLoader v-if="loading" circle :label="t('dashboard.loaderChecking')" />
    <GnStatusCard v-else-if="error" variant="error" icon="ph-warning-circle" :text="error" />

    <template v-else>
      <div class="metrics">
        <GnMetricCard :label="t('dashboard.metricService')" :value="health.status" icon="ph-broadcast" />
      </div>
      <!-- Навигатор для первого захода: что настроить и в каком порядке -->
      <GnStatusCard
        variant="info"
        icon="ph-info"
        :title="t('dashboard.getStartTitle')"
        :text="t('dashboard.getStartText')"
      />
    </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>