<template>
    <header class="header">
        <img
            src="@/components/icons/logo inpulse.png"
            alt="INPulse Logo"
            class="logo"
        />
    </header>

    <div class="choix-projet">
        <h1>Bienvenue sur MyINPulse</h1>
        <p>
            Souhaitez-vous créer un nouveau projet ou joindre un projet existant
            ?
        </p>

        <div class="button-group">
            <button @click="choisir('creer')">Créer un projet</button>
            <button @click="choisir('joindre')">Joindre un projet</button>
        </div>

        <div v-if="choix === 'creer'" class="form-creer">
            <h2>Créer un projet</h2>
            <label for="nomProjet">Nom du projet :</label>
            <input
                id="nomProjet"
                v-model="nomProjet"
                type="text"
                placeholder="Nom du projet"
            />
            <button @click="validerCreation">Valider</button>
        </div>

        <div v-if="choix === 'joindre'" class="message-indispo">
            <h2>Joindre un projet</h2>
            <p>Cette fonctionnalité n'est pas encore disponible.</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Project from "@/ApiClasses/Project";
import { requestProjectCreation } from "@/services/Apis/Entrepreneurs.ts";

const choix = ref<string | null>(null);
const nomProjet = ref("");

const choisir = (option: "creer" | "joindre") => {
    choix.value = option;
};

const validerCreation = () => {
    if (!nomProjet.value.trim()) {
        alert("Veuillez entrer un nom de projet.");
        return;
    }

    // Obtenir la date actuelle au format YYYY-MM-DD
    const today = new Date();
    const yyyy = today.getFullYear();
    const mm = String(today.getMonth() + 1).padStart(2, "0");
    const dd = String(today.getDate()).padStart(2, "0");
    const formattedDate = `${yyyy}-${mm}-${dd}`;

    // Créer une instance de Project
    const nouveauProjet = new Project({
        projectName: nomProjet.value.trim(),
        creationDate: formattedDate,
        status: "PENDING",
    });

    // Appeler l’API
    requestProjectCreation(
        nouveauProjet,
        (response) => {
            console.log("Projet créé :", response.data);
            alert(`Projet "${nomProjet.value}" créé avec succès !`);
        },
        (error) => {
            console.error("Erreur lors de la création du projet :", error);
            alert("Une erreur est survenue lors de la création du projet.");
        }
    );
};
</script>

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

.choix-projet {
    max-width: 500px;
    margin: auto;
    padding: 2rem;
    background-color: #fefefe;
    border-radius: 10px;
    font-family: "Inter", sans-serif;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.button-group {
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
}

button {
    padding: 10px 20px;
    font-size: 1em;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

button:hover {
    background-color: #43a047;
}

input {
    padding: 10px;
    margin-top: 10px;
    width: 80%;
    font-size: 1em;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.logo {
    height: 50px;
}
</style>
