script.js

const form = document.getElementById("taskForm");
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");
const emptyMessage = document.getElementById("emptyMessage");
const filterButtons = document.querySelectorAll(".filter-btn");

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
let editId = null;
let currentFilter = "all";

/* ===================== SAVE ===================== */
function saveToStorage() {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}

/* ===================== RENDER ===================== */
function renderTasks() {
  taskList.innerHTML = "";

  let filteredTasks = tasks;

  if (currentFilter === "active") {
    filteredTasks = tasks.filter(task => !task.completed);
  } else if (currentFilter === "completed") {
    filteredTasks = tasks.filter(task => task.completed);
  }

  if (filteredTasks.length === 0) {
    emptyMessage.style.display = "block";
  } else {
    emptyMessage.style.display = "none";
  }

  filteredTasks.forEach(task => {
    const li = document.createElement("li");
    li.classList.add("task-item");
    if (task.completed) li.classList.add("completed");

    li.innerHTML = `
      <div class="task-left">
        <input type="checkbox" 
          ${task.completed ? "checked" : ""} 
          onclick="toggleComplete(${task.id})" />
        <span>${task.text}</span>
      </div>

      <div class="actions">
        <button class="edit-btn" onclick="editTask(${task.id})">Edit</button>
        <button class="delete-btn" onclick="deleteTask(${task.id})">Delete</button>
      </div>
    `;

    taskList.appendChild(li);
  });
}

/* ===================== ADD / UPDATE ===================== */
form.addEventListener("submit", function (e) {
  e.preventDefault();

  const text = taskInput.value.trim();
  if (!text) return;

  if (editId) {
    tasks = tasks.map(task =>
      task.id === editId ? { ...task, text } : task
    );
    editId = null;
    form.querySelector("button").textContent = "Add Task";
  } else {
    tasks.push({
      id: Date.now(),
      text,
      completed: false
    });
  }

  saveToStorage();
  renderTasks();
  form.reset();
});

/* ===================== EDIT ===================== */
function editTask(id) {
  const task = tasks.find(t => t.id === id);
  taskInput.value = task.text;
  editId = id;
  form.querySelector("button").textContent = "Update Task";
}

/* ===================== DELETE ===================== */
function deleteTask(id) {
  tasks = tasks.filter(task => task.id !== id);

  if (editId === id) {
    editId = null;
    form.reset();
    form.querySelector("button").textContent = "Add Task";
  }

  saveToStorage();
  renderTasks();
}

/* ===================== TOGGLE COMPLETE ===================== */
function toggleComplete(id) {
  tasks = tasks.map(task =>
    task.id === id
      ? { ...task, completed: !task.completed }
      : task
  );

  saveToStorage();
  renderTasks();
}

/* ===================== FILTER ===================== */
filterButtons.forEach(button => {
  button.addEventListener("click", function () {
    filterButtons.forEach(btn => btn.classList.remove("active"));
    this.classList.add("active");
    currentFilter = this.dataset.filter;
    renderTasks();
  });
});

/* ===================== INIT ===================== */
renderTasks();