<template>
  <div :class="['cell', { expanded }]" @click="handleClick">
    <h3>{{ title_text }}</h3>

    <div class="section-bloc" v-for="(desc, index) in currentDescriptions" :key="index">
      <!-- Mode affichage -->
      <template v-if="!isEditing[index]">
        <div class="description">
          <p>{{ desc }}</p>
        </div>
        <div class="button-container">
          <button v-if="expanded" @click.stop="startEditing(index)" class="edit-button">Éditer</button>
        </div>
      </template>

      <!-- Mode édition -->
      <template v-else>
        <textarea v-model="editedDescriptions[index]" class="edit-input"></textarea>
        <div class="button-container">
          <button @click.stop="saveEdit(index)" class="save-button">Enregistrer</button>
          <button @click.stop="cancelEdit(index)" class="cancel-button">Annuler</button>
        </div>
      </template>
    </div>

  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";
import axios from "axios";

const IS_MOCK_MODE = true; 

const props = defineProps<{
  projectId: number;
  title: number;
  title_text: string;
  description: string;
}>();

const expanded = ref(false);
const currentDescriptions = ref<string[]>([]);
const editedDescriptions = ref<string[]>([]);
const isEditing = ref<boolean[]>([]);


/*
const fetchData = async () => {
  try {
    const response = await axios.get("http://localhost:5000/data"); // Met à jour l'URL
    if (response.data.length > 0) {
      currentDescription.value = response.data[0].canva_data;
      editedDescription.value = response.data[0].canva_data;
    } else {
      console.warn("Aucune donnée reçue.");
    }
  } catch (error) {
    console.error("Erreur lors de la récupération des données :", error);
  }
};
*/

// Fonction de simulation de l'API
const mockFetch = async (projectId: number, title: number, date: string) => {
  console.log(`Mock fetch pour projectId: ${projectId}, title: ${title}, date: ${date}`);

  return new Promise<{ txt: string }[]>((resolve) => {
    setTimeout(() => {
      resolve([
        { txt: "Ceci est une description 1 pour tester the damn front, Why are u still reading dumbass this is just some nonsense sentence XD" },
        { txt: "Ceci est une description 1 pour tester the damn front, Bruh are u still here?" },
        { txt: "Ceci est une description 1 pour tester the damn front, .-. BRUH" }
      ]);
    }, 500); // Simule un délai réseau de 500ms
  });
};

// Fonction fetchData avec possibilité d'utiliser le mock
const fetchData = async (projectId: number, title: number, date: string, useMock = false) => {
  try {
    const responseData = useMock
      ? await mockFetch(projectId, title, date)
      : (await axios.get<{ txt: string }[]>(
          `http://localhost:5000/shared/projects/lcsection/${projectId}/${title}/${date}`
        )).data;

    if (responseData.length > 0) {
      currentDescriptions.value = responseData.map((item) => item.txt);
      editedDescriptions.value = [...currentDescriptions.value];
      isEditing.value = Array(responseData.length).fill(false);
    } else {
      console.warn("Aucune donnée reçue.");
    }
  } catch (error) {
    console.error("Erreur lors de la récupération des données :", error);
  }
};

// Utilisation du mock dans handleClick pour tester sans serveur
const handleClick = async () => {
  if (!expanded.value) {
    await fetchData(props.projectId, props.title, "NaN", IS_MOCK_MODE); // true pour activer le mock
  } else if (!isEditing.value.includes(true)) {
    // Réinitialiser les descriptions si aucune édition n'est en cours
    currentDescriptions.value = [props.description];
    editedDescriptions.value = [props.description];
  }

  if (!isEditing.value.includes(true)) {
    expanded.value = !expanded.value;
  }
};


const startEditing = (index: number) => {
  isEditing.value[index] = true;
};

/*
const saveEdit = async (index: number) => {
  try {
    const id = index + 1; // À adapter selon l'ID réel des données
    await axios.put(`http://localhost:5000/data/${id}`, {
      canva_data: editedDescriptions.value[index]
    });

    // Mettre à jour l'affichage local après la mise à jour réussie
    currentDescriptions.value[index] = editedDescriptions.value[index];
    isEditing.value[index] = false;
  } catch (error) {
    console.error("Erreur lors de la mise à jour des données :", error);
  }
};
*/

// Fonction de mock pour l'enregistrement
const mockSaveEdit = async (index: number) => {
  try {
    const id = index + 1; // À adapter selon l'ID réel des données
    console.log(`Mock save pour l'ID ${id} avec la description : ${editedDescriptions.value[index]}`);

    // Simuler un délai d'enregistrement comme une requête réseau
    await new Promise((resolve) => setTimeout(resolve, 500)); // Simulation de délai réseau

    // Mettre à jour l'affichage local après la mise à jour réussie
    currentDescriptions.value[index] = editedDescriptions.value[index];
    isEditing.value[index] = false;
  } catch (error) {
    console.error("Erreur lors de la mise à jour des données mockées :", error);
  }
};

// Utilisation de `mockSaveEdit` au lieu de `saveEdit` dans `handleClick` ou tout autre endroit
const saveEdit = async (index: number) => {
  if (IS_MOCK_MODE) {
    await mockSaveEdit(index);
  } else {
    try {
      const id = index + 1;
      await axios.put(`http://localhost:5000/data/${id}`, {
        canva_data: editedDescriptions.value[index]
      });

      // Mettre à jour l'affichage local après la mise à jour réussie
      currentDescriptions.value[index] = editedDescriptions.value[index];
      isEditing.value[index] = false;
    } catch (error) {
      console.error("Erreur lors de la mise à jour des données :", error);
    }
  }
};

const cancelEdit = (index: number) => {
  editedDescriptions.value[index] = currentDescriptions.value[index];
  isEditing.value[index] = false;
};
</script>

<style scoped>
@import "@/components/canvas/style-project.css";

.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

.expanded-content {
  justify-content: flex-start !important;
}

.cell:not(.expanded):hover {
  transform: scale(1.05);
  box-shadow: 0 8px 9px rgba(0, 0, 0, 0.2);
}

.cell h3 {
  font-size: 20px;
  font-weight: 500;
  /*margin-bottom: 10px;*/
}

.cell p {
  font-size: 14px;
  color: #666;
}

.expanded {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}


.description {
  display: flex;
  align-items: center;  /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  text-align: center; /* Centre le texte à l'intérieur */
  width: 100%;
  height: 100%;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 2%;
  margin-right: 4%;
}

.description + .p {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.edit-input {
  width: 100%;
  height: 100%;
  font-size: 16px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 10px;
  box-sizing: border-box;
  margin-left: 2%;
}


.button-container {
  display: block;
  margin-top: 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-right: 1%;
}

.section-bloc ,.editing-section-bloc {
  width: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-right: 10%;
  margin: 10px;
}

.edit-button {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 12px;
  margin-right: 20px;
}

.save-button, .cancel-button {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 12px;
  margin-bottom: 5px;
}

.edit-button {
  background-color: #007bff;
  color: white;
}

.save-button {
  background-color: #28a745;
  color: white;
}

.cancel-button {
  background-color: #dc3545;
  color: white;
}

.edit-button:hover {
  background-color: #0056b3;
}

.save-button:hover {
  background-color: #218838;
}

.cancel-button:hover {
  background-color: #c82333;
}

</style>