<template>
  <section class="space-y-6 p-4 md:p-8">
    <ModuleHeader eyebrow="Shift & Schedule" title="Shifts, rosters and auto detection" subtitle="Fixed, rotational, night, flexible shifts with grace time, weekly off, roster scheduling, and auto shift detection." action="Create Roster" />
    <div class="grid gap-4 md:grid-cols-3">
      <MetricCard label="Shifts" :value="shifts.length" helper="Configured shift rules" tone="live" />
      <MetricCard label="Rosters" :value="rosters.length" helper="Active schedules" tone="ok" />
      <MetricCard label="Auto Detection" :value="autoShiftDetection ? 'On' : 'Off'" helper="Punch based shift match" tone="warn" />
    </div>
    <div class="grid gap-6 xl:grid-cols-2">
      <DataPanel title="Shift Rules" :items="shifts" />
      <DataPanel title="Roster Schedule" :items="rosters" />
    </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 shifts = ref([]);
const rosters = ref([]);
const autoShiftDetection = ref(false);

onMounted(async () => {
  const data = await getJson('/schedules');
  shifts.value = data.shifts;
  rosters.value = data.rosters;
  autoShiftDetection.value = data.auto_shift_detection;
});
</script>
