<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LinkUp</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="module" src="./app.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/atom-one-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
</head>
<body>
  <header>
    <pear-ctrl></pear-ctrl>
    <div id="linkup-text">LinkUp | Peers: <span id="peers-count">0</span></div>
  </header>
  <main>
    <div id="sidebar">
      <ul id="room-list">
        <!-- Room list will be populated dynamically -->
      </ul>
      <button id="toggle-setup-btn">Create/Join Room</button>
    </div>
    <div id="content">
      <div id="register" class="hidden">
        <form id="register-form">
          <input required id="reg-username" type="text" placeholder="Username" />
          <input type="file" id="avatar-file" accept="image/*" style="display: none;" />
          <button type="button" id="select-avatar">Select Avatar</button>
          <input type="submit" value="Register" />
        </form>
      </div>
      <div id="setup" class="hidden">
        <div id="user-info">
          <!-- User info will be populated dynamically -->
        </div>
        <button id="create-chat-room">Create Room</button>
        <div id="or">- or -</div>
        <div id="join-chat-room-container">
          <label for="connection-topic">Topic:</label>
          <input type="text" id="join-chat-room-topic" placeholder="connection topic">
          <button id="join-chat-room">Join Room</button>
        </div>
      </div>
      <div id="chat" class="hidden">
        <div id="header">
          <div id="details">
            <div style="display: inline;">
              <strong><span id="chat-room-name"></span></strong> | <a href="#" id="copy-topic-link" class="mini-button">Copy Topic</a>
              <span id="chat-room-topic" style="display: none;"></span>
            </div>
          </div>
          <div id="user-list">
            <!-- User list will be populated here -->
          </div>
        </div>
        <div id="messages-container">
          <div id="messages"></div>
        </div>
        <form id="message-form">
          <textarea id="message" rows="4"></textarea>
          <input type="file" id="file-input" style="display:none;">
          <button type="button" id="attach-file">Attach File</button>
          <button type="button" id="talk-btn">Talk</button> <!-- New Talk button -->
          <input type="submit" value="Send" />
        </form>
        <button id="remove-room-btn">Leave Room</button>
      </div>
      <div id="loading" class="hidden">Loading ...</div>
    </div>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const messageInput = document.getElementById('message');
      const copyTopicLink = document.getElementById('copy-topic-link');
      const chatRoomTopic = document.getElementById('chat-room-topic');

      if (messageInput) {
        messageInput.addEventListener('keydown', function(event) {
          if (event.key === 'Enter' && !event.shiftKey) {
            event.preventDefault();
            document.getElementById('message-form').dispatchEvent(new Event('submit'));
          }
        });
      }

      if (copyTopicLink) {
        copyTopicLink.addEventListener('click', function(event) {
          event.preventDefault();
          if (chatRoomTopic) {
            const topic = chatRoomTopic.innerText;
            navigator.clipboard.writeText(topic).then(() => {
              console.log('Topic copied to clipboard:', topic);
            }).catch(err => {
              console.error('Failed to copy topic:', err);
            });
          } else {
            console.error('Element #chat-room-topic not found');
          }
        });
      }

      const switchRoom = (topic) => {
        console.log('Switching to room:', topic); // Debugging log
        const chatRoomTopic = document.querySelector('#chat-room-topic');
        const chatRoomName = document.querySelector('#chat-room-name');

        if (chatRoomTopic) {
          chatRoomTopic.innerText = topic; // Set full topic here
        } else {
          console.error('Element #chat-room-topic not found');
        }

        // Show chat UI elements
        document.querySelector('#chat').classList.remove('hidden');
        document.querySelector('#setup').classList.add('hidden');
      };

      const roomList = document.querySelector('#room-list');
      if (roomList) {
        roomList.addEventListener('click', function(event) {
          const roomItem = event.target.closest('li');
          if (roomItem) {
            switchRoom(roomItem.dataset.topic);
          }
        });
      }
    });
  </script>
</body>
</html>