(function(){
  'use strict';

  var cfg   = window.ADS_CONFIG || {};
  var slots = cfg.slots || {};

  /* Ratio → percentage for padding-top intrinsic sizing */
  var RATIO_PAD = {
    '1:1':  '100%',     /* 1/1   = 1.000 */
    '16:9': '56.25%',   /* 9/16  = 0.5625 */
    '9:16': '177.78%'   /* 16/9  = 1.7778 */
  };

  /* ── GTM ── */
  if (cfg.gtm && cfg.gtm.enabled && cfg.gtm.id && cfg.gtm.id.indexOf('XXXXXXX') === -1) {
    var gtmS = document.createElement('script');
    gtmS.innerHTML = "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','"+cfg.gtm.id+"');";
    document.head.appendChild(gtmS);
    var ns = document.getElementById('gtm-noscript');
    if (ns) ns.innerHTML = '<noscript><iframe src="https://www.googletagmanager.com/ns.html?id='+cfg.gtm.id+'" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>';
  }

  /* ── Build inner content node ── */
  function buildContent(type, slotCfg) {
    var wrap = document.createElement('div');
    wrap.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;overflow:hidden;';

    var placeholder = function(bg, color, msg) {
      wrap.style.cssText += 'display:flex;align-items:center;justify-content:center;background:'+bg+';';
      wrap.innerHTML = '<span style="font-size:11px;color:'+color+';text-align:center;padding:10px;line-height:1.5">'+msg+'</span>';
    };

    if (type === 'image') {
      var img = slotCfg.image || {};
      var src = (img.src || '').trim();
      if (!src) { placeholder('#f0f0ee','#aaa','No image uploaded yet'); return wrap; }

      var a = document.createElement('a');
      a.href   = img.href || '#';
      a.target = '_blank';
      a.rel    = 'noopener noreferrer';
      a.style.cssText = 'display:block;width:100%;height:100%;';

      var image = document.createElement('img');
      image.src   = src;
      image.alt   = img.alt || 'Advertisement';
      image.style.cssText = 'width:100%;height:100%;object-fit:cover;display:block;';
      image.onerror = function() {
        wrap.innerHTML = '<span style="font-size:10px;color:#c00;text-align:center;padding:8px;line-height:1.5">Image not found.<br>Check the file path in admin.</span>';
        wrap.style.background = '#fff0f0';
        wrap.style.display = 'flex';
        wrap.style.alignItems = 'center';
        wrap.style.justifyContent = 'center';
      };

      a.appendChild(image);
      wrap.appendChild(a);

    } else if (type === 'adsense') {
      var asCfg = slotCfg.adsense || {};
      var code  = (asCfg.code || '').trim();
      if (!code) { placeholder('#f0f7ff','#555','Paste AdSense code<br>in the admin panel'); return wrap; }

      wrap.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;';

      var inner = document.createElement('div');
      inner.style.cssText = 'width:100%;text-align:center;';

      /* Parse and re-create nodes so <script> tags actually execute */
      var tmp = document.createElement('div');
      tmp.innerHTML = code;
      Array.prototype.slice.call(tmp.childNodes).forEach(function(node) {
        if (node.nodeName === 'SCRIPT') {
          var s = document.createElement('script');
          if (node.src) {
            s.src = node.src;
            s.async = true;
            if (node.crossOrigin) s.crossOrigin = node.crossOrigin;
          } else {
            s.textContent = node.textContent;
          }
          inner.appendChild(s);
        } else {
          inner.appendChild(node.cloneNode(true));
        }
      });
      wrap.appendChild(inner);
    }
    return wrap;
  }

  /* ── Render one slot ── */
  function renderSlot(slotId, slotCfg) {
    var el = document.getElementById('slot-' + slotId);
    if (!el) return;

    var type  = slotCfg.type  || 'none';
    var ratio = slotCfg.ratio || '1:1';

    /* Full reset */
    el.innerHTML = '';
    el.removeAttribute('style');
    el.removeAttribute('class');
    el.className = 'ad-slot';

    /* ── OFF: show a simple placeholder box ── */
    if (type === 'none') {
      el.style.cssText = [
        'width:100%',
        'min-height:80px',
        'border-radius:6px',
        'border:1.5px dashed #bbb',
        'background:rgba(0,0,0,.04)',
        'display:flex',
        'align-items:center',
        'justify-content:center',
        'flex-shrink:0'
      ].join(';');
      el.innerHTML = '<span style="font-size:10px;color:#bbb;text-align:center;padding:10px">Ad slot</span>';
      return;
    }

    /* ── ACTIVE: ratio-locked intrinsic box ──
     *
     * The trick:
     *   outer div  → position:relative; width:100%; height:0; padding-top:<ratio>%
     *   inner div  → position:absolute; inset:0  (fills the padding space)
     *
     * CRITICAL: the outer wrapper must NOT have overflow:hidden or the
     * padding-top space collapses. Only the inner fill div clips content.
     */
    var padPct = RATIO_PAD[ratio] || '100%';

    /* Outer ratio-lock shell */
    el.style.cssText = [
      'position:relative',
      'width:100%',
      'height:0',
      'padding-top:' + padPct,
      'flex-shrink:0',
      'border-radius:4px'
    ].join(';');

    /* Inner content */
    var content = buildContent(type, slotCfg);
    el.appendChild(content);
  }

  /* ── Init ── */
  function init() {
    Object.keys(slots).forEach(function(id) {
      renderSlot(id, slots[id]);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();