// public/js/editor-bridge.js
(function () {
  // Bridge nur im Preview-Modus aktivieren
  const urlParams = new URLSearchParams(window.location.search);
  if (urlParams.get('preview') !== 'draft') return;

  console.log('[N&D Editor Bridge] Active on preview canvas');

  // Optischer Hinweis-Banner im Bearbeitungsmodus
  document.addEventListener('DOMContentLoaded', () => {
    const banner = document.createElement('div');
    banner.id = 'editor-preview-banner';
    banner.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; z-index: 99999; background: #d97706; color: #0f172a; text-align: center; padding: 6px 12px; font-size: 12px; font-weight: 700; font-family: monospace; letter-spacing: 0.5px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); pointer-events: none; opacity: 0.95;';
    banner.innerHTML = '🛠️ BEARBEITUNGSMODUS (VORSCHAU / ENTWURF) — Änderungen sind noch nicht live!';
    document.body.appendChild(banner);
    const currentPadding = parseInt(document.body.style.paddingTop || '0', 10);
    document.body.style.paddingTop = (currentPadding + 30) + 'px';
  });

  window.addEventListener('message', (event) => {
    const { type, payload } = event.data || {};

    if (type === 'THEME_UPDATE') {
      const root = document.documentElement;
      if (payload.colors) {
        Object.entries(payload.colors).forEach(([key, val]) => {
          root.style.setProperty(`--${key}`, val);
        });
      }

      // Live Section DOM Patching
      if (payload.sectionId && payload.settings) {
        const secElement = document.querySelector(`[data-section-id="${payload.sectionId}"], #${payload.sectionId}`) || document.querySelector('section');
        if (secElement) {
          const { title, subtitle, cta_text, bg_color, accent_color } = payload.settings;
          
          if (title !== undefined) {
            const h1OrH2 = secElement.querySelector('h1, h2, h3');
            if (h1OrH2) h1OrH2.textContent = title;
          }
          if (subtitle !== undefined) {
            const p = secElement.querySelector('p');
            if (p) p.textContent = subtitle;
          }
          if (cta_text !== undefined) {
            const btn = secElement.querySelector('a, button');
            if (btn) btn.textContent = cta_text;
          }
          if (bg_color !== undefined && bg_color !== '') {
            secElement.style.backgroundColor = bg_color;
          }
          if (accent_color !== undefined && accent_color !== '') {
            secElement.style.setProperty('--accent-color', accent_color);
          }
        }
      }
    }

    if (type === 'RELOAD_CANVAS') {
      // Sanfter Reload des Iframes bei Strukturänderungen
      window.location.reload();
    }
  });
})();