<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"> Câmeras</v-toolbar-title>
        <v-spacer></v-spacer>
  
        <!-- Barra de Pesquisa com Ícone -->
        <v-text-field
          v-model="filters.camera"
          :loading="loading.cameras"
          prepend-inner-icon="mdi-magnify"
          density="compact"
          variant="outlined"
          label="Pesquisar usuário"
          hide-details
          class="mx-2"
          style="max-width: 250px;"
          @update:model-value="filtercameras"
          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="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="openDialog('camera', 'create')"
        >
          Adicionar Câmera
        </v-btn>
      </v-toolbar>

      <!-- Tabela de Dados -->
      <v-data-table
        class="dados"
        :headers="headers.cameras"
        :items="filteredcameras" 
        :search="filters.camera"
        :loading="loading.cameras"
        :items-per-page="itemsPerPage"
        :page.sync="page"
      >
        <template v-slot:item.actions="{ item }">
          <v-icon
            size="small"
            class="mr-2"
            @click="openEditPage('camera', item)"
          >
            mdi-pencil
          </v-icon>
          <v-icon
            size="small"
            @click="confirmDelete('camera', item)"
          >
            mdi-delete
          </v-icon>
        </template>
      </v-data-table>
    </v-card>
    <!-- Diálogo de Usuário (Novo/Edição) -->
    <ambienteModal
      v-model="dialogs.ambiente"
      :isEditMode="isEditing"
      :ambiente="forms.ambiente"
      @save="submitForm"
    />

    <!-- Diálogo de Usuário (Novo/Edição) -->
    <cameraModal
      v-model="dialogs.camera"
      :isEditMode="isEditing"
      :camera="forms.camera"
      @save="submitForm"
    />


    <!-- 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 } from 'vue';
import { useRouter } from 'vue-router';
import cameraModal from '../components/modals/CameraModal.vue';
import ambienteModal from '../components/modals/AmbienteModal.vue';
import {cameraService} from '../services/camera';


export default {
  name: 'cameraManagement',
  components: {
    cameraModal,
    ambienteModal
  },
  setup() {
    const router = useRouter();
    //const camera = computed(() => cameraStore.camera);

    
    // Estados
    const isEditing = ref(false);
    const itemToEdit = ref(null);
    const itemToDelete = ref(null);
    const page = ref(1);
    const itemsPerPage = ref(10);
    const selectedcamera = ref(null);

    // Loading states
    const loading = ref({
      cameras: false,
      submit: false,
      delete: false,
      export: false
    });

    // Diálogos
    const dialogs = ref({
      camera: false,
      delete: false
    });

    // Filtros
    const filters = ref({
      camera: ''
    });

    // Dados - array vazio que será preenchido via API ou entrada do usuário
    const cameras = ref([])

    // Formulários
    const forms = ref({
      cameraValid: false,
      camera: {
        id: null,
        name: '',
        ambiente_id: '',
        description: '',
        status: '',
        url: ''
        //contrato: '',
        // grupo: '',
        //permissao: ''
      }
    });

    // Headers para as tabelas
    const headers = ref({
      cameras: [
        { title: 'ID', key: 'id' },
        { title: 'Nome da Camera', key: 'name' },
        { title: 'Status', key: 'status' },
        { title: 'Descrição', key: 'description' },
        { title: 'URL', key: 'url' },
        //{ 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 filteredcameras = computed(() => {
      const filtered = cameras.value.filter(camera => !camera.deleted);
      console.log("Camera após filtro 'deleted':", filtered);
      
      return filtered.filter(camera => {
        return camera.name.toLowerCase().includes(filters.value.camera.toLowerCase()) ||
              camera.email.toLowerCase().includes(filters.value.camera.toLowerCase());
      }).map(camera => ({
        ...camera,
        created_at: camera.created_at ? new Date(camera.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) => {
      isEditing.value = action === 'edit';
      if (item) {
        // Ajustando para o formato esperado pelo cameraModal
        forms.value[type] = { 
          id: item.id,
          name: item.name,
          status: item.status,
          description: item.description,
          url: item.url
        };
      } else {
        // Reset form
        forms.value[type] = {
          id: null,
          name: '',
          status: '',
          description: '',
          Url: '',
          //phone: '',
          //profile_image: ''
          //contrato: '',
          //grupo: '',
          //permissao: ''
        };
      }
      dialogs.value[type] = true;
    };

    const openEditPage = (type, item) => {
      console.log('Camera que será editado:', item); // Log para depuração
      
      // Criar uma cópia do item para evitar problemas de mutação
      const cameraData = { ...item };
      
      // Garantir que todos os campos necessários estejam presentes
      forms.value[type] = {
        id: cameraData.id,
        name: cameraData.name || '',
        status: cameraData.status || '',
        description: cameraData.description || '',
        url: cameraData.url || '',
        //phone: cameraData.phone || '',
        //profile_image: cameraData.profile_image || ''
      };
      
      // Definir modo de edição e abrir o diálogo
      isEditing.value = true;
      dialogs.value[type] = true;
      selectedcamera.value = null; // Remover a seleção do usuário
    };

    const handlecameraUpdated = (updatedcamera) => {
      const index = cameras.value.findIndex(camera => camera.id === updatedcamera.id);
      if (index !== -1) {
        cameras.value[index] = updatedcamera;
      }
      showNotification('Camera 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 cameraId = itemToDelete.value.id;
        console.log(`Excluindo Camera com ID: ${cameraId}`);

        // Faz a requisição para deletar
        await cameraService.deleteCamera(cameraId);
        
        // Remover o item diretamente da lista local
        // Esta é uma abordagem mais direta e imediata
        cameras.value = cameras.value.filter(camera => camera.id !== cameraId);
        console.log("Lista atualizada após exclusão:", cameras.value);

        showNotification(`Camera 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 filtercameras = () => {
      // O filtro já é realizado automaticamente por meio do computed property filteredcameras
    };

    const submitForm = async (cameraData) => {
      loading.value.submit = true;
      try {
        if (isEditing.value) {
          // Atualizar item existente
          await cameraService.updateCamera(cameraData.id, cameraData);
          const index = cameras.value.findIndex(camera => camera.id === cameraData.id);
          if (index !== -1) {
            cameras.value[index] = cameraData;
          }
        } else {
          // Criar novo item
          const newItem = await cameraService.createCamera(cameraData);
          cameras.value.push(newItem);
        }
        showNotification(`Camera ${isEditing.value ? 'atualizado' : 'cadastrado'} com sucesso!`);
      
      } catch (error) {
        console.error('Error submitting form:', error);
      } finally {
        loading.value.submit = false;
      }
    };

    
    // Lifecycle hooks
    onMounted(async () => {
      try {
        loading.value.cameras = true;
        const camerasData = await cameraService.getAllCameras();
        console.log("Dados recebidos da API:", camerasData);
        
        // Garanta que os dados já estão filtrados (usuários deletados removidos)
        cameras.value = camerasData.filter(camera => !camera.deleted);
      } catch (error) {
        showNotification('Erro ao carregar dados da API', 'error');
        console.error('Error fetching cameras:', error);
      } finally {
        loading.value.cameras = false;
      }
    });
    
    return {
      // States
      isEditing,
      loading,
      dialogs,
      filters,
      cameras,
      forms,
      headers,
      snackbar,
      page,
      itemsPerPage,
      itemToDelete,
      selectedcamera,
      
      // Computed
      filteredcameras,
      
      // Methods
      openDialog,
      confirmDelete,
      submitForm,
      deleteItem,
      openEditPage,
      filtercameras,
      exportToCSV,
      handlecameraUpdated
    };
  }
};
</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>