<template>
  <section class="space-y-8 p-4 md:p-8">
    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <MetricCard label="Online Clients" :value="dashboard.clients.active" helper="Active tenants across packages" tone="ok" />
      <MetricCard label="Online Devices" :value="dashboard.devices.online" helper="ZKTeco terminals reporting" tone="live" />
      <MetricCard label="Active Employees" :value="dashboard.live_attendance.present_employees" helper="Across all companies" tone="ok" />
      <MetricCard label="Renewal Risk" :value="dashboard.subscriptions.renewals_next_7_days" helper="Subscriptions expiring soon" tone="warn" />
    </div>

    <div class="grid gap-6 xl:grid-cols-[1.4fr_0.8fr]">
      <div class="rounded-3xl bg-ink p-6 text-white shadow-soft">
        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
          <div>
            <p class="text-sm font-semibold text-blue-200">Global SaaS Monitoring</p>
            <h3 class="mt-2 text-3xl font-black">Live attendance stream</h3>
          </div>
          <button class="rounded-2xl bg-white px-4 py-3 text-sm font-bold text-ink">Export Logs</button>
        </div>
        <div class="mt-6 grid gap-3">
          <div v-for="log in logs" :key="log.id" class="rounded-2xl bg-white/10 p-4 backdrop-blur">
            <div class="flex items-center justify-between gap-4">
              <p class="font-bold">{{ log.company }}</p>
              <span class="text-sm text-blue-100">{{ log.time }}</span>
            </div>
            <p class="mt-1 text-sm text-slate-300">{{ log.message }}</p>
          </div>
        </div>
      </div>

      <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
        <h3 class="text-xl font-black">Package Controls</h3>
        <div class="mt-5 space-y-4">
          <div v-for="pkg in packages" :key="pkg.name" class="rounded-2xl border border-slate-100 p-4">
            <div class="flex items-center justify-between">
              <p class="font-bold">{{ pkg.name }}</p>
              <span class="text-sm font-bold text-brand">{{ pkg.clients }} clients</span>
            </div>
            <p class="mt-2 text-sm text-slate-500">{{ pkg.features }}</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

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

const dashboard = ref({
  clients: { active: 0 },
  subscriptions: { renewals_next_7_days: 0 },
  devices: { online: 0 },
  live_attendance: { present_employees: 0 },
});

const logs = [
  { id: 1, company: 'Demo Manufacturing Ltd', time: '09:02 AM', message: 'F22 device pushed 183 new attendance logs.' },
  { id: 2, company: 'North Textile Group', time: '09:05 AM', message: 'Payroll approval queue completed for April.' },
  { id: 3, company: 'Prime Foods', time: '09:08 AM', message: 'Device K40-BR-14 is back online.' },
];

const packages = [
  { name: 'Trial', clients: 24, features: 'Attendance, Leave, 1 branch, 1 device' },
  { name: 'Business', clients: 71, features: 'Payroll, shifts, reports, 20 branches' },
  { name: 'Enterprise', clients: 33, features: 'All modules, API, face, GPS, unlimited rules' },
];

onMounted(async () => {
  try {
    dashboard.value = await getJson('/super-admin/dashboard');
  } catch (error) {
    console.warn(error.message);
  }
});
</script>
