/**
 *
 * YOU CAN READ MORE
 *
 * ON
 *
 * SITE: https://inquir.org
 */

const searchForm = document.getElementById("search-form");
const searchInput = document.getElementById("search-input");
searchForm.addEventListener("submit", function (event) {
  event.preventDefault();
  performSearch(searchInput.value);
});

document.addEventListener("DOMContentLoaded", () => {
  performSearch("");
});

let abortController = new AbortController();
const SIZE = 12;
const getResults = async (q, page = 1) => {
  abortController.abort();
  abortController = new AbortController();
  const body = {
    q: q ?? "",
    indexName: "rnm2",
    size: SIZE,
    page,
    ignoreMetadata: true,
    typoTolerant: false // try changing to true/false
  };

  try {
    const response = await fetch(
      `https://platform.inquir.org/api/v1/search/query`,
      {
        signal: abortController.signal,
        headers: {
          Authorization: `Bearer b02abe1a-xxxxx-12c860ac69e628d032`,
          "Content-Type": "application/json"
        },
        method: "POST",
        body: JSON.stringify(body)
      }
    );

    return response.ok ? await response.json() : {};
  } catch (error) {
    console.error("Fetch error:", error);
    return {};
  }
};

async function performSearch(query, page = 1) {
  const { result } = await getResults(query, page);
  console.log(result);
  if (!result) {
    console.error("Search error:", error.message);
    resultsContainer.innerHTML = `<p>Error: ${error.statusText}</p>`;
    return;
  }
  renderResults(result);
}

function renderResults(data) {
  const resultsContainer = document.getElementById("results");
  resultsContainer.innerHTML = "";
  if (data.results.length > 0) {
    data.results.forEach((item) => {
      const character = item.metadata.character;
      const itemElement = document.createElement("div");
      itemElement.className = "result-item";
      itemElement.innerHTML = `
                <div class="character-card">
                    <img src="${character.image}" alt="${character.name}" class="character-image">
                    <div class="character-info">
                        <h4>${character.name}</h4>
                        <p><strong>Species:</strong> ${character.species}</p>
                        <p><strong>Status:</strong> ${character.status}</p>
                        <p><strong>Gender:</strong> ${character.gender}</p>
                        <p><strong>Location:</strong> ${character.location.name}</p>
                        <a href="${character.url}" target="_blank">View Profile</a>
                    </div>
                </div>
            `;
      resultsContainer.appendChild(itemElement);
    });
  } else {
    resultsContainer.innerHTML =
      "<p>No characters found. Try another search!</p>";
  }
}