<template>
  <section class="space-y-8 p-4 md:p-8">
    <div class="rounded-[2rem] bg-gradient-to-br from-blue-600 to-slate-950 p-6 text-white shadow-soft md:p-8">
      <p class="text-sm font-semibold text-blue-100">Client Portal</p>
      <h2 class="mt-2 text-3xl font-black md:text-5xl">Today’s workforce position</h2>
      <p class="mt-3 max-w-2xl text-blue-100">Realtime attendance, late penalties, holiday work, active devices, and payroll readiness by branch.</p>
    </div>

    <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
      <MetricCard v-for="metric in metrics" :key="metric.label" v-bind="metric" />
    </div>

    <div class="grid gap-6 xl:grid-cols-2">
      <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
        <h3 class="text-xl font-black">Branch Wise Statistics</h3>
        <div class="mt-5 space-y-4">
          <div v-for="branch in branches" :key="branch.name">
            <div class="flex justify-between text-sm font-bold"><span>{{ branch.name }}</span><span>{{ branch.present }}/{{ branch.total }}</span></div>
            <div class="mt-2 h-3 rounded-full bg-slate-100"><div class="h-3 rounded-full bg-brand" :style="{ width: branch.rate + '%' }"></div></div>
          </div>
        </div>
      </div>
      <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-soft">
        <h3 class="text-xl font-black">Tomorrow Holidays</h3>
        <div class="mt-5 space-y-3">
          <p v-for="holiday in holidays" :key="holiday" class="rounded-2xl bg-slate-50 p-4 text-sm font-semibold">{{ holiday }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

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

const summary = ref({
  total_employees: 0,
  present_today: 0,
  absent_today: 0,
  late_in_today: 0,
  early_out_today: 0,
  overtime_hours_today: 0,
  active_devices: 0,
  salary_pending: 0,
});

const branchStats = ref([]);
const holidayRows = ref([]);

const metrics = computed(() => [
  { label: 'Total Employees', value: summary.value.total_employees, helper: 'Active workforce', tone: 'ok' },
  { label: 'Present Today', value: summary.value.present_today, helper: 'Synced from devices', tone: 'live' },
  { label: 'Absent Today', value: summary.value.absent_today, helper: 'Auto absent pending approval', tone: 'risk' },
  { label: 'Late In Today', value: summary.value.late_in_today, helper: 'Rule engine penalties pending', tone: 'warn' },
  { label: 'Early Out Today', value: summary.value.early_out_today, helper: 'Supervisor review required', tone: 'warn' },
  { label: 'Overtime Today', value: `${summary.value.overtime_hours_today}h`, helper: 'Including holiday OT', tone: 'ok' },
  { label: 'Active Devices', value: summary.value.active_devices, helper: 'F22, K40, UFace, iClock', tone: 'live' },
  { label: 'Salary Pending', value: summary.value.salary_pending, helper: 'Payroll draft period', tone: 'warn' },
]);

const branches = computed(() => branchStats.value.map((branch) => ({
  name: branch.branch,
  total: branch.employees,
  present: branch.present,
  rate: Math.round((branch.present / branch.employees) * 100),
})));

const holidays = computed(() => holidayRows.value.map((holiday) => `${holiday.name} - ${holiday.branch}`));

onMounted(async () => {
  try {
    const data = await getJson('/client/dashboard');
    summary.value = data.summary;
    branchStats.value = data.branch_statistics;
    holidayRows.value = data.tomorrow_holidays;
  } catch (error) {
    console.warn(error.message);
  }
});
</script>
