<script setup lang="ts">
const pushApi = usePushApi();
const toast = useToast();

const { data, pending, refresh, error } = await useAsyncData("summary", () => pushApi.request<{
  instances: number;
  devices: number;
  jobs: number;
  failedJobs: number;
}>("/admin/summary"), { immediate: false });

onMounted(async () => {
  pushApi.hydrateToken();
  if (pushApi.token.value) await refresh();
});

watch(error, (nextError) => {
  if (nextError) toast.add({ title: "Dashboard konnte nicht geladen werden", color: "error" });
});
</script>

<template>
  <AdminShell>
    <TokenGate>
      <div class="space-y-6">
        <div class="flex items-center justify-between">
          <div>
            <h2 class="text-2xl font-bold text-gray-950">Übersicht</h2>
            <p class="text-sm text-gray-500">Technischer Zustand des zentralen Push-Gateways.</p>
          </div>
          <UButton icon="i-lucide-refresh-cw" variant="soft" :loading="pending" @click="refresh()">Aktualisieren</UButton>
        </div>

        <div class="grid gap-4 md:grid-cols-4">
          <UCard>
            <p class="text-sm text-gray-500">Instanzen</p>
            <p class="mt-2 text-3xl font-bold">{{ data?.instances ?? 0 }}</p>
          </UCard>
          <UCard>
            <p class="text-sm text-gray-500">Geräte</p>
            <p class="mt-2 text-3xl font-bold">{{ data?.devices ?? 0 }}</p>
          </UCard>
          <UCard>
            <p class="text-sm text-gray-500">Jobs</p>
            <p class="mt-2 text-3xl font-bold">{{ data?.jobs ?? 0 }}</p>
          </UCard>
          <UCard>
            <p class="text-sm text-gray-500">Fehler</p>
            <p class="mt-2 text-3xl font-bold text-red-600">{{ data?.failedJobs ?? 0 }}</p>
          </UCard>
        </div>
      </div>
    </TokenGate>
  </AdminShell>
</template>
