<template>
    <div class="appointment-list">
        <h2>Liste des rendez-vous</h2>
        <h3>de {{ store.user.username }}</h3>
        <ul v-if="appointments.length">
            <li v-for="appt in appointments" :key="appt.idAppointment">
                <strong>Sujet :</strong> {{ appt.appointmentSubject }}<br />
                <strong>Date :</strong> {{ appt.appointmentDate }}<br />
                <strong>Heure :</strong> {{ appt.appointmentTime }}<br />
                <strong>Durée :</strong> {{ appt.appointmentDuration }}<br />
                <strong>Lieu :</strong> {{ appt.appointmentPlace }}
                <hr />
            </li>
        </ul>

        <p v-else>Aucun rendez-vous trouvé.</p>
    </div>
</template>

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

// Define the interface for the API response
interface AppointmentResponse {
    idAppointment: number;
    appointmentSubject: string;
    appointmentDate: string;
    appointmentTime: string;
    appointmentDuration: string;
    appointmentPlace: string;
}

const appointments = ref<Appointment[]>([]);

function loadAppointments() {
    if (!store.user) {
        console.error(
            "L'utilisateur n'est pas connecté ou les données utilisateur ne sont pas disponibles."
        );
        return;
    }
    //console.log("username :", store.user.username);
    //console.log("token  :", store.user.token);
    callApi(
        "/admin/appointments/upcoming",
        (response) => {
            appointments.value = response.data.map(
                (item: AppointmentResponse) => new Appointment(item)
            );
        },
        (error) => {
            console.error(
                "Erreur lors de la récupération des rendez-vous :",
                error
            );
        }
    );
}

onMounted(() => {
    loadAppointments();
});
</script>

<style scoped>
.appointment-list {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background: #fdfdfd;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
}

li {
    margin-bottom: 15px;
    line-height: 1.6;
}
</style>
