<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Super Admin" title="Client management" subtitle="Create, edit, suspend, approve, assign packages, and control limits for each SaaS company." action="Create Client" />
    <div class="grid gap-4 md:grid-cols-4">
      <MetricCard label="Total Clients" :value="summary.total" helper="All companies" tone="live" />
      <MetricCard label="Active" :value="summary.active" helper="Billable tenants" tone="ok" />
      <MetricCard label="Trial" :value="summary.trial" helper="Trial companies" tone="warn" />
      <MetricCard label="Suspended" :value="summary.suspended" helper="Blocked access" tone="risk" />
    </div>
    <DataPanel title="Client Directory" :items="clients" />
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import DataPanel from '../components/DataPanel.vue';
import MetricCard from '../components/MetricCard.vue';
import ModuleHeader from '../components/ModuleHeader.vue';
import { getJson } from '../services/api.js';

const summary = ref({});
const clients = ref([]);

onMounted(async () => {
  const data = await getJson('/clients');
  summary.value = data.summary;
  clients.value = data.clients;
});
</script>
