<template>
  <section class="space-y-6 p-4 md:p-8">
    <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
      <p class="text-sm font-bold uppercase tracking-[0.2em] text-brand">Payroll Engine</p>
      <h2 class="mt-2 text-3xl font-black">Salary generation pipeline</h2>
      <p class="mt-2 text-slate-500">Attendance, leave, loans, advance salary, late penalties, overtime, and tax deductions feed into locked payslips.</p>
    </div>
    <div class="grid gap-4 md:grid-cols-3">
      <MetricCard label="Gross Payroll" :value="money(payroll.gross_salary)" helper="Current draft period" tone="live" />
      <MetricCard label="Deductions" :value="money(totalDeductions)" helper="Late, loan, tax, PF" tone="warn" />
      <MetricCard label="Net Payable" :value="money(payroll.net_salary)" helper="Pending approval" tone="ok" />
    </div>
    <div class="rounded-3xl bg-white p-6 shadow-soft">
      <h3 class="text-xl font-black">Approval Workflow</h3>
      <div class="mt-5 grid gap-4 md:grid-cols-4">
        <div v-for="step in steps" :key="step" class="rounded-2xl bg-slate-50 p-4 text-sm font-bold">{{ step }}</div>
      </div>
    </div>
  </section>
</template>

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

const steps = ['Calculate Attendance', 'Apply Rules', 'HR Review', 'Finance Lock'];
const payroll = ref({ gross_salary: 0, net_salary: 0, deductions: { standard: 0, late_penalty: 0 } });
const totalDeductions = computed(() => Object.values(payroll.value.deductions || {}).reduce((sum, value) => sum + Number(value), 0));
const money = (value) => `BDT ${Number(value || 0).toLocaleString()}`;

onMounted(async () => {
  try {
    payroll.value = await postJson('/payroll/preview', { period: '2026-05' });
  } catch (error) {
    console.warn(error.message);
  }
});
</script>
