script.js

fetch('ideas.json')
  .then(response => response.json())
  .then(content => {
    fileContent = content;
  })
  .catch(error => {
    console.error('Error:', error);
    idea.textContent = 'Could not load ideas.';
  });

const generate = document.getElementById("generate");
const idea = document.getElementById("idea")
const ideaName = document.getElementById("ideaName")
const difficulty = document.getElementById("ideaDifficulty")
const ideaCompleted = document.getElementById("ideaCompleted")
const difficultySelect = document.querySelector(".generateSettings select")
const completedIdeasModal = document.getElementById("completedIdeas")
const completedIdeasButton = document.getElementById("completedIdeasBtn")
const completedIdeasList = completedIdeasModal.querySelector("ul")
const completedIdeasClose = completedIdeasModal.querySelector(".close")
const availableIdeasModal = document.getElementById("availableIdeas")
const availableIdeasButton = document.getElementById("viewAllIdeas")
const availableIdeasList = availableIdeasModal.querySelector("ul")
const availableIdeasClose = availableIdeasModal.querySelector(".close")
const availableIdeasDifficultySelect = availableIdeasModal.querySelector(".generateSettings select")
const ideaSearcher = document.getElementById("ideaSearcher")
let fileContent = null;
let lastIdea = null;
let currentIdea = null;

const completedIdeasStorageKey = "completedIdeas";

function getCompletedIdeas() {
  try {
    const storedIdeas = localStorage.getItem(completedIdeasStorageKey);
    return storedIdeas ? JSON.parse(storedIdeas) : [];
  } catch (error) {
    console.error("Error reading completed ideas:", error);
    return [];
  }
}

function saveCompletedIdeas(completedIdeas) {
  localStorage.setItem(completedIdeasStorageKey, JSON.stringify(completedIdeas));
}

function isIdeaCompleted(ideaTitle) {
  return getCompletedIdeas().includes(ideaTitle);
}

function markIdeaAsCompleted(ideaTitle) {
  const completedIdeas = getCompletedIdeas();

  if (completedIdeas.includes(ideaTitle)) {
    return false;
  }

  completedIdeas.push(ideaTitle);
  saveCompletedIdeas(completedIdeas);
  return true;
}

function renderCompletedIdeas() {
  const completedIdeas = getCompletedIdeas();

  if (!completedIdeasList) {
    return;
  }

  completedIdeasList.innerHTML = "";

  if (completedIdeas.length === 0) {
    const emptyItem = document.createElement("li");
    emptyItem.className = "completedIdeasDefaultText";
    emptyItem.textContent = "When you complete an idea, it will go here!";
    completedIdeasList.appendChild(emptyItem);
    return;
  }

  completedIdeas.forEach(completedIdeaTitle => {
    const listItem = document.createElement("li");
    listItem.textContent = completedIdeaTitle;
    listItem.dataset.completedIdea = completedIdeaTitle;
    completedIdeasList.appendChild(listItem);
  });
}

function getAvailableIdeas(content) {
  if (!Array.isArray(content)) {
    return [];
  }

  return content;
}

function renderAvailableIdeas() {
  if (!availableIdeasList) {
    return;
  }

  availableIdeasList.innerHTML = "";

  if (!Array.isArray(fileContent) || fileContent.length === 0) {
    const loadingItem = document.createElement("li");
    loadingItem.className = "availableIdeasDefaultText";
    loadingItem.textContent = "The available ideas are still loading.";
    availableIdeasList.appendChild(loadingItem);
    return;
  }

  const selectedDifficulty = availableIdeasDifficultySelect ? availableIdeasDifficultySelect.value : "All";
  const searchTerm = ideaSearcher ? ideaSearcher.value.trim().toLowerCase() : "";
  const completedIdeas = getCompletedIdeas();

  let availableIdeas = getAvailableIdeas(fileContent);

  if (selectedDifficulty !== "All") {
    availableIdeas = availableIdeas.filter(ideaItem => ideaItem.difficulty === selectedDifficulty);
  }

  if (searchTerm) {
    availableIdeas = availableIdeas.filter(ideaItem => {
      const searchableText = `${ideaItem.title} ${ideaItem.difficulty} ${ideaItem.description}`.toLowerCase();
      return searchableText.includes(searchTerm);
    });
  }

  if (availableIdeas.length === 0) {
    const emptyItem = document.createElement("li");
    emptyItem.className = "availableIdeasDefaultText";
    emptyItem.textContent = searchTerm || selectedDifficulty !== "All"
      ? "No ideas match your filters."
      : "All ideas have been completed!";
    availableIdeasList.appendChild(emptyItem);
    return;
  }

  availableIdeas.forEach(ideaItem => {
    const listItem = document.createElement("li");
    listItem.dataset.availableIdea = ideaItem.title;
    listItem.classList.toggle("isCompleted", completedIdeas.includes(ideaItem.title));

    const title = document.createElement("span");
    title.className = "availableIdeasTitle";
    title.textContent = ideaItem.title;

    const badge = document.createElement("span");
    badge.className = "availableIdeasDifficulty";
    badge.textContent = ideaItem.difficulty;
    badge.dataset.difficultyValue = ideaItem.difficulty;

    listItem.append(title, badge);
    availableIdeasList.appendChild(listItem);
  });
}

