// general UI initialization, element bindings, and tab handling
document.addEventListener('DOMContentLoaded', () => {
// bind DOM elements to globals
authScreen = document.getElementById('auth-screen');
chatScreen = document.getElementById('chat-screen');
usernameInput = document.getElementById('username-input');
passwordInput = document.getElementById('password-input');
loginBtn = document.getElementById('login-btn');
registerBtn = document.getElementById('register-btn');
logoutBtn = document.getElementById('logout-btn');
messagesContainer = document.getElementById('messages-container');
messageInput = document.getElementById('message-input');
sendBtn = document.getElementById('send-btn');
fileInput = document.getElementById('file-input');
attachBtn = document.getElementById('attach-btn');
filePreview = document.getElementById('file-preview');
filePreviewText = document.getElementById('file-preview-text');
filePreviewClear = document.getElementById('file-preview-clear');
authMessage = document.getElementById('auth-message');
currentUserDisplay = document.getElementById('current-user');
headerTitle = document.getElementById('header-title');
dmList = document.getElementById('dm-list');
friendsList = document.getElementById('friends-list');
friendRequestsList = document.getElementById('friend-requests-list');
addFriendBtn = document.getElementById('add-friend-btn');
addFriendModal = document.getElementById('add-friend-modal');
closeModal = document.querySelector('.close-modal');
friendUsernameInput = document.getElementById('friend-username-input');
modalAddBtn = document.getElementById('modal-add-btn');
modalError = document.getElementById('modal-error');
tabBtns = document.querySelectorAll('.tab-btn');
chatTab = document.getElementById('chat-tab');
friendsTab = document.getElementById('friends-tab');
profileBtn = document.getElementById('profile-btn');
profileModal = document.getElementById('profile-modal');
profileAvatarInput = document.getElementById('profile-avatar-input');
profileDescInput = document.getElementById('profile-desc-input');
profilePronounsInput = document.getElementById('profile-pronouns-input');
profileSaveBtn = document.getElementById('profile-save-btn');
profileCloseBtn = document.querySelector('.profile-close');
// User profile modal elements
userProfileModal = document.getElementById('user-profile-modal');
userProfileAvatar = document.getElementById('user-profile-avatar');
userProfileUsername = document.getElementById('user-profile-username');
userProfilePronouns = document.getElementById('user-profile-pronouns');
userProfileDescription = document.getElementById('user-profile-description');
userProfileAddFriendBtn = document.getElementById('user-profile-add-friend-btn');
userProfileCloseBtn = document.querySelector('.user-profile-close');

// Reply preview elements
replyPreview = document.getElementById('reply-preview');
replyUsername = document.getElementById('reply-username');
replyPreviewText = document.getElementById('reply-preview-text');
replyCancelBtn = document.getElementById('reply-cancel-btn');

// Mobile sidebar elements
sidebarToggle = document.getElementById('sidebar-toggle');
sidebarOverlay = document.getElementById('sidebar-overlay');
sidebar = document.querySelector('.sidebar');

// set up listeners from various modules
initAuthListeners();
initChatListeners();
initFriendListeners();
initServerListeners();
initProfileListeners();

// Mobile sidebar toggle
if (sidebarToggle) {
    sidebarToggle.addEventListener('click', () => {
        sidebar.classList.add('open');
        sidebarOverlay.classList.add('show');
    });
}

// Close sidebar when clicking overlay
if (sidebarOverlay) {
    sidebarOverlay.addEventListener('click', () => {
        sidebar.classList.remove('open');
        sidebarOverlay.classList.remove('show');
    });
}

tabBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        switchTab(btn.dataset.tab);
    });
});

// initial auth check
authInitCheck();
});

function switchTab(tab) {
tabBtns.forEach(btn => btn.classList.remove('active'));
chatTab.classList.remove('active');
friendsTab.classList.remove('active');
if (tab === 'chat') {
    tabBtns[0].classList.add('active');
    chatTab.classList.add('active');
} else {
    tabBtns[1].classList.add('active');
    friendsTab.classList.add('active');
}
}

function selectDM(userIdArg, usernameArg) {
try {
currentDMUserId = userIdArg;
headerTitle.textContent = `DM with @${usernameArg}`;
// clear messages when switching to a DM conversation
if (messagesContainer) messagesContainer.innerHTML = '';
lastFetchedTs = null;
isAtBottom = true; // reset scroll state for new conversation
currentChannelId = null;

// Remove active class from ALL channels
document.querySelectorAll('.channel').forEach(ch => ch.classList.remove('active'));

// mark active DM in the list
document.querySelectorAll('.dm-user').forEach(n => n.classList.remove('active'));
const activeEl = document.querySelector(`.dm-user[data-user-id="${userIdArg}"]`);
if (activeEl) activeEl.classList.add('active');

loadDM(userIdArg);
switchTab('chat');
messageInput.value = '';
} catch (e) {
console.error('selectDM error', e);
}
}