document.addEventListener('DOMContentLoaded', () => {
  // Help modal
  const helpBtn = document.getElementById('help-btn');
  const helpModal = document.getElementById('help-modal');
  const helpCloseBtn = document.getElementById('help-close-btn');
  const mainMenuBtn = document.getElementById('main-menu-btn');
  const mainMenuDropdown = document.getElementById('main-menu-dropdown');

  if (helpBtn && helpModal) {
    helpBtn.addEventListener('click', () => {
      helpModal.classList.add('active');
    });
  }

  if (helpCloseBtn && helpModal) {
    helpCloseBtn.addEventListener('click', () => {
      helpModal.classList.remove('active');
    });
  }

  // Mobile main menu: forward clicks to existing header buttons
  if (mainMenuBtn && mainMenuDropdown) {
    mainMenuBtn.addEventListener('click', () => {
      mainMenuDropdown.classList.toggle('open');
    });

    mainMenuDropdown.addEventListener('click', (event) => {
      const target = event.target;
      if (target && target.matches('button[data-target]')) {
        const id = target.getAttribute('data-target');
        const realBtn = document.getElementById(id);
        if (realBtn) {
          realBtn.click();
        }
        mainMenuDropdown.classList.remove('open');
      }
    });
  }

  // Settings modal wiring (reusing existing settings endpoints).
  const settingsButton = document.getElementById('settings-btn');
  const settingsModal = document.getElementById('settings-modal');
  const settingsCloseButton = document.getElementById('settings-close-btn');

  const showSettingsMessage = (text, type = 'success') => {
    const messageEl = document.getElementById('settings-message');
    if (!messageEl) return;
    messageEl.textContent = text;
    messageEl.className = `message ${type} show`;
    setTimeout(() => {
      messageEl.classList.remove('show');
    }, 5000);
  };

  async function loadDeviceSettings() {
    try {
      const response = await fetch('/settings');
      const data = await response.json();
      const nameInput = document.getElementById('device-name-input');
      if (nameInput && data && typeof data === 'object') {
        nameInput.value = data.device_name || 'led-controller';
      }
      const chInput = document.getElementById('wifi-channel-input');
      if (chInput && data && typeof data === 'object') {
        const ch = data.wifi_channel;
        chInput.value =
          ch !== undefined && ch !== null && ch !== '' ? String(ch) : '6';
      }
    } catch (error) {
      console.error('Error loading device settings:', error);
    }
  }

  async function loadAPStatus() {
    try {
      const response = await fetch('/settings/wifi/ap');
      const config = await response.json();
      const statusEl = document.getElementById('ap-status');
      if (!statusEl) return;
      if (config.active) {
        statusEl.innerHTML = `
          <h4>AP Status: <span class="status-connected">Active</span></h4>
          <p><strong>SSID:</strong> ${config.ssid || 'N/A'}</p>
          <p><strong>Channel:</strong> ${config.channel || 'Auto'}</p>
          <p><strong>IP Address:</strong> ${config.ip || 'N/A'}</p>
        `;
      } else {
        statusEl.innerHTML = `
          <h4>AP Status: <span class="status-disconnected">Inactive</span></h4>
          <p>Access Point is not currently active</p>
        `;
      }
      if (config.saved_ssid) document.getElementById('ap-ssid').value = config.saved_ssid;
      if (config.saved_channel) document.getElementById('ap-channel').value = config.saved_channel;
    } catch (error) {
      console.error('Error loading AP status:', error);
    }
  }

  if (settingsButton && settingsModal) {
    settingsButton.addEventListener('click', () => {
      settingsModal.classList.add('active');
      // Load current WiFi status/config when opening
      loadDeviceSettings();
      loadAPStatus();
    });
  }

  if (settingsCloseButton && settingsModal) {
    settingsCloseButton.addEventListener('click', () => {
      settingsModal.classList.remove('active');
    });
  }

  const deviceForm = document.getElementById('device-form');
  if (deviceForm) {
    deviceForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const nameInput = document.getElementById('device-name-input');
      const deviceName = nameInput ? nameInput.value.trim() : '';
      if (!deviceName) {
        showSettingsMessage('Device name is required', 'error');
        return;
      }
      const chRaw = document.getElementById('wifi-channel-input')
        ? document.getElementById('wifi-channel-input').value
        : '6';
      const wifiChannel = parseInt(chRaw, 10);
      if (Number.isNaN(wifiChannel) || wifiChannel < 1 || wifiChannel > 11) {
        showSettingsMessage('WiFi channel must be between 1 and 11', 'error');
        return;
      }
      try {
        const response = await fetch('/settings/settings', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            device_name: deviceName,
            wifi_channel: wifiChannel,
          }),
        });
        const result = await response.json();
        if (response.ok) {
          showSettingsMessage(
            'Device settings saved. They will apply on next restart where relevant.',
            'success',
          );
        } else {
          showSettingsMessage(`Error: ${result.error || 'Failed to save device name'}`, 'error');
        }
      } catch (error) {
        showSettingsMessage(`Error: ${error.message}`, 'error');
      }
    });
  }
  const apForm = document.getElementById('ap-form');
  if (apForm) {
    apForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = {
        ssid: document.getElementById('ap-ssid').value,
        password: document.getElementById('ap-password').value,
        channel: document.getElementById('ap-channel').value || null,
      };

      if (formData.password && formData.password.length > 0 && formData.password.length < 8) {
        showSettingsMessage('AP password must be at least 8 characters', 'error');
        return;
      }

      if (formData.channel) {
        formData.channel = parseInt(formData.channel, 10);
        if (formData.channel < 1 || formData.channel > 11) {
          showSettingsMessage('Channel must be between 1 and 11', 'error');
          return;
        }
      }

      try {
        const response = await fetch('/settings/wifi/ap', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData),
        });
        const result = await response.json();
        if (response.ok) {
          showSettingsMessage('Access Point configured successfully!', 'success');
          setTimeout(loadAPStatus, 1000);
        } else {
          showSettingsMessage(`Error: ${result.error || 'Failed to configure AP'}`, 'error');
        }
      } catch (error) {
        showSettingsMessage(`Error: ${error.message}`, 'error');
      }
    });
  }
});
