<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="SaaS Billing" title="Package and module access" subtitle="Monthly/yearly pricing, trial support, feature-based module access, and tenant usage limits." action="Create Package" />
    <div class="grid gap-4 xl:grid-cols-3">
      <article v-for="pkg in packages" :key="pkg.name" class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-black">{{ pkg.name }}</h3>
          <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-bold uppercase text-emerald-700">{{ pkg.status }}</span>
        </div>
        <p class="mt-4 text-4xl font-black">${{ pkg.monthly }}<span class="text-base font-semibold text-slate-400">/mo</span></p>
        <div class="mt-5 grid gap-3 text-sm">
          <p><strong>{{ pkg.employees }}</strong> employees</p>
          <p><strong>{{ pkg.branches }}</strong> branches</p>
          <p><strong>{{ pkg.devices }}</strong> devices</p>
          <p><strong>{{ pkg.features }}</strong> enabled modules</p>
        </div>
      </article>
    </div>
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
      <h3 class="text-xl font-black">Global Modules</h3>
      <div class="mt-5 flex flex-wrap gap-2">
        <span v-for="module in modules" :key="module" class="rounded-full bg-slate-100 px-3 py-2 text-xs font-bold">{{ module }}</span>
      </div>
    </div>
  </section>
</template>

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

const packages = ref([]);
const modules = ref([]);

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