<template>
  <section class="space-y-6 p-4 md:p-8">
    <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
      <div>
        <p class="text-sm font-bold uppercase tracking-[0.2em] text-brand">Reports</p>
        <h2 class="mt-2 text-3xl font-black">Export center</h2>
        <p class="mt-1 text-slate-500">Attendance and payroll reports with PDF, Excel, and CSV export targets.</p>
      </div>
      <div class="flex gap-2">
        <button v-for="format in exports" :key="format" class="rounded-2xl bg-white px-4 py-3 text-sm font-bold shadow-sm">{{ format.toUpperCase() }}</button>
      </div>
    </div>

    <div class="grid gap-6 xl:grid-cols-2">
      <ReportList title="Attendance Reports" :items="attendanceReports" value-key="rows" />
      <ReportList title="Payroll Reports" :items="payrollReports" value-key="amount" money />
    </div>
  </section>
</template>

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

const exports = ref([]);
const attendanceReports = ref([]);
const payrollReports = ref([]);

onMounted(async () => {
  try {
    const data = await getJson('/reports');
    exports.value = data.exports;
    attendanceReports.value = data.attendance_reports;
    payrollReports.value = data.payroll_reports;
  } catch (error) {
    console.warn(error.message);
  }
});
</script>
