<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Client Registration Control" title="Self-registration and approval workflow" subtitle="Enable or disable client self-registration, manual approval, trial package defaults, and pending company review." action="Update Policy" />
    <div class="grid gap-4 md:grid-cols-4">
      <MetricCard v-for="(value, key) in settings" :key="key" :label="label(key)" :value="value" helper="Current setting" tone="live" />
    </div>
    <DataPanel title="Pending Client Requests" :items="pendingRequests" />
  </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 settings = ref({});
const pendingRequests = ref([]);
const label = (key) => String(key).replaceAll('_', ' ');

onMounted(async () => {
  const data = await getJson('/registration-control');
  settings.value = data.settings;
  pendingRequests.value = data.pending_requests;
});
</script>
