<template>
    <Header />
    <error-wrapper></error-wrapper>
    <div id="container">  
      <div id="main">
        <h3> Projet en cours </h3>
          <ProjectComp 
            v-for="(project, index) in projects" 
            :key="index"
            :project-name="project.name"
            :list-name="project.members"
            :project-link="project.link"
          />

        <div id ="main">
          <h3> Projet en attente </h3>
          
          <PendingProjectComponent
            v-for="( project, index) in pendingProjects"
            :key="index"
            :project-name="project.name"
            :creation-date="project.creationDate"
          />
        </div> 

        
      </div>  
      
      <Agenda :project-r-d-v="rendezVous" />
    </div>
    <AddProjectForm/>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { callApi } from "@/services/api";

import Header from "../components/HeaderComponent.vue";
import Agenda from "../components/Agenda.vue";
import ProjectComp from "../components/ProjectComponent.vue";
import PendingProjectComponent from "@/components/PendingProjectComponent.vue";
import AddProjectForm from "@/components/AddProjectForm.vue";

const PORT = "8081";
const URI = `http://localhost:${PORT}`;

//const projects = ref<{ name: string; link: string; members: string[] }[]>([]);

/* const fetchProjects = () => {
  callApi(
    `${URI}/admin/projects`,
    async (response) => {
      console.log(response);
      const projectList = response.data;

      const projectPromises = projectList.map((project: any) => {
        return new Promise(async (resolve) => {
          callApi(
            `${URI}/shared/projects/entrepreneurs/${project.idProject}`,
            (memberResponse) => {
              const members = memberResponse.data.map((m: any) => m.userName);
              resolve({
                name: project.projectName,
                link: `/project/${project.idProject}`,
                members,
              });
            },
            () => {
              // Error fetching members, still resolve with empty members
              resolve({
                name: project.projectName,
                link: `/project/${project.idProject}`,
                members: [],
              });
            }
          );
        });
      });

      projects.value = await Promise.all(projectPromises);
    },
    (error) => {
      console.error("Error fetching projects:", error);
    }
  );
};

onMounted(fetchProjects);
 */


const projects = ref([
  {
    name: "Projet Alpha",
    link: "/canvas", // to test
    members: ["Alice", "Bob", "Charlie"],
  },
  {
    name: "Projet Beta",
    link: "./canvas", // to test
    members: ["David", "Eve", "Frank"],
  },
]);


const pendingProjects = ref ([
  { name: "l'eau", creationDate: "26-02-2024" },
  { name: "l'air", creationDate: "09-03-2023" },
])

const rendezVous = ref([
  { projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
  { projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
]);

</script>

<style scoped>

#container {
    margin: 0;
    display: grid;
    grid-template-columns: 3fr 1fr; /* Main body takes 3/4, agenda 1/4 */
    height: 100vh; /* Full viewport height */
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #0056b3;
}

</style>