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

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

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

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

  // 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';
      }
    } catch (error) {
      console.error('Error loading device settings:', error);
    }
  }

  async function loadStationStatus() {
    try {
      const response = await fetch('/settings/wifi/station');
      const status = await response.json();
      const statusEl = document.getElementById('station-status');
      if (!statusEl) return;
      if (status.connected) {
        statusEl.innerHTML = `
          <h4>Connection Status: <span class="status-connected">Connected</span></h4>
          <p><strong>SSID:</strong> ${status.ssid || 'N/A'}</p>
          <p><strong>IP Address:</strong> ${status.ip || 'N/A'}</p>
          <p><strong>Gateway:</strong> ${status.gateway || 'N/A'}</p>
          <p><strong>Netmask:</strong> ${status.netmask || 'N/A'}</p>
          <p><strong>DNS:</strong> ${status.dns || 'N/A'}</p>
        `;
      } else {
        statusEl.innerHTML = `
          <h4>Connection Status: <span class="status-disconnected">Disconnected</span></h4>
          <p>Not connected to any WiFi network</p>
        `;
      }
    } catch (error) {
      console.error('Error loading station status:', error);
    }
  }

  async function loadStationCredentials() {
    try {
      const response = await fetch('/settings/wifi/station/credentials');
      const creds = await response.json();
      if (creds.ssid) document.getElementById('station-ssid').value = creds.ssid;
      if (creds.ip) document.getElementById('station-ip').value = creds.ip;
      if (creds.gateway) document.getElementById('station-gateway').value = creds.gateway;
    } catch (error) {
      console.error('Error loading station credentials:', 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();
      loadStationStatus();
      loadStationCredentials();
      loadAPStatus();
    });
  }

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

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

  const stationForm = document.getElementById('station-form');
  if (stationForm) {
    stationForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const formData = {
        ssid: document.getElementById('station-ssid').value,
        password: document.getElementById('station-password').value,
        ip: document.getElementById('station-ip').value || null,
        gateway: document.getElementById('station-gateway').value || null,
      };
      try {
        const response = await fetch('/settings/wifi/station', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(formData),
        });
        const result = await response.json();
        if (response.ok) {
          showSettingsMessage('WiFi station connected successfully!', 'success');
          setTimeout(loadStationStatus, 1000);
        } else {
          showSettingsMessage(`Error: ${result.error || 'Failed to connect'}`, 'error');
        }
      } catch (error) {
        showSettingsMessage(`Error: ${error.message}`, 'error');
      }
    });
  }

  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;
      }
      try {
        const response = await fetch('/settings/settings', {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ device_name: deviceName }),
        });
        const result = await response.json();
        if (response.ok) {
          showSettingsMessage('Device name saved. It will be used on next restart.', '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');
      }
    });
  }
});