async function selectChat(username, phone, avatarUrl) {
  if (!username) return;

  currentRecipient = username;

  // Update mobile header
  document.getElementById("mobileChatTitle").textContent = username;

  // Update chat header with recipient info
  const chatHeaderInfo = document.querySelector(".chat-header-info");
  const avatarContent = avatarUrl
    ? `<img src="${avatarUrl}" alt="${username}">`
    : username.charAt(0).toUpperCase();

  chatHeaderInfo.innerHTML = `
        <button class="back-btn" onclick="showChatsPanel()">←</button>
        <div class="chat-header-avatar">${avatarContent}</div>
        <div class="chat-header-text">
            <div class="chat-header-username">${username}</div>
            <div class="chat-header-phone">${phone}</div>
        </div>
    `;

  // Помечаем сообщения как прочитанные при открытии чата
  await markMessagesAsRead(username);

  // Update active chat in list
  document.querySelectorAll(".chat-item").forEach((item) => {
    item.classList.remove("active");
    const usernameElement = item.querySelector(".chat-username");
    if (usernameElement && usernameElement.textContent === username) {
      item.classList.add("active");
    }
  });

  // Enable message input
  document.getElementById("sendButton").disabled = false;
  document.getElementById("messageInput").disabled = false;

  // Focus on input after a short delay to ensure UI is updated
  setTimeout(() => {
    document.getElementById("messageInput").focus();
  }, 100);

  displayChatHistory(username);
}

function displayChatHistory(username) {
  const chatMessages = document.getElementById("chatMessages");
  chatMessages.innerHTML = "";

  if (messageHistory[username] && messageHistory[username].length > 0) {
    messageHistory[username].forEach((msg) => displayMessage(msg, false));
    // Scroll to bottom after rendering
    setTimeout(() => {
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }, 50);
  } else {
    chatMessages.innerHTML = `
            <div class="empty-state">
                <h3>Start a conversation</h3>
                <p>Send a message to start chatting with ${username}</p>
            </div>
        `;
  }
}

function renderChatsList() {
  const chatsList = document.getElementById("chatsList");
  chatsList.innerHTML = "";

  console.log("Rendering chats:", chats);

  if (chats.length === 0) {
    const emptyState = document.createElement("div");
    emptyState.className = "empty-state";
    emptyState.innerHTML = `
            <h3>No chats yet</h3>
            <p>Start a new conversation by clicking "New Chat"</p>
        `;
    chatsList.appendChild(emptyState);
    return;
  }

  chats.forEach((chat) => {
    const li = document.createElement("li");
    li.className = "chat-item";
    if (chat.username === currentRecipient) {
      li.classList.add("active");
    }

    const lastMessageTime = chat.last_message_time
      ? formatTime(chat.last_message_time)
      : "";
    const lastMessage = chat.last_message || "No messages yet";

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

    li.innerHTML = `
            <div class="chat-avatar">${avatarContent}</div>
            <div class="chat-info">
                <div class="chat-username">${chat.username}</div>
                <div class="chat-phone">${chat.phone}</div>
                <div class="chat-last-message">${lastMessage}</div>
            </div>
            <div class="chat-meta">
                <div class="chat-time">${lastMessageTime}</div>
                ${chat.unread_count > 0 ? `<div class="unread-badge">${chat.unread_count}</div>` : ""}
            </div>
        `;

    li.onclick = () => {
      selectChat(chat.username, chat.phone, chat.avatar_url);
      if (isMobile) {
        hideChatsPanel();
      }
    };
    chatsList.appendChild(li);
  });
}

function showChatTab(tab) {
  currentChatTab = tab;
  document
    .querySelectorAll(".chat-tab")
    .forEach((tab) => tab.classList.remove("active"));

  if (tab === "existing") {
    document.querySelector(".chat-tab:nth-child(1)").classList.add("active");
    document.getElementById("searchContainer").style.display = "none";
    renderChatsList();
  } else {
    document.querySelector(".chat-tab:nth-child(2)").classList.add("active");
    document.getElementById("searchContainer").style.display = "block";
    document.getElementById("searchResults").innerHTML =
      '<div class="empty-state"><p>Search for users by phone or username</p></div>';
    document.getElementById("searchInput").value = "";
  }
}

async function loadChats() {
  try {
    console.log("Loading chats for user:", currentUser);
    const response = await fetch("/api/chats", {
      headers: { Authorization: `Bearer ${currentToken}` },
    });

    console.log("Chats response status:", response.status);
    if (response.ok) {
      chats = await response.json();
      console.log("Loaded chats:", chats);
      renderChatsList();
    } else {
      console.error("Failed to load chats, status:", response.status);
    }
  } catch (error) {
    console.error("Error loading chats:", error);
  }
}

// Mobile navigation functions
function toggleChatsPanel() {
  const chatsPanel = document.getElementById("chatsPanel");
  chatsPanel.classList.toggle("active");
}

function showChatsPanel() {
  const chatsPanel = document.getElementById("chatsPanel");
  chatsPanel.classList.add("active");
}

function hideChatsPanel() {
  const chatsPanel = document.getElementById("chatsPanel");
  chatsPanel.classList.remove("active");
}

// Close chats panel when clicking on overlay (mobile)
document.getElementById("chatsPanel").addEventListener("click", function (e) {
  if (e.target === this && isMobile) {
    hideChatsPanel();
  }
});