<script setup>
import { onMounted, ref } from "vue";
import { GnMetricCard, GnStatusCard, GnLoader } from "gnexus-ui-kit/vue";
import { adminMe, healthz } from "../api.js";

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

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

<template>
  <div class="dash">
    <h2 class="page-title">Обзор</h2>

    <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" />
        <GnMetricCard label="Вы вошли как" :value="me.email || me.sub" icon="ph-user" :meta="me.system_role" />
      </div>
      <GnStatusCard
        variant="info"
        icon="ph-info"
        title="Каркас"
        text="Дальше: схема БД (#34), API событий (#32), Ingestion (#31), Routing Engine (#30), доставки (#29, #28)."
      />
    </template>
  </div>
</template>

<style scoped>
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gn-space-4);
}
.page-title {
  font-size: var(--gn-font-size-lg);
  font-weight: var(--gn-font-weight-bold);
  text-transform: uppercase;
  margin-bottom: var(--gn-space-4);
}
</style>