const searchForm = document.getElementById("search-form");
const searchQueryInput = document.getElementById("search-query");
const timelimitSelect = document.getElementById("timelimit");
const safesearchSelect = document.getElementById("safesearch");
const resultsContainer = document.getElementById("results");
const suggestionsContainer = document.getElementById("suggestions");
const peopleAlsoSearchList = document.getElementById(
  "people-also-search-list"
);
const peopleAlsoSearchSection = document.getElementById(
  "people-also-search-section"
);
const aboutSection = document.getElementById("about-section");
const sidebar = document.getElementById("sidebar");

searchQueryInput.addEventListener("input", async () => {
  const searchQuery = searchQueryInput.value;
  if (searchQuery.trim() === "") {
    suggestionsContainer.style.display = "none";
    return;
  }

  try {
    const data = await eel.get_suggestions(searchQuery)();
    displaySuggestions(data);
  } catch (error) {
    console.error("Error:", error);
    suggestionsContainer.style.display = "none";
  }
});

searchQueryInput.addEventListener("focus", () => {
  if (searchQueryInput.value.trim() !== "") {
    suggestionsContainer.style.display = "block";
  }
});

document.addEventListener("click", (event) => {
  if (!searchForm.contains(event.target)) {
    suggestionsContainer.style.display = "none";
  }
});

searchForm.addEventListener("submit", async (event) => {
  event.preventDefault();
  const searchQuery = searchQueryInput.value;
  const timelimit = timelimitSelect.value;
  const safesearch = safesearchSelect.value;
  await performSearch(searchQuery, timelimit, safesearch);
});

function displaySuggestions(suggestions) {
  suggestionsContainer.innerHTML = "";
  if (suggestions.length === 0) {
    suggestionsContainer.style.display = "none";
    return;
  }
  const suggestionList = document.createElement("ul");
  suggestions.forEach((suggestion) => {
    const listItem = document.createElement("li");
    listItem.textContent = suggestion.phrase;
    listItem.addEventListener("click", () => {
      searchQueryInput.value = suggestion.phrase;
      suggestionsContainer.style.display = "none";
      performSearch(suggestion.phrase);
    });
    suggestionList.appendChild(listItem);
  });
  suggestionsContainer.appendChild(suggestionList);
  suggestionsContainer.style.display = "block";
}

async function performSearch(query, timelimit, safesearch) {
  try {
    const searchResults = await eel.perform_search(
      query,
      timelimit,
      safesearch
    )();
    displayResults(searchResults);
    suggestionsContainer.style.display = "none";

    // Get "People Also Search For" data
    const peopleAlsoSearchData = await eel.get_people_also_search(query)();
    
    // Display "About" section
    const aboutDescription = peopleAlsoSearchData.find(
      (item) => item.topic === null
    );
    if (aboutDescription) {
      document.getElementById("about-description").textContent =
        aboutDescription.text;
      aboutSection.style.display = "block";
    } else {
      aboutSection.style.display = "none";
    }

    const peopleAlsoSearchItems = peopleAlsoSearchData.filter(
      (item) => item.topic === "See also"
    );
    displayPeopleAlsoSearch(peopleAlsoSearchItems.slice(0, 6));
    if (peopleAlsoSearchItems.length > 0) {
      peopleAlsoSearchSection.style.display = "block";
    } else {
      peopleAlsoSearchSection.style.display = "none";
    }

    if (aboutSection.style.display === "block" || peopleAlsoSearchSection.style.display === "block") {
      sidebar.style.display = "block";
      document.querySelector(".main-content").style.marginLeft = "320px";
    } else {
      sidebar.style.display = "none";
      document.querySelector(".main-content").style.marginLeft = "0px";
    }
  } catch (error) {
    console.error("Error:", error);
    displayError("An error occurred while fetching results.");
  }
}

function displayPeopleAlsoSearch(data) {
  peopleAlsoSearchList.innerHTML = "";

  if (data.length === 0) {
    return;
  }

  data.forEach((item) => {
    const listItem = document.createElement("li");
    const link = document.createElement("a");
    link.href = item.url;
    link.textContent = item.text;
    link.target = "_blank";
    link.rel = "noopener noreferrer";
    listItem.appendChild(link);
    peopleAlsoSearchList.appendChild(listItem);
  });
}

function displayResults(results) {
  resultsContainer.innerHTML = "";
  if (results.length === 0) {
    displayError("No results found.");
    return;
  }

  results.forEach((result) => {
    const resultElement = document.createElement("div");
    resultElement.classList.add("result");

    const titleElement = document.createElement("h3");
    const titleLink = document.createElement("a");
    titleLink.href = result.href;
    titleLink.textContent = result.title;
    titleLink.target = "_blank";
    titleLink.rel = "noopener noreferrer";
    titleElement.appendChild(titleLink);

    const urlElement = document.createElement("div");
    urlElement.classList.add("url");
    urlElement.textContent = result.href;

    const descriptionElement = document.createElement("p");
    descriptionElement.textContent = result.body;

    resultElement.appendChild(titleElement);
    resultElement.appendChild(urlElement);
    resultElement.appendChild(descriptionElement);
    resultsContainer.appendChild(resultElement);
  });
}

function displayError(message) {
  resultsContainer.innerHTML = "";
  const errorElement = document.createElement("p");
  errorElement.textContent = message;
  errorElement.style.color = "red";
  resultsContainer.appendChild(errorElement);
}

function toggleSettings() {
  const settingsMenu = document.getElementById("settings-menu");
  settingsMenu.style.display =
    settingsMenu.style.display === "block" ? "none" : "block";
}