{# Live-preview behaviour: switch the visible placement pane and update the
   reused ad partials in place as the form changes. #}
<script>
  (function () {
    var q = function (s) { return document.querySelector(s); };
    var qa = function (s) { return Array.prototype.slice.call(document.querySelectorAll(s)); };

    var titleIn = q('[data-ad-title]');
    var descIn = q('[data-ad-desc]');
    var iconIn = q('[data-ad-icon]');
    var placementIn = q('[data-ad-placement]');
    var imageIn = q('[data-ad-image]');
    var spinner = q('[data-upload-spinner]');
    var badge = q('[data-preview-placement-badge]');
    var panes = qa('[data-preview-pane]');

    var DEFAULT_TITLE = 'Advertisement title';
    var DEFAULT_DESC = 'Your supporting copy appears here.';

    // The existing (server-rendered) image on the edit form, kept until replaced.
    var baseImage = (function () {
      var im = q('.ad-banner-media img') || q('.ad-sidebar-icon img');
      return im ? im.getAttribute('src') : null;
    })();
    var uploadedImage = null;
    function currentImage() { return uploadedImage || baseImage; }

    function titleCase(s) { return s ? s.charAt(0).toUpperCase() + s.slice(1) : s; }

    // User-facing placement labels — keep in sync with AdvertisementPlacement
    // .display_name (server side). 'chat' is always presented as "Chat Unlock".
    var PLACEMENT_LABELS = { chat: 'Chat Unlock' };
    function placementLabel(v) { return PLACEMENT_LABELS[v] || titleCase(v); }

    // Media slots render either an <img> or an icon; swap content to match state.
    function renderMedia(mediaEl, kind, dataUrl, iconClass) {
      if (!mediaEl) return;
      if (dataUrl) {
        mediaEl.innerHTML = '<img alt="">';
        mediaEl.firstChild.src = dataUrl;
      } else if (kind === 'banner') {
        mediaEl.innerHTML = '<span class="ad-banner-icon"><i class="bi ' + iconClass + '"></i></span>';
      } else {
        mediaEl.innerHTML = '<i class="bi ' + iconClass + '"></i>';
      }
    }

    function sync() {
      var title = (titleIn && titleIn.value.trim()) || DEFAULT_TITLE;
      var desc = (descIn && descIn.value.trim()) || DEFAULT_DESC;
      var icon = (iconIn && iconIn.value) || 'bi-stars';
      var img = currentImage();

      qa('.ad-banner-title, .ad-sidebar-title, .ad-rewarded-title').forEach(function (el) { el.textContent = title; });
      qa('.ad-banner-desc, .ad-sidebar-desc').forEach(function (el) { el.textContent = desc; });
      qa('.ad-banner-media').forEach(function (el) { renderMedia(el, 'banner', img, icon); });
      qa('.ad-sidebar-icon').forEach(function (el) { renderMedia(el, 'sidebar', img, icon); });
    }

    function showPane(placement) {
      panes.forEach(function (p) {
        p.classList.toggle('d-none', p.getAttribute('data-preview-pane') !== placement);
      });
      if (badge) badge.textContent = placementLabel(placement);
    }

    [titleIn, descIn, iconIn].forEach(function (el) {
      if (el) el.addEventListener('input', sync);
      if (el) el.addEventListener('change', sync);
    });

    if (placementIn) {
      placementIn.addEventListener('change', function () {
        // Remember the admin's banner placement so Rewarded→Banner can restore it.
        if (!typeIn || typeIn.value !== 'rewarded') lastBannerPlacement = placementIn.value;
        showPane(placementIn.value || 'landing');
      });
    }

    if (imageIn) {
      imageIn.addEventListener('change', function () {
        var file = imageIn.files && imageIn.files[0];
        if (!file) { uploadedImage = null; sync(); return; }
        if (spinner) spinner.classList.remove('d-none');
        var reader = new FileReader();
        reader.onload = function (e) {
          uploadedImage = e.target.result;
          if (spinner) spinner.classList.add('d-none');
          sync();
        };
        reader.readAsDataURL(file);
      });
    }

    // Media controls depend on the advertisement type:
    //   Banner   → Reward Format hidden entirely; media_type forced to Image.
    //   Rewarded → Reward Format shown (Image or Video); previous choice restored.
    // The backend and its Banner+Video validation are unchanged — the hidden
    // <select> still submits media_type=image for Banner.
    var typeIn = q('[data-ad-type]');
    var mediaTypeIn = q('[data-ad-media-type]');
    var rewardFormat = q('[data-ad-reward-format]');
    var imageFields = q('[data-ad-image-fields]');
    var videoFields = q('[data-ad-video-fields]');
    var bannerNote = q('[data-ad-banner-note]');
    var typeBannerHelp = q('[data-ad-type-banner]');
    var typeRewardedHelp = q('[data-ad-type-rewarded]');
    // Placement: Banner chooses freely; Rewarded is fixed to the CHAT (Chat Unlock)
    // placement, assigned automatically server-side. The placement dropdown only
    // lists banner placements (chat is excluded), so for Rewarded the dropdown is
    // hidden, the read-only card is shown, and the live preview shows the chat pane.
    var placementField = q('[data-ad-placement-field]');
    var placementRewarded = q('[data-ad-placement-rewarded]');
    var REWARDED_PANE = 'chat';
    // Remember the admin's last choices so switching Banner→Rewarded and back restores them.
    var lastRewardFormat = (mediaTypeIn && mediaTypeIn.value) || 'image';
    var lastBannerPlacement = (placementIn && placementIn.value) || 'landing';

    function syncMediaType() {
      var isVideo = mediaTypeIn && mediaTypeIn.value === 'video';
      if (imageFields) imageFields.classList.toggle('d-none', isVideo);
      if (videoFields) videoFields.classList.toggle('d-none', !isVideo);
    }
    function syncTypeMedia() {
      var isBanner = typeIn && typeIn.value === 'banner';
      if (mediaTypeIn) {
        if (isBanner) mediaTypeIn.value = 'image';          // Banner is always image
        else mediaTypeIn.value = lastRewardFormat || 'image'; // restore prior Rewarded choice
      }
      // Placement: hide the dropdown for Rewarded (chat is assigned server-side),
      // restore the banner one otherwise. The select only holds banner placements,
      // so for Rewarded it keeps a (submitted, but overridden) banner value.
      if (placementIn && isBanner) placementIn.value = lastBannerPlacement || 'landing';
      if (placementField) placementField.classList.toggle('d-none', !isBanner);
      if (placementRewarded) placementRewarded.classList.toggle('d-none', isBanner);
      if (rewardFormat) rewardFormat.classList.toggle('d-none', isBanner);
      if (bannerNote) bannerNote.classList.toggle('d-none', !isBanner);
      if (typeBannerHelp) typeBannerHelp.classList.toggle('d-none', !isBanner);
      if (typeRewardedHelp) typeRewardedHelp.classList.toggle('d-none', isBanner);
      syncMediaType();
      // Live preview: banner follows the dropdown; rewarded shows the chat-unlock pane.
      showPane(isBanner ? ((placementIn && placementIn.value) || 'landing') : REWARDED_PANE);
    }
    if (mediaTypeIn) mediaTypeIn.addEventListener('change', function () {
      if (!typeIn || typeIn.value !== 'banner') lastRewardFormat = mediaTypeIn.value;
      syncMediaType();
    });
    if (typeIn) typeIn.addEventListener('change', syncTypeMedia);
    syncTypeMedia();

    // Drag & drop enhancement for the image/video file inputs. The native input
    // stays the source of truth (server validation + form submit unchanged); the
    // dropzone just populates it and shows the selected filename/size + remove.
    function humanSize(n) {
      var units = ['B', 'KB', 'MB', 'GB']; var i = 0; n = n || 0;
      while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }
      return (i ? n.toFixed(1) : n) + ' ' + units[i];
    }
    qa('[data-uploader]').forEach(function (root) {
      var input = root.querySelector('[data-dropzone-input]');
      var zone = root.querySelector('[data-dropzone]');
      var box = root.querySelector('[data-dropzone-file]');
      var nameEl = root.querySelector('[data-dropzone-name]');
      var sizeEl = root.querySelector('[data-dropzone-size]');
      var removeBtn = root.querySelector('[data-dropzone-remove]');
      if (!input || !zone) return;
      function render() {
        var f = input.files && input.files[0];
        if (f) {
          if (nameEl) nameEl.textContent = f.name;
          if (sizeEl) sizeEl.textContent = '· ' + humanSize(f.size);
          if (box) box.classList.remove('d-none');
        } else if (box) { box.classList.add('d-none'); }
      }
      zone.addEventListener('click', function () { input.click(); });
      zone.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.click(); }
      });
      ['dragenter', 'dragover'].forEach(function (ev) {
        zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.add('dragover'); });
      });
      ['dragleave', 'dragend', 'drop'].forEach(function (ev) {
        zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.remove('dragover'); });
      });
      zone.addEventListener('drop', function (e) {
        var files = e.dataTransfer && e.dataTransfer.files;
        if (!files || !files.length) return;
        try { var dt = new DataTransfer(); dt.items.add(files[0]); input.files = dt.files; } catch (_) {}
        input.dispatchEvent(new Event('change', { bubbles: true }));
      });
      input.addEventListener('change', render);
      if (removeBtn) removeBtn.addEventListener('click', function () {
        try { input.value = ''; } catch (_) {}
        input.dispatchEvent(new Event('change', { bubbles: true }));
      });
      render();
    });

    // Show the chosen video filename after selection.
    var videoIn = q('[data-ad-video-input]');
    var videoName = q('[data-ad-video-filename]');
    if (videoIn && videoName) {
      videoIn.addEventListener('change', function () {
        var f = videoIn.files && videoIn.files[0];
        if (f) { videoName.textContent = 'Selected: ' + f.name; videoName.classList.remove('d-none'); }
        else { videoName.textContent = ''; videoName.classList.add('d-none'); }
      });
    }

    // Display Weight: live meter + recommended note/badge + very-high-weight
    // caution. Purely visual guidance — never affects validation or submission.
    var weightIn = q('[data-ad-weight]');
    if (weightIn) {
      var wProgress = q('[data-weight-progress]');
      var wProgressWrap = q('[data-weight-progress-wrap]');
      var wWarn = q('[data-weight-warning]');
      var wNote = q('[data-weight-recommended-note]');
      var wBadge = q('[data-weight-recommended-badge]');
      function syncWeight() {
        var raw = parseInt(weightIn.value, 10);
        var has = !isNaN(raw);
        var clamped = has ? Math.max(0, Math.min(1000, raw)) : 0;
        if (wProgress) wProgress.style.width = (clamped / 10) + '%';       // 0–1000 → 0–100%
        if (wProgressWrap) wProgressWrap.setAttribute('aria-valuenow', clamped);
        if (wWarn) wWarn.classList.toggle('d-none', !(has && raw >= 500));
        var isRec = has && raw === 100;
        if (wNote) wNote.classList.toggle('d-none', !isRec);
        if (wBadge) wBadge.classList.toggle('d-none', !isRec);
      }
      weightIn.addEventListener('input', syncWeight);
      weightIn.addEventListener('change', syncWeight);
      syncWeight();
    }

    // Initial preview pane: rewarded shows the chat-unlock pane; banner follows the dropdown.
    showPane((typeIn && typeIn.value === 'rewarded')
      ? REWARDED_PANE : ((placementIn && placementIn.value) || 'landing'));
    sync();
  })();
</script>