<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 :is-admin="isAdmin" />
        <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 class="main"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import HeaderCanvas from "../components/canvas/HeaderCanvas.vue";
import LeanCanvas from "../components/canvas/LeanCanvas.vue";
import { ref, onMounted /*, defineProps*/ } from "vue";
import { axiosInstance } from "@/services/api.ts";

const IS_MOCK_MODE = true;

/* 
const props = defineProps<{
  projectId: number;
  token: TokenPayload;
}>();


is_admin = token.includes("MyINPulse-admin")
  */

const isAdmin = 0;

// 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;
}

.canvas-help-text {
    margin-top: 20px;
    margin-bottom: -10px;
}

div:last-child {
    margin-bottom: 60px;
}
</style>
