<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Subscription & Billing" title="Invoices, payments and renewals" subtitle="Subscription lifecycle, invoice generation, payment history, due reminders, and renewal notifications." action="Generate Invoice" />
    <div class="grid gap-4 md:grid-cols-4">
      <MetricCard label="MRR" :value="money(summary.monthly_recurring_revenue)" helper="Monthly recurring revenue" tone="ok" />
      <MetricCard label="Outstanding" :value="money(summary.outstanding_due)" helper="Due invoices" tone="warn" />
      <MetricCard label="Paid" :value="money(summary.paid_this_month)" helper="This month" tone="live" />
      <MetricCard label="Renewals" :value="summary.renewals_next_7_days" helper="Next 7 days" tone="risk" />
    </div>
    <div class="grid gap-6 xl:grid-cols-2">
      <DataPanel title="Invoices" :items="invoices" />
      <DataPanel title="Payment History" :items="payments" />
    </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 invoices = ref([]);
const payments = ref([]);
const money = (value) => `BDT ${Number(value || 0).toLocaleString()}`;

onMounted(async () => {
  const data = await getJson('/billing');
  summary.value = data.summary;
  invoices.value = data.invoices.map((row) => ({ ...row, amount: money(row.amount) }));
  payments.value = data.payments.map((row) => ({ ...row, amount: money(row.amount) }));
});
</script>
