<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin feriados-edit-dialog">
      <DefaultDialogHeader :title="dialogTitle" @close="onDialogCancel" />

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

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

      <q-separator />

      <q-card-actions align="between">
        <q-btn
          outline
          color="negative"
          label="EXCLUIR"
          no-caps
          :loading="deleting"
          @click="confirmDelete"
        />
        <div class="row q-gutter-sm">
          <q-btn outline color="primary" label="CANCELAR" no-caps @click="onDialogCancel" />
          <q-btn
            unelevated
            color="primary"
            label="SALVAR"
            no-caps
            :disable="!description.trim()"
            :loading="saving"
            @click="save"
          />
        </div>
      </q-card-actions>
    </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 { updateBaseHoliday, deleteBaseHoliday } from "src/api/holiday";

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

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

const props = defineProps({
  holiday: {
    type: Object,
    required: true,
  },
});

const description = ref(props.holiday.description);
const type = ref(props.holiday.type ?? "feriado");
const saving = ref(false);
const deleting = ref(false);

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

const dialogTitle = computed(() => {
  const dd = String(props.holiday.day).padStart(2, "0");
  const mm = String(props.holiday.month).padStart(2, "0");
  return `${dd}/${mm}/${props.holiday.year}`;
});

async function save() {
  const desc = description.value.trim();
  if (!desc) return;

  const mm = String(props.holiday.month).padStart(2, "0");
  const dd = String(props.holiday.day).padStart(2, "0");

  saving.value = true;
  try {
    const updated = await updateBaseHoliday(props.holiday.id, {
      description: desc,
      holiday_date: `${props.holiday.year}-${mm}-${dd}`,
      type: type.value,
    });

    onDialogOK({
      action: "update",
      holiday: {
        ...props.holiday,
        description: updated.description,
        type: updated.type,
      },
    });
  } catch {
    $q.notify({ type: "negative", message: "Erro ao salvar feriado." });
  } finally {
    saving.value = false;
  }
}

function confirmDelete() {
  $q.dialog({
    title: "Excluir feriado",
    message: `Deseja excluir "${props.holiday.description}"?`,
    cancel: { label: "Cancelar", flat: true, color: "primary" },
    ok: { label: "Excluir", unelevated: true, color: "negative" },
  }).onOk(async () => {
    deleting.value = true;
    try {
      await deleteBaseHoliday(props.holiday.id);
      onDialogOK({ action: "delete", id: props.holiday.id });
    } catch {
      $q.notify({ type: "negative", message: "Erro ao excluir feriado." });
    } finally {
      deleting.value = false;
    }
  });
}
</script>

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