popup.js

//load UI for watchlist
document.addEventListener("DOMContentLoaded", () => {
    updateUI();  // always reload from storage when popup opens
});

//settings button
document.getElementById("settings-btn").onclick = () => {
    chrome.tabs.create( { url: chrome.runtime.getURL("settings.html") } );
}; 

//registration season
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth();
let season = '';
if (month >= 10 || month <= 4) {
    season = 'Spring';
}
else {
    season = 'Fall';
}
document.getElementById("season").textContent = `${season} ${year}`;

function updateUI() {
    chrome.storage.local.get("watchlist", (data) => {
        const container = document.getElementById("watchlistCourses");
        container.innerHTML = "";
        const watchlist = data.watchlist || [];

        watchlist.forEach(course => {

            const courseRow = document.createElement("div");
            courseRow.className = "courseRow";
            courseRow.id = `course-${course.unique}`;

            const courseInfo = document.createElement("div");
            courseInfo.className = "courseInfo";
            const p = document.createElement("p");
            p.textContent = `${course.unique} - ${course.instructor}`;
            courseInfo.appendChild(p);
            courseRow.appendChild(courseInfo);

            const sliderBox = document.createElement("div");
            sliderBox.className = "sliderBox";
            const sliderContainer = document.createElement("div");
            sliderContainer.className = "sliderContainer";

            const slider = document.createElement("input");
            slider.type = "range";
            slider.min = 5;
            slider.max = 3600;
            slider.step = 1;
            slider.value = course.interval;

            const sliderValueDisplay =  document.createElement("span");
            sliderValueDisplay.textContent = slider.value + "s";

            slider.addEventListener("input", () => {
                sliderValueDisplay.textContent = slider.value + "s";
                chrome.runtime.sendMessage({
                    action: "UpdateInterval",
                    course: course,
                    interval: parseInt(slider.value)
                })
            })

            sliderContainer.appendChild(slider);
            sliderContainer.appendChild(sliderValueDisplay);
            sliderBox.appendChild(sliderContainer);
            courseRow.appendChild(sliderBox);
            container.appendChild(courseRow);
        });
    });
    chrome.storage.local.get("updates", (data) => {
    const updates = data.updates || [];
    renderUpdates(updates);
    });
}

function renderUpdates(updates) {
    const updatesBox = document.getElementById("statusUpdates");
    if (!updatesBox) return;

    updatesBox.innerHTML = "";

    updates.forEach(update => {
        const row = document.createElement("p");
        row.textContent = `${update.unique}: ${update.oldStatus} → ${update.newStatus}`;
        updatesBox.appendChild(row);
    });
}