<?php
/**
 * Points branding 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\Helpers\IconHelper;
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_view_component;
use function Awesomemotive\Rewardswp\Helpers\kses;
use function Awesomemotive\Rewardswp\Helpers\svg_kses;

/**
 * Class PointsBrandingContentView
 *
 * @since 1.1.0
 */
class PointsBrandingContentView extends AbstractView implements ViewInterface {

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

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

	/**
	 * Render the template.
	 *
	 * @since 1.1.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		// Tooltip content for Points Currency
		$points_currency_tooltip = sprintf(
			'<p>%s</p><p class="mt-2"><a href="https://rewardswp.com/docs/points-branding" target="_blank" class="text-blue-500 underline">%s &rarr;</a></p>',
			esc_html__( 'Rename your points to match your brand (e.g., Coins, Credits, Stars). This helps create a unique identity for your rewards program.', 'rewardswp' ),
			esc_html__( 'Learn more', 'rewardswp' )
		);
		?>

		<!-- Points Branding 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( 'Manage how your points are presented to members.', '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( 'Points Currency', 'rewardswp' ); ?>
							<template x-if="!$store.config.hasProFeatures">
										<?php
										echo wp_kses(
											get_view_component(
												'badge',
												[
													'style' => 'pro',
												]
											),
											kses()
										);
										?>
									</template>
									<?php
									/*
									<span
										class="flex items-center justify-center size-5 text-xs bg-gray-200 rounded-full cursor-help"
										data-tippy-content="<?php echo esc_attr( $points_currency_tooltip ); ?>"
									>?</span>
									*/
									?>
								</h3>
								<p class="mt-2 text-sm text-gray-500">
									<?php esc_html_e( 'Customize your points currency name to match your brand. Give your points a unique identity that resonates with your members.', 'rewardswp' ); ?>
								</p>
					</div>

					<div>
						<template x-if="!$store.config.hasProFeatures">
							<div class="space-y-4">
										<!-- Plural Field (Lite) -->
										<div class="flex flex-col">
											<label for="rewardswp_settings_points_branding_plural_disabled" class="text-sm font-medium text-gray-700 mb-1.5">
												<?php esc_html_e( 'Plural', 'rewardswp' ); ?>
											</label>
											<div
												class="grid grid-cols-1 w-full sm:max-w-xs cursor-pointer"
												x-on:click="$dispatch('show-upgrade-modal', 'points_branding')"
											>
												<input
													type="text"
													id="rewardswp_settings_points_branding_plural_disabled"
													value="<?php esc_attr_e( 'Points', 'rewardswp' ); ?>"
													disabled
													readonly
													class="block w-full bg-gray-50 col-start-1 row-start-1 px-3 py-2 rounded-md text-base sm:text-sm/6 outline-1 -outline-offset-1 outline-gray-300 text-gray-500 pointer-events-none opacity-60"
													placeholder="<?php esc_attr_e( 'Points', 'rewardswp' ); ?>"
												>
											</div>
											<p class="text-sm text-gray-500 mt-1.5"><?php esc_html_e( 'E.g. You\'ve earned 10 Points!', 'rewardswp' ); ?></p>
										</div>

										<!-- Singular Field (Lite) -->
										<div class="flex flex-col">
											<label for="rewardswp_settings_points_branding_singular_disabled" class="text-sm font-medium text-gray-700 mb-1.5">
												<?php esc_html_e( 'Singular', 'rewardswp' ); ?>
											</label>
											<div
												class="grid grid-cols-1 w-full sm:max-w-xs cursor-pointer"
												x-on:click="$dispatch('show-upgrade-modal', 'points_branding')"
											>
												<input
													type="text"
													id="rewardswp_settings_points_branding_singular_disabled"
													value="<?php esc_attr_e( 'Point', 'rewardswp' ); ?>"
													disabled
													readonly
													class="block w-full bg-gray-50 col-start-1 row-start-1 px-3 py-2 rounded-md text-base sm:text-sm/6 outline-1 -outline-offset-1 outline-gray-300 text-gray-500 pointer-events-none opacity-60"
													placeholder="<?php esc_attr_e( 'Point', 'rewardswp' ); ?>"
												>
											</div>
											<p class="text-sm text-gray-500 mt-1.5"><?php esc_html_e( 'E.g. You\'ve earned 1 Point!', '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_branding', get_upgrade_url( 'customize_points_currency', 'settings', get_minimum_required_plan_for_feature( 'points_branding' ), 'points_branding' ) ) ); ?>"
												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 customize points currency', 'rewardswp' ); ?>
											<?php echo wp_kses( $this->icon_helper->get_icon( 'external-link', 'h-4 w-4' ), svg_kses() ); ?>
											</a>
										</p>
									</div>
								</template>

								<template x-if="$store.config.hasProFeatures">
									<div class="space-y-4">
										<!-- Plural Field (Pro) -->
										<div class="flex flex-col">
											<label for="rewardswp_settings[points][currency_plural]" class="text-sm font-medium text-gray-700 mb-1.5">
												<?php esc_html_e( 'Plural', 'rewardswp' ); ?>
											</label>
											<div class="grid grid-cols-1 w-full sm:max-w-xs">
												<input
													type="text"
													id="rewardswp_settings[points][currency_plural]"
													name="rewardswp_settings[points][currency_plural]"
													x-model="pointsCustomPlural"
													class="block w-full bg-white px-3 py-2 rounded-md text-base sm:text-sm/6 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:outline-blue-600"
													placeholder="<?php esc_attr_e( 'e.g., Coins', 'rewardswp' ); ?>"
												>
											</div>
											<p class="text-sm text-gray-500 mt-1.5">
												<?php esc_html_e( 'E.g.', 'rewardswp' ); ?>
												<span x-text="'<?php
													/* translators: %s: currency name plural (e.g., "Points") */
													echo esc_js( __( "You've earned 10 %s!", 'rewardswp' ) ); ?>'.replace('%s', pointsCustomPlural || '<?php echo esc_js( __( 'Points', 'rewardswp' ) ); ?>')"></span>
											</p>
										</div>

										<!-- Singular Field (Pro) -->
										<div class="flex flex-col">
											<label for="rewardswp_settings[points][currency_singular]" class="text-sm font-medium text-gray-700 mb-1.5">
												<?php esc_html_e( 'Singular', 'rewardswp' ); ?>
											</label>
											<div class="grid grid-cols-1 w-full sm:max-w-xs">
												<input
													type="text"
													id="rewardswp_settings[points][currency_singular]"
													name="rewardswp_settings[points][currency_singular]"
													x-model="pointsCustomSingular"
													class="block w-full bg-white px-3 py-2 rounded-md text-base sm:text-sm/6 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:outline-blue-600"
													placeholder="<?php esc_attr_e( 'e.g., Coin', 'rewardswp' ); ?>"
												>
											</div>
											<p class="text-sm text-gray-500 mt-1.5">
												<?php esc_html_e( 'E.g.', 'rewardswp' ); ?>
												<span x-text="'<?php
													/* translators: %s: currency name singular (e.g., "Point") */
													echo esc_js( __( "You've earned 1 %s!", 'rewardswp' ) ); ?>'.replace('%s', pointsCustomSingular || '<?php echo esc_js( __( 'Point', 'rewardswp' ) ); ?>')"></span>
											</p>
										</div>
									</div>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<?php
	}
}
