<?php
/**
 * Spend points actions drawer view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Parts
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Parts;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Helpers\IconHelper;
use Awesomemotive\Rewardswp\Interfaces\IntegrationInterface;
use Awesomemotive\Rewardswp\Interfaces\ScriptDataProviderInterface;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Settings\Options\Points\SpendActionsOption;
use function Awesomemotive\Rewardswp\Helpers\get_option_object;
use function Awesomemotive\Rewardswp\Helpers\get_points_currency_singular;
use function Awesomemotive\Rewardswp\Helpers\get_points_currency_plural;
use function Awesomemotive\Rewardswp\Helpers\get_view_component;
use function Awesomemotive\Rewardswp\Helpers\kses;
use function Awesomemotive\Rewardswp\Helpers\svg_kses;
use function Awesomemotive\Rewardswp\Helpers\get_site_currency_symbol;
use function Awesomemotive\Rewardswp\Helpers\get_lite_redemption_limit;
use function Awesomemotive\Rewardswp\Helpers\get_minimum_required_plan_for_feature;
use function Awesomemotive\Rewardswp\Helpers\get_upgrade_url;
use function Awesomemotive\Rewardswp\Helpers\get_rewardswp_plan_tier;
use function Awesomemotive\Rewardswp\Helpers\is_rewardswp_pro_plan;
use function Awesomemotive\Rewardswp\Helpers\can_access_rewardswp_feature;

/**
 * Class SpendPointsActionsDrawerView
 *
 * @since 1.1.0
 */
class SpendPointsActionsDrawerView extends AbstractView implements ViewInterface, ScriptDataProviderInterface {
	/**
	 * Icon helper instance.
	 *
	 * @since 1.1.0
	 *
	 * @var IconHelper
	 */
	private IconHelper $icon_helper;

	/**
	 * Integration instance.
	 *
	 * @since 1.1.0
	 *
	 * @var IntegrationInterface
	 */
	protected IntegrationInterface $integration;

	/**
	 * Constructor.
	 *
	 * @since 1.1.0
	 *
	 * @param IconHelper           $icon_helper Icon helper instance.
	 * @param IntegrationInterface $integration
	 */
	public function __construct( IconHelper $icon_helper, IntegrationInterface $integration ) {
		$this->icon_helper = $icon_helper;
		$this->integration = $integration;
	}

	/**
	 * Filter action definitions based on integration compatibility.
	 *
	 * @since 1.1.0
	 *
	 * @param array $action_definitions The action definitions to filter.
	 *
	 * @return array The filtered action definitions.
	 */
	private function get_filtered_action_definitions( array $action_definitions ): array {
		$source = $this->integration->get_source();

		$filtered_definitions = [];
		foreach ( $action_definitions as $action_type => $definition ) {
			$available_for = $definition['available_for'] ?? [];

			// Skip if not available for current integration.
			if ( ! empty( $available_for )
				&& ! in_array( $source, $available_for, true )
				&& 'unknown' !== $source
			) {
				continue;
			}

			$filtered_definitions[ $action_type ] = $definition;
		}

		return $filtered_definitions;
	}

