<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"
                :project-id="0"
            />

            <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>

            <AddProjectForm />
        </div>

        <Agenda :project-r-d-v="rendezVous" />
    </div>
</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/AgendaComponent.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 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 2rem;
    padding: 2rem;
    background-color: #f4f6f9;
    min-height: 100vh;
    box-sizing: border-box;
}

#main {
    background-color: #fff;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.2rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 0.5rem;
}

button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

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

/* Add spacing between project sections */
#main > * + * {
    margin-top: 2rem;
}
</style>
