/**
 * @file assets/js/adminjs/mbs-admin-layout-desc.js
 * @description My Book Showroom -- Layout Description Panel Module
 *
 * Shared module that wires a layout <select> to a description panel div.
 * Used wherever a layout selector appears in the MBS admin:
 *
 *   - Settings -> Formatting tab (global default layout)
 *   - Taxonomy term edit screens (per-term layout override -- PRO, SHC-6)
 *
 * Public API (window.MBS_LayoutDesc):
 *   MBS_LayoutDesc.init( selectSelector, panelSelector )
 *     Attaches a change listener to <select> and pre-fills the panel
 *     on call with the currently selected value.
 *
 * Adding a new context is one init() call -- no edits to this file needed.
 *
 * @package    My_Book_Showroom
 * @subpackage Assets/JS/AdminJS
 * @since      1.0.0
 */

( function ( $ ) {
	'use strict';
	var __ = wp.i18n.__;
	var escHtml = MBS_AdminUtils.escHtml;

	// -- Layout descriptions -- single source of truth -----------------------

	var descriptions = {
		hero: {
			title:   __( 'Hero', 'my-book-showroom' ),
			body:    __( 'Spotlights a single book with a large cover image and excerpt. Only the first book in the query is shown — when reading order is active, this is Book 1.', 'my-book-showroom' ),
			bestFor: __( 'Single-title authors, launch pages, and “book of the moment” homepage sections.', 'my-book-showroom' )
		},
		grid: {
			title:   __( 'Grid', 'my-book-showroom' ),
			body:    __( 'Classic cover grid showing all books with titles in a clean, scannable layout. The default for most contexts.', 'my-book-showroom' ),
			bestFor: __( 'Series pages, genre pages, author archives — any context where visitors need to browse multiple books quickly.', 'my-book-showroom' )
		},
		card: {
			title:   __( 'Card', 'my-book-showroom' ),
			body:    __( 'Cover + title + short excerpt per book, displayed as cards. Gives each title a little more context than the grid.', 'my-book-showroom' ),
			bestFor: __( 'Genre pages and author pages where a brief description helps visitors decide what to read next.', 'my-book-showroom' )
		},
		masonry: {
			title:   __( 'Masonry', 'my-book-showroom' ),
			body:    __( 'A flowing grid where card heights vary with content. Effective when cover images have different aspect ratios.', 'my-book-showroom' ),
			bestFor: __( 'Author pages with mixed cover formats, editorial or magazine-style showcases.', 'my-book-showroom' )
		},
		list: {
			title:   __( 'List', 'my-book-showroom' ),
			body:    __( 'Books in a vertical list with cover, title, author name, and excerpt. The most information-dense layout.', 'my-book-showroom' ),
			bestFor: __( 'Reading order pages where a sequential list reinforces the numbered order.', 'my-book-showroom' )
		},
		slider: {
			title:   __( 'Slider — PRO', 'my-book-showroom' ),
			body:    __( 'Horizontal scroll carousel with previous/next arrows. Uses CSS scroll-snap — no external library required.', 'my-book-showroom' ),
			bestFor: __( 'Embedded shortcodes in tight spaces, sidebars, and “You might also like” sections on book pages.', 'my-book-showroom' )
		},
		flip: {
			title:   __( 'Flip — PRO', 'my-book-showroom' ),
			body:    __( 'Each book cover flips on hover to reveal the title, author, excerpt, and a buy button.', 'my-book-showroom' ),
			bestFor: __( 'Showcase pages and author websites where visitors are expected to explore interactively.', 'my-book-showroom' )
		},
		filter: {
			title:   __( 'Filter — PRO', 'my-book-showroom' ),
			body:    __( 'Live client-side filter bar lets visitors narrow books by genre, series, or other criteria — no page reload. Note: filter axes may be self-referential on single-genre pages.', 'my-book-showroom' ),
			bestFor: __( 'Author pages with large back catalogs spanning multiple series or genres.', 'my-book-showroom' )
		},
		popup: {
			title:   __( 'Popup — PRO', 'my-book-showroom' ),
			body:    __( 'Books appear as a thumbnail grid; clicking any cover opens a WCAG-accessible modal with full details. Keeps the page compact.', 'my-book-showroom' ),
			bestFor: __( 'Large catalogs where visitors want rich detail on demand without navigating away.', 'my-book-showroom' )
		}
	};

	// -- Private helpers -----------------------------------------------------

	/**
	 * Populate $panel with the description for slug, or hide it when unknown.
	 *
	 * @param {jQuery} $panel - The description panel element.
	 * @param {string} slug   - Layout slug, e.g. 'grid'.
	 */
	function renderPanel( $panel, slug ) {
		var d = descriptions[ slug ];
		if ( ! d ) {
			$panel.removeClass( 'is-visible' ).empty();
			return;
		}
		$panel
			.html(
				'<p class="mbs-layout-description-title">'   + escHtml( d.title )   + '</p>' +
				'<p class="mbs-layout-description-body">'    + escHtml( d.body )    + '</p>' +
				'<p class="mbs-layout-description-bestfor"><strong>' + escHtml( __( 'Best for:', 'my-book-showroom' ) ) + '</strong> ' + escHtml( d.bestFor ) + '</p>'
			)
			.addClass( 'is-visible' );
	}

	// -- Public API ----------------------------------------------------------

	/**
	 * Wire a layout <select> element to a description panel.
	 *
	 * Attaches a namespaced 'change.mbs-layout-desc' listener so multiple
	 * independent calls do not stack duplicate listeners. Pre-fills the panel
	 * immediately with the currently selected value.
	 *
	 * @param {string} selectSelector - jQuery selector for the <select>.
	 * @param {string} panelSelector  - jQuery selector for the panel div.
	 */
	function init( selectSelector, panelSelector ) {
		var $select = $( selectSelector );
		var $panel  = $( panelSelector );

		if ( ! $select.length || ! $panel.length ) {
			return;
		}

		// Namespaced event prevents duplicate listeners if init() is called twice.
		$select.off( 'change.mbs-layout-desc' ).on( 'change.mbs-layout-desc', function () {
			renderPanel( $panel, $( this ).val() );
		} );

		// Pre-fill on page load with the currently selected value.
		renderPanel( $panel, $select.val() );
	}

	window.MBS_LayoutDesc = { init: init };

} )( jQuery );
