/**
 * @file assets/js/mbs-blocks.js
 * Registers the mbs/catalog Gutenberg block with ServerSideRender and PRO layout options; no build step required.
 * @package MyBookShowroom
 * @since   1.0.0
 */

/* global wp */

( function ( wp ) {
	'use strict';

	var registerBlockType  = wp.blocks.registerBlockType;
	var InspectorControls  = wp.blockEditor.InspectorControls;
	var ServerSideRender   = wp.serverSideRender.default || wp.serverSideRender;
	var PanelBody          = wp.components.PanelBody;
	var RangeControl       = wp.components.RangeControl;
	var SelectControl      = wp.components.SelectControl;
	var TextControl        = wp.components.TextControl;
	var el                 = wp.element.createElement;
	var Fragment           = wp.element.Fragment;
	var useBlockProps      = wp.blockEditor.useBlockProps;

	// =========================================================================
	// Constants
	// =========================================================================

	var ORDERBY_OPTIONS = [
		{ label: 'Date Added',   value: 'date' },
		{ label: 'Title (A–Z)',  value: 'title' },
		{ label: 'Menu Order',   value: 'menu_order' },
		{ label: 'Random',       value: 'rand' },
	];

	// FREE layouts are always available. PRO slugs are passed through to
	// PHP; the render callback falls back to 'grid' when mbs_is_pro() is false.
	var LAYOUT_OPTIONS = [
		{ label: 'Grid',              value: 'grid' },
		{ label: 'List',              value: 'list' },
		{ label: 'Masonry',           value: 'masonry' },
		{ label: 'Hero',              value: 'hero' },
		{ label: 'Spotlight (PRO)',   value: 'spotlight' },
		{ label: 'Carousel (PRO)',    value: 'carousel' },
	];

	// =========================================================================
	// MBS Catalog Block
	// =========================================================================

	registerBlockType( 'mbs/catalog', {
		apiVersion: 3,
		title:      'Book Catalog',
		icon:       'book-alt',
		category:   'mbs',
		description: 'Display your book catalog. Compatible with FSE / block themes.',

		attributes: {
			limit:   { type: 'integer', default: 6 },
			orderby: { type: 'string',  default: 'date' },
			columns: { type: 'integer', default: 3 },
			layout:  { type: 'string',  default: 'grid' },
			author:  { type: 'string',  default: '' },
			series:  { type: 'string',  default: '' },
			genre:   { type: 'string',  default: '' },
			tag:     { type: 'string',  default: '' },
		},

		/**
		 * Edit — block editor UI.
		 *
		 * Inspector panels:
		 *   · Display Settings  — layout, columns, limit, orderby
		 *   · Filter by Taxonomy — author, series, genre, tag slugs
		 *
		 * The canvas renders a live ServerSideRender preview via PHP.
		 */
		edit: function ( props ) {
			var attributes   = props.attributes;
			var setAttributes = props.setAttributes;

			var inspectorControls = el(
				InspectorControls,
				{},

				// ----- Display Settings panel --------------------------------
				el(
					PanelBody,
					{ title: 'Display Settings', initialOpen: true },

					el( SelectControl, {
						label:    'Layout',
						value:    attributes.layout,
						options:  LAYOUT_OPTIONS,
						onChange: function ( value ) {
							setAttributes( { layout: value } );
						},
					} ),

					el( RangeControl, {
						label:    'Columns',
						value:    attributes.columns,
						min:      1,
						max:      6,
						onChange: function ( value ) {
							setAttributes( { columns: value } );
						},
					} ),

					el( RangeControl, {
						label:    'Number of Books',
						value:    attributes.limit,
						min:      1,
						max:      48,
						onChange: function ( value ) {
							setAttributes( { limit: value } );
						},
					} ),

					el( SelectControl, {
						label:    'Order By',
						value:    attributes.orderby,
						options:  ORDERBY_OPTIONS,
						onChange: function ( value ) {
							setAttributes( { orderby: value } );
						},
					} )
				),

				// ----- Filter by Taxonomy panel ------------------------------
				el(
					PanelBody,
					{ title: 'Filter by Taxonomy', initialOpen: false },

					el( TextControl, {
						label:    'Author slug',
						help:     'Show books by this author only (use the term slug).',
						value:    attributes.author,
						onChange: function ( value ) {
							setAttributes( { author: value } );
						},
					} ),

					el( TextControl, {
						label:    'Series slug',
						help:     'Show books in this series only.',
						value:    attributes.series,
						onChange: function ( value ) {
							setAttributes( { series: value } );
						},
					} ),

					el( TextControl, {
						label:    'Genre slug',
						help:     'Show books in this genre only.',
						value:    attributes.genre,
						onChange: function ( value ) {
							setAttributes( { genre: value } );
						},
					} ),

					el( TextControl, {
						label:    'Tag slug',
						help:     'Show books with this tag only.',
						value:    attributes.tag,
						onChange: function ( value ) {
							setAttributes( { tag: value } );
						},
					} )
				)
			);

			// Live PHP preview via ServerSideRender.
			// useBlockProps() attaches Gutenberg's selection outline, toolbar,
			// and block controls (including Delete) to the wrapper div.
			var preview = el(
				'div',
				useBlockProps( { className: 'mbs-block mbs-block-catalog' } ),
				el( ServerSideRender, {
					block:      'mbs/catalog',
					attributes: attributes,
				} )
			);

			return el( Fragment, {}, inspectorControls, preview );
		},

		/**
		 * Save — always null for dynamic blocks.
		 * WordPress calls the PHP render_callback on each page load.
		 */
		save: function () {
			return null;
		},
	} );

} )( window.wp );
