<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin feriados-dialog">
      <template v-if="view === 'calendar'">
        <DefaultDialogHeader title="Feriados" @close="onClose" />

        <q-card-section class="row q-col-gutter-md q-pt-none">
          <div class="col-12 col-sm-7">
            <div class="row items-center justify-between q-mb-md">
              <q-btn
                flat
                round
                dense
                icon="mdi-chevron-left"
                color="grey-7"
                @click="prevMonth"
              />
              <div class="row items-center q-gutter-xs">
                <q-select
                  v-model="currentMonth"
                  :options="monthOptions"
                  emit-value
                  map-options
                  dense
                  outlined
                  style="min-width: 100px"
                />
                <q-select
                  v-model="currentYear"
                  :options="yearOptions"
                  emit-value
                  map-options
                  dense
                  outlined
                  style="min-width: 80px"
                />
              </div>
              <q-btn
                flat
                round
                dense
                icon="mdi-chevron-right"
                color="grey-7"
                @click="nextMonth"
              />
            </div>

            <div class="calendar-grid q-mb-xs">
              <div
                v-for="day in weekDays"
                :key="day"
                class="cal-header text-caption text-grey-6 text-center text-weight-medium"
              >
                {{ day }}
              </div>
            </div>

            <div class="calendar-grid">
              <div
                v-for="(cell, index) in calendarCells"
                :key="index"
                class="cal-cell"
                :class="{
                  'cal-cell--empty': !cell.day,
                  'cal-cell--holiday': cell.isHoliday,
                }"
                @click="cell.day && !cell.isHoliday && openNewRecord(cell.day)"
              >
                <span v-if="cell.day" class="cal-cell__number">{{ cell.day }}</span>
              </div>
            </div>
          </div>

          <div class="col-12 col-sm-5">
            <div class="text-subtitle2 q-mb-sm">Resumo</div>
            <q-separator class="q-mb-sm" />

            <div
              v-if="monthHolidays.length === 0"
              class="text-caption text-grey-5 text-center q-mt-lg q-px-sm"
            >
              Clique em um dia no calendário para adicionar um registro.
            </div>

            <q-list v-else separator>
              <q-item
                v-for="holiday in monthHolidays"
                :key="holiday.id"
                class="q-pa-sm cursor-pointer"
                clickable
                @click="openEdit(holiday)"
              >
                <q-item-section avatar>
                  <q-avatar
                    size="36px"
                    color="deep-orange"
                    text-color="white"
                    class="text-weight-bold"
                  >
                    {{ holiday.day }}
                  </q-avatar>
                </q-item-section>
                <q-item-section>
                  <q-item-label class="text-body2">{{ holiday.description }}</q-item-label>
                  <q-item-label caption>{{ typeLabel(holiday.type) }}</q-item-label>
                </q-item-section>
                <q-item-section side>
                  <q-icon name="mdi-pencil-outline" color="grey-5" size="xs" />
                </q-item-section>
              </q-item>
            </q-list>

            <div
              v-if="monthHolidays.length > 0"
              class="text-caption text-grey-5 text-center q-mt-md q-px-sm"
            >
              Clique em um dia no calendário para adicionar um registro.
            </div>
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn outline color="primary" label="FECHAR" no-caps @click="onClose" />
        </q-card-actions>
      </template>

      <template v-else>
        <DefaultDialogHeader
          :title="`Novo Registro: ${formattedSelectedDate}`"
          @close="cancelNewRecord"
        />

        <q-card-section class="column q-gutter-md q-pt-sm">
          <DefaultInput
            v-model="newDescription"
            label="Nome do Evento"
            placeholder="Ex: Ponto facultativo, Natal..."
            icon="mdi-pencil-outline"
            outlined
            autofocus
          />

          <DefaultSelect
            v-model="newType"
            label="Selecione o Tipo."
            :options="typeOptions"
            emit-value
            map-options
            outlined
          />
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn outline color="primary" label="CANCELAR" no-caps @click="cancelNewRecord" />
          <q-btn
            unelevated
            color="primary"
            label="SALVAR"
            no-caps
            :disable="!newDescription.trim()"
            :loading="saving"
            @click="saveNewRecord"
          />
        </q-card-actions>
      </template>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { ref, computed } from "vue";
import { useDialogPluginComponent, useQuasar } from "quasar";
import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
import { createBaseHoliday } from "src/api/holiday";
import HolidayEditDialog from "src/pages/dashboard/components/HolidayEditDialog.vue";

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK } = useDialogPluginComponent();
const $q = useQuasar();

