<template>
  <q-card flat class="holidays-card card-ring">
    <div class="flex justify-between items-center no-wrap q-mb-sm">
      <div class="flex items-center q-gutter-x-sm">
        <q-icon name="mdi-calendar-star-outline" color="dark" size="sm" />
        <span class="text-subtitle1">Feriados do Mês</span>
      </div>
      <q-btn
        icon="mdi-plus"
        color="primary"
        style="width: 40px; height: 40px"
        @click="openDialog"
      />
    </div>

    <div
      v-if="currentMonthHolidays.length === 0"
      class="text-caption text-grey-5 text-center q-mt-sm"
    >
      Sem feriados para este mês.
    </div>

    <div v-else class="row q-gutter-sm q-mt-sm">
      <div
        v-for="holiday in currentMonthHolidays"
        :key="holiday.id"
        class="column items-center cursor-pointer"
        style="min-width: 52px"
        @click="openEdit(holiday)"
      >
        <q-badge
          color="deep-orange"
          class="text-subtitle1 text-bold q-pa-sm"
          style="min-width: 40px; justify-content: center"
        >
          {{ holiday.day }}
        </q-badge>
        <div class="text-caption q-mt-xs text-center">
          {{ holiday.description }}
        </div>
      </div>
    </div>
  </q-card>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useQuasar } from "quasar";
import HolidaysDialog from "src/pages/dashboard/components/HolidaysDialog.vue";
import HolidayEditDialog from "src/pages/dashboard/components/HolidayEditDialog.vue";
import { getBaseHolidays } from "src/api/holiday";

const $q = useQuasar();

const now = new Date();
const holidays = ref([]);

function toFrontend(h) {
  const [year, month, day] = h.holiday_date.split("-").map(Number);
  return { id: h.id, day, month, year, description: h.description, type: h.type };
}

async function loadHolidays() {
  try {
    const items = await getBaseHolidays();
    holidays.value = items.map(toFrontend);
  } catch {
    holidays.value = [];
  }
}

onMounted(loadHolidays);

const currentMonthHolidays = computed(() =>
  holidays.value
    .filter((h) => h.month === now.getMonth() + 1 && h.year === now.getFullYear())
    .sort((a, b) => a.day - b.day),
);

function openDialog() {
  $q.dialog({
    component: HolidaysDialog,
    componentProps: { initialHolidays: holidays.value },
  }).onOk((updated) => {
    holidays.value = updated;
  });
}

function openEdit(holiday) {
  $q.dialog({
    component: HolidayEditDialog,
    componentProps: { holiday },
  }).onOk(({ action, holiday: updated, id }) => {
    if (action === "update") {
      const idx = holidays.value.findIndex((h) => h.id === updated.id);
      if (idx !== -1) holidays.value[idx] = updated;
    } else if (action === "delete") {
      holidays.value = holidays.value.filter((h) => h.id !== id);
    }
  });
}
</script>

<style scoped>
.holidays-card {
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  max-height: 370px;
  overflow: hidden;
}
</style>
