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

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

  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 = Math.max(16, 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
  if (api('bongoto_woocommerce_logo_max_height')) {
    api('bongoto_woocommerce_logo_max_height', (value) => {
      applyLogoMaxHeight(value.get());
      value.bind(applyLogoMaxHeight);
    });
  }

  // 2) Title show/hide
  if (api('bongoto_woocommerce_show_title_text')) {
    api('bongoto_woocommerce_show_title_text', (value) => {
      const apply = (v) =>
        withPreload(() => {
          setVisible('.bt-text-logo, .bt-site-title, .site-title', !!v);
        });
      apply(value.get());
      value.bind(apply);
    });
  }

  // 3) Tagline show/hide
  if (api('bongoto_woocommerce_show_tagline_text')) {
    api('bongoto_woocommerce_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) Site title text (blogname)
  if (api('blogname')) {
    api('blogname', (value) => {
      const apply = (v) => {
        d.querySelectorAll(
          '.site-title a, .bt-site-title, .bt-text-logo'
        ).forEach((el) => {
          el.textContent = v || '';
        });
      };
      apply(value.get());
      value.bind(apply);
    });
  }

  // 5) Tagline text (blogdescription)
  if (api('blogdescription')) {
    api('blogdescription', (value) => {
      const apply = (v) => {
        d.querySelectorAll(
          '.site-description, .bt-site-tagline, .bt-text-tagline'
        ).forEach((el) => {
          el.textContent = v || '';
        });
      };
      apply(value.get());
      value.bind(apply);
    });
  }

  // 6) Sticky header toggle
  if (api('bongoto_woocommerce_header_sticky')) {
    api('bongoto_woocommerce_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);
    });
  }

  // 7) Header component visibility toggles
  const componentMap = {
    bongoto_woocommerce_header_show_search:
      '.bt-header-search',
    bongoto_woocommerce_header_show_account:
      '.bt-header-account, .bt-account-link',
    bongoto_woocommerce_header_show_cart:
      '.bt-header-cart',
    bongoto_woocommerce_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);
    });
  });

  // 8) Upload button label
  if (api('bongoto_woocommerce_header_upload_label')) {
    api('bongoto_woocommerce_header_upload_label', (value) => {
      const apply = (v) => {
        if (typeof v !== 'string') return;
        d.querySelectorAll(
          '.bt-header-upload .bt-btn, .bt-header-cta .bt-btn'
        ).forEach((btn) => {
          btn.textContent = v || btn.textContent;
        });
      };
      apply(value.get());
      value.bind(apply);
    });
  }

  // 9) Live color CSS variables
  if (api('bongoto_woocommerce_color_primary')) {
    api('bongoto_woocommerce_color_primary', (v) =>
      v.bind((val) => setVar('--bt-color-primary', val))
    );
  }

  if (api('bongoto_woocommerce_color_text')) {
    api('bongoto_woocommerce_color_text', (v) =>
      v.bind((val) => {
        setVar('--bt-color-text', val);
        if (val) $('body').css('color', val);
      })
    );
  }

  if (api('bongoto_woocommerce_color_bg')) {
    api('bongoto_woocommerce_color_bg', (v) =>
      v.bind((val) => {
        setVar('--bt-color-bg', val);
        if (val) $('body').css('background-color', val);
      })
    );
  }

  if (api('bongoto_woocommerce_color_accent')) {
    api('bongoto_woocommerce_color_accent', (v) =>
      v.bind((val) => setVar('--bt-color-accent', val))
    );
  }
})(jQuery, window.wp && window.wp.customize, document);