document.addEventListener('DOMContentLoaded', () => {
  // Canvas Setup
  const canvas = document.getElementById('drawing-canvas');
  const ctx = canvas.getContext('2d');

  // Initialize canvas with default gray background
  function initializeCanvas() {
    ctx.fillStyle = '#808080';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }

  initializeCanvas();

  // Drawing State
  let drawing = false;
  let brushColor = '#FFFFFF';
  let brushSize = 10;
  let brushOpacity = 1.0;

  // Set up brush controls
  const colorButtons = document.querySelectorAll('.color-btn');
  const customColorPicker = document.getElementById('custom-color');
  const brushSizeSlider = document.getElementById('brush-size');
  const brushSizeValue = document.getElementById('brush-size-value');
  const brushOpacitySlider = document.getElementById('brush-opacity');
  const brushOpacityValue = document.getElementById('brush-opacity-value');
  const downloadBtn = document.getElementById('download-btn');
  const resetBtn = document.getElementById('reset-btn');
  const noiseButtons = document.querySelectorAll('.noise-btn');
  const overlayToggle = document.getElementById('overlay-toggle');

  // Handle color button clicks
  colorButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      brushColor = btn.getAttribute('data-color');
      // Remove active class from all buttons
      colorButtons.forEach(b => b.classList.remove('active'));
      // Add active class to the selected button
      btn.classList.add('active');
      // Uncheck custom color if any
      customColorPicker.value = '#FFFFFF';
    });
  });

  // Handle custom color picker
  customColorPicker.addEventListener('change', (e) => {
    brushColor = e.target.value;
    // Remove active class from all color buttons
    colorButtons.forEach(b => b.classList.remove('active'));
  });

  // Handle brush size slider
  brushSizeSlider.addEventListener('input', (e) => {
    brushSize = e.target.value;
    brushSizeValue.textContent = brushSize;
  });

  // Handle brush opacity slider
  brushOpacitySlider.addEventListener('input', (e) => {
    brushOpacity = e.target.value;
    brushOpacityValue.textContent = brushOpacity;
  });

  // Handle noise generation buttons
  noiseButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      generateNoise(btn.getAttribute('data-noise'));
      // Remove active class from all noise buttons
      noiseButtons.forEach(b => b.classList.remove('active'));
      // Add active class to the selected button
      btn.classList.add('active');
    });
  });

  // Handle reset button
  resetBtn.addEventListener('click', () => {
    initializeCanvas();
    updateDisplacementMap();
  });

  // Handle overlay toggle
  overlayToggle.addEventListener('change', (e) => {
    const previewImage = document.getElementById('preview-image');
    if (e.target.checked) {
      previewImage.style.opacity = '0.7';
      previewImage.style.mixBlendMode = 'overlay';
    } else {
      previewImage.style.opacity = '1';
      previewImage.style.mixBlendMode = 'normal';
    }
  });

  // Drawing Functions
  function startDrawing(e) {
    drawing = true;
    ctx.beginPath();
    const { x, y } = getCanvasCoordinates(e);
    ctx.moveTo(x, y);
  }

  function draw(e) {
    if (!drawing) return;
    const { x, y } = getCanvasCoordinates(e);
    ctx.lineTo(x, y);
    ctx.strokeStyle = brushColor;
    ctx.lineWidth = brushSize;
    ctx.globalAlpha = brushOpacity;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.stroke();
  }

  function stopDrawing() {
    if (!drawing) return;
    drawing = false;
    ctx.closePath();
    updateDisplacementMap();
  }

  function getCanvasCoordinates(event) {
    const rect = canvas.getBoundingClientRect();
    let x, y;
    if (event.touches) {
      x = event.touches[0].clientX - rect.left;
      y = event.touches[0].clientY - rect.top;
    } else {
      x = event.clientX - rect.left;
      y = event.clientY - rect.top;
    }
    return { x, y };
  }

  // Event Listeners for Drawing
  canvas.addEventListener('mousedown', startDrawing);
  canvas.addEventListener('mousemove', draw);
  canvas.addEventListener('mouseup', stopDrawing);
  canvas.addEventListener('mouseleave', stopDrawing);

  // Touch Events for Mobile Support
  canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    startDrawing(e);
  });
  canvas.addEventListener('touchmove', (e) => {
    e.preventDefault();
    draw(e);
  });
  canvas.addEventListener('touchend', (e) => {
    e.preventDefault();
    stopDrawing();
  });

  // SVG Filter Setup
  const displacementMapElement = document.getElementById('displacement-map');
  const displacementScaleSlider = document.getElementById('displacement-scale');
  const displacementScaleValue = document.getElementById('displacement-scale-value');

  // Update displacement scale
  displacementScaleSlider.addEventListener('input', (e) => {
    const scale = e.target.value;
    displacementScaleValue.textContent = scale;
    const displacementFilter = document.getElementById('displacementFilter');
    const feDisplacementMap = displacementFilter.querySelector('feDisplacementMap');
    feDisplacementMap.setAttribute('scale', scale);
  });

  // Initial displacement map update
  updateDisplacementMap();

  // Function to update the displacement map in the SVG filter
  function updateDisplacementMap() {
    const dataURL = canvas.toDataURL();
    displacementMapElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', dataURL);
  }

  // Download Functionality
  downloadBtn.addEventListener('click', () => {
    const link = document.createElement('a');
    link.download = 'displacement-map.png';
    link.href = canvas.toDataURL();
    link.click();
  });

  // Ensure the displacement map updates when the brush opacity or size changes
  [brushOpacitySlider, brushSizeSlider].forEach(slider => {
    slider.addEventListener('change', updateDisplacementMap);
  });

  // Function to generate different types of noise and patterns
  function generateNoise(type) {
    switch(type) {
      case 'fractal':
        generateFractalNoise();
        break;
      case 'turbulence':
        generateTurbulence();
        break;
      case 'stripes':
        generateStripes();
        break;
      case 'checkerboard':
        generateCheckerboard();
        break;
      default:
        console.warn('Unknown noise type:', type);
    }
    updateDisplacementMap();
  }

  // Generate Fractal Noise
  function generateFractalNoise() {
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for(let i = 0; i < data.length; i += 4) {
      const value = Math.random() * 255;
      data[i] = value;     // R
      data[i+1] = value;   // G
      data[i+2] = value;   // B
      data[i+3] = 255;     // A
    }
    ctx.putImageData(imageData, 0, 0);
  }

  // Generate Turbulence
  function generateTurbulence() {
    const baseFrequency = 0.05; // Adjust for more or less turbulence
    const numOctaves = 4;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#808080';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Using SVG feTurbulence via offscreen SVG
    const svgNS = "http://www.w3.org/2000/svg";
    const svg = document.createElementNS(svgNS, "svg");
    const feTurbulence = document.createElementNS(svgNS, "feTurbulence");
    feTurbulence.setAttribute("type", "fractalNoise");
    feTurbulence.setAttribute("baseFrequency", baseFrequency);
    feTurbulence.setAttribute("numOctaves", numOctaves);
    feTurbulence.setAttribute("result", "turbulence");
    svg.appendChild(feTurbulence);

    const feImage = document.createElementNS(svgNS, "feImage");
    feImage.setAttribute("xlink:href", canvas.toDataURL());
    feImage.setAttribute("result", "background");
    svg.appendChild(feImage);

    const feBlend = document.createElementNS(svgNS, "feBlend");
    feBlend.setAttribute("in", "turbulence");
    feBlend.setAttribute("in2", "background");
    feBlend.setAttribute("mode", "multiply");
    svg.appendChild(feBlend);

    const svgData = new XMLSerializer().serializeToString(svg);
    const img = new Image();
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
    }
    img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
  }

  // Generate Stripes Pattern
  function generateStripes() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const stripeWidth = 20;
    for(let x = 0; x < canvas.width; x += stripeWidth * 2) {
      ctx.fillStyle = '#FFFFFF';
      ctx.fillRect(x, 0, stripeWidth, canvas.height);
    }
  }

  // Generate Checkerboard Pattern
  function generateCheckerboard() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const size = 40;
    for(let y = 0; y < canvas.height; y += size) {
      for(let x = 0; x < canvas.width; x += size) {
        if((x / size + y / size) % 2 === 0) {
          ctx.fillStyle = '#FFFFFF';
        } else {
          ctx.fillStyle = '#000000';
        }
        ctx.fillRect(x, y, size, size);
      }
    }
  }
});