<?php
/**
 * Earn 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\EarnActionsOption;
use Awesomemotive\Rewardswp\Settings\Options\Referrals\EnabledOption;
use Awesomemotive\Rewardswp\Settings\Options\Referrals\RewardsOption;
use Awesomemotive\Rewardswp\Factories\ViewsFactory;
use function Awesomemotive\Rewardswp\Helpers\get_option_object;
use function Awesomemotive\Rewardswp\Helpers\get_option_value;
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\is_rewardswp_pro_plan;
use function Awesomemotive\Rewardswp\Helpers\get_upgrade_url;
use function Awesomemotive\Rewardswp\Helpers\add_utm_params;
use function Awesomemotive\Rewardswp\Helpers\get_site_currency_symbol;
use function Awesomemotive\Rewardswp\Helpers\can_access_rewardswp_feature;
use function Awesomemotive\Rewardswp\Helpers\get_default_points_base_amount;

/**
 * New Earn Points Actions View with Drawer UI
 * This is a NEW implementation that uses drawer instead of modal
 *
 * @since 1.1.0
 */
class EarnPointsActionsDrawerView extends AbstractView implements ViewInterface, ScriptDataProviderInterface {

	/**
	 * Build the data structure supplied to the frontend drawer component.
	 *
	 * @since 1.1.0
	 *
	 * @return array
	 */
	public function get_script_data(): array {
		$earn_actions_option = get_option_object( EarnActionsOption::class );
		$earn_actions_value  = $earn_actions_option->get_value();
		$currency_singular   = get_points_currency_singular();
		$currency_plural     = get_points_currency_plural();
		$action_definitions  = $earn_actions_option->get_action_definitions();

		// Dynamically build icon map from action definitions.
		$icon_map = [];
		foreach ( $action_definitions as $action_type => $definition ) {
			$icon_map[ $definition['icon'] ] = wp_kses( $this->icon_helper->get_icon( $definition['icon'], 'w-8 h-8' ), svg_kses() );
		}

		// Get referral rewards data for mirror card.
		$rewards = get_option_value( RewardsOption::class );

		// Check if EDD is active and get Reviews status.
		$is_edd             = false;
		$edd_reviews_status = null;

		if ( $this->integration && 'easy_digital_downloads' === $this->integration->get_source() ) {
			$is_edd             = true;
			$edd_reviews_status = $this->integration->get_edd_reviews_status();
		}

		// Get referral mirror order from settings.
		$all_settings   = (array) get_option( 'rewardswp_settings', [] );
		$referral_order = absint( $all_settings['points']['referral_mirror_order'] ?? 0 );

		$result = [
			'earnActions'         => $earn_actions_value ?: [],
			'currencySingular'    => $currency_singular,
			'currencyPlural'      => $currency_plural,
			'currencySymbol'      => get_site_currency_symbol(),
			'defaultBaseAmount'   => get_default_points_base_amount(),
			'addTitle'            => __( 'Add ways to earn', 'rewardswp' ),
			'addSubtitle'         => __( 'Choose an action for members to earn points', 'rewardswp' ),
			'createButtonText'    => __( 'Create', 'rewardswp' ),
			'configSubtitle'      => __( 'Configure action settings', 'rewardswp' ),
			'editSubtitle'        => __( 'Edit action settings', 'rewardswp' ),
			'alreadyAddedMessage' => __( 'This action has already been added.', 'rewardswp' ),
			'iconMap'             => $icon_map,
			'referralsEnabled'    => get_option_value( EnabledOption::class ),
			'advocateReward'      => $rewards['advocate'] ?? null,
			'referralOrder'       => $referral_order,
			'isEdd'               => $is_edd,
			'eddReviewsStatus'    => $edd_reviews_status,
			'summaryTemplates'    => [
				/* translators: 1: Points number; 2: Points currency name; 3: Base spend amount with currency symbol. */
				'purchase'       => __( 'Members earn %1$s %2$s for every %3$s spent', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'signup'         => __( 'Members earn %1$s %2$s for creating an account', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'first_order'    => __( 'Members earn %1$s %2$s for completing their first order', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'product_review' => __( 'Members earn %1$s %2$s for each approved product review', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'referral'       => __( 'Members earn %1$s %2$s for each completed referral', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'birthday'       => __( 'Members earn %1$s %2$s on their birthday', 'rewardswp' ),
				/* translators: 1: Points number; 2: Points currency name. */
				'generic'        => __( 'Members earn %1$s %2$s', 'rewardswp' ),
				'fallback'       => __( 'Earning action configured', 'rewardswp' ),
			],
		];

		return $result;
	}

	/**
	 * Icon helper instance.
	 *
	 * @since 1.1.0
	 * @var IconHelper
	 */
	private IconHelper $icon_helper;

	/**
	 * Views factory instance.
	 *
	 * @since 1.1.0
	 * @var ViewsFactory
	 */
	private ViewsFactory $views_factory;

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

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

	/**
	 * Render the template.
	 *
	 * @since 1.1.0
	 * @param array $args
	 * @return void
	 */
	public function render( array $args = [] ): void {
		// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Output is escaped in get_contents method
		echo $this->get_contents( $args );
	}

	/**
	 * Get the view contents.
	 *
	 * @since 1.1.0
	 * @param array $args Arguments for the view.
	 * @return string The view contents.
	 */
	public function get_contents( array $args = [] ): string {
		ob_start();
		?>

		<!-- Earn Points Section -->
		<div class="py-5" x-data="earnDrawerSection" @remove-earn-action.window="removeEarnAction($event.detail.actionId)">
			<div class="gap-8 md:flex md:items-start">
				<!-- Left Column - Ways to Earn Info -->
				<div class="md:w-1/3 flex-none">
			<h3 class="text-sm font-semibold text-gray-900">
				<?php esc_html_e( 'Ways to Earn', 'rewardswp' ); ?>
			</h3>
			<p class="mt-2 text-sm text-gray-500">
				<?php esc_html_e( 'Create ways your members can earn points when they join and engage with your brand.', '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="openEarnDrawer()"
			>
				<?php esc_html_e( 'Add ways to earn', 'rewardswp' ); ?>
			</button>
			</div>
			</div>

				<!-- Right Column - Current Earn Actions -->
				<div class="md:w-2/3">
					<div class="space-y-3">
					<!-- Sortable earn actions container (includes referral mirror card) -->
					<div id="earn-actions-list" class="space-y-3" x-sort.ghost="handleEarnSort($item, $position)" x-sort:config="{ handle: '.earn-drag-handle' }">
						<!-- Display all earn actions (enabled and disabled) including referral mirror -->
						<template x-for="(action, index) in $store.earnActions.enabledSorted" x-bind:key="$store.earnActions.sortIteration + '_' + action.id">
							<div>
								<!-- Referral Mirror Card -->
								<template x-if="action.isMirror">
									<div class="earn-action-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="action.id"
										x-on:click="Alpine.store('drawer').close(); window.dispatchEvent(new CustomEvent('rewardswp:change-tab', { detail: { tab: 'referrals', openAdvocateDrawer: true } }))">
										<!-- Drag Handle -->
										<div class="earn-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">
												<?php echo wp_kses( $this->icon_helper->get_icon( 'earn-referral', 'w-8 h-8' ), svg_kses() ); ?>
											</span>
										</div>
										<div class="flex-1 min-w-0">
											<h4 class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Refer a friend', 'rewardswp' ); ?>
											</h4>
											<p class="mt-1 text-sm text-gray-600" x-text="$store.earnActions.getReferralPointsDescription()"></p>
											<div class="mt-2 flex items-center text-xs text-gray-500">
												<span><?php esc_html_e( 'Managed in Referrals tab', 'rewardswp' ); ?></span>
											</div>
										</div>
										<div class="ml-4 flex items-center space-x-4 self-center">
										<?php
										echo wp_kses(
											get_view_component(
												'button',
												[
													'text'  => esc_html__( 'Manage in Referrals', 'rewardswp' ),
													'type'  => 'button',
													'style' => 'secondary',
													'size'  => 'sm',
													'click' => '$event.stopPropagation(); Alpine.store(\'drawer\').close(); window.dispatchEvent(new CustomEvent(\'rewardswp:change-tab\', { detail: { tab: \'referrals\', openAdvocateDrawer: true } }))',
												]
											),
											kses()
										);
										?>
										</div>
									</div>
								</template>

								<!-- Regular Earn Action Card -->
								<template x-if="!action.isMirror">
									<div class="earn-action-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="action.id"
										x-bind:class="{ 'opacity-50': !action.enabled }"
										x-on:click="editEarnAction(action)">
										<!-- Drag Handle -->
										<div class="earn-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="getActionIcon(action.icon)"></span>
										</div>
										<div class="flex-1 min-w-0">
											<h4 class="text-sm font-medium text-gray-900" x-text="action.title"></h4>
											<p class="mt-1 text-sm text-gray-600" x-text="getActionDetails(action)"></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(); editEarnAction(action)',
													]
												),
												kses()
											);
											?>

											<!-- Toggle Component Wrapper -->
											<div x-data="{ isEnabled: action.enabled }" x-effect="isEnabled = action.enabled">
												<?php
												// Toggle Component.
												// Use local isEnabled state synced with action.enabled via x-effect.
												echo wp_kses(
													get_view_component(
														'toggle',
														[
															'section' => 'points',
															'name' => '',
															'x-bind:id' => '`rewardswp_settings_earn_toggle_${action.id}`',
															'x_model' => 'isEnabled',
															'no_input' => true,
															'button_align' => 'right',
															'x-on:click' => '$event.stopPropagation(); toggleActionStatus(action.id)',
														]
													),
													kses()
												);
												?>
											</div>
										</div>
									</div>
								</template>
							</div>
						</template>
					</div>

			<!-- Empty state -->
			<div x-show="Object.keys($store.earnActions.enabled).length === 0 && !$store.earnActions.shouldShowReferralMirror()" 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 earn yet', 'rewardswp' ); ?>
				</h3>
				<p class="text-gray-600">
					<?php esc_html_e( 'Click "Add ways to earn" to get started', 'rewardswp' ); ?>
				</p>
			</div>
					</div>
				</div>
			</div>

			<!-- Hidden inputs for form submission -->
			<div style="display: none;">
				<template x-for="(action, type) in $store.earnActions.enabled" x-bind:key="type">
					<div>
						<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][id]`" x-bind:value="type || ''">
						<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][enabled]`" x-bind:value="action.enabled === true ? '1' : '0'">
						<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][configured]`" x-bind:value="action.configured === true ? '1' : '0'">
						<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][title]`" x-bind:value="action.title || ''">
						<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][order]`" x-bind:value="action.order || 0">

						<!-- Different fields based on action type -->
						<template x-if="type === 'purchase'">
							<div>
								<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][points_per_dollar]`" x-bind:value="action.points_per_dollar">
								<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][base_amount]`" x-bind:value="action.base_amount || ''">
							</div>
						</template>
						<template x-if="type === 'signup'">
							<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][points]`" x-bind:value="action.points">
						</template>
						<template x-if="type === 'referral'">
							<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][points]`" x-bind:value="action.points">
						</template>
						<template x-if="type === 'product_review'">
							<div>
								<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][points]`" x-bind:value="action.points">
								<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][verified_buyer_only]`" x-bind:value="action.verified_buyer_only === true ? '1' : '0'">
							</div>
						</template>
						<template x-if="type === 'first_order'">
							<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][points]`" x-bind:value="action.points">
						</template>
						<template x-if="type === 'birthday'">
							<input type="hidden" x-bind:name="`rewardswp_settings[points][earn_actions][${type}][points]`" x-bind:value="action.points">
						</template>
					</div>
				</template>
				<!-- Hidden input for referral mirror card order -->
				<input type="hidden" name="rewardswp_settings[points][referral_mirror_order]" x-bind:value="$store.earnActions.referralOrder">
			</div>
		</div>
		<?php
		return ob_get_clean();
	}

	/**
	 * Get the drawer content for earn 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;
		$earn_actions_option = get_option_object( EarnActionsOption::class );

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

		<div x-show="$store.drawer.type === 'earn'" class="relative h-full">
		<!-- List View -->
			<div x-show="$store.drawer.type === 'earn' && $store.drawer.view === 'list'">
				<div class="space-y-3">
					<?php foreach ( $action_definitions as $action_id => $action ) : ?>
						<?php
						// Show PRO badge when user cannot access the feature.
						$feature_slug        = $action['feature_slug'] ?? '';
						$is_upgrade_required = ! empty( $feature_slug ) && ! can_access_rewardswp_feature( $feature_slug );
						$icon_markup         = wp_kses( $icon_helper->get_icon( $action['icon'], 'w-8 h-8' ), svg_kses() );
						?>
						<button type="button"
						x-on:click="!$store.earnActions.isAdded('<?php echo esc_js( $action_id ); ?>') && $dispatch('select-earn-action', { actionType: '<?php echo esc_js( $action_id ); ?>', actionDefaults: <?php echo esc_attr( wp_json_encode( $action ) ); ?> })"
						x-bind:class="{ 'opacity-70 bg-gray-50 cursor-not-allowed': $store.earnActions.isAdded('<?php echo esc_js( $action_id ); ?>'), 'hover:bg-gray-50 cursor-pointer': !$store.earnActions.isAdded('<?php echo esc_js( $action_id ); ?>') }"
						x-bind:title="$store.earnActions.isAdded('<?php echo esc_js( $action_id ); ?>') ? '<?php echo esc_attr__( 'Already added. Click the Edit button on the card in your list to configure.', 'rewardswp' ); ?>' : ''"
						class="w-full text-left p-4 rounded-lg border border-gray-200 transition-all relative">
						<!-- Added Badge (corner ribbon) -->
						<div x-show="$store.earnActions.isAdded('<?php echo esc_js( $action_id ); ?>')" class="absolute top-0 right-0 flex items-center gap-1.5 px-3 py-1.5 bg-green-600 text-white text-xs font-medium rounded-bl-lg rounded-tr-lg shadow-sm">
							<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
								<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
							</svg>
							<span><?php esc_html_e( 'Added', 'rewardswp' ); ?></span>
						</div>
							<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 pr-16">
									<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-600">
										<?php echo esc_html( $action['description'] ); ?>
									</p>
								</div>
							</div>
						</button>
					<?php endforeach; ?>
				</div>
			</div>

			<!-- Config View -->
			<div x-show="$store.drawer.type === 'earn' && $store.drawer.view === 'config'" class="h-full">
			<!-- Back to actions button - only show when adding new action -->
			<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 actions', 'rewardswp' ); ?>
					</button>
				</div>

				<div>
					<!-- Purchase Action -->
				<template x-if="$store.drawer.selectedAction?.id === 'purchase'">
					<div class="divide-y divide-gray-200 space-y-3"
						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 earning action.', '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>

								<!-- Earning rate -->
								<div class="py-5 pt-0">
									<div>
										<label class="text-sm font-medium text-gray-900">
											<?php esc_html_e( 'Earning rate', 'rewardswp' ); ?>
										</label>
										<div class="mt-3 flex flex-wrap items-center gap-2 text-sm text-gray-700">
											<div class="w-20">
												<label for="drawer_earn_purchase_points_per_dollar" class="sr-only">
													<?php esc_html_e( 'Points', 'rewardswp' ); ?>
												</label>
												<?php
												echo wp_kses(
													get_view_component(
														'number',
														[
															'id'            => 'drawer_earn_purchase_points_per_dollar',
															'x-model'       => '$store.drawer.selectedAction.points_per_dollar',
															'integers_only' => true,
															'min'           => '1',
															'width'         => 'w-full',
														]
													),
													kses()
												);
												?>
											</div>
											<span aria-hidden="true"><?php esc_html_e( 'points per', 'rewardswp' ); ?></span>
											<div class="w-28">
												<label for="drawer_earn_purchase_base_amount" class="sr-only">
													<?php esc_html_e( 'Spend amount', 'rewardswp' ); ?>
												</label>
												<?php
												echo wp_kses(
													get_view_component(
														'amount',
														[
															'name'        => 'drawer_earn_purchase_base_amount',
															'id'          => 'drawer_earn_purchase_base_amount',
															'x-model'     => '$store.drawer.selectedAction.base_amount',
															'type'        => 'currency',
															'placeholder' => number_format( get_default_points_base_amount() ),
															'width'       => 'w-full',
														]
													),
													kses()
												);
												?>
											</div>
											<span aria-hidden="true"><?php esc_html_e( 'spent', 'rewardswp' ); ?></span>
										</div>
										<p class="mt-2 text-xs text-gray-500">
											<?php esc_html_e( 'Points are calculated from the order subtotal (excluding tax and shipping) and rounded down.', 'rewardswp' ); ?>
										</p>
									</div>
								</div>




					</div>
				</template>

					<!-- Signup Action -->
					<template x-if="$store.drawer.selectedAction?.id === 'signup'">
						<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 earning action.', '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 for Signup -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-center">
									<div class="md:w-2/4 flex-none">
										<label for="drawer_earn_signup_points" class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Points to award', 'rewardswp' ); ?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'How many points members earn when they create an account.', 'rewardswp' ); ?>
										</p>
								</div>
								<div class="md:w-2/4">
									<div class="mt-2 md:mt-0 sm:max-w-xs">
										<?php
										echo wp_kses(
											get_view_component(
												'number',
												[
													'id'  => 'drawer_earn_signup_points',
													'x-model' => '$store.drawer.selectedAction.points',
													'integers_only' => true,
													'min' => '1',
													'width' => 'w-full',
												]
											),
											kses()
										);
										?>
									</div>
								</div>
								</div>
							</div>
						</div>
					</template>

					<!-- Referral Action -->
					<template x-if="$store.drawer.selectedAction?.id === 'referral'">
						<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 earning action.', '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 completed referral -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-center">
									<div class="md:w-2/4 flex-none">
										<label for="drawer_earn_referral_points" class="text-sm font-medium text-gray-900">
												<?php esc_html_e( 'Points per completed referral', 'rewardswp' ); ?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
												<?php esc_html_e( 'Reward members when a referred friend completes the required action.', 'rewardswp' ); ?>
										</p>
								</div>
								<div class="md:w-2/4">
									<div class="mt-2 md:mt-0 sm:max-w-xs">
										<?php
										echo wp_kses(
											get_view_component(
												'number',
												[
													'id'  => 'drawer_earn_referral_points',
													'x-model' => '$store.drawer.selectedAction.points',
													'integers_only' => true,
													'min' => '1',
													'width' => 'w-full',
												]
											),
											kses()
										);
										?>
									</div>
								</div>
								</div>
							</div>


						</div>
					</template>

				<!-- Product Review Action -->
				<template x-if="$store.drawer.selectedAction?.id === 'product_review'">
					<div class="divide-y divide-gray-200"
						x-bind:class="{ 'blur-xs pointer-events-none': $store.earnActions.scriptData.isEdd && $store.earnActions.scriptData.eddReviewsStatus !== 'active' }"
						x-bind:inert="$store.earnActions.scriptData.isEdd && $store.earnActions.scriptData.eddReviewsStatus !== 'active'">
							<!-- 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 earning action.', '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>

							<div class="py-5">
								<div class="gap-8 md:flex md:items-center">
									<div class="md:w-2/4 flex-none">
										<label for="drawer_earn_product_review_points" class="text-sm font-medium text-gray-900">
											<?php esc_html_e( 'Points per approved review', 'rewardswp' ); ?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'Award members when their product review is approved.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
										<div class="mt-2 md:mt-0 sm:max-w-xs">
											<?php
											echo wp_kses(
												get_view_component(
													'number',
													[
														'id'            => 'drawer_earn_product_review_points',
														'x-model'       => '$store.drawer.selectedAction.points',
														'integers_only' => true,
														'min'           => '1',
														'width'         => 'w-full',
													]
												),
												kses()
											);
											?>
										</div>
									</div>
								</div>
							</div>
							<div class="py-5">
								<div class="gap-8 md:flex md:items-start">
									<div class="md:w-2/4 flex-none">
										<span class="text-sm font-medium text-gray-900">
											<?php esc_html_e( 'Verified buyers only', 'rewardswp' ); ?>
										</span>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'Limit rewards to members who purchased the product.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
										<div class="mt-2 md:mt-0 flex items-center space-x-3">
											<?php
											echo wp_kses(
												get_view_component(
													'toggle',
													[
														'no_input' => true,
														'x_model'  => '$store.drawer.selectedAction.verified_buyer_only',
														'label'    => esc_html__( 'Only issue points to verified buyers', 'rewardswp' ),
													]
												),
												kses()
											);
											?>
										</div>
									</div>
								</div>
							</div>

						</div>
					</template>

					<!-- EDD Reviews Extension Requirement Overlay -->
					<?php
					echo wp_kses(
						get_view_component(
							'drawer-requirement',
							[
								'icon_name' => 'earn-review',
								'x_show'    => "\$store.drawer.selectedAction?.id === 'product_review' && \$store.earnActions.scriptData.isEdd && \$store.earnActions.scriptData.eddReviewsStatus !== 'active'",
								'messages'  => [
									[
										'condition'       => "\$store.earnActions.scriptData.eddReviewsStatus === 'not_installed'",
										'title'           => __( 'EDD Reviews Extension Required', 'rewardswp' ),
										'description'     => __( 'To reward members for product reviews, you need to install and activate the EDD Reviews extension.', 'rewardswp' ),
										'button_text'     => __( 'Get EDD Reviews', 'rewardswp' ),
										'button_url'      => add_utm_params( 'https://easydigitaldownloads.com/downloads/product-reviews/', 'rewardswp', 'drawer', 'addon', 'product_review_earn_action' ),
										'button_target'   => '_blank',
										'button_external' => true,
									],
									[
										'condition'   => "\$store.earnActions.scriptData.eddReviewsStatus === 'installed'",
										'title'       => __( 'Activate EDD Reviews Extension', 'rewardswp' ),
										'description' => __( 'EDD Reviews is installed but not active. Activate the plugin to enable review rewards for your members.', 'rewardswp' ),
										'button_text' => __( 'Go to Plugins', 'rewardswp' ),
										'button_url'  => admin_url( 'plugins.php' ),
									],
								],
							]
						),
						kses()
					);
					?>

					<!-- First Purchase Bonus Action -->
					<template x-if="$store.drawer.selectedAction?.id === 'first_order'">
						<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 earning action.', '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 for First Purchase -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-center">
									<div class="md:w-2/4 flex-none">
										<label for="drawer_earn_first_order_points" class="text-sm font-medium text-gray-900">
											<?php esc_html_e( 'Points to award', 'rewardswp' ); ?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'Reward new members with bonus points after their first order.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
										<div class="mt-2 md:mt-0 sm:max-w-xs">
											<?php
											echo wp_kses(
												get_view_component(
													'number',
													[
														'id'            => 'drawer_earn_first_order_points',
														'x-model'       => '$store.drawer.selectedAction.points',
														'integers_only' => true,
														'min'           => '1',
														'width'         => 'w-full',
													]
												),
												kses()
											);
											?>
										</div>
									</div>
								</div>
							</div>

						</div>
					</template>

					<!-- Birthday Bonus Action -->
					<template x-if="$store.drawer.selectedAction?.id === 'birthday'">
						<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 earning action.', '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 for Birthday -->
							<div class="py-5">
								<div class="gap-8 md:flex md:items-center">
									<div class="md:w-2/4 flex-none">
										<label for="drawer_earn_birthday_points" class="text-sm font-medium text-gray-900">
											<?php esc_html_e( 'Points to award', 'rewardswp' ); ?>
										</label>
										<p class="mt-1 text-xs text-gray-500">
											<?php esc_html_e( 'Bonus points members receive on their birthday each year.', 'rewardswp' ); ?>
										</p>
									</div>
									<div class="md:w-2/4">
										<div class="mt-2 md:mt-0 sm:max-w-xs">
											<?php
											echo wp_kses(
												get_view_component(
													'number',
													[
														'id'            => 'drawer_earn_birthday_points',
														'x-model'       => '$store.drawer.selectedAction.points',
														'integers_only' => true,
														'min'           => '1',
														'width'         => 'w-full',
													]
												),
												kses()
											);
											?>
										</div>
									</div>
								</div>
							</div>

						</div>
					</template>
				</div>
			</div>

			<!-- Birthday Bonus Upgrade Overlay -->
			<?php
			// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Component handles its own sanitization
			echo get_view_component(
				'upgrade-overlay',
				[
					'icon_name'    => 'earn-birthday',
					'title'        => __( 'Birthday bonus', 'rewardswp' ),
					'description'  => __( 'Collect member birthdays and automatically reward them with bonus points each year.', 'rewardswp' ),
					'feature_slug' => 'earn_birthday',
					'feature_name' => __( 'Birthday bonus', 'rewardswp' ),
					'overlay'      => true,
					'x_show'       => "\$store.drawer.type === 'earn' && \$store.drawer.isUpgrade && \$store.drawer.selectedAction?.id === 'birthday'",
				]
			);
			?>

			</div>

			<?php
		};
	}
}