function updateCompletedButton() {
  if (!currentIdea) {
    ideaCompleted.style.display = "none";
    return;
  }

  const completedIdeas = getCompletedIdeas();
  const isCompleted = completedIdeas.includes(currentIdea.title);

  ideaCompleted.style.display = "inline-flex";
  ideaCompleted.innerHTML = isCompleted ? "<img src=\"check.svg\" alt=\"\"> Idea completed" : "<img src=\"check.svg\" alt=\"\"> Mark idea as completed";
  ideaCompleted.dataset.completed = isCompleted ? "true" : "false";
}

function getRandomLineFromFile(content) {
  if (!Array.isArray(content) || content.length === 0) {
    return "";
  }

  if (content.length === 1) {
    return content[0];
  }

  let nextIdea = content[Math.floor(Math.random() * content.length)];
  while (nextIdea === lastIdea) {
    nextIdea = content[Math.floor(Math.random() * content.length)];
  }

  return nextIdea;
}

function getFilteredIdeas(content) {
  if (!Array.isArray(content)) {
    return [];
  }

  const selectedDifficulty = difficultySelect ? difficultySelect.value : "All";
  const completedIdeas = getCompletedIdeas();
  const availableIdeas = content.filter(ideaItem => !completedIdeas.includes(ideaItem.title));

  if (selectedDifficulty === "All") {
    return availableIdeas;
  }

  const filteredIdeas = availableIdeas.filter(ideaItem => ideaItem.difficulty === selectedDifficulty);
  return filteredIdeas;
}

function renderIdea(ideaItem) {
  currentIdea = ideaItem;

  ideaName.textContent = ideaItem.title;
  difficulty.textContent = ideaItem.difficulty;
  difficulty.dataset.difficultyValue = ideaItem.difficulty;
  idea.textContent = ideaItem.description;

  updateCompletedButton();
}

function removeCompletedIdea(completedIdeaTitle) {
  const completedIdeas = getCompletedIdeas().filter(ideaTitle => ideaTitle !== completedIdeaTitle);
  saveCompletedIdeas(completedIdeas);
  renderCompletedIdeas();

  if (currentIdea && currentIdea.title === completedIdeaTitle) {
    updateCompletedButton();
  }
}

generate.addEventListener("click", function() {
  if (!Array.isArray(fileContent) || fileContent.length === 0) {
    idea.innerHTML = "Ideas are still loading...";
    return;
  }

  const availableIdeas = getFilteredIdeas(fileContent);

  if (availableIdeas.length === 0) {
    ideaName.textContent = "";
    difficulty.textContent = "";
    difficulty.removeAttribute("data-difficulty-value");
    idea.textContent = difficultySelect && difficultySelect.value === "All"
      ? "Either you're really good at coding, or you just clicked 'completed idea' too many times. I can't blame you."
      : `You're another third (roughly) to completing every idea. You've completed every ${difficultySelect ? difficultySelect.value.toLowerCase() : "selected"} idea.`;
    ideaCompleted.style.display = "none";
    currentIdea = null;
    return;
  }

  const randomLine = getRandomLineFromFile(availableIdeas);
  lastIdea = randomLine;
  renderIdea(randomLine);
});

ideaCompleted.addEventListener("click", function() {
  if (!currentIdea) {
    return;
  }

  if (markIdeaAsCompleted(currentIdea.title)) {
    updateCompletedButton();
    renderCompletedIdeas();
    renderAvailableIdeas();
  }
});

// Get the modal
completedIdeasButton.onclick = function() {
  renderCompletedIdeas();
  completedIdeasModal.style.display = "block";
};

availableIdeasButton.onclick = function() {
  renderAvailableIdeas();
  availableIdeasModal.style.display = "block";
};

completedIdeasClose.onclick = function() {
  completedIdeasModal.style.display = "none";
};

availableIdeasClose.onclick = function() {
  availableIdeasModal.style.display = "none";
};

if (availableIdeasDifficultySelect) {
  availableIdeasDifficultySelect.addEventListener("change", renderAvailableIdeas);
}

if (ideaSearcher) {
  ideaSearcher.addEventListener("input", renderAvailableIdeas);
}

if (availableIdeasList) {
  availableIdeasList.addEventListener("click", function(event) {
    const clickedItem = event.target.closest("li[data-available-idea]");

    if (!clickedItem) {
      return;
    }

    const ideaTitle = clickedItem.dataset.availableIdea;

    if (isIdeaCompleted(ideaTitle)) {
      removeCompletedIdea(ideaTitle);
      renderAvailableIdeas();

      if (currentIdea && currentIdea.title === ideaTitle) {
        updateCompletedButton();
      }

      return;
    }

    if (markIdeaAsCompleted(ideaTitle)) {
      renderCompletedIdeas();
      renderAvailableIdeas();

      if (currentIdea && currentIdea.title === ideaTitle) {
        updateCompletedButton();
      }
    }
  });
}

completedIdeasList.onclick = function(event) {
  const clickedItem = event.target.closest("li[data-completed-idea]");

  if (!clickedItem) {
    return;
  }

  removeCompletedIdea(clickedItem.dataset.completedIdea);
};

window.onclick = function(event) {
  if (event.target === completedIdeasModal) {
    completedIdeasModal.style.display = "none";
  }

  if (event.target === availableIdeasModal) {
    availableIdeasModal.style.display = "none";
  }
};

renderCompletedIdeas();
renderAvailableIdeas();