const taskList = document.getElementById("task-list");
const taskForm = document.getElementById("task-form");
const taskInput = document.getElementById("task-input");
const emptyMsg = document.getElementById("empty-msg");

async function fetchTasks() {
    const res = await fetch("/api/tasks");
    const tasks = await res.json();
    renderTasks(tasks);
}

function renderTasks(tasks) {
    taskList.innerHTML = "";
    emptyMsg.style.display = tasks.length === 0 ? "block" : "none";

    tasks.forEach(function (task) {
        const li = document.createElement("li");
        li.className = "task-item" + (task.completed ? " completed" : "");

        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.className = "task-checkbox";
        checkbox.checked = task.completed;
        checkbox.addEventListener("change", function () {
            toggleTask(task.id);
        });

        const title = document.createElement("span");
        title.className = "task-title";
        title.textContent = task.title;

        const deleteBtn = document.createElement("button");
        deleteBtn.className = "task-delete";
        deleteBtn.textContent = "\u00D7";
        deleteBtn.title = "Delete task";
        deleteBtn.addEventListener("click", function () {
            deleteTask(task.id);
        });

        li.appendChild(checkbox);
        li.appendChild(title);
        li.appendChild(deleteBtn);
        taskList.appendChild(li);
    });
}

taskForm.addEventListener("submit", async function (e) {
    e.preventDefault();
    const title = taskInput.value.trim();
    if (!title) return;

    await fetch("/api/tasks", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title: title }),
    });

    taskInput.value = "";
    fetchTasks();
});

async function toggleTask(id) {
    await fetch("/api/tasks/" + id, { method: "PUT" });
    fetchTasks();
}

async function deleteTask(id) {
    await fetch("/api/tasks/" + id, { method: "DELETE" });
    fetchTasks();
}

fetchTasks();