let currentCategory = "All";

function toggleDesignView(checkbox) {
  const msgList = document.getElementById("messageList");
  const noMsg = document.getElementById("noMessageState");
  const tabGroup = document.getElementById("tabGroup");

  if (checkbox.checked) {
    msgList.classList.remove("hidden-state");
    tabGroup.classList.remove("hidden-state"); 
    noMsg.classList.add("hidden-state");
  } else {
    msgList.classList.add("hidden-state");
    tabGroup.classList.add("hidden-state"); 
    noMsg.classList.remove("hidden-state");
  }
}

function filterTab(category, btn) {
  currentCategory = category;

  document.querySelectorAll(".tab-btn").forEach((b) => {
    b.classList.remove("tab-btn-active");
    b.classList.add("tab-btn-inactive");
  });
  btn.classList.add("tab-btn-active");
  btn.classList.remove("tab-btn-inactive");

  filterMessages();
}

function filterMessages() {
  const searchValue = document
    .getElementById("searchInput")
    .value.toLowerCase();
  const cards = document.querySelectorAll(".msg-card");
  let visibleCount = 0;

  cards.forEach((card) => {
    const name = card.getAttribute("data-name").toLowerCase();
    const category = card.getAttribute("data-category");

    const matchesCategory =
      currentCategory === "All" || category === currentCategory;
    const matchesSearch = name.includes(searchValue);

    if (matchesCategory && matchesSearch) {
      card.style.display = "flex";
      visibleCount++;
    } else {
      card.style.display = "none";
    }
  });

  const noMsg = document.getElementById("noMessageState");
  const msgList = document.getElementById("messageList");

  if (visibleCount === 0) {
    noMsg.classList.remove("hidden-state");
    msgList.classList.add("hidden-state");
  } else {
    noMsg.classList.add("hidden-state");
    msgList.classList.remove("hidden-state");
  }
}
