document.addEventListener("DOMContentLoaded", function () {
    const shareUsernameInput = document.getElementById("share-username");
    const suggestionsBox = document.getElementById("user-suggestions");
    const shareSubmitButton = document.getElementById("share-submit");

    if (!shareUsernameInput || !suggestionsBox || !shareSubmitButton) {
        console.warn("Autocomplete: Required elements not found.");
        return;
    }

    // Función para buscar usuarios
    async function fetchUsers(query) {
        try {
            const response = await fetch(`/api/users/search?q=${encodeURIComponent(query)}`);
            if (!response.ok) throw new Error("API error");
            return await response.json();
        } catch (error) {
            console.error("Error fetching users:", error);
            return [];
        }
    }

    // Mostrar sugerencias en el dropdown
    function showSuggestions(users) {
        suggestionsBox.innerHTML = "";
        if (users.length === 0) {
            suggestionsBox.classList.add("d-none");
            return;
        }

        users.forEach((user) => {
            const item = document.createElement("button");
            item.type = "button";
            item.classList.add("list-group-item", "list-group-item-action");
            item.textContent = user.username;
            item.addEventListener("click", () => {
                shareUsernameInput.value = user.username;
                suggestionsBox.classList.add("d-none");
            });
            suggestionsBox.appendChild(item);
        });

        suggestionsBox.classList.remove("d-none");
    }

    // Evento de entrada para mostrar sugerencias dinámicamente
    shareUsernameInput.addEventListener("input", async function () {
        const query = this.value.trim();
        if (query.length >= 2) {
            const users = await fetchUsers(query);
            showSuggestions(users);
        } else {
            suggestionsBox.classList.add("d-none");
        }
    });

    // Ocultar sugerencias si se hace clic fuera
    document.addEventListener("click", function (event) {
        if (!shareUsernameInput.contains(event.target) && !suggestionsBox.contains(event.target)) {
            suggestionsBox.classList.add("d-none");
        }
    });
});