document.addEventListener("DOMContentLoaded", () => {
    fetch("/api/weight-loss-plan")
        .then(response => response.json())
        .then(data => {
            const week1 = document.getElementById("plan-week1");
            const week2 = document.getElementById("plan-week2");

            const renderPlan = (week, weekData) => {
                const days = Object.keys(weekData);
                days.forEach(day => {
                    const meal = weekData[day];
                    const dayDiv = document.createElement("div");
                    dayDiv.classList.add("day");

                    const dayHeader = document.createElement("h3");
                    dayHeader.textContent = `${day.charAt(0).toUpperCase() + day.slice(1)}`;
                    dayDiv.appendChild(dayHeader);

                    const mealInfo = document.createElement("p");
                    mealInfo.textContent = `Meal: ${meal.meal} (Calories: ${meal.calories})`;
                    dayDiv.appendChild(mealInfo);

                    week.appendChild(dayDiv);
                });
            };

            renderPlan(week1, data.plan.week1);
            renderPlan(week2, data.plan.week2);
        })
        .catch(error => {
            console.error("Error fetching data:", error);
        });
});