function renderABCPartA(targetTuneID)
{
    console.log(targetTuneID);
    API_GET_TEXT("/V1/GetBasicABCFile.php?tune-id=" + targetTuneID)
        .then(payload => {
            // Ensure required DOM elements exist
            const notationContainer = document.getElementById("NotationContainer--" + targetTuneID);

            if (!notationContainer) {
                console.error(`Missing DOM elements for targetTuneID: ${targetTuneID}`);
                return;
            }

            // Render the ABC notation
            const tunes = window.ABCJS.renderAbc(
                notationContainer.id,
                payload,
                {
                    add_classes: true,
                    format: {
                        gchordfont: "Atkinson Hyperlegible",
                        annotationfont: "Atkinson Hyperlegible",
                        headerfont: "Atkinson Hyperlegible",
                        infofont: "Atkinson Hyperlegible",
                        repeatfont: "Atkinson Hyperlegible",
                        tempofont: "Atkinson Hyperlegible",
                        titlefont: "Atkinson Hyperlegible",
                        voicefont: "Atkinson Hyperlegible",
                        wordsfont: "Atkinson Hyperlegible",
                    },
                }
            );
        })
        .catch(error => {
            console.error("Error fetching ABC data:", error);
        });
}

function searchTunes(query) {
    const resultsDiv = document.getElementById("AlgoliaResults");

    resultsDiv.innerHTML = "";

    tuneIndex.search(query).then(({ hits }) => {
        if (hits.length > 0) {
            hits.forEach(hit => {
                const tuneDiv = document.createElement("div");
                tuneDiv.className = "AlgoliaTuneHit";
                tuneDiv.innerHTML = `
<h2><a href="/tune/${hit.objectID}">${hit.title}</a></h2>
<div class="TuneTimeSignature">time signature: ${hit.time_sig}</div>
<div class="TuneKeySignature">key signature: ${hit.key_sig}</div>
<div id="NotationContainer--${hit.objectID}"></div>
</div>
`;
                resultsDiv.appendChild(tuneDiv);
                renderABCPartA(hit.objectID);
            });
        } else {
            resultsDiv.innerHTML = "<p>No tunes found. Try a different search!</p>";
        }
    }).catch(err => {
        console.error('Error searching Algolia:', err);
        resultsDiv.innerHTML = "<p>An error occurred. Please try again later.</p>";
    });
}

function searchDances(query) {
    const resultsDiv = document.getElementById("AlgoliaResults");

    resultsDiv.innerHTML = "";

    danceIndex.search(query).then(({ hits }) => {
        if (hits.length > 0) {
            hits.forEach(hit => {
                const danceDiv = document.createElement("div");
                danceDiv.className = "AlgoliaDanceHit";
                danceDiv.innerHTML = `
<h2><a href="/dance/${hit.objectID}">${hit.title}</a></h2>
</div>
`;
                resultsDiv.appendChild(danceDiv);
            });
        } else {
            resultsDiv.innerHTML = "<p>No dances found. Try a different search!</p>";
        }
    }).catch(err => {
        console.error('Error searching Algolia:', err);
        resultsDiv.innerHTML = "<p>An error occurred. Please try again later.</p>";
    });
}