/**
 * Bongoto Theme – Customizer Live Preview (CLEAN FINAL)
 * File: assets/js/customizer.js
 */
(function ($, api, d) {
  'use strict';
  if (!api) return;

  /* ---------- small helpers ---------- */
  function withPreload(fn) {
    let host = $('.site-branding .bt-brand-text');
    if (!host.length) host = $('.site-branding');
    const spinner = $('<span class="bt-live-preload" />');
    host.append(spinner);
    try { fn(); } finally {
      setTimeout(() => spinner.remove(), 350);
    }
  }

  function setVisible(selector, visible) {
    d.querySelectorAll(selector).forEach(el => {
      el.style.display = visible ? '' : 'none';
      el.hidden = !visible;
      el.classList.toggle('bt-hidden', !visible);
    });
  }

  // Logo height → both image style + CSS var (back-compat safe)
  function applyLogoMaxHeight(px) {
    const h = parseInt(px, 10) || 40;
    d.querySelectorAll('.site-branding').forEach(el => {
      el.style.setProperty('--bt-logo-h', h + 'px');
    });
    d.querySelectorAll('.bt-logo__img, .custom-logo').forEach(img => {
      img.style.maxHeight = h + 'px';
      img.style.height = 'auto';
      img.style.width = 'auto';
    });
  }

  function setVar(name, val) {
    d.documentElement.style.setProperty(name, val || '');
  }

  /* ---------- bindings ---------- */

  // 1) Logo Max Height
  api('bongoto_logo_max_height', value => {
    applyLogoMaxHeight(value.get());
    value.bind(applyLogoMaxHeight);
  });

  // 2) Title toggle (support both old/new selectors)
  api('bongoto_show_title_text', value => {
    const apply = (v) => withPreload(() => {
      setVisible('.bt-text-logo, .bt-site-title', !!v);
    });
    apply(value.get());
    value.bind(apply);
  });

  // 3) Tagline toggle (support both old/new selectors)
  api('bongoto_show_tagline_text', value => {
    const apply = (v) => withPreload(() => {
      setVisible('.bt-text-tagline, .bt-site-tagline, .site-description', !!v);
    });
    apply(value.get());
    value.bind(apply);
  });

  // 4) Sticky header toggle
  api('bongoto_header_sticky', value => {
    const apply = (v) => {
      const header = d.querySelector('#masthead') || d.querySelector('.bt-header');
      if (header) header.classList.toggle('bt-header--sticky', !!v);
    };
    apply(value.get());
    value.bind(apply);
  });

  // 5) Header component visibility toggles (if you use these settings)
  const componentMap = {
    'bongoto_header_show_search':  '.bt-header-search',
    'bongoto_header_show_account': '.bt-header-account',
    'bongoto_header_show_cart':    '.bt-header-cart',
    'bongoto_header_show_upload':  '.bt-header-upload, .bt-header-cta'
  };
  Object.keys(componentMap).forEach(settingId => {
    if (!api(settingId)) return;
    api(settingId, value => {
      const selector = componentMap[settingId];
      const apply = (v) => setVisible(selector, !!v);
      apply(value.get());
      value.bind(apply);
    });
  });

  // 6) Upload button label (if present)
  if (api('bongoto_header_upload_label')) {
    api('bongoto_header_upload_label', value => {
      const apply = (v) => {
        d.querySelectorAll('.bt-header-upload .bt-btn, .bt-header-cta .bt-btn').forEach(btn => {
          if (typeof v === 'string' && v.length) btn.textContent = v;
        });
      };
      apply(value.get());
      value.bind(apply);
    });
  }

  // 7) Footer copyright extra (optional)
  if (api('bongoto_footer_copyright_extra')) {
    api('bongoto_footer_copyright_extra', value => {
      const apply = (v) => {
        const wrap = d.querySelector('.bt-footer-copyright');
        if (!wrap) return;
        let extra = wrap.querySelector('.bt-footer-copyright-extra');
        if (!extra) {
          extra = d.createElement('span');
          extra.className = 'bt-footer-copyright-extra';
          const p = wrap.querySelector('p') || wrap;
          p.appendChild(d.createElement('br'));
          p.appendChild(extra);
        }
        extra.innerHTML = v || '';
        extra.style.display = v ? '' : 'none';
      };
      apply(value.get());
      value.bind(apply);
    });
  }

  // 8) Live color variables (so title/tagline recolor instantly)
  if (api('bongoto_color_primary')) api('bongoto_color_primary', v => v.bind(val => setVar('--bt-color-primary', val)));
  if (api('bongoto_color_text'))    api('bongoto_color_text',    v => v.bind(val => setVar('--bt-color-text',    val)));
  if (api('bongoto_color_bg'))      api('bongoto_color_bg',      v => v.bind(val => setVar('--bt-color-bg',      val)));
  if (api('bongoto_color_accent'))  api('bongoto_color_accent',  v => v.bind(val => setVar('--bt-color-accent',  val)));

})(jQuery, window.wp && window.wp.customize, document);