<template>
  <v-dialog v-model="isOpen" max-width="600">
    <v-card class="pa-6 rounded-xl elevation-2 card-modal">
      <v-card-title e class="text-h5 font-weight-bold pb-0">Editar Escala</v-card-title>

      <v-card-text>
        <v-form @submit.prevent>

          <v-text-field
            label="Nome da escala"
            v-model="form.name"
          />

          <v-text-field
            label="Dia da semana"
            v-model="form.day"
          />

          <v-text-field
            label="Horário de Entrada"
            v-model="form.start_time"
            type="time"
          />

          <v-text-field
            label="Horário de Saída"
            v-model="form.end_time"
            type="time"
          />

          <v-text-field
            label="Intervalo (em minutos)"
            v-model="form.interval_start"
            type="time"
          />

          <v-text-field
            label="Intervalo (em minutos)"
            v-model="form.interval_end"
            type="time"
          />

    <!--   <v-switch
            label="Marcar intervalo automaticamente?"
            v-model="form.autoBreak"
          />-->   
          <v-card-actions>
            <v-spacer />
            <v-btn text color="blue-darken-1" @click="close">Cancelar</v-btn>
            <v-btn text class="text-white salvar-btn" @click="submit" :loading="shiftStore.loading">
              Salvar
            </v-btn>
          </v-card-actions>
        </v-form>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import {useShiftStore} from '../../stores/shift';

const props = defineProps({
  modelValue: Boolean,
  shiftData: Object
})

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

const isOpen = ref(props.modelValue)

watch(() => props.modelValue, (val) => (isOpen.value = val))
watch(isOpen, (val) => emit('update:modelValue', val))

const form = ref({
  name: '',
  day: '',
  start_time: '',
  end_time: '',
  interval_start: '',
  interval_end:'',
  //autoBreak: false
})

// Atualiza os dados do form sempre que shiftData mudar
watch(() => props.shiftData, (newData) => {
  if (!newData) return
  console.log('📥 shiftData recebido no modal:', newData)
  form.value = {
    id: newData.id || null,
    name: newData.name ||'',
    day: newData.day || '',
    start_time: newData.start_time || '',
    end_time: newData.end_time || '',
    interval_start: newData?.interval_start || '',
    interval_end: newData?.interval_end || '',
    //autoBreak: newData.interval_end === 'auto'
  }
}, { immediate: true })



function close() {
  isOpen.value = false
}
const shiftStore = useShiftStore();
function submit() {
  shiftStore.updateShift(form.value.id,form.value);
  console.log('📤 Dados enviados para o store:', form.value)
  emit('save', form.value)
  close()
}

</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>