(function () {
  var panel = document.querySelector('[data-myron-seo-panel]');
  if (!panel) {
    return;
  }

  function value(selector) {
    var field = panel.querySelector(selector);
    return field ? String(field.value || '').trim() : '';
  }

  function text(selector, next) {
    var target = panel.querySelector(selector);
    if (target) {
      target.textContent = next || '';
    }
  }

  function refresh() {
    var ogTitle = value('[data-seo-og-title]');
    var ogDescription = value('[data-seo-og-description]');
    var ogImage = value('[data-seo-og-image]');
    var twitterTitle = value('[data-seo-twitter-title]') || ogTitle;
    var twitterDescription = value('[data-seo-twitter-description]') || ogDescription;
    var twitterImage = value('[data-seo-twitter-image]') || ogImage;

    text('[data-seo-og-title-preview]', ogTitle);
    text('[data-seo-og-description-preview]', ogDescription);
    text('[data-seo-og-image-preview]', ogImage || 'No Image');
    text('[data-seo-twitter-title-preview]', twitterTitle);
    text('[data-seo-twitter-description-preview]', twitterDescription);
    text('[data-seo-twitter-image-preview]', twitterImage || 'No Image');
  }

  panel.addEventListener('input', refresh);
  panel.addEventListener('change', function (event) {
    if (event.target && event.target.matches('[data-seo-jsonld-mode]')) {
      var mode = String(event.target.value || '');
      if (mode === 'custom' || mode === 'none') {
        window.confirm('Switching to Custom or None will stop automatic updates. Are you sure?');
      }
    }
    refresh();
  });
  refresh();
})();
