<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"> Feriados</v-toolbar-title>
          <v-spacer></v-spacer>
    
          <!-- Barra de Pesquisa com Ícone -->
          <v-text-field
            v-model="filters.holiday"
            :loading="loading.holiday"
            prepend-inner-icon="mdi-magnify"
            density="compact"
            variant="outlined"
            label="Pesquisar feriado"
            hide-details
            class="mx-2"
            style="max-width: 250px;"
            @update:model-value="filterholidays"
            clearable
          />
          
          <!-- Botão para exportar CSV 
          <v-btn 
            color="primary" 
            class="ml-2" 
            prepend-icon="mdi-file-export"
            :loading="loading.export"
            variant="tonal"
            @click="exportToCSV"
          >
            Exportar
          </v-btn>-->
          <!-- Botão para adicionar usuário -->
          <v-btn 
            color="primary" 
            class="ml-2" 
            prepend-icon="mdi-plus"
            variant="elevated"
            @click="openCreateModal"
          >
            Adicionar Feriado
          </v-btn>
        </v-toolbar>
  
        <!-- Tabela de Dados -->
        <v-data-table
          class="dados"
          :headers="headers.holidays"
          :items="filteredholidays" 
          :search="filters.holiday"
          :loading="loading.holidays"
          :items-per-page="itemsPerPage"
          :page.sync="page"
        >
          <template v-slot:item.actions="{ item }">
            <v-icon
              size="small"
              class="mr-2"
              @click="openEditPage('holiday', item)"
            >
              mdi-pencil
            </v-icon>
            <v-icon
              size="small"
              @click="confirmDelete('holiday', item)"
            >
              mdi-delete
            </v-icon>
          </template>
        </v-data-table>
      </v-card>
      <!-- Diálogo de Usuário (Novo/Edição) -->
      <holidayModal
        v-model="dialogs.holiday"
        :isEditMode="isEditing"
        :holiday="forms.holiday"
        @save="submitForm"
        @cancel="closeHolidayModal"
      /> 
      <CreateHolidayModal
        v-model="dialogs.createholiday"
        @save="SubmitFormCreate"
        @cancel="closeCreateModal"
      />
      <!-- 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.holidayname">
              Tem certeza que deseja excluir <strong>{{ itemToDelete.holidayname }}</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 } from 'vue';
  import { useRouter } from 'vue-router';
  import holidayModal from '../components/modals/HolidayModal.vue';
  import {useHolidayStore} from '../stores/holiday';
  import CreateHolidayModal from '../components/modals/HolidayModalCreate.vue';
  
  export default {
    name: 'holidayManagement',
    components: {
      holidayModal,
      CreateHolidayModal
    },
    setup() {
      const router = useRouter();
      //const camera = computed(() => cameraStore.camera);
      const holidayStore = useHolidayStore();
      
      // Estados
      const isCreateModalOpen = ref(false);
      const isEditing = ref(false);
      const itemToEdit = ref(null);
      const itemToDelete = ref(null);
      const page = ref(1);
      const itemsPerPage = ref(10);
      const selectedholiday = ref(null);
  
      // Loading states
      const loading = ref({
        holidays: false,
        submit: false,
        delete: false,
        export: false
      });
  
      // Diálogos
      const dialogs = ref({
        holiday: false,
        createholiday: false,
        delete: false
      });
      const editMode = ref(false)
      
      // Filtros
      const filters = ref({
        holiday: ''
      });
  
      // Dados - array vazio que será preenchido via API ou entrada do usuário
      const holidays = ref([])
  
      // Formulários
      const forms = ref({
        holiday: {
          id: null,
          name: '',
          date:'',
          estado: '',
          municipio: '',
          loading:false
        }
      });
  
      // Headers para as tabelas
      const headers = ref({
        holidays: [
          { title: 'ID', key: 'id' },
          { title: 'Nome feriado', key: 'name' },
          { title: 'Data', key: 'date' },
          //{ title: 'Permissão', key: 'permissao' },
          { title: 'Ações', key: 'actions', sortable: false, align: 'end' }
        ]
      });
  
      // Snackbar
      const snackbar = ref({
        show: false,
        text: '',
        color: 'success'
      });
  
      // Computed properties
      const filteredholidays = computed(() => {
        const filtered = holidays.value.filter(holiday => !holiday.deleted);
        return filtered.filter(holiday => {
          const holidayName = holiday.name || ''; // Garantir que seja uma string vazia se undefined
          return holidayName.toLowerCase().includes(filters.value.holiday.toLowerCase())
        }).map(holiday => ({
          ...holiday,
          created_at: holiday.created_at ? new Date(holiday.created_at).toLocaleString() : '-'
        }));
      });

      /*
      // Função para exportar para CSV
      const exportToCSV = () => {
        if (filteredcameras.value.length === 0) {
          showNotification('Não há dados para exportar', 'warning');
          return;
        }
        
        loading.value.export = true;
        try {
          // Preparar dados: filtrar apenas os campos que queremos exportar
          const dataToExport = filteredcameras.value.map(camera => ({
            ID: camera.id,
            Nome: camera.name,
            Status: camera.status,
            Descrição: camera.description,
            Url: camera.url,
            //Phone: camera.phone,
            //Image: camera.profile_image,
            //Contrato: camera.contrato,
            //Grupo: camera.grupo,
            //Permissao: camera.permissao
          }));
          
          // Gerar cabeçalho do CSV
          const headers = Object.keys(dataToExport[0]);
          
          // Converter dados para linhas CSV
          const csvContent = [
            headers.join(','), // Cabeçalho
            ...dataToExport.map(row => 
              headers.map(field => {
                // Escapar strings que contêm vírgulas com aspas
                const value = String(row[field]).replace(/"/g, '""');
                return /[,"]/.test(value) ? `"${value}"` : value;
              }).join(',')
            )
          ].join('\n');
          
          // Criar blob e link para download
          const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
          const url = URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.setAttribute('href', url);
          link.setAttribute('download', 'usuarios_export.csv');
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          
          showNotification('Dados exportados com sucesso!');
        } catch (error) {
          showNotification('Erro ao exportar dados', 'error');
          console.error('Error exporting data:', error);
        } finally {
          loading.value.export = false;
        }
      };
      */
      // Métodos
      const openDialog = (type, action, item = null) => {
        if (!dialogs.value[type]) {
          dialogs.value[type] = false
        }

        if (!forms.value[type]) {
          forms.value[type] = {
            id: '',
            name: '',
            date: '',
            loading: false
          }
        }

        editMode.value = action === 'edit'

        if (type === 'holiday') {
          if (action === 'edit') {
            forms.value.holiday = {
              ...item,
              loading: false
            }
          }

          // Agora sim abre o modal depois que tudo tá definido
          dialogs.value.holiday = true
        }
      }
      // Abrir modal de criação
      const openCreateModal = () => {
        isCreateModalOpen.value = true;
        dialogs.value.createholiday = true
      };
        
      const closeHolidayModal = () => {
        dialogs.value.holiday = false;
      };
      const closeCreateModal = () => {
        dialogs.value.createholiday = false;
      };
    
      const openEditPage = (type, item) => {
        console.log('Feriado que será editado:', item); // Log para depuração
        
        // Criar uma cópia do item para evitar problemas de mutação
        const holidayData = { ...item };
        
        // Garantir que todos os campos necessários estejam presentes
        forms.value[type] = {
          id: holidayData.id,
          name: holidayData.name || '',
          date: holidayData.date || '',
          estado: holidayData.estado || '',
          municipio: holidayData.municipio || '',
        };
        
        // Definir modo de edição e abrir o diálogo
        isEditing.value = true;
        dialogs.value[type] = true;
        selectedholiday.value = null; // Remover a seleção do usuário
      };
  
      const handleholidayUpdated = (updatedholiday) => {
        const index = holidays.value.findIndex(holiday => holiday.id === updatedholiday.id);
        if (index !== -1) {
          holidays.value[index] = updatedholiday;
        }
        showNotification('Feriado 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 holidayId = itemToDelete.value.id;
          console.log(`Excluindo Feriado com ID: ${holidayId}`);
  
          // Faz a requisição para deletar
          await holidayStore.deleteHoliday(holidayId);
          
          // Remover o item diretamente da lista local
          // Esta é uma abordagem mais direta e imediata
          holidays.value = holidays.value.filter(holiday => holiday.id !== holidayId);
          console.log("Lista atualizada após exclusão:", holidays.value);
  
          showNotification(`Feriado 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 filterholidays = () => {
        // O filtro já é realizado automaticamente por meio do computed property filteredholidays
      };
  
      const submitForm = async (holidayData) => {
        loading.value.submit = true;
        try {
          if (isEditing.value) {
            // Atualizar item existente
            await holidayStore.updateHoliday(holidayData.id, holidayData);
            const index = holidays.value.findIndex(holiday => holiday.id === holidayData.id);
            if (index !== -1) {
              holidays.value[index] = holidayData;
            }
          } 
          showNotification(`Feriado ${isEditing.value ? 'atualizado' : 'cadastrado'} com sucesso!`);
        
        } catch (error) {
          console.error('Error submitting form:', error);
        } finally {
          loading.value.submit = false;
          dialogs.value.holiday = false;
        }
        
      };
      const SubmitFormCreate = async (holidayData) => {
        loading.value.submit = true;
        try {
          //const newItem = await holidayStore.createHoliday(holidayData);
          holidays.value.push(newItem);
          showNotification('Feriado cadastrado com sucesso!');
        } catch (error) {
          console.error('Error submitting form:', error);
        } finally {
          loading.value.submit = false;
          dialogs.value.createholiday = false;
        }
      };
      
      // Lifecycle hooks
      onMounted(async () => {
        try {
          loading.value.holidays = true;
          console.log('cheguei aqui')
          const holidaysData = await holidayStore.fetchHolidays();
          holidays.value = holidaysData;
        
          console.log("Dados recebidos da API:", holidaysData);
          
          // Garanta que os dados já estão filtrados (usuários deletados removidos)
          //holidays.value = holidaysData.filter(holiday => !holiday.deleted);
        } catch (error) {
          showNotification('Erro ao carregar dados da API', 'error');
          console.error('Error fetching feriados:', error);
        } finally {
          loading.value.holidays = false;
        }
      });
      
      return {
        // States
        isEditing,
        loading,
        dialogs,
        filters,
        holidays,
        forms,
        headers,
        snackbar,
        page,
        itemsPerPage,
        itemToDelete,
        selectedholiday,
        
        // Computed
        filteredholidays,
        filterholidays,
        
        // Methods
        openDialog,
        confirmDelete,
        submitForm,
        SubmitFormCreate,
        deleteItem,
        openEditPage,
        openCreateModal,
        closeHolidayModal,
        closeCreateModal,
       // filtercameras,
        //exportToCSV,
        handleholidayUpdated
      };
    }
  };
  </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:  rgb(0, 0, 0);
    background: linear-gradient(145deg, #eeeded, #ffffff);
    box-shadow:  20px 20px 60px #d9d9d9,
                -20px -20px 60px #ffffff;
  }
  
  .title {
    font-size: 25px;
    font-weight: 600;
  }
  </style>