app.js

const screens = {
  dashboard: document.getElementById("screen-dashboard"),
  active: document.getElementById("screen-active"),
  log: document.getElementById("screen-log"),
};

let pollTimer = null;

function showScreen(name) {
  Object.values(screens).forEach((el) => el.classList.remove("active"));
  screens[name].classList.add("active");
}

async function startClass() {
  await fetch("/api/start", { method: "POST" });
  document.getElementById("video-feed").src = "/video_feed?t=" + Date.now();
  showScreen("active");
  pollTimer = setInterval(pollStats, 1000);
}

async function stopClass() {
  await fetch("/api/stop", { method: "POST" });
  clearInterval(pollTimer);
  document.getElementById("video-feed").src = "";
  showScreen("dashboard");
}

async function pollStats() {
  const res = await fetch("/api/stats");
  const data = await res.json();
  document.getElementById("stat-engaged").textContent = data.engaged;
  document.getElementById("stat-distracted").textContent = data.distracted;
  document.getElementById("stat-drowsy").textContent = data.drowsy;
}

async function openLog() {
  showScreen("log");
  const res = await fetch("/api/disengaged");
  const events = await res.json();
  const grid = document.getElementById("log-grid");

  if (events.length === 0) {
    grid.innerHTML = '<p class="log-empty">No events recorded yet.</p>';
    return;
  }

  grid.innerHTML = events
    .map((e) => {
      const reasonClass = "reason-" + e.reason.toLowerCase();
      return `
        <div class="log-item">
          <img src="/snapshots/${e.image_path}" alt="${e.reason} snapshot" />
          <div class="log-item-meta">
            <div class="log-item-time">${e.timestamp}</div>
            <div class="log-item-reason ${reasonClass}">${e.reason}</div>
          </div>
        </div>`;
    })
    .join("");
}

document.getElementById("btn-start").addEventListener("click", startClass);
document.getElementById("btn-stop").addEventListener("click", stopClass);
document.getElementById("btn-view-log").addEventListener("click", openLog);
document.getElementById("btn-back").addEventListener("click", () => showScreen("dashboard"));