const now = new Date();
const currentMonth = ref(now.getMonth() + 1);
const currentYear = ref(now.getFullYear());

const view = ref("calendar");
const selectedDay = ref(null);
const newDescription = ref("");
const newType = ref("feriado");
const saving = ref(false);

const props = defineProps({
  initialHolidays: {
    type: Array,
    default: () => [],
  },
});

const holidays = ref([...props.initialHolidays]);

const weekDays = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];

const monthOptions = [
  { label: "Jan", value: 1 },
  { label: "Fev", value: 2 },
  { label: "Mar", value: 3 },
  { label: "Abr", value: 4 },
  { label: "Mai", value: 5 },
  { label: "Jun", value: 6 },
  { label: "Jul", value: 7 },
  { label: "Ago", value: 8 },
  { label: "Set", value: 9 },
  { label: "Out", value: 10 },
  { label: "Nov", value: 11 },
  { label: "Dez", value: 12 },
];

const typeOptions = [
  { label: "Feriado", value: "feriado" },
  { label: "Ponto Facultativo", value: "facultativo" },
];

const yearOptions = computed(() => {
  const base = now.getFullYear();
  return Array.from({ length: 7 }, (_, i) => {
    const y = base - 2 + i;
    return { label: String(y), value: y };
  });
});

const monthHolidays = computed(() =>
  holidays.value
    .filter((h) => h.month === currentMonth.value && h.year === currentYear.value)
    .sort((a, b) => a.day - b.day),
);

const calendarCells = computed(() => {
  const year = currentYear.value;
  const month = currentMonth.value;
  const firstDay = new Date(year, month - 1, 1).getDay();
  const daysInMonth = new Date(year, month, 0).getDate();
  const holidayDays = new Set(monthHolidays.value.map((h) => h.day));

  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push({ day: null, isHoliday: false });
  for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, isHoliday: holidayDays.has(d) });
  return cells;
});

const formattedSelectedDate = computed(() => {
  if (!selectedDay.value) return "";
  const dd = String(selectedDay.value).padStart(2, "0");
  const mm = String(currentMonth.value).padStart(2, "0");
  return `${dd}/${mm}/${currentYear.value}`;
});

function typeLabel(type) {
  return type === "facultativo" ? "Ponto Facultativo" : "Feriado";
}

function prevMonth() {
  if (currentMonth.value === 1) {
    currentMonth.value = 12;
    currentYear.value -= 1;
  } else {
    currentMonth.value -= 1;
  }
}

function nextMonth() {
  if (currentMonth.value === 12) {
    currentMonth.value = 1;
    currentYear.value += 1;
  } else {
    currentMonth.value += 1;
  }
}

function openNewRecord(day) {
  selectedDay.value = day;
  newDescription.value = "";
  newType.value = "feriado";
  view.value = "new-record";
}

function cancelNewRecord() {
  view.value = "calendar";
  selectedDay.value = null;
}

async function saveNewRecord() {
  const desc = newDescription.value.trim();
  if (!desc || selectedDay.value === null) return;

  const mm = String(currentMonth.value).padStart(2, "0");
  const dd = String(selectedDay.value).padStart(2, "0");

  saving.value = true;
  try {
    const created = await createBaseHoliday({
      description: desc,
      holiday_date: `${currentYear.value}-${mm}-${dd}`,
      type: newType.value,
    });

    holidays.value.push({
      id: created.id,
      day: selectedDay.value,
      month: currentMonth.value,
      year: currentYear.value,
      description: created.description,
      type: created.type,
    });

    view.value = "calendar";
    selectedDay.value = null;
  } catch {
    $q.notify({ type: "negative", message: "Erro ao salvar feriado." });
  } finally {
    saving.value = false;
  }
}

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);
    }
  });
}

function onClose() {
  onDialogOK(holidays.value);
}
</script>

<style scoped>
.feriados-dialog {
  width: 900px;
  max-width: 95vw;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-header {
  padding: 6px 0 4px;
  font-weight: 600;
  text-align: center;
}

.cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.cal-cell:hover:not(.cal-cell--empty):not(.cal-cell--holiday) {
  background: #f5f5f5;
}

.cal-cell--empty {
  cursor: default;
  pointer-events: none;
}

.cal-cell__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}

.cal-cell--holiday .cal-cell__number {
  background: #e64a19;
  color: #fff;
  font-weight: 700;
}

.cal-cell--holiday {
  cursor: default;
}
</style>
