<template>
  <v-dialog :model-value="modalValue" @update:model-value="updateModalValue" max-width="500px">
    <v-form ref="form" v-model="formValid">
      <v-card class="pa-6 rounded-xl elevation-2 card-modal">
        <v-card-title class="text-h5 font-weight-bold pb-0">
          <span class="text-h5">Adicionar Novo Feriado</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-text-field v-model="localHoliday.name" label="Feriado *" clearable :rules="[rules.required]" required />
              </v-col>
              <v-col cols="12">
                <v-text-field v-model="localHoliday.type" label="Tipo do Feriado *" clearable :rules="[rules.required]" required />
              </v-col>
              <v-col cols="12">
                <v-text-field v-model="localHoliday.date" label="Data do feriado *" type="date" clearable
                  :rules="[v => !!v || 'Data é obrigatória']" required />
              </v-col>
              <v-col cols="12">
                <v-text-field v-model="localHoliday.municipio" label="Municipio" type="municipio" :rules="[rules.required]" clearable required/>
              </v-col>
              <v-col cols="12">
                <v-text-field v-model="localHoliday.estado" label="Estado" type="estado" clearable :rules="[rules.required]" required/>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn text color="blue-darken-1" @click="$emit('cancel')">Cancelar</v-btn>
          <v-btn text class="text-white salvar-btn" :disabled="!formValid"
          @click="handleSave" :loading="holidayStore.loading">
            Salvar
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-form>
  </v-dialog>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { useHolidayStore } from '../../stores/holiday';
import { useAuthStore } from '../../stores/auth';

const props = defineProps({
  modalValue: {
    type: Boolean,
    required: true
  }
});

const emit = defineEmits(['update:modalValue', 'save']);

const holidayStore = useHolidayStore();
const authStore = useAuthStore();

// Objeto de feriado padrão
const defaultHoliday = {
  name: '',
  type: '',
  date: '',
  estado: '',
  municipio: '',
  parent_id: authStore.userId,
  service_instance_id: authStore.service_instance_id || 2
};
const rules = {
  required: (value) => !!value || 'Campo obrigatório'
};

const form = ref(null);
const formValid = ref(false);

// Estado local do feriado
const localHoliday = ref({...defaultHoliday});

// Função para atualizar o estado do modal
const updateModalValue = (value) => {
  console.log('Dialog emitindo update:model-value:', value);
  emit('update:modalValue', value);
  
  if (!value) {
    resetLocalHoliday();
  }
};

// Resetar o feriado para o estado inicial
const resetLocalHoliday = () => {
  console.log('Resetando formulário de criação para valores padrão');
  for (const key in defaultHoliday) {
    localHoliday.value[key] = defaultHoliday[key];
  }
};

// Observar mudanças no modalValue
watch(() => props.modalValue, (newVal, oldVal) => {
  console.log(`CreateModal - modalValue mudou de ${oldVal} para ${newVal}`);
  
  if (newVal) {
    // Modal está sendo aberto - resetar formulário
    resetLocalHoliday();
  }
});

// Fechar o modal e limpar os dados
const closeModal = () => {
  console.log('Botão cancelar clicado - fechando modal de criação');
  // Emitir evento para fechar o modal
  emit('update:modalValue', false);
  // Resetar dados
  resetLocalHoliday();
};

// Salvar o novo feriado
const handleSave = async (event) => {
  if(form.value.validate()){
    event.preventDefault(); // Impede o comportamento padrão do botão
    try {
      const holidayData = { 
        ...localHoliday.value,
        parent_id: authStore.userId,
        service_instance_id: authStore.service_instance_id || 2
      };
      
      console.log('Criando novo feriado:', holidayData);
      
      await holidayStore.createHoliday(holidayData);
      
      emit('save', holidayData);
      emit('update:modalValue', false);
      resetLocalHoliday();
    } catch (error) {
      console.error('Erro ao criar feriado:', error);
    }}
};

// Inicialização do componente
onMounted(() => {
  console.log('Modal de criação montado - modalValue:', props.modalValue);
  if (props.modalValue) {
    resetLocalHoliday();
  }
});
</script>

<style scoped>
.card-modal {
  background-color: #ffffff;
  border-radius: 16px;
}

.salvar-btn {
  background: linear-gradient(to right, #6b4eff, #2eb6ff);
  border-radius: 999px;
  text-transform: none;
  font-weight: 500;
}
</style>