document.addEventListener('DOMContentLoaded', () => {
  const theorySelect = document.getElementById('theory');
  const moodSelect = document.getElementById('mood');
  const countInput = document.getElementById('count');
  const saturationInput = document.getElementById('saturation');
  const lightnessInput = document.getElementById('lightness');
  const baseColorInput = document.getElementById('baseColor');
  const generateBtn = document.getElementById('generate');
  const paletteContainer = document.getElementById('palette');
  const copyAllBtn = document.getElementById('copyAllHex');
  const themeToggle = document.getElementById('themeToggle');
  const popup = document.getElementById('helpPopup');
  const popupContent = document.getElementById('popupContent');
  const popupOverlay = document.getElementById('popupOverlay');
  const popupClose = document.getElementById('popupClose');
  const popupCloseX = document.getElementById('popupCloseX');
  const helpButtons = document.querySelectorAll('.help-btn');
  const theoryExplanation = document.getElementById('theoryExplanation');

  // Dummy options for example
  const colorTheories = ['Analogous', 'Complementary', 'Monochromatic', 'Triadic', 'Random'];
  const colorMoods = ['Vibrant', 'Pastel', 'Muted', 'Dark', 'Random'];

  function populateSelect(select, options) {
    select.innerHTML = options.map(opt => `<option value="${opt.toLowerCase()}">${opt}</option>`).join('');
  }

  populateSelect(theorySelect, colorTheories);
  populateSelect(moodSelect, colorMoods);

  // Generate palette logic
  generateBtn.addEventListener('click', generatePalette);

  function generatePalette() {
    const count = parseInt(countInput.value);
    paletteContainer.innerHTML = '';

    for (let i = 0; i < count; i++) {
      const hex = getRandomColor();

      const colorBox = document.createElement('div');
      colorBox.className = 'color-box';

      const swatch = document.createElement('div');
      swatch.className = 'color-swatch';
      swatch.style.backgroundColor = hex;

      const info = document.createElement('div');
      info.className = 'color-info';

      const name = document.createElement('div');
      name.className = 'color-name';
      name.textContent = 'Color ' + (i + 1);

      const contrast = document.createElement('div');
      contrast.className = 'color-contrast';
      contrast.textContent = 'Contrast: TBD';

      const hexDisplay = document.createElement('div');
      hexDisplay.className = 'color-hex';
      hexDisplay.textContent = hex;

      const copyBtn = document.createElement('button');
      copyBtn.className = 'copy-btn';
      copyBtn.textContent = 'Copy Hex';
      copyBtn.addEventListener('click', () => {
        navigator.clipboard.writeText(hex);
      });

      info.appendChild(name);
      info.appendChild(contrast);
      info.appendChild(hexDisplay);
      info.appendChild(copyBtn);

      colorBox.appendChild(swatch);
      colorBox.appendChild(info);
      paletteContainer.appendChild(colorBox);
    }
  }

  // Generate random hex color
  function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let hex = '#';
    for (let i = 0; i < 6; i++) {
      hex += letters[Math.floor(Math.random() * 16)];
    }
    return hex;
  }

  // Copy all hex codes
  copyAllBtn.addEventListener('click', () => {
    const hexes = Array.from(paletteContainer.querySelectorAll('.color-hex')).map(el => el.textContent).join('\n');
    navigator.clipboard.writeText(hexes);
  });

  // Theme toggle
  themeToggle.addEventListener('click', () => {
    const body = document.body;
    const currentTheme = body.getAttribute('data-theme');
    body.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
  });

  // Help popup logic
  helpButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const helpType = btn.dataset.help;
      popupContent.innerHTML = getHelpContent(helpType);
      popup.style.display = 'block';
      popupOverlay.style.display = 'block';
    });
  });

  popupClose.addEventListener('click', closePopup);
  popupCloseX.addEventListener('click', closePopup);
  popupOverlay.addEventListener('click', closePopup);

  function closePopup() {
    popup.style.display = 'none';
    popupOverlay.style.display = 'none';
  }

  function getHelpContent(type) {
    switch (type) {
      case 'controls':
        return '<h3>Controls Help</h3><p>Adjust your palette using the options provided.</p>';
      case 'theory':
        return '<h3>Color Theory</h3><p>Select how colors relate within your palette.</p>';
      case 'mood':
        return '<h3>Color Mood</h3><p>Set the overall mood or tone for your colors.</p>';
      case 'count':
        return '<h3>Number of Colors</h3><p>Choose how many colors to generate.</p>';
      case 'saturation':
        return '<h3>Saturation</h3><p>Adjust the vividness of your colors.</p>';
      case 'lightness':
        return '<h3>Lightness</h3><p>Control how light or dark your colors appear.</p>';
      case 'baseColor':
        return '<h3>Base Color</h3><p>Select the starting color for your palette.</p>';
      case 'copyAll':
        return '<h3>Copy All Hex</h3><p>Copy all color codes to your clipboard.</p>';
      default:
        return '<p>Help content not available.</p>';
    }
  }
});