<?php

namespace App\Customizer;

/**
 * -------------------------------------------------------------------------
 * Customizer Controls UI (left panel) styling + small JS helpers
 * -------------------------------------------------------------------------
 *
 * This affects ONLY the Customizer controls frame (not the preview).
 * Keeps the Customizer branded (dark UI + primary hover colour).
 */

add_action('customize_controls_enqueue_scripts', function (): void {

    $handle = 'hayden-customizer-style';

    // 1) Enqueue customizer stylesheet (controls frame)
    wp_enqueue_style(
        $handle,
        get_theme_file_uri('resources/css/customizer.css'),
        [],
        wp_get_theme()->get('Version')
    );

    // 2) Make primary colour available as a CSS var in the controls frame
    $primary = sanitize_hex_color(get_theme_mod('hayden_primary_color', '#f97316')) ?: '#f97316';

    // Attach inline styles to OUR handle (guaranteed enqueued above)
    wp_add_inline_style($handle, ':root { --color-primary: ' . esc_html($primary) . '; }');

    // 3) Container width label helper (controls frame only)
    $js = <<<JS
(function(api) {
  if (!api) return;

  function updateWidthValue(val) {
    var el = document.getElementById('hayden-container-width-value');
    if (el) el.textContent = val + 'px';
  }

  api('hayden_container_width', function(setting) {
    updateWidthValue(setting.get());
    setting.bind(function(newVal) { updateWidthValue(newVal); });
  });

  document.addEventListener('input', function(e) {
    if (e.target && e.target.classList && e.target.classList.contains('hayden-container-width-range')) {
      updateWidthValue(e.target.value);
    }
  });

  // Live update primary colour variable in controls frame UI
  api('hayden_primary_color', function(setting) {
    function applyPrimary(val) {
      if (!val) val = '#f97316';
      document.documentElement.style.setProperty('--color-primary', val);
    }
    applyPrimary(setting.get());
    setting.bind(applyPrimary);
  });

  function formatRem(val) {
    var num = parseFloat(val);
    if (isNaN(num)) return '0';
    return num.toFixed(2).replace(/\.00$/, '').replace(/(\.\d)0$/, '$1');
  }

  function bindSpacingValue(settingId, labelId, inputClass) {
    api(settingId, function(setting) {
      var el = document.getElementById(labelId);
      if (el) el.textContent = formatRem(setting.get());
      setting.bind(function(newVal) {
        if (el) el.textContent = formatRem(newVal);
      });
    });

    document.addEventListener('input', function(e) {
      if (e.target && e.target.classList && e.target.classList.contains(inputClass)) {
        var el = document.getElementById(labelId);
        if (el) el.textContent = formatRem(e.target.value);
      }
    });
  }

  bindSpacingValue('hayden_spacing_value_small', 'hayden-spacing-small-value', 'hayden-spacing-small-range');
  bindSpacingValue('hayden_spacing_value_medium', 'hayden-spacing-medium-value', 'hayden-spacing-medium-range');
  bindSpacingValue('hayden_spacing_value_large', 'hayden-spacing-large-value', 'hayden-spacing-large-range');

  bindSpacingValue('hayden_block_padding_value_small', 'hayden-block-padding-small-value', 'hayden-block-padding-small-range');
  bindSpacingValue('hayden_block_padding_value_medium', 'hayden-block-padding-medium-value', 'hayden-block-padding-medium-range');
  bindSpacingValue('hayden_block_padding_value_large', 'hayden-block-padding-large-value', 'hayden-block-padding-large-range');

  bindSpacingValue('hayden_block_padding_x_value_small', 'hayden-block-padding-x-small-value', 'hayden-block-padding-x-small-range');
  bindSpacingValue('hayden_block_padding_x_value_medium', 'hayden-block-padding-x-medium-value', 'hayden-block-padding-x-medium-range');
  bindSpacingValue('hayden_block_padding_x_value_large', 'hayden-block-padding-x-large-value', 'hayden-block-padding-x-large-range');

  bindSpacingValue('hayden_radius_soft_scale', 'hayden-radius-soft-value', 'hayden-radius-soft-range');
  bindSpacingValue('hayden_radius_round_scale', 'hayden-radius-round-value', 'hayden-radius-round-range');

  document.addEventListener('click', function(e) {
    if (!e.target || !e.target.classList || !e.target.classList.contains('hayden-spacing-reset')) {
      return;
    }

    var defaults = {};
    try {
      defaults = JSON.parse(e.target.getAttribute('data-defaults') || '{}');
    } catch (err) {
      defaults = {};
    }

    if (defaults.small !== undefined) {
      api('hayden_spacing_value_small', function(setting) { setting.set(defaults.small); });
    }
    if (defaults.medium !== undefined) {
      api('hayden_spacing_value_medium', function(setting) { setting.set(defaults.medium); });
    }
    if (defaults.large !== undefined) {
      api('hayden_spacing_value_large', function(setting) { setting.set(defaults.large); });
    }
  });

  document.addEventListener('click', function(e) {
    if (!e.target || !e.target.classList || !e.target.classList.contains('hayden-block-padding-reset')) {
      return;
    }

    var defaults = {};
    try {
      defaults = JSON.parse(e.target.getAttribute('data-defaults') || '{}');
    } catch (err) {
      defaults = {};
    }

    if (defaults.small !== undefined) {
      api('hayden_block_padding_value_small', function(setting) { setting.set(defaults.small); });
    }
    if (defaults.medium !== undefined) {
      api('hayden_block_padding_value_medium', function(setting) { setting.set(defaults.medium); });
    }
    if (defaults.large !== undefined) {
      api('hayden_block_padding_value_large', function(setting) { setting.set(defaults.large); });
    }
  });

  document.addEventListener('click', function(e) {
    if (!e.target || !e.target.classList || !e.target.classList.contains('hayden-block-padding-x-reset')) {
      return;
    }

    var defaults = {};
    try {
      defaults = JSON.parse(e.target.getAttribute('data-defaults') || '{}');
    } catch (err) {
      defaults = {};
    }

    if (defaults.small !== undefined) {
      api('hayden_block_padding_x_value_small', function(setting) { setting.set(defaults.small); });
    }
    if (defaults.medium !== undefined) {
      api('hayden_block_padding_x_value_medium', function(setting) { setting.set(defaults.medium); });
    }
    if (defaults.large !== undefined) {
      api('hayden_block_padding_x_value_large', function(setting) { setting.set(defaults.large); });
    }
  });

  document.addEventListener('click', function(e) {
    if (!e.target || !e.target.classList || !e.target.classList.contains('hayden-radius-reset')) {
      return;
    }

    var defaults = {};
    try {
      defaults = JSON.parse(e.target.getAttribute('data-defaults') || '{}');
    } catch (err) {
      defaults = {};
    }

    if (defaults.soft !== undefined) {
      api('hayden_radius_soft_scale', function(setting) { setting.set(defaults.soft); });
    }
    if (defaults.round !== undefined) {
      api('hayden_radius_round_scale', function(setting) { setting.set(defaults.round); });
    }
  });

})(wp.customize);
JS;

    // Put JS on a core Customizer script handle that exists
    wp_add_inline_script('customize-controls', $js);
});
