const API_URL = "/api/attendance";
const form = document.getElementById("attendance-form");
const nameInput = document.getElementById("student-name");
const timeInput = document.getElementById("arrival-time");
const body = document.getElementById("attendance-body");
const emptyState = document.getElementById("empty-state");
const message = document.getElementById("message");
const refreshBtn = document.getElementById("refresh-btn");

function setDefaultTime() {
  const now = new Date();
  timeInput.value = now.toTimeString().slice(0, 5);
}

function showMessage(text) {
  message.textContent = text;
  setTimeout(() => { message.textContent = ""; }, 2500);
}

async function loadAttendance() {
  const response = await fetch(API_URL);
  const entries = await response.json();
  body.innerHTML = "";
  emptyState.classList.toggle("hidden", entries.length !== 0);

  entries.forEach((entry, index) => {
    const row = document.createElement("tr");
    row.innerHTML = `
      <td>${index + 1}</td>
      <td><strong>${escapeHtml(entry.student_name)}</strong></td>
      <td>${entry.arrival_time.slice(0, 5)}</td>
      <td>${new Date(entry.created_at).toLocaleString()}</td>
      <td><button class="danger" data-id="${entry.id}">Delete</button></td>
    `;
    body.appendChild(row);
  });
}

function escapeHtml(value) {
  return String(value).replace(/[&<>'"]/g, char => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;", "'": "&#39;", '"': "&quot;"
  }[char]));
}

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const student_name = nameInput.value.trim();
  const arrival_time = timeInput.value;
  if (!student_name || !arrival_time) return;

  const response = await fetch(API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ student_name, arrival_time })
  });

  if (!response.ok) {
    showMessage("Could not add student.");
    return;
  }

  form.reset();
  setDefaultTime();
  showMessage("Student added successfully.");
  loadAttendance();
});

body.addEventListener("click", async (event) => {
  if (!event.target.matches("button[data-id]")) return;
  const id = event.target.dataset.id;
  await fetch(`${API_URL}/${id}`, { method: "DELETE" });
  showMessage("Entry deleted.");
  loadAttendance();
});

refreshBtn.addEventListener("click", loadAttendance);
setDefaultTime();
loadAttendance();