<!--Turnos e Escalas-->
<template>
    <v-container class="tab">
      <div class="image-wrapper">
        <img src="/image_b.png" alt="Ilustração acima da tabela" class="top-image" />
      </div>
      <v-card>
        <v-toolbar class="info" flat>
          <v-toolbar-title class="title">Escalas</v-toolbar-title>
          <v-spacer></v-spacer>
    
          <!-- Barra de Pesquisa com Ícone -->
          <v-text-field
            v-model="filters.shift"
            :loading="loading.shifts"
            prepend-inner-icon="mdi-magnify"
            density="compact"
            variant="outlined"
            label="Pesquisar turnos"
            hide-details
            class="mx-2"
            style="max-width: 250px;"
            @update:model-value="filtershifts"
            clearable
          />
          
          <!--<v-btn 
            color="primary" 
            class="ml-2" 
            prepend-icon="mdi-plus"
            variant="elevated"
            @click="openDialog('ambiente', 'create')"
          >
            Adicionar Ambiente
          </v-btn>-->

          <!-- Botão para adicionar usuário -->
          <v-btn 
          color="primary" 
          class="ml-2" 
          prepend-icon="mdi-plus"
          variant="elevated"
          @click="openCreateShiftDialog"
          >
            Adicionar Escala
          </v-btn>
        </v-toolbar>
  
        <!-- Tabela de Dados -->
        <v-data-table
          class="dados"
          :headers="headers.shifts"
          :items="filteredshifts" 
          :search="filters.shift"
          :loading="loading.shifts"
          :items-per-page="itemsPerPage"
          :page.sync="page"
        >
          <template v-slot:item.actions="{ item }">
            <v-icon
              size="small"
              class="mr-2"
              @click="openEditShiftDialog(item.id)"
            >
              mdi-pencil
            </v-icon>
            <v-icon
              size="small"
              @click="confirmDelete('shift', item)"
            >
              mdi-delete
            </v-icon>
          </template>
        </v-data-table>
      </v-card>

      <!-- Diálogo de Usuário (Novo/Edição) -->
      <shiftModal
        v-model="dialogs.createShift"
        :isEditMode="false"
        :shift="forms.shift"
        @save="submitForm"
      />
      <!-- Diálogo de edicao (Edição) -->
      <EditShiftModal
        v-model="dialogs.editShift"
        :shiftData="forms.shift"
        @save="submitEdit"
      />
  
      <!-- Diálogo de Confirmação de Exclusão -->
      <v-dialog v-model="dialogs.delete" max-width="400px">
        <v-card>
          <v-card-title class="text-h5 bg-error text-white">
            Confirmar Exclusão
          </v-card-title>
  
          <v-card-text class="pt-4">
            <p v-if="itemToDelete && itemToDelete.cameraname">
              Tem certeza que deseja excluir <strong>{{ itemToDelete.cameraname }}</strong>?
              Esta ação não pode ser desfeita.
            </p>
            <p v-else>
              Erro: Nenhum item selecionado para exclusão.
            </p>
          </v-card-text>
  
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="grey" @click="dialogs.delete = false">Cancelar</v-btn>
            <v-btn 
              color="error" 
              :loading="loading.delete"
              :disabled="!itemToDelete || !itemToDelete.id"
              @click="deleteItem"
            >
              Excluir
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
  
      <!-- Snackbar para Feedback -->
      <v-snackbar
        v-model="snackbar.show"
        :color="snackbar.color"
        :timeout="3000"
      >
        {{ snackbar.text }}
        <template v-slot:actions>
          <v-btn
            color="white"
            variant="text"
            @click="snackbar.show = false"
          >
            Fechar
          </v-btn>
        </template>
      </v-snackbar>
    </v-container>
  </template>
  
  <script>
  import { ref, computed, onMounted,watch } from 'vue';
  import { useRouter } from 'vue-router';
  import shiftModal from '../components/modals/ShiftModal.vue';
  import EditShiftModal from '../components/modals/EditShiftModal.vue'
  import {useShiftStore} from '../stores/shift';
  
  export default {
    name: 'shiftManagement',
    components: {
      shiftModal,
      EditShiftModal
    },
    setup() {
      const router = useRouter();
      //const shift = computed(() => cameraStore.shift);
      ;
      const shiftStore = useShiftStore();

      // Estados

      const isEditing = ref(false);
      //const itemToEdit = ref(null);
      const itemToDelete = ref(null);
      const page = ref(1);
      const itemsPerPage = ref(10);
      const selectedshift = ref(null);
      
      // Controladores dos modais
      const isCreateDialogOpen = ref(false)
      const isEditDialogOpen = ref(false)
  
      // Loading states
      const loading = ref({
        shifts: false,
        submit: false,
        delete: false,
        export: false
      });
  
      // Diálogos
      const dialogs = ref({
        createShift: false,
        editShift: false,
        delete: false
      });
  
      // Filtros
      const filters = ref({
        shift: ''
      });
  
      // Dados - array vazio que será preenchido via API ou entrada do usuário
      const shifts = ref([]);

      // Formulários
      const forms = ref({
        shiftValid: false,
        shift: {
          name: '',
          day: '',
          interval_start: '',
          interval_end: '',
          type_interval: '',
        }
      });
      const openCreateShiftDialog = () => {
        isEditing.value = false;
        isCreateDialogOpen.value = true
        forms.value.shift = {
          id: null,
          name: '',
          day: '',
          start_time:'',
          end_time:'',
          interval_start: '',
          interval_end: '',
          type_interval: '',
        };
        dialogs.value.createShift = true;
      };
      const openEditShiftDialog = async (shiftId) => {
      try {
        loading.value.shifts = true;
        const fullShiftData = await shiftStore.fetchShiftById(shiftId);

        console.log('✔️ fullShiftData', fullShiftData)
          
        forms.value.shift = {
          id: fullShiftData.id,
          name: fullShiftData.name,
          day: fullShiftData.day,
          start_time: fullShiftData.start_time,
          end_time: fullShiftData.end_time,
          interval_start: fullShiftData.interval_start,
          interval_end: fullShiftData.interval_end,
          //type_interval: fullShiftData.type_interval,
        };

        // 💥 Agora sim abre o modal
        dialogs.value.editShift = true;
        isEditDialogOpen.value = true;
        isEditing.value = true;

      } catch (error) {
        showNotification("Erro ao carregar escala", "error");
      } finally {
        loading.value.shifts = false;
      }
    };
      
      // Headers para as tabelas
      const headers = ref({
        shifts: [
          { title: 'ID', key: 'id' },
          { title: 'Nome da escala', key: 'name' },
          { title: 'day', key: 'day' },
          { title: 'Inicio Intervalo', key: 'interval_start' },
          { title: 'Fim Intervalo', key: 'interval_end' },
          { title: 'Tipo Intervalo', key: 'type_interval' },
          { title: 'Ações', key: 'actions', sortable: false, align: 'end' }
        ]
      });
  
      // Snackbar
      const snackbar = ref({
        show: false,
        text: '',
        color: 'success'
      });
  
      // Computed properties
        const filteredshifts = computed(() => {
        const filtered = shifts.value.filter(shift => !shift.deleted);
        console.log("shift após filtro 'deleted':", filtered);
        
        return filtered.filter(shift => {
          return shift.name.toLowerCase().includes(filters.value.shift.toLowerCase()) ||
                shift.email.toLowerCase().includes(filters.value.shift.toLowerCase());
        }).map(shift => ({
          ...shift,
          created_at: shift.created_at ? new Date(shift.created_at).toLocaleString() : '-'
        }));
      });
  
      // Métodos
      /*const openDialog = (type, action, item = null) => {
        isEditing.value = action === 'edit';
        if (item) {
          // Ajustando para o formato esperado pelo cameraModal
          forms.value[type] = { 
            id: item.id,
            name: item.name,
            day: item.day,
            interval_start: item.interval_start,
            interval_end: item.interval_end,
            type_interval: item.type_interval,
          };
        } else {
          // Reset form
          forms.value[type] = {
            id: null,
            name: '',
            day: '',
            interval_start: '',
            interval_end: '',
            type_interval: '',
          };
        }
        dialogs.value[type] = true;
      };
  
      const openEditPage = async (shiftId) => {
        try {
          loading.value.shift = true;

          // 🔽 Buscar do backend pelo ID
          const fullShiftData = await shiftStore.fetchShiftById(shiftId);
        
          // Garantir que todos os campos necessários estejam presentes
          forms.value.shift = {
            id: fullShiftData.id,
            name: fullShiftData.name,
            day: fullShiftData.day,
            start_time: fullShiftData.start_time,
            end_time: fullShiftData.end_time,
            interval_start: formatTime(fullShiftData.interval_start),
            interval_end: formatTime(fullShiftData.interval_end)
          };
              
              // Definir modo de edição e abrir o diálogo
              isEditing.value = true;
              dialogs.value[type] = true;
            } catch (error) {
              
              //console.error("Erro ao buscar dados da escala:, error);
              showNotification("Erro ao carregar escala", "error");
            } finally {
              loading.value.shift = false;
            }
          };
*/
      const handlecameraUpdated = (updatedshift) => {
        const index = shifts.value.findIndex(shift => shift.id === updatedshift.id);
        if (index !== -1) {
          shifts.value[index] = updatedshift;
        }
        showNotification('shift atualizado com sucesso!');
      };
  
      const confirmDelete = (type, item) => {
        console.log("Item recebido para exclusão:", item); // Depuração
        
        if (!item || !item.id) {
          console.error("Erro: Item inválido para exclusão.", item);
          showNotification("Erro: Não foi possível selecionar o item para exclusão.", "error");
          return;
        }
        
        // Armazena explicitamente o item completo
        itemToDelete.value = {...item};
        
        // Verifica se o itemToDelete foi definido corretamente
        console.log("itemToDelete definido como:", itemToDelete.value);
  
        dialogs.value.delete = true;
      };
  
      const deleteItem = async () => {
        if (!itemToDelete.value || !itemToDelete.value.id) {
          console.error("Erro: Item inválido para exclusão.", itemToDelete.value);
          return;
        }
  
        loading.value.delete = true;
        try {
          const shiftId = itemToDelete.value.id;
          console.log(`Excluindo shift com ID: ${shiftId}`);
  
          // Faz a requisição para deletar
          await shiftStore.deleteShift(shiftId);
          
          // Remover o item diretamente da lista local
          // Esta é uma abordagem mais direta e imediata
          shifts.value = shifts.value.filter(shift => shift.id !== shiftId);
          console.log("Lista atualizada após exclusão:", shifts.value);
  
          showNotification(`shift excluído com sucesso!`);
          dialogs.value.delete = false;
        } catch (error) {
          showNotification('Erro ao excluir o item', 'error');
          console.error('Error deleting item:', error);
        } finally {
          loading.value.delete = false;
          itemToDelete.value = null;
        }
      };
      
      const showNotification = (text, color = 'success') => {
        snackbar.value = {
          show: true,
          text,
          color
        };
      };
  
      const filtershifts = () => {
        // O filtro já é realizado automaticamente por meio do computed property filteredcameras
      };
  
      const submitForm = async (shiftData) => {
        loading.value.submit = true;
        try {
          if (isEditing.value) {
            // Atualizar item existente
            await shiftStore.updateShift(shiftData.id, shiftData);
            const index = shifts.value.findIndex(shift => shift.id === shiftData.id);
            if (index !== -1) {
              shifts.value[index] = shiftData;
            }
          } else {
            // Criar novo item
            const newItem = await shiftStore.createShift(shiftData);
            shifts.value.push(newItem);
          }
          showNotification(`shift ${isEditing.value ? 'atualizado' : 'cadastrado'} com sucesso!`);
        
        } catch (error) {
          console.error('Error submitting form:', error);
        } finally {
          loading.value.submit = false;
        }
      };
  
      const submitEdit = (updatedShiftData) => {
        try {
            console.log('Dados atualizados recebidos do modal:', updatedShiftData)

            // Aqui você pode fazer a chamada para API, ex:
            shiftStore.updateShift(updatedShiftData.id, updatedShiftData)

            showNotification('Escala atualizada com sucesso!', 'success')
            dialogs.value.editShift = false
          } catch (error) {
            showNotification('Erro ao atualizar escala', 'error')
          }
        }
      // Lifecycle hooks
      onMounted(async () => {
        try {

          loading.value.shifts = true;
          const shiftData = await shiftStore.fetchShifts();
          console.log("Dados recebidos da API:", shiftData.value);
          
          // Garanta que os dados já estão filtrados (usuários deletados removidos)
          shifts.value = shiftData.filter(shift => !shift.deleted);
        } catch (error) {
          showNotification('Erro ao carregar dados da API', 'error');
          console.error('Error fetching shifts:', error);
        } finally {
          loading.value.shifts = false;
        }
      });
      
      return {
        // States
        isEditing,
        loading,
        dialogs,
        filters,
        shifts,
        forms,
        headers,
        snackbar,
        page,
        itemsPerPage,
        itemToDelete,
        selectedshift,
        
        // Computed
        filteredshifts,
        
        // Methods
        //openDialog,
        confirmDelete,
        openEditShiftDialog,
        openCreateShiftDialog,
        submitForm,
        submitEdit,
        deleteItem,
        //openEditPage,
        filtershifts,
        //exportToCSV,
        //shandlecameraUpdated
      };
    }
  };
  </script>
  
  <style scoped>
.image-wrapper {
  display: flex;
  justify-content: flex-end; /* ou center, se quiser centralizar */
  margin-bottom: 16px;
}

.top-image {
  max-width: 180px;
  height: auto;
}
  .info{
    color:  rgb(0, 0, 0);
    background-color: rgba(76,201,240);
    background: linear-gradient(145deg, #eeeded, #ffffff);
    box-shadow:  20px 20px 60px #d9d9d9,
                -20px -20px 60px #ffffff;
  }
  
  .dados{
    font-size: 17px;
    color: rgb(0, 0, 0);
    background-color: rgba(76,201,240);
    background: linear-gradient(145deg, #eeeded, #ffffff);
    box-shadow:  20px 20px 60px #d9d9d9,
                -20px -20px 60px #ffffff;
  }
  
  .title {
    font-size: 25px;
    font-weight: 600;
  }
  </style>