/**
 * File Path: assets/js/adminjs/mbs-admin-customization.js
 *
 * F-002 — Layout Customization: accordion toggle + live preview.
 *
 * Responsibilities:
 *   - Toggle the Layout Customization accordion open/closed.
 *   - On control change, patch CSS custom properties on the mini preview widget
 *     so the user sees gap / columns / radius update without saving.
 *   - No AJAX: the controls are inside the standard options.php form; saving
 *     is handled by WordPress core (submit button).
 *
 * Localised data: window.MBS_Customization
 *   isPro   {boolean}
 *   presets {object}  — gap and radius slug → CSS value maps
 *
 * @package MyBookShowroom
 * @since   1.0.0
 */

( function ( $ ) {
	'use strict';

	var cfg    = window.MBS_Customization || {};
	var isPro  = !! cfg.isPro;
	var presets = cfg.presets || { gap: {}, radius: {} };

	// ── CSS custom property names used by the mini preview widget ────────────────

	var PROP_GAP    = '--mbs-layout-gap';
	var PROP_COLS   = '--mbs-columns';
	var PROP_RADIUS = '--mbs-card-radius';

	// ── Defaults (match mbs-front.css var() fallbacks) ───────────────────────────

	var DEFAULT_GAP    = '1.5rem';
	var DEFAULT_COLS   = '3';
	var DEFAULT_RADIUS = '8px';

	// ── Accordion toggle ──────────────────────────────────────────────────────────

	function initAccordion() {
		$( document ).on( 'click', '.mbs-accordion-toggle', function () {
			var $btn  = $( this );
			var $body = $( '#' + $btn.attr( 'aria-controls' ) );
			var open  = $btn.attr( 'aria-expanded' ) === 'true';

			$btn.attr( 'aria-expanded', open ? 'false' : 'true' );
			$btn.find( '.mbs-accordion-icon' ).html( open ? '&#9658;' : '&#9660;' );

			if ( open ) {
				$body.attr( 'hidden', '' );
			} else {
				$body.removeAttr( 'hidden' );
			}
		} );
	}

	// ── Live preview ─────────────────────────────────────────────────────────────

	/**
	 * Apply a CSS custom property to the mini preview widget root element.
	 * The preview grid uses the same var() references as mbs-front.css, so
	 * patching the property on the widget element is sufficient.
	 *
	 * @param {string} prop  CSS custom property name (e.g. '--mbs-layout-gap')
	 * @param {string} value CSS value
	 */
	function applyPreviewProp( prop, value ) {
		var el = document.getElementById( 'mbs-layout-preview' );
		if ( el ) {
			el.style.setProperty( prop, value );
		}
	}

	function onGapChange() {
		var slug  = $( this ).val();
		var value = presets.gap[ slug ] || DEFAULT_GAP;
		applyPreviewProp( PROP_GAP, value );
	}

	function onColumnsChange() {
		var val = parseInt( $( this ).val(), 10 );
		var value = ( val >= 1 && val <= 6 ) ? String( val ) : DEFAULT_COLS;
		applyPreviewProp( PROP_COLS, value );
	}

	function onRadiusChange() {
		var slug  = $( this ).val();
		var value = presets.radius[ slug ] || DEFAULT_RADIUS;
		applyPreviewProp( PROP_RADIUS, value );
	}

	function initLivePreview() {
		if ( ! isPro ) {
			return; // Mini preview widget only rendered for PRO.
		}

		$( document ).on( 'change', '[data-mbs-layout-control="gap"]',     onGapChange );
		$( document ).on( 'change', '[data-mbs-layout-control="columns"]', onColumnsChange );
		$( document ).on( 'change', '[data-mbs-layout-control="radius"]',  onRadiusChange );

		// Seed preview with currently saved values on page load.
		$( '[data-mbs-layout-control="gap"]' ).trigger( 'change' );
		$( '[data-mbs-layout-control="columns"]' ).trigger( 'change' );
		$( '[data-mbs-layout-control="radius"]' ).trigger( 'change' );
	}

	// ── Boot ──────────────────────────────────────────────────────────────────────

	$( function () {
		initAccordion();
		initLivePreview();
	} );

} ( jQuery ) );
