<script setup>
import { ref, onMounted } from "vue";
import Button from "primevue/button";
import { fetchReportsSummary } from "../composables/useHoursApi.js";
import strings from "../strings.js";

const fromIso = ref("");
const toIso = ref("");
const payload = ref(null);

onMounted(() => {
  const t = new Date();
  const f = new Date(Date.now() - 90 * 86400000);
  fromIso.value = f.toISOString().slice(0, 10);
  toIso.value = t.toISOString().slice(0, 10);
  load();
});

async function load() {
  payload.value = await fetchReportsSummary({
    from: fromIso.value,
    to: toIso.value,
    group: "month",
  });
}
</script>
<template>
  <div class="p-4">
    <h1 class="text-2xl font-semibold mb-4">{{ strings.reportsTitle }}</h1>
    <div class="flex flex-wrap gap-3 mb-4 items-center">
      <label class="flex items-center gap-2">
        <span class="text-sm">From</span>
        <input v-model="fromIso" type="date" class="p-inputtext p-component" />
      </label>
      <label class="flex items-center gap-2">
        <span class="text-sm">To</span>
        <input v-model="toIso" type="date" class="p-inputtext p-component" />
      </label>
      <Button type="button" label="Run" icon="pi pi-refresh" @click="load" />
    </div>
    <pre v-if="payload" class="surface-card p-4 border-round overflow-auto max-h-[32rem]">{{ JSON.stringify(payload, null, 2) }}</pre>
  </div>
</template>
