<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"> Empresas</v-toolbar-title>
          <v-spacer></v-spacer>
    
          <!-- Barra de Pesquisa com Ícone -->
          <v-text-field
            v-model="filters.company"
            :loading="loading.companys"
            prepend-inner-icon="mdi-magnify"
            density="compact"
            variant="outlined"
            label="Pesquisar empresa"
            hide-details
            class="mx-2"
            style="max-width: 250px;"
            @update:model-value="filterCompanys"  
            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 Empresa
          </v-btn>
        </v-toolbar>
  
        <!-- Tabela de Dados -->
        <v-data-table
          class="dados"
          :headers="headers.companys"
          :items="filteredCompanys" 
          :search="filters.company"
          :loading="loading.companys"
          :items-per-page="itemsPerPage"
          :page.sync="page"
        >
          <template v-slot:item.actions="{ item }">
            <v-icon
              size="small"
              class="mr-2"
              @click="openEditPage('company', item)"
            >
              mdi-pencil
            </v-icon>
            <v-icon
              size="small"
              @click="confirmDelete('company', item)"
            >
              mdi-delete
            </v-icon>
          </template>
        </v-data-table>
      </v-card>
      
      <!-- Diálogo de Usuário (Novo/Edição) -->
      <CompanyModal
        v-model:isModalOpen="dialogs.company"
        :isEditMode="isEditing"
        :modalCompany="forms.company"
        @save="submitForm"
      />
      <CompanyModayCreate
        v-model:isModalOpen="dialogs.createCompany" 
        @save="SubmitFormCreate"
      />
  
      <!-- 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.name">
              Tem certeza que deseja excluir <strong>{{ itemToDelete.name }}</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 CompanyModal from '../components/modals/CompanyModal.vue';
  import CompanyModayCreate from '../components/modals/CompanyModalCreate.vue';
  import { useCompanyStore } from '../stores/company';
  import { useServiceInstanceStore } from '../stores/service_instance';
  
  export default {
    name: 'CompanyManagement',
    components: {
      CompanyModal,
      CompanyModayCreate
    },
    setup() {
      const router = useRouter();
      const serviceInstanceStore = useServiceInstanceStore();
      // 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 selectedCompany = ref(null);
  
      // Loading states
      const loading = ref({
        companys: false,
        submit: false,
        delete: false,
        export: false
      });
  
      // Diálogos
      const dialogs = ref({
        company: false,
        createCompany: false,
        delete: false
      });
  
      // Filtros
      const filters = ref({
        company: ''
      });
  
      // Dados - array vazio que será preenchido via API ou entrada do usuário
      const companys = ref([]);
  
      // Formulários
      const forms = ref({
        companyValid: false,
        company: {
          id: null,
          name: '',
          fantasy_name: '',
          type: '',
          cnpj: '',
          
          email: '',
          email_sec: '',
          phone: '',
          phone_sec: '',

          estado: '',
          cidade: '',
          bairro: '',
          rua: '',
          numero: '',
          complemento: '',
          cep: ''
          //contrato: '',
          // grupo: '',
          //permissao: ''
        }
      });
  
      // Headers para as tabelas
      const headers = ref({
        companys: [
          { title: 'ID', key: 'id' },
          { title: 'Nome empresa', key: 'name' },
          { title: 'Tipo', key: 'type' },
          { title: 'Bairro', key: 'bairro' },
          { title: 'Rua', key: 'rua' },
          //{ 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 filteredCompanys = computed(() => {
        const filtered = companys.value.filter(company => !company.deleted);
        console.log("Empresa após filtro 'deleted':", filtered);
        
        return filtered.filter(company => {
          return company.name.toLowerCase().includes(filters.value.company.toLowerCase());
        }).map(company => ({
          ...company,
          created_at: company.created_at ? new Date(company.created_at).toLocaleString() : '-'
        }));
      });
  /*
      // Função para exportar para CSV
      const exportToCSV = () => {
        if (filteredUsers.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 = filteredUsers.value.map(user => ({
            ID: user.id,
            Nome: user.username,
            Email: user.email,
            Birth: user.birth_date,
            Phone: user.phone,
            Image: user.profile_image,
            //Contrato: user.contrato,
            //Grupo: user.grupo,
            //Permissao: user.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) => {
        isEditing.value = action === 'edit';
        if (item) {
          // Ajustando para o formato esperado pelo UserModal
          forms.value[type] = { 
            id: item.id,
            name: item.name,
            fantasy_name: item.fantasy_name,
            type: item.type,
            cnpj: item.cnpj,

            email: item.email,
            email_sec: item.email_sec,
            phone: item.phone,
            phone_sec: item.phone_sec,
            estado: item.estado,
            cidade: item.cidade,
            bairro: item.bairro,
            rua: item.rua,
            numero: item.numero,
            complemento: item.complemento,
            cep: item.cep,
            id: null,
          
            //contrato: item.contrato,
            //grupo: item.grupo,
            //permissao: item.permissao
          };
        } else {
          // Reset form
          forms.value[type] = {
            id: null,
            name: '',
            fantasy_name: '',
            type: '',
            cnpj: '',
            
            email: '',
            email_sec: '',
            phone: '',
            phone_sec: '',

            estado: '',
            cidade: '',
            bairro: '',
            rua: '',
            numero: '',
            complemento: '',
            cep: ''
          };
        }
        dialogs.value[type] = true;
      };
      const openCreateModal = () => {
        isCreateModalOpen.value = true;
        dialogs.value.createCompany = true
      };
  
      const openEditPage = (type, item) => {
        console.log('Usuário que será editado:', item); // Log para depuração
        
        // Criar uma cópia do item para evitar problemas de mutação
        const companyData = { ...item };
        console.log('CompanyData que será editado:', companyData);
        // Garantir que todos os campos necessários estejam presentes
        forms.value[type] = {
          id: companyData.id,
          name: companyData.name || '',
          fantasy_name: companyData.fantasy_name || '',
          type: companyData.type || '',
          cnpj: companyData.cnpj || '',
          email: companyData.email || '',
          email_sec: companyData.email_sec || '',
          phone: companyData.phone || '',
          phone_sec: companyData.phone_sec || '',
          estado: companyData.estado || '',
          cidade: companyData.cidade || '',
          bairro: companyData.bairro || '',
          rua: companyData.rua || '',
          numero: companyData.numero || '',
          complemento: companyData.complemento || '',
          cep: companyData.cep || ''
        };
        
        // Definir modo de edição e abrir o diálogo
        isEditing.value = true;
        dialogs.value[type] = true;
        selectedCompany.value = null; // Remover a seleção do usuário
      };
  
      const handleCompanyUpdated = (updatedCompany) => {
        const index = companys.value.findIndex(company => company.id === updatedCompany.id);
        if (index !== -1) {
          companys.value[index] = updatedCompany;
        }
        showNotification('Empresa 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 companyId = itemToDelete.value.id;
          console.log(`Excluindo empresa com ID: ${companyId}`);
  
          // Faz a requisição para deletar
          await companyStore.deleteCompany(companyId);
          const service_instance_id = await serviceInstanceStore.fetchServiceInstanceIdByName(itemToDelete.value.name);''
          console.log(`Serviço de instância excluído com ID: ${service_instance_id}`);
          await serviceInstanceStore.deleteServiceInstance(service_instance_id);
          
          // Remover o item diretamente da lista local
          // Esta é uma abordagem mais direta e imediata
          companys.value = companys.value.filter(company => company.id !== companyId);
          console.log("Lista atualizada após exclusão:", companys.value);
  
          showNotification(`Empresa 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 filterCompanys = () => {
        // O filtro já é realizado automaticamente por meio do computed property filteredUsers
      };
      
      const SubmitFormCreate = async (companyData) => {
        loading.value.submit = true;
        try {
          //const newItem = await companyStore.createCompany(companyData);
          companys.value.push(newItem);
          showNotification('Empresa cadastrado com sucesso!');
        } catch (error) {
          console.error('Error submitting form:', error);
        } finally {
          loading.value.submit = false;
          dialogs.value.createCompany = false;
        }
      };

      const submitForm = async (companyData) => {
        loading.value.submit = true;
        try {
          if (isEditing.value) {
            // Atualizar item existente
            await companyStore.updateCompany(companyData.id, companyData);
            const index = companys.value.findIndex(company => company.id === companyData.id);
            if (index !== -1) {
              Companys.value[index] = companyData;
            }
          }
          
          showNotification(`Empresa ${isEditing.value ? 'atualizado' : 'cadastrado'} com sucesso!`);
          dialogs.value.company = false;
        } catch (error) {
          showNotification('Erro ao salvar os dados', 'error');
          console.error('Error submitting form:', error);
        } finally {
          loading.value.submit = false;
        }
      };
  
      const companyStore = useCompanyStore();
      
      // Lifecycle hooks
      onMounted(async () => {
        try {
          loading.value.companys = true;
          const companysData = await companyStore.catchCompanys();
          console.log("Dados recebidos da API:", companysData);
          
          // Garanta que os dados já estão filtrados (usuários deletados removidos)
          companys.value = companysData.filter(company => !company.deleted);
        } catch (error) {
          showNotification('Erro ao carregar dados da API', 'error');
          console.error('Error fetching companys:', error);
        } finally {
          loading.value.companys = false;
        }
      });
      
      return {
        // States
        isEditing,
        loading,
        dialogs,
        filters,
        companys,
        forms,
        headers,
        snackbar,
        page,
        itemsPerPage,
        itemToDelete,
        selectedCompany,
        
        // Computed
        filteredCompanys,
        
        // Methods
        openDialog,
        confirmDelete,
        submitForm,
        deleteItem,
        openEditPage,
        filterCompanys,
        openCreateModal,
        SubmitFormCreate,
        //exportToCSV,
        handleCompanyUpdated
      };
    }
  };
  </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>