<template>
    <v-card>
      <!-- Navegação das Abas -->
      <v-tabs v-model="tab" light>
        <v-tab value="edit-space">Editar Espaço</v-tab>
        <v-tab value="manage-cameras">Gerenciar Câmeras</v-tab>
      </v-tabs>
  
      <!-- Conteúdo das Abas usando v-tabs-window -->
      <v-card-text>
        <v-tabs-window v-model="tab">
          <!-- Aba para Editar Espaço -->
          <v-tabs-window-item value="edit-space">
            <div class="d-flex align-center justify-space-between">
              <h3 class="ml-4">Editar Espaço</h3>
              <v-btn
                color="primary"
                icon
                class="mr-4"
                @click="saveSpace"
              >
                <v-icon>mdi-content-save</v-icon>
              </v-btn>
            </div>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>Nome:</v-list-item-title>
                <v-text-field
                  v-model="space.name"
                  outlined
                  dense
                  placeholder="Digite o nome do espaço"
                ></v-text-field>
              </v-list-item-content>
            </v-list-item>
            <v-list-item>
              <v-list-item-content>
                <v-list-item-title>Descrição:</v-list-item-title>
                <v-textarea
                  v-model="space.description"
                  outlined
                  dense
                  placeholder="Adicione uma descrição do espaço"
                ></v-textarea>
              </v-list-item-content>
            </v-list-item>
          </v-tabs-window-item>
  
          <!-- Aba para Gerenciar Câmeras -->
          <v-tabs-window-item value="manage-cameras">
            <div class="d-flex align-center justify-space-between">
              <h3 class="ml-4">Gerenciar Câmeras</h3>
              <v-btn
                color="primary"
                class="mr-4"
                @click="openCameraModal"
              >
                <v-icon>mdi-plus</v-icon> Adicionar Câmera
              </v-btn>
            </div>
  
            <!-- Tabela para exibir câmeras -->
            <v-data-table
              :headers="headers"
              :items="cameras"
              :loading="loading"
              class="mt-4"
            >
              <template v-slot:[`item.actions`]="{ item }">
                <div class="d-flex justify-end">
                  <v-icon color="primary" @click="editCamera(item)" class="ml-2">
                    mdi-pencil
                  </v-icon>
                  <v-icon color="red" @click="confirmRemoveCamera(item.id)" class="ml-2">
                    mdi-delete
                  </v-icon>
                </div>
              </template>
              <template v-slot:no-data>
                <p>{{ error || "Nenhuma câmera encontrada." }}</p>
              </template>
            </v-data-table>
          </v-tabs-window-item>
        </v-tabs-window>
      </v-card-text>
  
       <!-- Dialog de Confirmação -->
       <v-dialog v-model="showDeleteDialog" max-width="500px">
        <v-card>
          <v-card-title class="headline">Confirmar Remoção</v-card-title>
          <v-card-text>Você tem certeza que deseja remover esta câmera?</v-card-text>
          <v-card-actions>
            <v-btn text @click="showDeleteDialog = false">Cancelar</v-btn>
            <v-btn color="red" text @click="removeCamera">Confirmar</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
  
      <CameraModal
    v-model="showCameraModal"
    :camera="editingCamera"
    :space-id="space.id"
    :is-edit-mode="isEditMode"
    @save="handleSaveCamera"
    @close="handleCloseModal"
  />
    </v-card>
  </template>
  
  <script>
  import { reactive, ref, computed } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { useSpaceStore } from "../stores/spaces";
  import { useCameraStore } from "../stores/cameras"; // Adicionado
  import CameraModal from "../components/modals/CameraModal.vue";
  export default {
    components: {
      CameraModal,
    },
    setup() {
      const router = useRouter();
      const route = useRoute();
      const spaceStore = useSpaceStore();
      const cameraStore = useCameraStore();
  
      const showCameraModal = ref(false);
      const editingCamera = ref(false);
      const isEditMode = ref(false);
      const showDeleteDialog = ref(false); // Estado para controlar o diálogo de confirmação
      const cameraToDelete = ref(null); // Variável para armazenar a câmera a ser excluída
  
      const tab = ref("edit-space");
      const loading = ref(false);
      const error = ref("");
  
      const space = reactive({
        id: null,
        name: "",
        description: "",
      });
  
      const cameras = ref([]);
      const headers = ref([
        { text: "Nome", value: "name" },
        { text: "Descrição", value: "description" },
        { text: "URL de Conexão", value: "connection_url" },
        { text: "Ações", value: "actions", sortable: false },
      ]);
  
      // Buscar dados do espaço
      const fetchSpaceData = async () => {
        const id = route.params.id;
        loading.value = true;
        try {
          const response = await spaceStore.fetchSpaceById(id);
          console.log(response)
          Object.assign(space, response);
          await fetchCameras(); // Buscar câmeras do espaço
        } catch (err) {
          error.value = "Erro ao carregar os dados.";
          console.error(err);
        } finally {
          loading.value = false;
        }
      };
  
      // Buscar câmeras
      const fetchCameras = async () => {
        try {
          const id = route.params.id;
          cameras.value = await cameraStore.fetchCamerasBySpaceId(id);
        } catch (err) {
          console.error("Erro ao carregar câmeras:", err);
        }
      };
  
      const saveSpace = async () => {
        try {
          await spaceStore.updateSpace(space.id, space);
          router.push("/dashboard/spaces");
        } catch (error) {
          console.error("Erro ao salvar o espaço:", error);
        }
      };
  
      const openCameraModal = () => {
      showCameraModal.value = true;
      editingCamera.value = null; // Reset editing camera when opening for new camera
      isEditMode.value = false; // Set to false for new camera
      console.log("Abrir modal camera")
    };
  
      const handleSaveCamera = async (cameraData) => {
        try {
          if (isEditMode.value) {
            await cameraStore.updateCamera(cameraData.id, cameraData);
          } else {
            await cameraStore.addCamera(cameraData);
          }
          fetchCameras();
        } catch (error) {
          console.error("Erro ao salvar câmera:", error);
        }
      };
  
      const editCamera = (camera) => {
        console.log("Editar câmera:", camera);
        editingCamera.value = { ...camera }; // Passa os dados da câmera para o modal
        isEditMode.value = true; // Define que estamos em modo de edição
        showCameraModal.value = true; // Abre o modal para edição
      };
  
  
      // Confirma a remoção da câmera
      const confirmRemoveCamera = (cameraId) => {
        cameraToDelete.value = cameraId; // Armazena o ID da câmera a ser excluída
        showDeleteDialog.value = true; // Exibe o diálogo de confirmação
      };
  
      // Função para remover a câmera
      const removeCamera = async () => {
        if (cameraToDelete.value) {
          try {
            await cameraStore.removeCamera(cameraToDelete.value);
            cameras.value = cameras.value.filter((camera) => camera.id !== cameraToDelete.value);
            console.log("Câmera removida");
            showDeleteDialog.value = false; // Fecha o diálogo
          } catch (err) {
            console.error("Erro ao remover câmera:", err);
            showDeleteDialog.value = false; // Fecha o diálogo em caso de erro
          }
        }
      };
  
      fetchSpaceData();
  
      return {
        tab,
        space,
        cameras,
        headers,
        saveSpace,
        loading,
        error,
        openCameraModal,
        editCamera,
        removeCamera,
        showCameraModal,
        showDeleteDialog,
        confirmRemoveCamera,
        handleSaveCamera,
        isEditMode,
        editingCamera
      };
    },
  };
  </script>
  