<template>
  <div class="space-y-6">
    <h1 class="text-2xl font-bold text-slate-900">Billing History</h1>
    <div class="bg-white rounded-xl overflow-hidden" style="box-shadow:0 2px 8px #0000000A">
      <div v-if="loading" class="p-8 text-center text-sm text-slate-400 animate-pulse">Loading…</div>
      <div v-else-if="invoices.length === 0" class="p-12 text-center text-slate-400">No invoices yet</div>
      <table v-else class="w-full text-sm">
        <thead class="bg-slate-50 border-b border-slate-100">
          <tr class="text-left text-xs text-slate-500 font-semibold uppercase tracking-wide">
            <th class="px-5 py-3">Invoice #</th>
            <th class="px-5 py-3">Period</th>
            <th class="px-5 py-3">Amount</th>
            <th class="px-5 py-3">Status</th>
            <th class="px-5 py-3">Due Date</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-50">
          <tr v-for="inv in invoices" :key="inv.id" class="hover:bg-slate-50">
            <td class="px-5 py-3 font-mono text-xs font-semibold">{{ inv.invoice_number }}</td>
            <td class="px-5 py-3 text-xs text-slate-500">{{ inv.billing_period_start }} — {{ inv.billing_period_end }}</td>
            <td class="px-5 py-3 font-semibold">PHP {{ Number(inv.total_amount).toLocaleString() }}</td>
            <td class="px-5 py-3"><StatusBadge :status="inv.status" /></td>
            <td class="px-5 py-3 text-xs text-slate-500">{{ inv.due_date || '—' }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getInvoices } from '@/lib/api'
import StatusBadge from '@/components/ui/StatusBadge.vue'
const invoices = ref<any[]>([])
const loading = ref(true)
onMounted(async () => { try { const r = await getInvoices(); invoices.value = r.items } finally { loading.value = false } })
</script>
