<?php
/**
 * File Path: includes/admin/tabs/appearance/class-mbs-appearance-layout-render.php
 *
 * Appearance Tab — Layout and Live Preview Render Class
 *
 * Called statically from MBS_Tab_Appearance_Render dispatcher.
 * Extracted from class-mbs-tab-appearance-render.php (RF-009).
 *
 * @package MyBookShowroom
 * @since   1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

class MBS_Appearance_Layout_Render { // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedClassFound -- mbs_/MBS_ prefix is correct; scanner not configured with plugin prefix

	/**
	 * Render the Layout Customization section. Internalizes PRO check (RF-009).
	 *
	 * @return void
	 */
	/**
	 * Render the F-002 Layout Customization accordion section.
	 *
	 * FREE users: gap preset control only.
	 * PRO users: gap + column count + radius preset controls + mini live preview.
	 * The accordion is collapsed by default. JS (mbs-admin-customization.js)
	 * handles toggle and live preview via CSS custom property patching.
	 *
	 * @param bool $is_pro Whether the current install is PRO tier.
	 * @return void
	 */
	public static function render_layout_customization(): void {
		$is_pro = mbs_is_pro();
		$saved_gap     = get_option( 'mbs_setting_appearance_gap',     '' );
		$saved_columns = get_option( 'mbs_setting_appearance_columns', '' );
		$saved_radius  = get_option( 'mbs_setting_appearance_radius',  '' );

		$gap_options = array(
			''            => __( '— default —', 'my-book-showroom' ),
			'compact'     => __( 'Compact (0.5rem)',    'my-book-showroom' ),
			'comfortable' => __( 'Comfortable (1rem)',  'my-book-showroom' ),
			'spacious'    => __( 'Spacious (1.75rem)',  'my-book-showroom' ),
		);
		$radius_options = array(
			''        => __( '— default —',          'my-book-showroom' ),
			'square'  => __( 'Square (0px)',          'my-book-showroom' ),
			'slight'  => __( 'Slightly Rounded (4px)', 'my-book-showroom' ),
			'rounded' => __( 'Rounded (12px)',         'my-book-showroom' ),
		);
		?>
		<div class="mbs-appearance-section mbs-settings-card mbs-layout-customization-wrap">
			<button type="button"
			        class="mbs-accordion-toggle"
			        aria-expanded="false"
			        aria-controls="mbs-layout-customization-body">
				<span class="mbs-accordion-icon" aria-hidden="true">&#9658;</span>
				<?php esc_html_e( 'Layout Customization', 'my-book-showroom' ); ?>
			</button>

			<div id="mbs-layout-customization-body"
			     class="mbs-accordion-body"
			     hidden>

				<table class="form-table">

					<!-- Gap preset — FREE ─────────────────────────────────────────── -->
					<tr>
						<th scope="row">
							<label for="mbs_layout_gap">
								<?php esc_html_e( 'Card Gap', 'my-book-showroom' ); ?>
							</label>
						</th>
						<td>
							<select id="mbs_layout_gap"
							        name="mbs_setting_appearance_gap"
							        data-mbs-layout-control="gap">
								<?php foreach ( $gap_options as $val => $label ) : ?>
									<option value="<?php echo esc_attr( $val ); ?>"
										<?php selected( $saved_gap, $val ); ?>>
										<?php echo esc_html( $label ); ?>
									</option>
								<?php endforeach; ?>
							</select>
							<p class="description">
								<?php esc_html_e( 'Space between book cards in grid, list, and masonry layouts.', 'my-book-showroom' ); ?>
							</p>
						</td>
					</tr>

					<?php if ( $is_pro ) : ?>

					<!-- Column count — PRO ────────────────────────────────────────── -->
					<tr>
						<th scope="row">
							<label for="mbs_layout_columns">
								<?php esc_html_e( 'Columns (desktop)', 'my-book-showroom' ); ?>
							</label>
						</th>
						<td>
							<select id="mbs_layout_columns"
							        name="mbs_setting_appearance_columns"
							        data-mbs-layout-control="columns">
								<option value=""<?php selected( $saved_columns, '' ); ?>><?php esc_html_e( '— default (3) —', 'my-book-showroom' ); ?></option>
								<?php for ( $c = 1; $c <= 6; $c++ ) : ?>
									<option value="<?php echo esc_attr( $c ); ?>"
										<?php selected( (string) $saved_columns, (string) $c ); ?>>
										<?php echo esc_html( $c ); ?>
									</option>
								<?php endfor; ?>
							</select>
							<p class="description">
								<?php esc_html_e( 'Number of columns at desktop widths (>640px). Collapses to 1 on mobile automatically.', 'my-book-showroom' ); ?>
							</p>
						</td>
					</tr>

					<!-- Card radius — PRO ─────────────────────────────────────────── -->
					<tr>
						<th scope="row">
							<label for="mbs_layout_radius">
								<?php esc_html_e( 'Card Corners', 'my-book-showroom' ); ?>
							</label>
						</th>
						<td>
							<select id="mbs_layout_radius"
							        name="mbs_setting_appearance_radius"
							        data-mbs-layout-control="radius">
								<?php foreach ( $radius_options as $val => $label ) : ?>
									<option value="<?php echo esc_attr( $val ); ?>"
										<?php selected( $saved_radius, $val ); ?>>
										<?php echo esc_html( $label ); ?>
									</option>
								<?php endforeach; ?>
							</select>
							<p class="description">
								<?php esc_html_e( 'Border radius applied to all book cards.', 'my-book-showroom' ); ?>
							</p>
						</td>
					</tr>

					<?php else : ?>
					<!-- MBS: columns and radius controls require PRO license -->
					<tr>
						<td colspan="2">
							<p class="description">
								<strong><?php esc_html_e( 'PRO:', 'my-book-showroom' ); ?></strong>
								<?php esc_html_e( 'Unlock column count and card corner controls with a PRO license.', 'my-book-showroom' ); ?>
							</p>
						</td>
					</tr>
					<?php endif; ?>

				</table>

				<?php if ( $is_pro ) : ?>
				<!-- Mini preview widget — updates live as controls change ──────── -->
				<div id="mbs-layout-preview" class="mbs-layout-preview-wrap" aria-hidden="true">
					<p class="mbs-layout-preview-label">
						<?php esc_html_e( 'Preview', 'my-book-showroom' ); ?>
					</p>
					<div class="mbs-layout-preview-grid">
						<?php for ( $i = 0; $i < 3; $i++ ) : ?>
							<div class="mbs-layout-preview-card"></div>
						<?php endfor; ?>
					</div>
				</div>
				<?php endif; ?>

			</div><!-- .mbs-accordion-body -->
		</div><!-- .mbs-layout-customization-wrap -->
		<?php
	}

	/**
	 * Render the Live Preview column.
	 *
	 * @return void
	 */
	/**
	 * Render the Live Preview column — sticky realistic book-card mock exposing
	 * all color tokens via concrete UI elements.
	 *
	 * @return void
	 */
	public static function render_live_preview(): void {
		?>
		<div class="mbs-appearance-preview-col">
			<div id="mbs-live-preview" class="mbs-appearance-preview mbs-wrapper">
				<p class="mbs-appearance-preview-label">
					<?php esc_html_e( 'Live Preview', 'my-book-showroom' ); ?>
				</p>

				<div class="mbs-preview-book-picker">
				<label for="mbs-preview-book-select"><?php esc_html_e( 'Preview with:', 'my-book-showroom' ); ?></label>
				<select id="mbs-preview-book-select">
					<option value=""><?php esc_html_e( '— Placeholder —', 'my-book-showroom' ); ?></option>
				</select>
			</div>

			<article class="mbs-preview-card">
					<div class="mbs-preview-cover-wrap">
						<img class="mbs-preview-cover"
						     src="<?php echo esc_url( MBS_ASSETS_URL . 'dummy/cover-fallback.jpg' ); ?>"
						     alt="">
					</div>
					<div class="mbs-preview-body">
						<h4 class="mbs-preview-title"><?php esc_html_e( 'Sample Book Title', 'my-book-showroom' ); ?></h4>
						<p class="mbs-preview-author"><?php esc_html_e( 'by Author Name', 'my-book-showroom' ); ?></p>
						<div class="mbs-preview-stars" aria-label="<?php esc_attr_e( '4 out of 5 stars', 'my-book-showroom' ); ?>">★★★★☆</div>
						<p class="mbs-preview-excerpt"><?php esc_html_e( 'Excerpt text showing the selected colors applied to this card mock.', 'my-book-showroom' ); ?></p>
						<div class="mbs-preview-actions">
							<a class="mbs-preview-link" href="#" onclick="return false;"><?php esc_html_e( 'Learn more', 'my-book-showroom' ); ?></a>
							<button type="button" class="mbs-preview-button" disabled><?php esc_html_e( 'Buy Now', 'my-book-showroom' ); ?></button>
						</div>
						<span class="mbs-preview-watermark"><?php esc_html_e( 'Preview', 'my-book-showroom' ); ?></span>
					</div>
				</article>

				<div class="mbs-preview-extras">

					<!-- Structural palette chips (FREE+ sees these as static swatches) -->
					<div class="mbs-preview-palette">
						<span class="mbs-chip mbs-chip-navy"><?php esc_html_e( 'Navy', 'my-book-showroom' ); ?></span>
						<span class="mbs-chip mbs-chip-lavender"><?php esc_html_e( 'Lavender', 'my-book-showroom' ); ?></span>
						<span class="mbs-chip mbs-chip-teal-pale"><?php esc_html_e( 'Teal Pale', 'my-book-showroom' ); ?></span>
						<span class="mbs-chip mbs-chip-lavender-pale"><?php esc_html_e( 'Lavender Pale', 'my-book-showroom' ); ?></span>
						<span class="mbs-chip mbs-chip-beige"><?php esc_html_e( 'Beige', 'my-book-showroom' ); ?></span>
						<span class="mbs-chip mbs-chip-mist"><?php esc_html_e( 'Mist', 'my-book-showroom' ); ?></span>
					</div>

					<!-- Theme Pill (FREE: static default colors; PRO: live-wired to lavender tokens) -->
					<div class="mbs-preview-section">
						<p class="mbs-preview-section-label"><?php esc_html_e( 'Theme Pill', 'my-book-showroom' ); ?></p>
						<span class="mbs-preview-theme-pill"><?php esc_html_e( 'Fantasy', 'my-book-showroom' ); ?></span>
					</div>

					<?php if ( mbs_is_pro() ) : ?>

					<!-- PRO-only preview elements -->
					<!-- Coming Soon Badge (permanent fixture for PRO preview) -->
					<div class="mbs-preview-section">
						<p class="mbs-preview-section-label"><?php esc_html_e( 'Coming Soon Badge', 'my-book-showroom' ); ?></p>
						<span class="mbs-preview-coming-soon"><?php esc_html_e( 'Coming Soon!', 'my-book-showroom' ); ?></span>
					</div>

					<!-- PRO Tier Pill -->
					<div class="mbs-preview-section">
						<p class="mbs-preview-section-label"><?php esc_html_e( 'PRO Tier Pill', 'my-book-showroom' ); ?></p>
						<span class="mbs-preview-badge mbs-preview-badge-pro"><?php esc_html_e( 'PRO', 'my-book-showroom' ); ?></span>
					</div>

					<!-- Reader Signup Widget background swatch -->
					<div class="mbs-preview-section">
						<p class="mbs-preview-section-label"><?php esc_html_e( 'Reader Signup Widget', 'my-book-showroom' ); ?></p>
						<div class="mbs-preview-signup-widget"><?php esc_html_e( 'Sign up for new releases', 'my-book-showroom' ); ?></div>
					</div>

					<!-- Author Directory filter button mockup -->
					<div class="mbs-preview-section">
						<p class="mbs-preview-section-label"><?php esc_html_e( 'Author Directory Filter', 'my-book-showroom' ); ?></p>
						<button type="button" class="mbs-preview-author-filter-btn">A&ndash;Z</button>
					</div>

					<?php endif; ?>

				</div>
			</div>
		</div>
		<?php
	}

}
