var results = [];
var searchInprogress = false;
const app = (() => {
    return {
        copyLyricsUrl: (url) => {
            try {
                navigator.clipboard.writeText(url);
            } catch (err) {
            }
        },
        handleSearch: () => {
            const inputValue = document.querySelector('.form-control').value;
            const searchresultElement = document.querySelector(".search-result-ul");
            const elementsToRemove = document.querySelectorAll(".search-item");

            if (inputValue && inputValue.trim() != "") {
                searchresultElement.style.display = 'flex';
            } else {
                return;
            }

            let firstLetter = inputValue.charAt(0);
            const url = new URL(window.location.href);
            let currentIdx = url.searchParams.get('searchIdx');

            if (currentIdx !== firstLetter) {
                results = [];
                app.getIndexData(firstLetter)
                url.searchParams.set('searchIdx', firstLetter);
                window.history.pushState({}, document.title, url.toString());
            }


            elementsToRemove.forEach(element => {
                element.remove();
            });

            if (inputValue) {
                const matchingWords = results.filter(item => item.title.toLowerCase().includes(inputValue.toLowerCase()));
                matchingWords.sort((a, b) => {
                    const indexA = a.title.indexOf(inputValue);
                    const indexB = b.title.indexOf(inputValue);
                    return indexA - indexB;
                });

                matchingWords.forEach(item => {
                    const listItem = document.createElement("li");
                    listItem.classList.add("search-item");
                    const link = document.createElement("a");
                    //link.href = requestRoot+"/lyrics/"+item.code+"/"+item.title;
                    link.addEventListener('click', function () {
                        app.handleSearchResultClick(item);
                    });
                    link.textContent = item.title;
                    listItem.appendChild(link);
                    searchresultElement.appendChild(listItem);
                });
                if (matchingWords.length == 0) {
                    const listItem = document.createElement('li');
                    listItem.textContent = "No songs found";
                    listItem.classList.add('search-item');
                    listItem.classList.add('inactive');
                    searchresultElement.appendChild(listItem);
                }
            } else {
                results.forEach(word => {
                    const listItem = document.createElement("li");
                    listItem.classList.add("search-item");
                    const link = document.createElement("a");
                    link.href = "#";
                    link.textContent = word;
                    listItem.appendChild(link);
                    searchresultElement.appendChild(listItem);
                });
            }
        },
        handleClickOutside: (event) => {
            const searchInput = document.querySelector('.form-control');
            const searchResultUl = document.querySelector(".search-result-ul");

            if (searchInput && searchResultUl && !searchInput.contains(event.target) && !searchResultUl.contains(event.target)) {
                searchResultUl.style.display = 'none';
            }
        },
        getIndexData: async (index) => {
            try {
                app.setSearchProgress(true);
                let url = requestRoot + "/api/search/v1/getAlphaIndex?idx=" + index;
                const response = await fetch(url);
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const responseJson = await response.json();
                if (responseJson.content) {
                    results = JSON.parse(responseJson.content.metaData);
                }
            } catch (error) {
               
            }finally{
                app.setSearchProgress(false);
            }
        },
        gethostName: () => {
            return window.location.hostname;
        },
        setSearchProgress: (bol) => {
            const searchProgress = document.querySelector('.search-loading-spinner');
            if (bol) {
                searchProgress.classList.remove("disable");
                searchProgress.classList.add("enable");
            } else {
                searchProgress.classList.add("disable");
                searchProgress.classList.remove("enable");
            }
        },
        handleSearchResultClick: (songData) => {
            const searchResultUl = document.querySelector(".search-result-ul");
            searchResultUl.style.display = 'none';
            const searchInput = document.querySelector('.form-control');
            searchInput.value = songData.title;
            
            window.location.href = requestRoot + "/lyrics/" + songData.code + "/" + songData.title;

        }
    }

})()

const url = new URL(window.location.href);
let currentIdx = url.searchParams.get('searchIdx');
if (currentIdx && currentIdx.trim() != "") {
    app.getIndexData(currentIdx);
}

document.addEventListener('click', app.handleClickOutside);

const ulElement = document.querySelector(".search-result-ul");
const inputValue = document.querySelector('.form-control')
let currentFocus = -1;
let listItems = null;
inputValue.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowDown') {
        listItems = Array.from(ulElement.getElementsByTagName('li'));
        e.preventDefault();
        if (currentFocus < listItems.length - 1) {
            currentFocus++;
        } else {
            currentFocus = 0; 
        }
        updateFocus();
    } else if (e.key === 'ArrowUp') {
        e.preventDefault();
        if (currentFocus > 0) {
            currentFocus--;
        } else {
            currentFocus = listItems.length - 1; // Wrap around
        }
        updateFocus();
    } else if (e.key === 'Enter' && currentFocus !== -1) {
        const link = listItems[currentFocus].querySelector('a');
        if(link){
            inputValue.value = listItems[currentFocus].textContent;
            link.click();
        }
    }
});

function updateSelection(listItems, newIndex) {
    if (selectedIndex !== -1) {
        listItems[selectedIndex].classList.remove('selected');
    }
    listItems[newIndex].classList.add('selected');
    selectedIndex = newIndex;
    listItems[newIndex].scrollIntoView({ block: 'nearest' });
}

function updateFocus() {
    listItems.forEach((item, index) => {
        if (index === currentFocus) {
            item.classList.add('selected');
            item.focus(); // Set actual keyboard focus
        } else {
            item.classList.remove('selected');
        }
    });
}