function highlightText(text, query) {
  const regex = new RegExp(`(${query})`, "gi");
  return text.replace(regex, '<mark class="doc-search-highlight">$1</mark>');
}

document.addEventListener("DOMContentLoaded", async () => {
    const searchInput = document.getElementById("doc-search-input");
    const resultsContainer = document.getElementById("doc-search-results");
    const overlay = document.getElementById("doc-search-overlay");
    const closeBtn = document.getElementById("doc-search-close");

    if (!searchInput) return;

    const response = await fetch("/doc_search.json");
    const pages = await response.json();

    // Build Lunr index
    const idx = lunr(function () {
        this.ref("url");
        this.field("title");
        this.field("content");

        pages.forEach(page => this.add(page));
    });

    function resetSearch() {
        searchInput.value = "";
        resultsContainer.innerHTML = "";
        overlay.classList.remove("active");
        closeBtn.classList.remove("show");
    }

    searchInput.addEventListener("input", (e) => {
        const query = e.target.value;
        resultsContainer.innerHTML = "";

        if (!query) {
            resetSearch();
            return;
        }

        const results = idx.search(query);
        overlay.classList.add("active");
        closeBtn.classList.add("show");

        if (results.length === 0) {
            resultsContainer.innerHTML = `<p class="doc-search-no-result">No results found</p>`;
            return;
        }

        results.forEach(result => {
            const page = pages.find(p => p.url === result.ref);
            const div = document.createElement("div");
            div.className = "doc-search-result";
            const highlightedTitle = highlightText(page.title, query);
            const highlightedSnippet = highlightText(page.content.substring(0, 120), query);
            div.innerHTML = `<a href="${page.url}">${highlightedTitle}</a><p>${highlightedSnippet}...</p>`;

            resultsContainer.appendChild(div);
        });
    });
    
    closeBtn.addEventListener("click", resetSearch);
});