let topCourses = [
  "Data Analysis",
  "Web Development",
  "Product Design",
  "Node.js",
  "Database",
  "Security",
  "UI Components",
];

let searchHistory = [
  {
    name: "Adnan Shafi",
    role: "UI/UX Design",
    image: "../assets/images/Top_Instructors.png",
  },
  {
    name: "Emily Blunt",
    role: "Python Development",
    image: "../assets/images/Top_Instructors_2.png",
  },
  {
    name: "Alex John",
    role: "Full Stack Development",
    image: "../assets/images/Top_Instructors3.png",
  },
];

document.addEventListener("DOMContentLoaded", () => {
  if (typeof renderChips === "function") renderChips();
  if (typeof renderHistory === "function") renderHistory();
});

function openSearch() {
  const modal = document.getElementById("searchModal");
  if (modal) {
    modal.classList.remove("hidden");
    document.body.style.overflow = "hidden";

    if (typeof renderChips === "function") renderChips();
    if (typeof renderHistory === "function") renderHistory();
  } else {
    window.location.href = "search.html";
  }
}

function closeSearch() {
  const modal = document.getElementById("searchModal");
  if (modal) {
    modal.classList.add("hidden");
    document.body.style.overflow = "auto";
  }
}

let selectedItemIndex = null;

function renderChips() {
  const container = document.getElementById("chipsContainer");
  if (!container) return;
  container.innerHTML = topCourses
    .map(
      (course) => `
      <span onclick="setSearchValue('${course}')" class="px-4 py-2 rounded-full border border-[#3B3B3B] text-gray-400 text-xs cursor-pointer hover:bg-[#7B48FF] hover:text-white transition-all">
        ${course}
      </span>
    `,
    )
    .join("");
}

function renderHistory(filteredHistory = searchHistory) {
  const list = document.getElementById("historyList");
  if (!list) return;

  list.innerHTML = filteredHistory
    .map(
      (item, index) => `
    <a href="course-details.html" class="flex justify-between items-center border-b border-white/5 pb-4 last:border-0 last:pb-0">
      <div class="flex items-center gap-3 cursor-pointer flex-1" onclick="setSearchValue('${item.name}')">
        <div class="relative shrink-0">
          <img src="${item.image}" class="w-11 h-11 rounded-lg border border-[#7B48FF]/50 object-cover" alt="${item.name}" />
        </div>
        <div class="flex flex-col justify-center">
        <p class="text-white font-medium text-[13px] leading-tight">${item.role}</p>
          <h3 class="text-[#9AA4B2] text-[12px] mt-1">${item.name}</h3>
        </div>
      </div>
      <button onclick="openMenu('${item.name}', ${index})" class="p-2 -mr-2 text-gray-500 hover:text-white transition-all">•••</button>
    </a>
  `,
    )
    .join("");
}

function handleSearch(query) {
  const filtered = searchHistory.filter(
    (item) =>
      item.name.toLowerCase().includes(query.toLowerCase()) ||
      item.role.toLowerCase().includes(query.toLowerCase()),
  );
  renderHistory(filtered);
}

function setSearchValue(val) {
  const input = document.getElementById("searchInput");
  if (input) {
    input.value = val;
    handleSearch(val);
  }
}

function openMenu(name, index) {
  selectedItemIndex = index;
  const menu = document.getElementById("searchMenu");
  const overlay = document.getElementById("menuOverlay");
  const title = document.getElementById("menuTitle");

  if (title) title.innerText = name;

  menu.classList.remove("hidden");
  overlay.classList.remove("hidden");

  setTimeout(() => {
    menu.classList.remove("translate-y-full");
  }, 10);
}

function closeMenu() {
  const menu = document.getElementById("searchMenu");
  const overlay = document.getElementById("menuOverlay");

  menu.classList.add("translate-y-full");
  setTimeout(() => {
    menu.classList.add("hidden");
    overlay.classList.add("hidden");
  }, 300);
}

function deleteItem() {
  if (selectedItemIndex !== null) {
    searchHistory.splice(selectedItemIndex, 1);
    renderHistory();
    closeMenu();
    selectedItemIndex = null;
  }
}

function clearHistory() {
  searchHistory = [];
  renderHistory();
}
