<?php
/**
 * Points expiry content 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\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Settings\Options\Points\PointsExpirationOption;
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_option_value;
use function Awesomemotive\Rewardswp\Helpers\get_view_component;
use function Awesomemotive\Rewardswp\Helpers\kses;

/**
 * Class PointsExpiryContentView
 *
 * @since 1.0.0
 */
class PointsExpiryContentView extends AbstractView implements ViewInterface {

	/**
	 * Render the template.
	 *
	 * @since 1.0.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		?>

		<!-- Points Expiry Section Content -->
		<div class="py-5">
			<div class="gap-8 md:flex md:items-start">
				<div class="md:w-1/3 flex-none">
					<p class="text-sm text-gray-500">
						<?php esc_html_e( 'Control how long points remain available so you can encourage timely redemptions and future expiry options.', 'rewardswp' ); ?>
					</p>
				</div>
				<div class="md:w-2/3">
					<div class="bg-white border border-gray-200 rounded-lg p-6">
						<div class="space-y-6">
							<div>
						<h3 class="text-sm font-semibold text-gray-900 flex items-center gap-2">
							<?php esc_html_e( 'Expiration Period', 'rewardswp' ); ?>
							<template x-if="!$store.config.hasProFeatures">
										<?php
										echo wp_kses(
											get_view_component(
												'badge',
												[
													'style' => 'pro',
												]
											),
											kses()
										);
										?>
									</template>
								</h3>
								<p class="mt-2 text-sm text-gray-500">
									<?php esc_html_e( 'Drive customer urgency and engagement by automatically expiring points after a set period.', 'rewardswp' ); ?>
								</p>
					</div>

					<div>
						<template x-if="!$store.config.hasProFeatures">
							<div class="space-y-4">
										<!-- Expiration Period Field (Lite) -->
										<div class="flex flex-col">
											<?php
											echo wp_kses(
												get_view_component(
													'select',
													[
														'section'     => 'points',
														'name'        => 'points_expiration_disabled',
														'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' ),
														],
														'selected'    => 'never',
														'disabled'    => true,
														'x-on:click'  => "\$event.preventDefault(); \$dispatch('show-upgrade-modal', 'points_expiry')",
													]
												),
												kses()
											);
											?>
											<p class="text-sm text-gray-500 mt-1.5"><?php esc_html_e( 'Points will automatically expire and become unavailable for redemption after this period', 'rewardswp' ); ?></p>
										</div>

										<!-- Upsell link -->
										<p class="text-sm text-gray-600 mt-3">
											<a
												href="<?php echo esc_url( add_query_arg( 'feature', 'points_expiry', get_upgrade_url( 'set_points_expiration', 'settings', get_minimum_required_plan_for_feature( 'points_expiry' ), 'points_expiry' ) ) ); ?>"
												target="_blank"
												rel="noopener noreferrer"
												class="inline-flex items-center gap-1.5 text-blue-600 hover:text-blue-700"
											>
											<?php esc_html_e( 'Upgrade to set points expiration', 'rewardswp' ); ?>
											<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
												<path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
											</svg>
											</a>
										</p>
									</div>
								</template>

								<template x-if="$store.config.hasProFeatures">
									<div class="space-y-4">
										<!-- Expiration Period Field (Pro) -->
										<div class="flex flex-col">
											<?php
											echo wp_kses(
												get_view_component(
													'select',
													[
														'section'  => 'points',
														'name'     => 'points_expiration',
														'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' ),
														],
														'selected' => get_option_value( PointsExpirationOption::class ),
													]
												),
												kses()
											);
											?>
											<p class="text-sm text-gray-500 mt-1.5"><?php esc_html_e( 'Points will automatically expire and become unavailable for redemption after this period', 'rewardswp' ); ?></p>
										</div>
									</div>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<?php
	}
}
