function buildColorButtons(picker, colors) {
    picker.innerHTML = '';
    colors.forEach((color) => {
      const button = document.createElement('div');
      button.classList.add('color-btn');
      button.dataset.color = color;
      button.style.background = color;
      picker.appendChild(button);
    });
  }

  function attachColorEvents(picker, svgPath) {
    const buttons = picker.querySelectorAll('.color-btn');
    buttons.forEach((button) => {
      button.addEventListener('click', () => {
        buttons.forEach((b) => b.classList.remove('selected'));
        button.classList.add('selected');
        const color = button.dataset.color;

        if (svgPath.hasAttribute('fill')) {
          svgPath.setAttribute('fill', color);
        } else if (svgPath.hasAttribute('stroke')) {
          svgPath.setAttribute('stroke', color);
        } else {
          svgPath.style.fill = color;
        }
      });
    });
  }

  function setupSvgColorPickers(svgId, zonesConfig) {
    const svg = document.getElementById(svgId);
    if (!svg) return;

    Object.entries(zonesConfig).forEach(([zoneId, colors]) => {
      const picker = document.querySelector(`.color-picker[data-svg="${svgId}"][data-zone="${zoneId}"]`);
      if (!picker) return;

      const svgPath = svg.querySelector(`#${zoneId}`);
      if (!svgPath) return;

      buildColorButtons(picker, colors);
      attachColorEvents(picker, svgPath);
    });
  }

  function initAllColorPickers(mapping) {
    Object.entries(mapping).forEach(([svgId, zones]) => {
      setupSvgColorPickers(svgId, zones);
    });
  }
  
function downloadSvg(svgElement, filename = 'image.svg') {
  if (!svgElement) return;

  const serializer = new XMLSerializer();
  let source = serializer.serializeToString(svgEl);

  // Add XML header if missing
  if (!source.match(/^<\?xml/)) {
    source = '<?xml version="1.0" standalone="no"?>\r\n' + source;
  }

  // Create blob and trigger download
  const blob = new Blob([source], { type: 'image/svg+xml;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
  URL.revokeObjectURL(url);
}

  document.addEventListener('DOMContentLoaded', () => {
    initAllColorPickers(colorMapping);
  });