<template>
    <div>
      <header>
        <HeaderCanvas :project-id="1" />
      </header>
    </div>
    <div>
      <h1 class="page-title">PAGE CANVAS</h1>

      <p class="canvas-help-text">
        Cliquez sur un champ du tableau pour afficher son contenu en détail ci-dessous.
      </p>
      <LeanCanvas />

      <div class="info-box">
        <p>
          Responsable : <strong>{{ admin.userName }} {{ admin.userSurname }}</strong><br />
          Contact : <a href="mailto:{{ admin.primaryMail }}">{{ admin.primaryMail }}</a> |
          <a href="tel:{{ admin.phoneNumber }}">{{ admin.phoneNumber }}</a>
        </p>
      </div>
    </div>
</template>
  
<script setup lang="ts">

import HeaderCanvas from "../components/canvas/HeaderCanvas.vue";
import LeanCanvas from '../components/canvas/LeanCanvas.vue';
import { ref, onMounted } from "vue";
import { axiosInstance } from "@/services/api.ts";

const IS_MOCK_MODE = true;

// Variables pour les informations de l'administrateur
const admin = ref({
  idUser: 0,
  userSurname: "",
  userName: "",
  primaryMail: "",
  secondaryMail: "",
  phoneNumber: ""
});

const mockAdminData = {
  idUser: 1,
  userSurname: "ALAMI",
  userName: "Adnane",
  primaryMail: "mock.admin@example.com",
  secondaryMail: "admin.backup@example.com",
  phoneNumber: "0600000000"
};

// Fonction pour récupérer les données de l'administrateur
const fetchAdminData = async (projectId: number, useMock = IS_MOCK_MODE) => {
  try {
    if (useMock) {
      console.log("Utilisation des données mockées pour l'administrateur");
      admin.value = mockAdminData;
      return;
    }

    const response = await axiosInstance.get(`/shared/projects/admin/${projectId}`);
    admin.value = response.data;
  } catch (error) {
    console.error("Erreur lors de la récupération des données de l'administrateur :", error);
  }
};

// Appeler la fonction fetch au montage du composant
onMounted(() => {
  const projectId = 1;
  fetchAdminData(projectId);
});
</script>
  
<style scoped>
.page-title {
  text-align: center;
  font-size: 2.5rem;
  margin-top: 20px;
}

.canvas-help-text {
  text-align: center;
  font-size: 0.7rem;
  color: #666;
}

.info-box {
  background-color: #f9f9f9;
  padding: 15px;             
  border-radius: 8px;        
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
  font-family: Arial, sans-serif; 
  width: 30%;                
  max-width: 600px;          
  margin: 20px auto;         
}

.info-box p {
  font-size: 16px;
  line-height: 1.5;  
  color: #333;           
}

.info-box a {
  color: #007bff;        
  text-decoration: none; 
}

.info-box a:hover {
  text-decoration: underline;
}
</style>