// GoMining Wars Tools Demo - Interactive JavaScript
(function() {
  'use strict';

  // === NAV BUTTON INTERACTIONS ===
  const navButtons = document.querySelectorAll('.neon-btn');

  navButtons.forEach(button => {
    button.addEventListener('click', function() {
      // Remove active class from all buttons
      navButtons.forEach(btn => btn.classList.remove('active'));
      // Add active class to clicked button
      this.classList.add('active');

      // Log the selected tab (you can replace this with actual navigation logic)
      console.log(`Navigated to: ${this.textContent}`);
    });
  });

  // === CHAT INPUT INTERACTIONS ===
  const chatInput = document.querySelector('.chat-input');
  const sendBtn = document.querySelector('.send-btn');
  const chatMessages = document.querySelector('.chat-messages');

  function sendMessage() {
    const messageText = chatInput.value.trim();

    if (!messageText) return;

    // Create new message element
    const messageDiv = document.createElement('div');
    messageDiv.className = 'chat-message';

    const timestamp = new Date().toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    });

    const userColors = ['user-purple', 'user-gold', 'user-orange', 'user-cyan'];
    const randomColor = userColors[Math.floor(Math.random() * userColors.length)];

    messageDiv.innerHTML = `
      <span class="timestamp">${timestamp}</span>
      <span class="username ${randomColor}">You</span>
      <span class="message-text">${escapeHtml(messageText)}</span>
    `;

    // Append to chat
    chatMessages.appendChild(messageDiv);

    // Scroll to bottom
    chatMessages.scrollTop = chatMessages.scrollHeight;

    // Clear input
    chatInput.value = '';

    // Focus back on input
    chatInput.focus();
  }

  // Send button click
  sendBtn.addEventListener('click', sendMessage);

  // Enter key to send
  chatInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });

  // === ALERT BUTTON INTERACTIONS ===
  const alertButtons = document.querySelectorAll('.alert-btn');

  alertButtons.forEach(button => {
    button.addEventListener('click', function() {
      this.classList.toggle('active');

      // Visual feedback
      const isActive = this.classList.contains('active');
      this.style.background = isActive
        ? 'rgba(138, 92, 246, 0.5)'
        : 'rgba(138, 92, 246, 0.2)';

      console.log(`Alert toggled: ${this.textContent} - ${isActive ? 'ON' : 'OFF'}`);
    });
  });

  // === UTILITY FUNCTIONS ===
  function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
  }

  // === AUTO-SCROLL CHAT TO BOTTOM ON LOAD ===
  window.addEventListener('load', function() {
    chatMessages.scrollTop = chatMessages.scrollHeight;
  });

  // === DEMO: SIMULATE INCOMING MESSAGES ===
  const demoMessages = [
    { user: 'RocketMiner', color: 'user-cyan', text: 'New round starting in 30 seconds!' },
    { user: 'GoldDigger99', color: 'user-gold', text: 'Let\'s coordinate our boosts this time' },
    { user: 'DiamondCollector', color: 'user-purple', text: 'I\'ll take lead on clan power-up' }
  ];

  let demoIndex = 0;
  function simulateIncomingMessage() {
    if (demoIndex >= demoMessages.length) return;

    const msg = demoMessages[demoIndex];
    const messageDiv = document.createElement('div');
    messageDiv.className = 'chat-message';

    const timestamp = new Date().toLocaleTimeString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      hour12: false
    });

    messageDiv.innerHTML = `
      <span class="timestamp">${timestamp}</span>
      <span class="username ${msg.color}">${msg.user}</span>
      <span class="message-text">${msg.text}</span>
    `;

    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;

    demoIndex++;
  }

  // Uncomment to enable demo messages every 8 seconds
  // setInterval(simulateIncomingMessage, 8000);

  console.log('GoMining Wars Tools Demo - Ready! ⛏️');
})();
