let searchTimeout;
document.getElementById("searchInput").addEventListener("input", function (e) {
  clearTimeout(searchTimeout);
  const query = e.target.value.trim();

  if (query.length < 2) {
    document.getElementById("searchResults").innerHTML =
      '<div class="empty-state"><p>Enter at least 2 characters to search</p></div>';
    return;
  }

  searchTimeout = setTimeout(() => searchUsers(query), 300);
});

async function searchUsers(query) {
  try {
    const response = await fetch(
      `/api/search-users?q=${encodeURIComponent(query)}`,
      {
        headers: {
          Authorization: `Bearer ${currentToken}`,
        },
      },
    );

    if (response.ok) {
      searchResults = await response.json();
      renderSearchResults();
    } else {
      console.error("Search failed");
    }
  } catch (error) {
    console.error("Error searching users:", error);
  }
}

function renderSearchResults() {
  const searchResultsContainer = document.getElementById("searchResults");
  searchResultsContainer.innerHTML = "";

  if (searchResults.length === 0) {
    searchResultsContainer.innerHTML =
      '<div class="empty-state"><p>No users found</p></div>';
    return;
  }

  searchResults.forEach((user) => {
    const div = document.createElement("div");
    div.className = "chat-item";

    const avatarContent = user.avatar_url
      ? `<img src="${user.avatar_url}" alt="${user.username}">`
      : user.username.charAt(0).toUpperCase();

    div.innerHTML = `
            <div class="chat-avatar">${avatarContent}</div>
            <div class="chat-info">
                <div class="chat-username">${user.username}</div>
                <div class="chat-phone">${user.phone}</div>
                <div class="chat-last-message">Click to start chatting</div>
            </div>
        `;

    div.onclick = () => {
      selectChat(user.username, user.phone, user.avatar_url);
      showChatTab("existing");
      document.getElementById("searchInput").value = "";
      if (isMobile) {
        hideChatsPanel();
      }
    };

    searchResultsContainer.appendChild(div);
  });
}