script.js

let pendingTask = null;
let selectedStorage = "local";

// Modal Elements
const duplicateModal = document.getElementById("duplicateModal");
const modal = document.getElementById("storageModal");
const confirmSaveBtn = document.getElementById("confirmSave");
const filterSelect = document.getElementById("storageFilter");

filterSelect.addEventListener("change", () => {
  renderTasks(); // re-render on selection change
});

function closeDuplicateModal() {
  duplicateModal.style.display = "none";
}
document.getElementById("saveBtn").addEventListener("click", () => {
  const taskText = document.getElementById("taskInput").value.trim();
  if (!taskText) return;

  const normalizedInput = taskText.toLowerCase();
  const storage = selectedStorage === "local" ? localStorage : sessionStorage;
  const stored = JSON.parse(storage.getItem("tasks")) || [];

  const duplicate = stored.some(
    (task) => task.text.trim().toLowerCase() === normalizedInput
  );

  if (duplicate) {
    duplicateModal.style.display = "flex";
    return;
  }

  pendingTask = { text: taskText };
  modal.style.display = "flex";
});

confirmSaveBtn.addEventListener("click", () => {
  const storageType = document.querySelector(
    'input[name="storage"]:checked'
  ).value;
  selectedStorage = storageType;

  if (pendingTask) {
    const storage = storageType === "local" ? localStorage : sessionStorage;
    let storedTasks = JSON.parse(storage.getItem("tasks")) || [];
    storedTasks.push(pendingTask);
    storage.setItem("tasks", JSON.stringify(storedTasks));
    pendingTask = null;
    document.getElementById("taskInput").value = "";

    modal.style.display = "none";
    renderTasks("create");
    showStorageSpace();
  }
});

function renderTasks(animateType = null, animateIndex = null) {
  const container = document.getElementById("tasksContainer");
  container.innerHTML = "";

  const filter = filterSelect.value;
  let localTasks = JSON.parse(localStorage.getItem("tasks")) || [];
  let sessionTasks = JSON.parse(sessionStorage.getItem("tasks")) || [];

  let displayTasks = [];

  if (filter === "local") {
    displayTasks = localTasks;
  } else if (filter === "session") {
    displayTasks = sessionTasks;
  } else {
    displayTasks = [
      ...localTasks.map((t) => ({ ...t, source: "local" })),
      ...sessionTasks.map((t) => ({ ...t, source: "session" })),
    ];
  }

  displayTasks.forEach((task, index) => {
    const card = document.createElement("div");
    card.className = "task-card";

    if (
      (animateType === "create" && index === displayTasks.length - 1) ||
      (animateType === "edit" && index === animateIndex) ||
      (animateType === "delete" && index === animateIndex)
    ) {
      card.classList.add("animate");
    }

    const taskText = document.createElement("span");
    taskText.textContent = task.text;

    const actions = document.createElement("div");
    actions.className = "task-actions";

    const editBtn = document.createElement("button");
    editBtn.textContent = "Edit";
    editBtn.onclick = () => {
      const newText = prompt("Edit task:", task.text);
      if (newText !== null) {
        let tasksToEdit, storage;
        if (filter === "local" || task.source === "local") {
          tasksToEdit = localTasks;
          storage = localStorage;
        } else {
          tasksToEdit = sessionTasks;
          storage = sessionStorage;
        }
        tasksToEdit[index].text = newText;
        storage.setItem("tasks", JSON.stringify(tasksToEdit));
        renderTasks("edit", index);
      }
    };

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Delete";
    deleteBtn.onclick = () => {
      let tasksToDelete, storage, taskList;
      if (task.source === "local") {
        taskList = localTasks;
        storage = localStorage;
      } else {
        taskList = sessionTasks;
        storage = sessionStorage;
      }

      // Find actual index in the respective array
      const realIndex = taskList.findIndex((t) => t.text === task.text);
      if (realIndex > -1) {
        taskList.splice(realIndex, 1);
        storage.setItem("tasks", JSON.stringify(taskList));
        renderTasks("delete", index); // Still use display index for animation
      }
    };

    actions.appendChild(editBtn);
    actions.appendChild(deleteBtn);
    card.appendChild(taskText);
    card.appendChild(actions);
    container.appendChild(card);
  });
}

window.onload = () => {
  document.getElementById("storageFilter").value = "all"; // Set default filter
  renderTasks();
  showStorageSpace();
};

// Close modal on outside click
window.onclick = function (event) {
  if (event.target === modal) {
    modal.style.display = "none";
    pendingTask = null; // Clear the unsaved task
  }
};