	/**
	 * Build the data structure supplied to the frontend drawer component.
	 *
	 * @since 1.1.0
	 *
	 * @return array
	 */
	public function get_script_data(): array {
		$spend_actions_option = get_option_object( SpendActionsOption::class );
		$currency_singular    = get_points_currency_singular();
		$currency_plural      = get_points_currency_plural();
		$action_definitions   = $spend_actions_option->get_action_definitions();
		$action_definitions   = $this->get_filtered_action_definitions( $action_definitions );
		$spend_actions        = $spend_actions_option->get_value() ?: [];

		// Limit to 4 spend actions for Lite users.
		if ( get_rewardswp_plan_tier() === 'lite' && is_array( $spend_actions ) && count( $spend_actions ) > 4 ) {
			$spend_actions = array_values( array_slice( $spend_actions, 0, 4 ) );
		}

		// Add generated labels to each action.
		foreach ( $spend_actions as $id => &$action ) {
			$action['reward_label']      = $spend_actions_option->get_reward_label( $action );
			$action['points_cost_label'] = $spend_actions_option->get_points_cost_label( $action );
		}

		// Dynamically build arrays from action definitions.
		$action_titles       = [];
		$action_descriptions = [];
		$icon_map            = [];

		foreach ( $action_definitions as $action_type => $definition ) {
			$action_titles[ $action_type ]       = $definition['title'];
			$action_descriptions[ $action_type ] = $definition['description'];
			$icon_map[ $action_type ]            = wp_kses( $this->icon_helper->get_icon( $definition['icon'], 'w-8 h-8' ), svg_kses() );
		}

		$result = [
			'spendActions'       => $spend_actions,
			'currencySingular'   => $currency_singular,
			'currencyPlural'     => $currency_plural,
			'currencySymbol'     => get_site_currency_symbol(),
			'addTitle'           => __( 'Add ways to redeem', 'rewardswp' ),
			'addSubtitle'        => __( 'Choose a reward type for members to redeem', 'rewardswp' ),
			'createButtonText'   => __( 'Create', 'rewardswp' ),
			'configSubtitle'     => '',
			'editSubtitle'       => '',
			'actionTitles'       => $action_titles,
			'actionDescriptions' => $action_descriptions,
			'iconMap'            => $icon_map,
			'labelTemplates'     => [
				/* translators: %s: Fixed discount amount with currency symbol. */
				'fixed_coupon'      => __( '%s off coupon', 'rewardswp' ),
				/* translators: %s: Discount percentage number. */
				'percentage_coupon' => __( '%s% off coupon', 'rewardswp' ),
				'free_shipping'     => __( 'Free shipping', 'rewardswp' ),
				'free_product'      => __( 'Free product', 'rewardswp' ),
				/* translators: 1: Points cost number; 2: Points currency label. */
				'points_cost'       => __( '%1$s %2$s', 'rewardswp' ),
			],
			'summaryTemplates'   => [
				/* translators: 1: Points number; 2: Points currency name; 3: Discount amount with currency symbol. */
				'fixed_discount'      => __( 'Members can redeem %1$s %2$s for a %3$s off coupon', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name; 3: Discount percentage. */
				'percentage_discount' => __( 'Members can redeem %1$s %2$s for %3$s%% off', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'free_shipping'       => __( 'Members can redeem %1$s %2$s for free shipping', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name; 3: Product name. */
				'free_product'        => __( 'Members can redeem %1$s %2$s for a free %3$s', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'free_product_generic' => __( 'Members can redeem %1$s %2$s for a free product', 'rewardswp' ),
			],
		];

		return $result;
	}

	/**
	 * Render the template.
	 *
	 * @since 1.1.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		echo wp_kses( $this->get_contents( $args ), kses() );
	}

	/**
	 * Get the view contents.
	 *
	 * @since 1.1.0
	 *
	 * @return string The view contents.
	 */
	public function get_contents( array $args = [] ): string {

		ob_start();

		$spend_actions_option = get_option_object( SpendActionsOption::class );
		$currency_plural      = get_points_currency_plural();
		$currency_prefix      = sanitize_title( $currency_plural ?: 'points' ) . '-';

		?>

		<!-- Hidden Icon Store -->
		<div class="no-display">
			<?php foreach ( $spend_actions_option->get_action_definitions() as $action ) : ?>
				<span x-ref="icon-<?php echo esc_html( $action['icon'] ); ?>"><?php echo wp_kses( $this->icon_helper->get_icon( $action['icon'], 'w-8 h-8' ), svg_kses() ); ?></span>
			<?php endforeach; ?>
		</div>

		<div class="py-5" x-data="spendDrawerSection" @remove-spend-action.window="removeSpendAction($event.detail.actionId)">
			<div class="gap-8 md:flex md:items-start">
				<!-- Left Column - Ways to Redeem Info -->
				<div class="md:w-1/3 flex-none">
			<h3 class="text-sm font-semibold text-gray-900">
				<?php esc_html_e( 'Ways to Redeem', 'rewardswp' ); ?>
			</h3>
			<p class="mt-2 text-sm text-gray-500">
				<?php esc_html_e( 'Create rewards your members can redeem with the points they have earned.', 'rewardswp' ); ?>
			</p>
			<div class="mt-4">
			<button
				type="button"
				class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
				x-on:click="$store.spendActions.rewards.length >= <?php echo esc_attr( get_lite_redemption_limit() ); ?> && !$store.config.hasProFeatures ? $dispatch('show-upgrade-modal', 'redeem_options_limit') : openSpendDrawer()"
			>
				<?php esc_html_e( 'Add ways to redeem', 'rewardswp' ); ?>
			</button>
			</div>
			</div>

				<!-- Right Column - Current Rewards -->
				<div class="md:w-2/3">
					<div id="spend-rewards-list" class="space-y-3" x-ref="rewardsList" x-sort.ghost="handleSort($item, $position)" x-sort:config="{ handle: '.drag-handle' }">
						<!-- Display all redeem rewards -->
						<template x-for="reward in $store.spendActions.rewards" x-bind:key="$store.spendActions.sortIteration + '_' + reward.id">
							<div class="reward-card bg-white border border-gray-200 rounded-lg p-4 flex items-center cursor-pointer hover:bg-gray-50 transition-colors"
								x-sort:item="reward.id"
								x-bind:data-id="reward.id"
								x-bind:class="{ 'opacity-50': !reward.enabled }"
								x-on:click="editSpendAction(reward)">
								<!-- Drag Handle -->
								<div class="drag-handle flex-shrink-0 mr-3 cursor-grab active:cursor-grabbing text-gray-400 hover:text-gray-600" x-sort:handle x-on:click.stop>
									<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
										<path d="M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"></path>
									</svg>
								</div>
								<div class="flex-shrink-0 mr-4">
									<span class="w-10 h-10 flex items-center justify-center" x-html="getSpendIcon(reward.type)"></span>
								</div>
							<div class="flex-1 min-w-0">
								<div class="flex items-center gap-2">
									<h4 class="text-sm font-medium text-gray-900" x-text="reward.reward_label"></h4>
									<!-- Out of Stock badge for free_product -->
									<?php
									echo wp_kses(
										get_view_component(
											'badge',
											[
												'text'   => esc_html__( 'Out of Stock', 'rewardswp' ),
												'style'  => 'warning',
												'x-show' => "reward.type === 'free_product' && reward.products_included?.[0]?.in_stock === false",
											]
										),
										kses()
									);
									?>
								</div>
								<p class="mt-1 text-sm text-gray-500" x-text="reward.points_cost_label"></p>
							</div>
								<div class="ml-4 flex items-center space-x-4 self-center">
									<?php
									// Edit Button Component
									echo wp_kses(
										get_view_component(
											'button',
											[
												'text'  => esc_html__( 'Edit', 'rewardswp' ),
												'type'  => 'button',
												'style' => 'secondary',
												'size'  => 'sm',
												'click' => '$event.stopPropagation(); editSpendAction(reward)',

											]
										),
										kses()
									);
									?>

									<!-- Toggle Component Wrapper -->
									<div x-data="{ isEnabled: reward.enabled }" x-effect="isEnabled = reward.enabled">
										<?php
										// Toggle Component
										// Use local isEnabled state synced with reward.enabled via x-effect
										// Disable toggle when free_product is out of stock
										echo wp_kses(
											get_view_component(
												'toggle',
												[
													'section'         => 'points',
													'name'            => '',
													'x-bind:id'       => '`rewardswp_settings_spend_toggle_${reward.id}`',
													'x_model'         => 'isEnabled',
													'no_input'        => true,
													'button_align'    => 'right',
													'x-on:click'      => '$event.stopPropagation(); toggleSpendStatus(reward.id)',
													'x-bind:disabled' => "reward.type === 'free_product' && reward.products_included?.[0]?.in_stock === false",
												]
											),
											kses()
										);
										?>
									</div>
								</div>
							</div>
						</template>

					<!-- Upsell card (shown when limit reached in Lite) -->
					<template x-if="$store.spendActions.rewards.length >= <?php echo esc_attr( get_lite_redemption_limit() ); ?> && !$store.config.hasProFeatures">
						<a href="<?php echo esc_url( add_query_arg( 'feature', 'redeem_options_limit', get_upgrade_url( 'unlock_unlimited_redeem_options', 'card', get_minimum_required_plan_for_feature( 'redeem_options_limit' ), 'redeem_options_limit' ) ) ); ?>"
								target="_blank"
								rel="noopener noreferrer"
								class="block bg-white border border-gray-200 rounded-lg p-4 flex items-start hover:bg-gray-50 transition-colors">
								<!-- Sparkles Icon -->
								<div class="flex-shrink-0 mr-4">
									<svg class="w-8 h-8 text-gray-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456ZM16.894 20.567 16.5 21.75l-.394-1.183a2.25 2.25 0 0 0-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 0 0 1.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 0 0 1.423 1.423l1.183.394-1.183.394a2.25 2.25 0 0 0-1.423 1.423Z" />
									</svg>
								</div>

								<!-- Content -->
								<div class="flex-1 min-w-0">
									<div class="flex justify-between items-center">
										<div>
											<div class="flex items-center gap-2 mb-1">
												<h4 class="text-sm font-medium text-gray-700">
													<?php esc_html_e( 'Unlock Unlimited Ways to Redeem', 'rewardswp' ); ?>
												</h4>
												<?php
												echo wp_kses(
													get_view_component(
														'badge',
														[ 'style' => 'pro' ]
													),
													kses()
												);
												?>
											</div>
											<p class="mt-1 text-sm text-gray-500">
												<?php esc_html_e( 'Add unlimited redemption options for your members', 'rewardswp' ); ?>
											</p>
										</div>
										<div class="flex items-center ml-4">
											<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
												<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
											</svg>
										</div>
									</div>
								</div>
							</a>
						</template>

				<!-- Empty state -->
				<div x-show="$store.spendActions.rewards.length === 0" class="bg-white border border-gray-200 rounded-lg p-8 text-center">
					<div class="mx-auto w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center mb-4">
						<svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
						</svg>
					</div>
					<h3 class="text-lg font-semibold text-gray-900 mb-2">
						<?php esc_html_e( 'No ways to redeem yet', 'rewardswp' ); ?>
					</h3>
				<p class="text-gray-600">
					<?php esc_html_e( 'Click "Add ways to redeem" to get started', 'rewardswp' ); ?>
				</p>
				</div>
					</div>
				</div>
			</div>

			<!-- Hidden inputs for form submission -->
			<div style="display: none;">
				<template x-for="(reward, index) in $store.spendActions.rewards" x-bind:key="reward.id">
					<div>
						<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][id]'" x-bind:value="reward.id">
						<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][type]'" x-bind:value="reward.type">
						<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][enabled]'" x-bind:value="reward.enabled ? 1 : 0">

					<!-- Common fields -->
					<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][custom_title]'" x-bind:value="reward.custom_title || ''">
					<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][minimum_spent]'" x-bind:value="reward.minimum_spent || 0">
					<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][coupon_prefix]'" x-bind:value="reward.coupon_prefix || ''">
					<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][coupon_duration]'" x-bind:value="reward.coupon_duration !== undefined ? reward.coupon_duration : 30">

					<!-- Fixed discount specific fields -->
					<template x-if="reward.type === 'fixed_discount'">
						<div>
							<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][points_required]'" x-bind:value="reward.points_required">
							<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][coupon_amount]'" x-bind:value="reward.coupon_amount">
						</div>
					</template>

					<!-- Percentage discount specific fields -->
					<template x-if="reward.type === 'percentage_discount'">
						<div>
							<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][points_required]'" x-bind:value="reward.points_required">
							<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][coupon_amount]'" x-bind:value="reward.coupon_amount">
						</div>
					</template>

					<!-- Free shipping and free product fields -->
					<template x-if="reward.type === 'free_shipping' || reward.type === 'free_product'">
						<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][points_required]'" x-bind:value="reward.points_required">
					</template>

						<!-- Free product specific fields -->
						<template x-if="reward.type === 'free_product'">
							<div>
							<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][products_included]'" x-bind:value="JSON.stringify(reward.products_included || [])">
								<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][product_value]'" x-bind:value="reward.product_value || ''">
								<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][reward_description]'" x-bind:value="reward.reward_description || ''">
								<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][redemption_limit]'" x-bind:value="reward.redemption_limit || '1'">
								<input type="hidden" x-bind:name="'rewardswp_settings[points][spend_actions][' + index + '][minimum_order_value]'" x-bind:value="reward.minimum_order_value || ''">
							</div>
						</template>
					</div>
				</template>
			</div>
		</div>

		<?php
		return ob_get_clean();
	}


	/**
	 * Get the drawer content for spend actions.
	 * This content will be injected into the global drawer component.
	 *
	 * @since 1.1.0
	 * @return callable Callback function that renders the drawer content.
	 */
	public function get_drawer_content_callback(): callable {
		$icon_helper          = $this->icon_helper;
		$spend_actions_option = get_option_object( SpendActionsOption::class );

		return function () use ( $spend_actions_option, $icon_helper ) {
			$action_definitions = $spend_actions_option->get_action_definitions();
			$action_definitions = $this->get_filtered_action_definitions( $action_definitions );
			?>

		<div x-show="$store.drawer.type === 'spend'" class="relative h-full">
		<!-- Spend Actions List View -->
			<div x-show="$store.drawer.type === 'spend' && $store.drawer.view === 'list'">
				<div class="space-y-3">
					<?php foreach ( $action_definitions as $action_id => $action ) : ?>
						<?php
						// Show PRO badge for users without feature access (uses feature_slug from action definition).
						$is_upgrade_required = ! empty( $action['feature_slug'] )
							&& ! can_access_rewardswp_feature( $action['feature_slug'] );
						$icon_markup         = wp_kses( $icon_helper->get_icon( $action['icon'], 'w-8 h-8' ), svg_kses() );
						?>
						<button type="button"
						x-on:click="$dispatch('select-spend-action', { actionType: '<?php echo esc_js( $action_id ); ?>', actionDefaults: <?php echo esc_attr( wp_json_encode( $action ) ); ?> })"
						class="w-full text-left p-4 rounded-lg border border-gray-200 hover:bg-gray-50 cursor-pointer transition-all relative">
							<!-- NO "Added" badge for spend actions (can add multiple) -->

							<div class="flex items-start gap-4">
								<div class="flex-shrink-0 text-gray-700">
									<?php echo $icon_markup; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
								</div>
								<div class="flex-1">
									<h3 class="text-sm font-medium text-gray-900">
										<?php echo esc_html( $action['title'] ); ?>
										<?php if ( $is_upgrade_required ) : ?>
											<span class="ml-2">
												<?php echo wp_kses( get_view_component( 'badge', [ 'style' => 'pro' ] ), kses() ); ?>
											</span>
										<?php endif; ?>
									</h3>
									<p class="mt-1 text-sm text-gray-500">
										<?php echo esc_html( $action['description'] ); ?>
									</p>
								</div>
							</div>
						</button>
					<?php endforeach; ?>
				</div>
			</div>

			<!-- Config View for Spend Actions -->
			<div x-show="$store.drawer.type === 'spend' && $store.drawer.view === 'config'" class="h-full">
			<!-- Back to rewards button - only show when adding new reward -->
			<div x-show="$store.drawer.isNew" class="relative z-20 pb-3 border-b border-gray-200">
					<button
						x-on:click="$store.drawer.backToList()"
						class="inline-flex items-center text-sm text-gray-600 hover:text-gray-900">
						<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
						</svg>
						<?php esc_html_e( 'Back to rewards', 'rewardswp' ); ?>
					</button>
				</div>

				<div>
					<!-- Spend Actions Config View - Fixed Discount -->
					<template x-if="$store.drawer.type === 'spend' && $store.drawer.view === 'config' && $store.drawer.selectedAction?.type === 'fixed_discount'">
						<div class="h-full relative">
							<!-- Settings Form (not a PRO feature, so no blur needed) -->
							<div class="divide-y divide-gray-200">
								<!-- Status Toggle -->
								<div class="py-5">
									<div class="gap-8 md:flex md:items-center">
										<div class="md:w-2/4 flex-none">
											<label class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Status', 'rewardswp' ); ?>
											</label>
											<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'Enable or disable this reward.', 'rewardswp' ); ?>
											</p>
										</div>
										<div class="md:w-2/4">
											<div class="mt-2 md:mt-0">
												<?php
												echo wp_kses(
													get_view_component(
														'toggle',
														[
															'section'      => 'points',
															'x_model'      => '$store.drawer.selectedAction.enabled',
															'no_input'     => true,
															'button_align' => 'left',
														]
													),
													kses()
												);
												?>
											</div>
										</div>
									</div>
								</div>

								<!-- Points Required -->
								<div class="py-5">
									<div class="gap-8 md:flex md:items-center">
										<div class="md:w-2/4 flex-none">
											<label class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Points required', 'rewardswp' ); ?>
											</label>
											<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'Number of points needed to redeem this reward.', 'rewardswp' ); ?>
											</p>
										</div>
										<div class="md:w-2/4">
											<?php
											echo wp_kses(
												get_view_component(
													'number',
													[
														'x-model' => '$store.drawer.selectedAction.points_required',
														'integers_only' => true,
														'min'     => '1',
														'width'   => 'w-full',
													]
												),
												kses()
											);
											?>
										</div>
									</div>
								</div>

								<!-- Discount Value -->
								<div class="py-5">
									<div class="gap-8 md:flex md:items-center">
										<div class="md:w-2/4 flex-none">
											<label class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Discount value', 'rewardswp' ); ?>
											</label>
											<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'The discount amount for this reward.', 'rewardswp' ); ?>
											</p>
										</div>
										<div class="md:w-2/4">
											<?php
											/* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Contents are escaped at the source */
											echo get_view_component(
												'amount',
												[
													'x-model' => '$store.drawer.selectedAction.coupon_amount',
													'name'    => 'coupon_amount',
													'id'      => 'drawer_coupon_amount',
												]
											);
											?>
										</div>
									</div>
								</div>

							<!-- Reward Expiry -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-start">
									<div class="md:w-2/4 flex-none">
										<label class="text-sm font-medium text-gray-900 flex items-center gap-2">
											<?php esc_html_e( 'Reward expiry', 'rewardswp' ); ?>
											<?php
											echo wp_kses(
												get_view_component(
													'badge',
													[
														'style'  => 'pro',
														'x-show' => '!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade',
													]
												),
												kses()
											);
											?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'How long the discount code remains valid after redemption.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
										<!-- Select dropdown (disabled for users without feature access) -->
										<div x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade">
											<?php
											echo wp_kses(
												get_view_component(
													'select',
													[
														'x-model' => '$store.drawer.selectedAction.coupon_duration',
														'disabled' => true,
														'options' => [
															'+30 days' => esc_html__( '30 days', 'rewardswp' ),
															'+3 months' => esc_html__( '3 months', 'rewardswp' ),
															'+6 months' => esc_html__( '6 months', 'rewardswp' ),
															'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
															'+2 years' => esc_html__( '2 years', 'rewardswp' ),
															'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														],
													]
												),
												kses()
											);
											?>
										</div>

										<!-- Select dropdown (enabled for users with feature access) -->
										<div x-show="$store.config.hasRewardExpiration || $store.drawer.isUpgrade">
											<?php
											echo wp_kses(
												get_view_component(
													'select',
													[
														'x-model' => '$store.drawer.selectedAction.coupon_duration',
														'disabled' => false,
														'options' => [
															'+30 days' => esc_html__( '30 days', 'rewardswp' ),
															'+3 months' => esc_html__( '3 months', 'rewardswp' ),
															'+6 months' => esc_html__( '6 months', 'rewardswp' ),
															'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
															'+2 years' => esc_html__( '2 years', 'rewardswp' ),
															'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														],
													]
												),
												kses()
											);
											?>
										</div>

										<!-- Upgrade link for users without feature access (below the select) -->
										<a x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade"
											x-bind:href="'<?php echo get_upgrade_url( '', 'drawer' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JS context; esc_url() encodes & as &amp; ?>' + '&utm_content=' + ($store.drawer.selectedAction?.type || 'unknown') + '_expiry'"
											target="_blank"
											class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 mt-2">
										<?php esc_html_e( 'Upgrade for custom expiry', 'rewardswp' ); ?>
										<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
										</svg>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</template>

			<!-- Spend Actions Config View - Percentage Discount -->
				<template x-if="$store.drawer.type === 'spend' && $store.drawer.view === 'config' && $store.drawer.selectedAction?.type === 'percentage_discount'">
					<div class="divide-y divide-gray-200"
						x-bind:class="{ 'blur-xs pointer-events-none': $store.drawer.isUpgrade }"
						x-bind:inert="$store.drawer.isUpgrade">
								<!-- Status Toggle -->
								<div class="py-5">
									<div class="gap-8 md:flex md:items-center">
										<div class="md:w-2/4 flex-none">
											<label class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Status', 'rewardswp' ); ?>
											</label>
											<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'Enable or disable this reward.', 'rewardswp' ); ?>
											</p>
										</div>
										<div class="md:w-2/4">
											<div class="mt-2 md:mt-0">
												<?php
												echo wp_kses(
													get_view_component(
														'toggle',
														[
															'section'      => 'points',
															'x_model'      => '$store.drawer.selectedAction.enabled',
															'no_input'     => true,
															'button_align' => 'left',
														]
													),
													kses()
												);
												?>
											</div>
										</div>
									</div>
								</div>

							<!-- Points per Percent -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-center">
									<div class="md:w-2/4 flex-none">
									<label class="text-sm font-medium text-gray-900">
										<?php esc_html_e( 'Points required', 'rewardswp' ); ?>
									</label>
									<p class="mt-1 text-xs text-gray-500">
										<?php esc_html_e( 'Number of points needed to redeem this reward.', 'rewardswp' ); ?>
									</p>
								</div>
								<div class="md:w-2/4">
									<?php
									echo wp_kses(
										get_view_component(
											'number',
											[
												'x-model' => '$store.drawer.selectedAction.points_required',
												'integers_only' => true,
												'min'     => '1',
												'width'   => 'w-full',
											]
										),
										kses()
									);
									?>
								</div>
								</div>
							</div>

				<!-- Discount Value -->
				<div class="py-5">
					<div class="gap-8 md:flex md:items-center">
						<div class="md:w-2/4 flex-none">
							<label class="text-sm font-medium text-gray-900">
								<?php esc_html_e( 'Discount value', 'rewardswp' ); ?>
							</label>
							<p class="mt-1 text-xs text-gray-500">
								<?php esc_html_e( 'The discount percentage for this reward.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4">
								<?php
								/* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Contents are escaped at the source */
								echo get_view_component(
									'amount',
									[
										'x-model' => '$store.drawer.selectedAction.coupon_amount',
										'name'    => 'coupon_amount_percent',
										'id'      => 'drawer_coupon_amount_percent',
										'type'    => 'percentage',
									]
								);
								?>
							</div>
						</div>
					</div>

							<!-- Reward Expiry -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-start">
									<div class="md:w-2/4 flex-none">
										<label class="text-sm font-medium text-gray-900 flex items-center gap-2">
											<?php esc_html_e( 'Reward expiry', 'rewardswp' ); ?>
											<?php
											echo wp_kses(
												get_view_component(
													'badge',
													[
														'style'  => 'pro',
														'x-show' => '!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade',
													]
												),
												kses()
											);
											?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'How long the discount code remains valid after redemption.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
									<!-- Select dropdown (disabled for users without feature access) -->
									<div x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade">
										<?php
										echo wp_kses(
											get_view_component(
												'select',
												[
													'x-model' => '$store.drawer.selectedAction.coupon_duration',
													'disabled' => true,
													'options' => [
														'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														'+30 days' => esc_html__( '30 days', 'rewardswp' ),
														'+3 months' => esc_html__( '3 months', 'rewardswp' ),
														'+6 months' => esc_html__( '6 months', 'rewardswp' ),
														'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
														'+2 years' => esc_html__( '2 years', 'rewardswp' ),
													],
												]
											),
											kses()
										);
										?>
									</div>

									<!-- Select dropdown (enabled for users with feature access) -->
									<div x-show="$store.config.hasRewardExpiration || $store.drawer.isUpgrade">
										<?php
										echo wp_kses(
											get_view_component(
												'select',
												[
													'x-model' => '$store.drawer.selectedAction.coupon_duration',
													'disabled' => false,
													'options' => [
														'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														'+30 days' => esc_html__( '30 days', 'rewardswp' ),
														'+3 months' => esc_html__( '3 months', 'rewardswp' ),
														'+6 months' => esc_html__( '6 months', 'rewardswp' ),
														'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
														'+2 years' => esc_html__( '2 years', 'rewardswp' ),
													],
												]
											),
											kses()
										);
										?>
									</div>

									<!-- Upgrade link for users without feature access (below the select) -->
									<a x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade"
										x-bind:href="'<?php echo get_upgrade_url( '', 'drawer' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JS context; esc_url() encodes & as &amp; ?>' + '&utm_content=' + ($store.drawer.selectedAction?.type || 'unknown') + '_expiry'"
										target="_blank"
										class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 mt-2">
										<?php esc_html_e( 'Upgrade for custom expiry', 'rewardswp' ); ?>
										<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
										</svg>
									</a>
									</div>
								</div>
							</div>
							</div>
						</div>
					</div>
				</template>

				<!-- Spend Actions Config View - Free Shipping -->
				<template x-if="$store.drawer.type === 'spend' && $store.drawer.view === 'config' && $store.drawer.selectedAction?.type === 'free_shipping'">
					<div class="divide-y divide-gray-200"
						x-bind:class="{ 'blur-xs pointer-events-none': $store.drawer.isUpgrade }"
						x-bind:inert="$store.drawer.isUpgrade">
								<!-- Status Toggle -->
								<div class="py-5">
									<div class="gap-8 md:flex md:items-center">
										<div class="md:w-2/4 flex-none">
											<label class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Status', 'rewardswp' ); ?>
											</label>
											<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'Enable or disable this reward.', 'rewardswp' ); ?>
											</p>
										</div>
										<div class="md:w-2/4">
											<div class="mt-2 md:mt-0">
												<?php
												echo wp_kses(
													get_view_component(
														'toggle',
														[
															'section'      => 'points',
															'x_model'      => '$store.drawer.selectedAction.enabled',
															'no_input'     => true,
															'button_align' => 'left',
														]
													),
													kses()
												);
												?>
											</div>
										</div>
									</div>
								</div>

					<!-- Points Required -->
					<div class="py-5">
						<div class="gap-8 md:flex md:items-center">
							<div class="md:w-2/4 flex-none">
								<label class="text-sm font-medium text-gray-900">
									<?php esc_html_e( 'Points required', 'rewardswp' ); ?>
								</label>
								<p class="mt-1 text-xs text-gray-500">
									<?php esc_html_e( 'How many points members need to redeem for free shipping.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4">
								<?php
								echo wp_kses(
									get_view_component(
										'number',
										[
											'x-model' => '$store.drawer.selectedAction.points_required',
											'integers_only' => true,
											'min'     => '1',
											'width'   => 'w-full',
										]
									),
									kses()
								);
								?>
							</div>
						</div>
					</div>

							<!-- Reward Expiry -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-start">
									<div class="md:w-2/4 flex-none">
										<label class="text-sm font-medium text-gray-900 flex items-center gap-2">
											<?php esc_html_e( 'Reward expiry', 'rewardswp' ); ?>
											<?php
											echo wp_kses(
												get_view_component(
													'badge',
													[
														'style'  => 'pro',
														'x-show' => '!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade',
													]
												),
												kses()
											);
											?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'How long the discount code remains valid after redemption.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
									<!-- Select dropdown (disabled for users without feature access) -->
									<div x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade">
										<?php
										echo wp_kses(
											get_view_component(
												'select',
												[
													'x-model' => '$store.drawer.selectedAction.coupon_duration',
													'disabled' => true,
													'options' => [
														'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														'+30 days' => esc_html__( '30 days', 'rewardswp' ),
														'+3 months' => esc_html__( '3 months', 'rewardswp' ),
														'+6 months' => esc_html__( '6 months', 'rewardswp' ),
														'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
														'+2 years' => esc_html__( '2 years', 'rewardswp' ),
													],
												]
											),
											kses()
										);
										?>
									</div>

									<!-- Select dropdown (enabled for users with feature access) -->
									<div x-show="$store.config.hasRewardExpiration || $store.drawer.isUpgrade">
										<?php
										echo wp_kses(
											get_view_component(
												'select',
												[
													'x-model' => '$store.drawer.selectedAction.coupon_duration',
													'disabled' => false,
													'options' => [
														'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														'+30 days' => esc_html__( '30 days', 'rewardswp' ),
														'+3 months' => esc_html__( '3 months', 'rewardswp' ),
														'+6 months' => esc_html__( '6 months', 'rewardswp' ),
														'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
														'+2 years' => esc_html__( '2 years', 'rewardswp' ),
													],
												]
											),
											kses()
										);
										?>
									</div>

									<!-- Upgrade link for users without feature access (below the select) -->
									<a x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade"
										x-bind:href="'<?php echo get_upgrade_url( '', 'drawer' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JS context; esc_url() encodes & as &amp; ?>' + '&utm_content=' + ($store.drawer.selectedAction?.type || 'unknown') + '_expiry'"
										target="_blank"
										class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 mt-2">
										<?php esc_html_e( 'Upgrade for custom expiry', 'rewardswp' ); ?>
										<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
										</svg>
									</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>

			<!-- Spend Actions Config View - Free Product -->
				<template x-if="$store.drawer.type === 'spend' && $store.drawer.view === 'config' && $store.drawer.selectedAction?.type === 'free_product'">
					<div class="divide-y divide-gray-200"
						x-bind:class="{ 'blur-xs pointer-events-none': $store.drawer.isUpgrade }"
						x-bind:inert="$store.drawer.isUpgrade">
								<!-- Status Toggle -->
								<div class="py-5">
									<div class="gap-8 md:flex md:items-center">
										<div class="md:w-2/4 flex-none">
											<label class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Status', 'rewardswp' ); ?>
											</label>
											<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'Enable or disable this reward.', 'rewardswp' ); ?>
											</p>
										</div>
										<div class="md:w-2/4">
											<div class="mt-2 md:mt-0">
												<?php
												echo wp_kses(
													get_view_component(
														'toggle',
														[
															'section'         => 'points',
															'x_model'         => '$store.drawer.selectedAction.enabled',
															'no_input'        => true,
															'button_align'    => 'left',
															'x-bind:disabled' => "\$store.drawer.selectedAction?.products_included?.[0]?.in_stock === false",
														]
													),
													kses()
												);
												?>
											</div>
										</div>
									</div>

									<!-- Warning when product is out of stock -->
									<div x-show="$store.drawer.selectedAction?.products_included?.[0]?.in_stock === false"
										 x-cloak
										 class="mt-3 flex items-start gap-2 bg-amber-50 text-amber-700 px-3 py-2 rounded-md border border-amber-200">
										<?php echo wp_kses( $icon_helper->get_icon( 'alert-triangle', 'w-4 h-4 flex-shrink-0 mt-1.5' ), svg_kses() ); ?>
										<span class="text-sm">
											<?php esc_html_e( 'This reward is disabled: Product is out of stock.', 'rewardswp' ); ?>
											<br>
											<?php esc_html_e( 'Select a different product or restock to re-enable.', 'rewardswp' ); ?>
										</span>
									</div>
								</div>

					<!-- Points Required -->
					<div class="py-5">
						<div class="gap-8 md:flex md:items-center">
							<div class="md:w-2/4 flex-none">
								<label class="text-sm font-medium text-gray-900">
									<?php esc_html_e( 'Points required', 'rewardswp' ); ?>
								</label>
								<p class="mt-1 text-xs text-gray-500">
									<?php esc_html_e( 'How many points members need to redeem for a free product.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4">
								<?php
								echo wp_kses(
									get_view_component(
										'number',
										[
											'x-model' => '$store.drawer.selectedAction.points_required',
											'integers_only' => true,
											'min'     => '1',
											'width'   => 'w-full',
										]
									),
									kses()
								);
								?>
							</div>
						</div>
					</div>

					<!-- Product Selection -->
					<div class="py-5">
						<div class="gap-8 md:flex md:items-start">
							<div class="md:w-2/4 flex-none">
								<label class="text-sm font-medium text-gray-900">
									<?php esc_html_e( 'Free product selection', 'rewardswp' ); ?>
								</label>
								<p class="mt-1 text-xs text-gray-500">
									<?php esc_html_e( 'Select the product that will be given for free with this reward.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4 min-w-0">
								<div
									x-bind:class="{ 'ring-2 ring-red-500 rounded-md': $store.drawer._showProductError }"
									x-on:click="$store.drawer._showProductError = false"
								>
								<?php
								echo wp_kses(
									get_view_component(
										'choices',
										[
											'x-model'     => '$store.drawer.selectedAction.products_included',
											'selected_options' => '$store.drawer.selectedAction.products_included',
											'ajax_action' => 'rewardswp_search_products',
											'nonce'       => wp_create_nonce( 'rewardswp_searchable_nonce' ),
											'placeholder' => esc_html__( 'Search for a product...', 'rewardswp' ),
											]
										),
										kses()
									);
									?>
								</div>
								<p x-show="$store.drawer._showProductError" class="mt-1 text-sm text-red-500">
									<?php esc_html_e( 'Please select a product.', 'rewardswp' ); ?>
								</p>
							</div>
						</div>
					</div>

					<?php if ( false ) : ?>
					<!-- Product Value -->
					<div class="py-5">
						<div class="gap-8 md:flex md:items-center">
							<div class="md:w-2/4 flex-none">
								<label class="text-sm font-medium text-gray-900">
									<?php esc_html_e( 'Product value', 'rewardswp' ); ?>
								</label>
								<p class="mt-1 text-xs text-gray-500">
									<?php esc_html_e( 'Maximum discount value. Protects against price increases. If product costs more, member pays the difference.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4">
								<?php
								echo wp_kses(
									get_view_component(
										'amount',
										[
											'x-model'     => '$store.drawer.selectedAction.product_value',
											'name'        => 'drawer_product_value',
											'type'        => 'currency',
											'placeholder' => '0',
										]
									),
									kses()
								);
								?>
							</div>
						</div>
					</div>
					<?php endif; ?>

					<!-- Reward Description (Optional) -->
					<div class="py-5">
						<div class="gap-8 md:flex md:items-start">
							<div class="md:w-2/4 flex-none">
								<label class="text-sm font-medium text-gray-900">
									<?php esc_html_e( 'Custom product name', 'rewardswp' ); ?>
									<span class="text-gray-400 font-normal"><?php esc_html_e( '(optional)', 'rewardswp' ); ?></span>
								</label>
								<p class="mt-1 text-xs text-gray-500">
									<?php esc_html_e( 'Show a different name to customers. Great for simplifying long product titles.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4 min-w-0">
								<textarea
									x-model="$store.drawer.selectedAction.reward_description"
									rows="2"
									placeholder="<?php esc_attr_e( 'e.g., Premium Gift Box', 'rewardswp' ); ?>"
									class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
								></textarea>
							</div>
						</div>
					</div>

					<!-- Redemption Limit -->
					<div class="py-5">
						<div class="gap-8 md:flex md:items-center">
							<div class="md:w-2/4 flex-none">
								<label class="text-sm font-medium text-gray-900">
									<?php esc_html_e( 'Redemption limit', 'rewardswp' ); ?>
								</label>
								<p class="mt-1 text-xs text-gray-500">
									<?php esc_html_e( 'How many times each member can redeem this reward.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4">
								<?php
								echo wp_kses(
									get_view_component(
										'select',
										[
											'x-model' => '$store.drawer.selectedAction.redemption_limit',
											'options' => [
												'1'         => esc_html__( 'Once per member', 'rewardswp' ),
												'unlimited' => esc_html__( 'Unlimited per member', 'rewardswp' ),
											],
										]
									),
									kses()
								);
								?>
							</div>
						</div>
					</div>

					<!-- Minimum spend (excluding free product) -->
					<div class="py-5">
						<div class="gap-8 md:flex md:items-center">
							<div class="md:w-2/4 flex-none">
								<label class="text-sm font-medium text-gray-900">
									<?php esc_html_e( 'Minimum spend', 'rewardswp' ); ?>
								</label>
								<p class="mt-1 text-xs text-gray-500">
									<?php esc_html_e( 'Calculated from your cart subtotal excluding the free product. Set to 0 for no minimum.', 'rewardswp' ); ?>
								</p>
							</div>
							<div class="md:w-2/4">
								<?php
								echo wp_kses(
									get_view_component(
										'amount',
										[
											'x-model'     => '$store.drawer.selectedAction.minimum_order_value',
											'name'        => 'drawer_minimum_order_value',
											'type'        => 'currency',
											'placeholder' => '0',
										]
									),
									kses()
								);
								?>
							</div>
						</div>
					</div>

							<!-- Reward Expiry -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-start">
									<div class="md:w-2/4 flex-none">
										<label class="text-sm font-medium text-gray-900 flex items-center gap-2">
											<?php esc_html_e( 'Reward expiry', 'rewardswp' ); ?>
											<?php
											echo wp_kses(
												get_view_component(
													'badge',
													[
														'style'  => 'pro',
														'x-show' => '!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade',
													]
												),
												kses()
											);
											?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'How long the discount code remains valid after redemption.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
									<!-- Select dropdown (disabled for users without feature access) -->
									<div x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade">
										<?php
										echo wp_kses(
											get_view_component(
												'select',
												[
													'x-model' => '$store.drawer.selectedAction.coupon_duration',
													'disabled' => true,
													'options' => [
														'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														'+30 days' => esc_html__( '30 days', 'rewardswp' ),
														'+3 months' => esc_html__( '3 months', 'rewardswp' ),
														'+6 months' => esc_html__( '6 months', 'rewardswp' ),
														'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
														'+2 years' => esc_html__( '2 years', 'rewardswp' ),
													],
												]
											),
											kses()
										);
										?>
									</div>

									<!-- Select dropdown (enabled for users with feature access) -->
									<div x-show="$store.config.hasRewardExpiration || $store.drawer.isUpgrade">
										<?php
										echo wp_kses(
											get_view_component(
												'select',
												[
													'x-model' => '$store.drawer.selectedAction.coupon_duration',
													'disabled' => false,
													'options' => [
														'never'    => esc_html__( 'Never expires', 'rewardswp' ),
														'+30 days' => esc_html__( '30 days', 'rewardswp' ),
														'+3 months' => esc_html__( '3 months', 'rewardswp' ),
														'+6 months' => esc_html__( '6 months', 'rewardswp' ),
														'+1 year'  => esc_html__( '1 year', 'rewardswp' ),
														'+2 years' => esc_html__( '2 years', 'rewardswp' ),
													],
												]
											),
											kses()
										);
										?>
									</div>

									<!-- Upgrade link for users without feature access (below the select) -->
									<a x-show="!$store.config.hasRewardExpiration && !$store.drawer.isUpgrade"
										x-bind:href="'<?php echo get_upgrade_url( '', 'drawer' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JS context; esc_url() encodes & as &amp; ?>' + '&utm_content=' + ($store.drawer.selectedAction?.type || 'unknown') + '_expiry'"
										target="_blank"
										class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 mt-2">
										<?php esc_html_e( 'Upgrade for custom expiry', 'rewardswp' ); ?>
										<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
										</svg>
									</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>

		</div> <!-- Close px-6 py-6 wrapper -->
		</div> <!-- Close config view wrapper -->

		<!-- Percentage Discount Overlay -->
				<?php
				// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Component handles its own sanitization
				echo get_view_component(
					'upgrade-overlay',
					[
						'icon_name'    => 'reward-percentage-coupon',
						'title'        => __( 'Percentage Discount rewards', 'rewardswp' ),
						'description'  => __( 'Let members redeem points for a percentage discount reward at checkout.', 'rewardswp' ),
						'feature_slug' => 'redeem_percentage_discount',
						'feature_name' => __( 'Percentage Discount', 'rewardswp' ),
						'overlay'      => true,
						'x_show'       => '$store.drawer.type === \'spend\' && $store.drawer.isUpgrade && $store.drawer.selectedAction?.type === \'percentage_discount\'',
					]
				);
				?>

		<!-- Free Shipping Overlay -->
			<?php
			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Component handles its own sanitization
			echo get_view_component(
				'upgrade-overlay',
				[
					'icon_name'    => 'reward-free-shipping',
					'title'        => __( 'Free Shipping rewards', 'rewardswp' ),
					'description'  => __( 'Let members redeem points for a free shipping reward at checkout.', 'rewardswp' ),
					'feature_slug' => 'redeem_free_shipping',
					'feature_name' => __( 'Free Shipping', 'rewardswp' ),
					'overlay'      => true,
					'x_show'       => '$store.drawer.type === \'spend\' && $store.drawer.isUpgrade && $store.drawer.selectedAction?.type === \'free_shipping\'',
				]
			);
			?>

		<!-- Free Product Overlay -->
			<?php
			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Component handles its own sanitization
			echo get_view_component(
				'upgrade-overlay',
				[
					'icon_name'    => 'reward-free-product',
					'title'        => __( 'Free Product rewards', 'rewardswp' ),
					'description'  => __( 'Let members redeem points for a free product reward at checkout.', 'rewardswp' ),
					'feature_slug' => 'redeem_free_product',
					'feature_name' => __( 'Free Product', 'rewardswp' ),
					'overlay'      => true,
					'x_show'       => '$store.drawer.type === \'spend\' && $store.drawer.isUpgrade && $store.drawer.selectedAction?.type === \'free_product\'',
				]
			);
			?>

		</div>

			<?php
		};
	}
}
