js/main.js

document.addEventListener('DOMContentLoaded', () => {
  // ...existing code...
  const irc = new IRCClient();
  const messageForm = document.getElementById('messageForm');
  const messageInput = document.getElementById('messageText');
  const messagesContainer = document.getElementById('messages');
  const connectBtn = document.getElementById('connectBtn');
  const connectionDialog = document.getElementById('connectionDialog');
  const connectionForm = document.getElementById('connectionForm');
  const chatSearchInput = document.getElementById('chatSearch');
  const settingsBtn = document.getElementById('settingsBtn');
  const settingsPanel = document.getElementById('settingsPanel');
  const closeSettingsBtn = document.getElementById('closeSettingsBtn');
  const connectionStatusEl = document.getElementById('connectionStatus');
  const serverInfoText = document.getElementById('serverInfoText');
  const reconnectStatusEl = document.getElementById('reconnectStatus');
  const pmDialog = document.getElementById('pmDialog');
  const pmCloseBtn = document.getElementById('pmCloseBtn');
  const pmMessagesContainer = document.getElementById('pmMessages');
  const pmInput = document.getElementById('pmInput');
  const backBtn = document.getElementById('backBtn');

  let activeChannels = new Set();
  let selectedChannel = '';
  let currentChannel = '';
  let currentPMUser = '';
  let channelMessages = {};
  let pmMessages = {};
  let globalChannels = new Set();
  let searchTimeout = null;

  // UI Components
  const channelList = document.querySelector('.chat-items');
  // Create user list if not already present
  let userListEl = document.querySelector('.user-list');
  if (!userListEl) {
    userListEl = document.createElement('div');
    userListEl.classList.add('user-list');
    document.querySelector('.chat-window').appendChild(userListEl);
  }

  const channelInfoEl = document.getElementById('channelInfo');
  const channelUserListEl = document.getElementById('channelUserList');
  const channelNameEl = document.getElementById('channelName');
  const channelTopicEl = document.getElementById('topicText');
  const userSearchInput = document.getElementById('userSearch');

  function generateAvatar(name) {
    const colors = ["#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f", "#e67e22", "#e74c3c", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#77b1a9", "#94d82d", "#a327ff", "#f7e01d", "#e64a19", "#ecf0f1"];
    const colorIndex = name.charCodeAt(0) % colors.length;
    const color = colors[colorIndex];
    const initials = name.substring(0, 2).toUpperCase();

    return `
      <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
        <circle cx="60" cy="60" r="60" fill="${color}"/>
        <text
          x="50%"
          y="50%"
          text-anchor="middle"
          dominant-baseline="middle"
          font-size="48"
          font-family="sans-serif"
          fill="white"
        >${initials}</text>
      </svg>
    `;
  }

  function updateChannelList() {
    const searchQuery = chatSearchInput.value.toLowerCase();
    channelList.innerHTML = '';

    // Connected channels section
    if (activeChannels.size > 0) {
      const connectedSection = document.createElement('div');
      connectedSection.className = 'channel-category';
      connectedSection.innerHTML = `
        <div class="section-header">Connected Channels</div>
      `;

      Array.from(activeChannels)
        .filter(channel => channel.toLowerCase().includes(searchQuery))
        .forEach(channel => {
          const li = createChannelListItem(channel);
          connectedSection.appendChild(li);
        });

      channelList.appendChild(connectedSection);
    }

    // Update search results if query exists
    if (searchQuery.length >= 2) {
      searchGlobalChannels(searchQuery);
    }
  }

  function createChannelListItem(channel) {
    const li = document.createElement('li');
    li.classList.add('chat-item');
    if (channel === selectedChannel) li.classList.add('active');

    li.innerHTML = `
      <div class="avatar">${generateAvatar(channel)}</div>
      <div class="chat-info">
        <div class="chat-name">${channel}</div>
        <div class="chat-snippet">${
          channelMessages[channel]?.length ?
          channelMessages[channel][channelMessages[channel].length - 1].text :
          irc.getChannelTopic(channel) || 'No topic set'
        }</div>
      </div>
      <div class="unread-badge">${irc.getChannelUsers(channel).length}</div>
    `;

    li.addEventListener('click', () => {
      selectedChannel = channel;
      currentChannel = channel;
      updateChannelList();
      updateUserList();
      updateHeader();
      displayMessagesForCurrentChannel();
      channelInfoEl.classList.remove('hidden');
      showChannelInfo(channel);
    });

    return li;
  }

  async function searchGlobalChannels(query) {
    if (searchTimeout) clearTimeout(searchTimeout);

    searchTimeout = setTimeout(async () => {
      const searchResults = document.createElement('div');
      searchResults.className = 'search-results';

      if (query.length < 2) {
        const existing = document.querySelector('.search-results');
        if (existing) existing.remove();
        return;
      }

      searchResults.innerHTML = '<div class="section-header">Loading channels...</div>';
      chatSearchInput.parentElement.appendChild(searchResults);

      try {
        // Request channel list from server
        irc.send('LIST');

        // Filter channels based on query
        const filteredChannels = Array.from(globalChannels)
          .filter(channel => channel.toLowerCase().includes(query.toLowerCase()))
          .slice(0, 20); // Limit results

        searchResults.innerHTML = `
          <div class="section-header">Global Channels</div>
          ${filteredChannels.map(channel => `
            <div class="search-result-item">
              <span>${channel}</span>
              ${!activeChannels.has(channel) ?
                `<button class="join-button" data-channel="${channel}">Join</button>` :
                '<span>Joined</span>'
              }
            </div>
          `).join('')}
        `;

        // Add click handlers for join buttons
        searchResults.querySelectorAll('.join-button').forEach(btn => {
          btn.addEventListener('click', () => {
            const channel = btn.dataset.channel;
            irc.join(channel);
            activeChannels.add(channel);
            selectedChannel = channel;
            updateChannelList();
            searchResults.remove();
          });
        });

      } catch (error) {
        searchResults.innerHTML = '<div class="section-header">Error loading channels</div>';
      }
    }, 300);
  }

  function updateUserList() {
    if (!selectedChannel) {
      userListEl.innerHTML = '';
      return;
    }

    const users = irc.getChannelUsers(selectedChannel);
    userListEl.innerHTML = `
      <div class="user-list-header">
        <h3>Users (${users.length})</h3>
      </div>
      <div class="user-list-content">
        ${users.map(user => `
          <div class="user-item" data-user="${user}">
            <div class="user-avatar">${generateAvatar(user)}</div>
            <div class="user-name">${user}</div>
          </div>
        `).join('')}
      </div>
    `;
    userListEl.querySelectorAll('.user-item').forEach(item => {
      item.addEventListener('click', () => {
        const user = item.getAttribute('data-user');
        showPMDialog(user);
      });
    });
  }

  function updateHeader() {
    const header = document.querySelector('.chat-header h2');
    const avatar = document.querySelector('.chat-header .avatar');
    if (selectedChannel) {
      const topic = irc.getChannelTopic(selectedChannel);
      header.innerHTML = `
        ${selectedChannel}
        ${topic ? `<div class="channel-topic">${topic}</div>` : ''}
      `;
      avatar.innerHTML = generateAvatar(selectedChannel);
    } else {
      header.textContent = 'Welcome to Libera Chat';
      avatar.innerHTML = ''; // Clear avatar when no channel selected
    }
  }

  function addChannelMessage(channel, message) {
    if (!channel) return;
    if (!channelMessages[channel]) {
      channelMessages[channel] = [];
    }
    channelMessages[channel].push(message);
    if (selectedChannel === channel) {
      displayMessagesForCurrentChannel();
    }
  }

  function displayMessagesForCurrentChannel() {
    messagesContainer.innerHTML = '';
    if (!selectedChannel || !channelMessages[selectedChannel]) return;
    channelMessages[selectedChannel].forEach(msg => {
      const el = createMessageElement(msg);
      messagesContainer.appendChild(el);
    });
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }

  function createMessageElement(msg) {
    const messageWrapper = document.createElement('div');
    messageWrapper.classList.add('message', msg.type);

    const bubble = document.createElement('div');
    bubble.classList.add('message-bubble');

    if (msg.from && msg.type !== 'system' && msg.type !== 'error') {
      const nameSpan = document.createElement('span');
      nameSpan.classList.add('message-sender');
      nameSpan.textContent = msg.from;
      nameSpan.style.cursor = 'pointer';
      nameSpan.addEventListener('click', () => {
        showPMDialog(msg.from);
      });
      bubble.appendChild(nameSpan);
    }

    const textSpan = document.createElement('span');
    textSpan.classList.add('message-text');
    textSpan.textContent = msg.text;
    bubble.appendChild(textSpan);

    // Timestamp element
    const timeSpan = document.createElement('span');
    timeSpan.classList.add('message-time');
    const date = new Date(msg.timestamp);
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    timeSpan.textContent = `${hours}:${minutes}`;
    bubble.appendChild(timeSpan);

    messageWrapper.appendChild(bubble);
    return messageWrapper;
  }

  function addPMMessage(user, msg) {
    if (!user) return;
    if (!pmMessages[user]) {
      pmMessages[user] = [];
    }
    pmMessages[user].push(msg);
    if (currentPMUser === user) {
      displayPMMessages(user);
    }
  }

  function displayPMMessages(user) {
    pmMessagesContainer.innerHTML = '';
    if (!pmMessages[user]) return;
    // Display messages in reverse order to show newest at the bottom
    pmMessages[user].slice().reverse().forEach(msg => {
      const msgEl = createMessageElement(msg); // Reuse createMessageElement
      msgEl.classList.add('pm-message'); // Add class for PM styling if needed
      pmMessagesContainer.appendChild(msgEl);
    });
    pmMessagesContainer.scrollTop = pmMessagesContainer.scrollHeight;
  }

  function showPMDialog(user) {
    currentPMUser = user;
    document.getElementById('pmUserName').textContent = `Chat with ${user}`;
    pmDialog.classList.remove('hidden');
    displayPMMessages(user);
    pmInput.focus(); // Focus on input when PM dialog opens
  }

  function hidePMDialog() {
    pmDialog.classList.add('hidden');
    currentPMUser = '';
  }

  function showConnectionDialog() {
    connectionDialog.style.display = 'flex';
  }

  function hideConnectionDialog() {
    connectionDialog.style.display = 'none';
  }

  function updateConnectionStatus(status) {
    connectionStatusEl.textContent = status;
    if (status.toLowerCase().includes('connected')) {
      connectionStatusEl.classList.add('hidden');
    } else {
      connectionStatusEl.classList.remove('hidden');
    }
  }

  function initializeUI() {
    messageInput.disabled = true;
    messageForm.querySelector('button').disabled = true;
  }

  function showChannelInfo(channel) {
    channelNameEl.textContent = channel;
    channelTopicEl.textContent = irc.getChannelTopic(channel) || 'No topic set';
    const users = irc.getChannelUsers(channel);
    channelUserListEl.innerHTML = `
      <div class="user-list-header">
        <h3>Users (${users.length})</h3>
      </div>
      <div class="user-list-content">
        ${users.map(user => `
          <div class="user-item" data-user="${user}">
            <div class="user-avatar">${generateAvatar(user)}</div>
            <div class="user-name">${user}</div>
          </div>
        `).join('')}
      </div>
    `;
    channelUserListEl.querySelectorAll('.user-item').forEach(item => {
      item.addEventListener('click', () => {
        const user = item.getAttribute('data-user');
        showPMDialog(user);
      });
    });
  }

  // Event Listeners
  connectBtn.addEventListener('click', () => {
    showConnectionDialog();
  });

  connectionDialog.querySelector('.cancel').addEventListener('click', () => {
    hideConnectionDialog();
  });

  connectionForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const nickname = document.getElementById('nickname').value;
    currentChannel = document.getElementById('channel').value;

    if (!nickname || !currentChannel) {
      addChannelMessage(currentChannel, { type: 'error', text: 'Please enter both nickname and channel', timestamp: Date.now(), channel: currentChannel });
      return;
    }

    hideConnectionDialog();
    updateConnectionStatus('Connecting to Libera Chat...');
    addChannelMessage(currentChannel, { type: 'system', text: 'Connecting to Libera Chat...', timestamp: Date.now(), channel: currentChannel });

    try {
      irc.connect(nickname);
      activeChannels.add(currentChannel);
      selectedChannel = currentChannel;
      updateChannelList();
    } catch (error) {
      addChannelMessage(currentChannel, { type: 'error', text: `Failed to connect: ${error.message}`, timestamp: Date.now(), channel: currentChannel });
    }
  });

  messageForm.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = messageInput.value.trim();
    if (!text) return;

    if (text.startsWith('/')) {
      const [command, ...args] = text.slice(1).split(' ');
      switch (command.toLowerCase()) {
        case 'join':
          if (args[0]) {
            let channel = args[0];
            if (!channel.startsWith('#')) channel = '#' + channel;
            irc.join(channel);
            activeChannels.add(channel);
            selectedChannel = channel;
            currentChannel = channel;
            updateChannelList();
          }
          break;
        case 'part':
          if (selectedChannel) {
            irc.part(selectedChannel);
            activeChannels.delete(selectedChannel);
            selectedChannel = '';
            updateChannelList();
            messagesContainer.innerHTML = '';
            updateHeader(); // Clear header when leaving channel
          }
          break;
        case 'me':
          if (args.length > 0 && currentChannel) {
            const action = args.join(' ');
            irc.send(`PRIVMSG ${currentChannel} :\u0001ACTION ${action}\u0001`);
            addChannelMessage(currentChannel, { type: 'action', from: irc.nickname, text: action, timestamp: Date.now(), channel: currentChannel });
          }
          break;
        case 'msg':
          if (args.length >= 2) {
            const [target, ...msgParts] = args;
            const message = msgParts.join(' ');
            irc.sendPrivateMessage(target, message);
            addPMMessage(target, { type: 'sent', from: irc.nickname, text: message, timestamp: Date.now() });
          }
          break;
        default:
          addChannelMessage(currentChannel, { type: 'system', text: 'Unknown command', timestamp: Date.now(), channel: currentChannel });
      }
    } else if (currentChannel) {
      irc.sendMessage(currentChannel, text);
      addChannelMessage(currentChannel, { type: 'sent', from: irc.nickname, text, timestamp: Date.now(), channel: currentChannel });
    }

    messageInput.value = '';
  });

  // Settings panel toggle
  settingsBtn.addEventListener('click', () => {
    settingsPanel.classList.toggle('open');
  });
  closeSettingsBtn.addEventListener('click', () => {
    settingsPanel.classList.remove('open');
  });

  // Channel search listener
  chatSearchInput.addEventListener('input', () => {
    updateChannelList();
  });

  // PM dialog input listener
  pmInput.addEventListener('keyup', (e) => {
    if (e.key === 'Enter' && currentPMUser) {
      const text = pmInput.value.trim();
      if (text) {
        irc.sendPrivateMessage(currentPMUser, text);
        addPMMessage(currentPMUser, { type: 'sent', from: irc.nickname, text, timestamp: Date.now() });
        pmInput.value = '';
      }
    }
  });
  pmCloseBtn.addEventListener('click', hidePMDialog);

  // Back button listener
  backBtn.addEventListener('click', () => {
    channelInfoEl.classList.add('hidden');
  });

  // IRC event handlers
  irc.on('connected', () => {
    addChannelMessage(currentChannel, { type: 'system', text: 'Connected to Libera Chat', timestamp: Date.now(), channel: currentChannel });
    updateConnectionStatus('Connected to Libera Chat');
    messageInput.disabled = false;
    messageForm.querySelector('button').disabled = false;
    if (currentChannel) {
      irc.join(currentChannel);
    }
  });

  irc.on('message', (data) => {
    if (data.target === irc.nickname) {
      // Private message
      const type = data.from === irc.nickname ? 'sent' : 'received';
      let text = data.message;
      if (data.isAction) {
        text = text.replace(/^\u0001ACTION /, '').replace(/\u0001$/, '');
        addPMMessage(data.from, { type: 'action', from: data.from, text, timestamp: data.timestamp }); // Use timestamp from IRC event
      } else {
        addPMMessage(data.from, { type, from: data.from, text, timestamp: data.timestamp }); // Use timestamp from IRC event
      }
    } else {
      const channel = data.target;
      const type = data.from === irc.nickname ? 'sent' : 'received';
      let text = data.message;
      if (data.isAction) {
        text = text.replace(/^\u0001ACTION /, '').replace(/\u0001$/, '');
        addChannelMessage(channel, { type: 'action', from: data.from, text, timestamp: data.timestamp, channel }); // Use timestamp from IRC event
      } else {
        addChannelMessage(channel, { type, from: data.from, text, timestamp: data.timestamp, channel }); // Use timestamp from IRC event
      }
    }
  });

  irc.on('join', (data) => {
    addChannelMessage(data.channel, { type: 'system', text: `${data.nick} joined ${data.channel}`, timestamp: Date.now(), channel: data.channel });
    irc.requestChannelInfo(data.channel); // Request channel info on join
  });

  irc.on('part', (data) => {
    addChannelMessage(data.channel, { type: 'system', text: `${data.nick} left ${data.channel}`, timestamp: Date.now(), channel: data.channel });
    if (data.nick === irc.nickname && selectedChannel === data.channel) {
      selectedChannel = ''; // Clear selected channel if user parts
      messagesContainer.innerHTML = ''; // Clear messages
      updateUserList(); // Clear user list
      updateHeader(); // Update header
      channelInfoEl.classList.add('hidden'); // Hide channel info
    }
  });

  irc.on('error', (error) => {
    let errorMessage = error;
    if (error instanceof Event) {
      errorMessage = 'Connection error occurred';
    } else if (typeof error === 'object') {
      errorMessage = error.message || 'Unknown error occurred';
    }
    addChannelMessage(currentChannel, { type: 'error', text: `Error: ${errorMessage}`, timestamp: Date.now(), channel: currentChannel });
    messageInput.disabled = true;
    messageForm.querySelector('button').disabled = true;
  });

  irc.onChannelUsers(({ channel, users }) => {
    if (channel === selectedChannel) {
      updateUserList();
    }
    updateChannelList();
  });

  irc.onTopic(({ channel, topic }) => {
    if (channel === selectedChannel) {
      updateHeader();
      channelTopicEl.textContent = topic; // Update topic in channel info as well
    }
    updateChannelList();
  });

  irc.onServerInfo((info) => {
    if (serverInfoText) {
      serverInfoText.textContent = `Users: ${info.users} | Channels: ${info.channels}`;
    }
  });

  irc.onChannelList((channels) => {
    globalChannels = new Set(channels);
  });

  userSearchInput.addEventListener('input', () => {
    const searchQuery = userSearchInput.value.toLowerCase();
    const users = irc.getChannelUsers(selectedChannel);
    const filteredUsers = users.filter(user => user.toLowerCase().includes(searchQuery));
    channelUserListEl.querySelector('.user-list-content').innerHTML = `
      ${filteredUsers.map(user => `
        <div class="user-item" data-user="${user}">
          <div class="user-avatar">${generateAvatar(user)}</div>
          <div class="user-name">${user}</div>
        </div>
      `).join('')}
    `;
    channelUserListEl.querySelectorAll('.user-item').forEach(item => {
      item.addEventListener('click', () => {
        const user = item.getAttribute('data-user');
        showPMDialog(user);
      });
    });
  });

  function initializeThemeSelector() {
    const themes = [
      { name: 'Light', class: 'theme-light' },
      { name: 'Dark', class: 'theme-dark' },
      { name: 'System', class: 'theme-system' }
    ];

    const themeSelector = document.createElement('div');
    themeSelector.className = 'theme-switcher';
    themeSelector.innerHTML = `
      <div class="section-header">Theme</div>
      ${themes.map(theme => `
        <label class="theme-option">
          <input type="radio" name="theme" value="${theme.class}">
          ${theme.name}
        </label>
      `).join('')}
    `;

    document.querySelector('.settings-content').appendChild(themeSelector);
  }

  initializeUI();
  initializeThemeSelector();
});