<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Live Monitoring" title="Realtime SaaS operations" subtitle="Online devices, online clients, live attendance logs, active employees, and realtime attendance statistics." action="Open Wallboard" />
    <div class="grid gap-4 md:grid-cols-4">
      <MetricCard label="Online Clients" :value="summary.online_clients" helper="Active tenants" tone="ok" />
      <MetricCard label="Online Devices" :value="summary.online_devices" helper="Connected terminals" tone="live" />
      <MetricCard label="Logs Today" :value="summary.live_logs_today" helper="Attendance events" tone="live" />
      <MetricCard label="Active Employees" :value="summary.active_employees" helper="Present workforce" tone="ok" />
    </div>
    <div class="grid gap-6 xl:grid-cols-2">
      <DataPanel title="Device Status" :items="deviceStatus" />
      <DataPanel title="Realtime Events" :items="events" />
    </div>
  </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 deviceStatus = ref([]);
const events = ref([]);

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