const API_BASE = "http://localhost:5200";
const content = document.getElementById("content");
const errorDiv = document.getElementById("error");

let currentTask = null;

async function loadActiveTask() {
  try {
    const res = await fetch(`${API_BASE}/api/tasks/active`);
    const json = await res.json();

    if (!json.success || !json.data) {
      content.innerHTML = '<p class="no-task">No active task</p>';
      return;
    }

    currentTask = json.data;
    renderTask(currentTask);
  } catch (err) {
    errorDiv.textContent = "Cannot connect to API";
  }
}

function renderTask(task) {
  const isActive = task.status === "Active";
  const isPaused = task.status === "Paused";

  content.innerHTML = `
    <div class="task-title">${escapeHtml(task.title)}</div>
    <span class="task-status status-${task.status}">${task.status}</span>
    ${task.category ? `<div style="font-size:11px;color:#666;">Category: ${escapeHtml(task.category)}</div>` : ""}
    <button id="toggleBtn">${isActive ? "Pause Task" : "Resume Task"}</button>
  `;

  document.getElementById("toggleBtn").addEventListener("click", () => toggleTask(task.id, isActive));
}

async function toggleTask(taskId, isCurrentlyActive) {
  try {
    const action = isCurrentlyActive ? "pause" : "resume";
    const res = await fetch(`${API_BASE}/api/tasks/${taskId}/${action}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({})
    });
    const json = await res.json();
    if (json.success && json.data) {
      currentTask = json.data;
      renderTask(currentTask);
    }
  } catch (err) {
    errorDiv.textContent = "Failed to update task";
  }
}

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

loadActiveTask();