<?php
/**
 * Rewards widget general 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\Factories\OptionsFactory;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use Awesomemotive\Rewardswp\Settings\Options\General\BrandColorOption;
use Awesomemotive\Rewardswp\Settings\Options\RewardsWidget\BrandForegroundModeOption;
use Awesomemotive\Rewardswp\Settings\Options\RewardsWidget\ProgramNameOption;
use Awesomemotive\Rewardswp\Settings\Options\RewardsWidget\WelcomeHeadingOption;
use function Awesomemotive\Rewardswp\Helpers\get_option_value;
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\has_rewardswp_plan_level;

class RewardsWidgetGeneralContentView extends AbstractView implements ViewInterface {
	/**
	 * Options factory instance.
	 *
	 * @since 1.0.0
	 *
	 * @var OptionsFactory
	 */
	private OptionsFactory $options_factory;

	/**
	 * Constructor.
	 *
	 * @since 1.0.0
	 *
	 * @param OptionsFactory $options_factory
	 */
	public function __construct( OptionsFactory $options_factory ) {
		$this->options_factory = $options_factory;
	}

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

		$brand_color_option           = $this->options_factory->get_option( BrandColorOption::class );
		$brand_foreground_mode_option = $this->options_factory->get_option( BrandForegroundModeOption::class );
		$can_override_foreground      = has_rewardswp_plan_level( 'basic' );

		?>

		<div class="divide-y divide-gray-200">

			<div class="py-5">
				<div
					x-data="brandColorPicker({
						initialColor: '<?php echo esc_attr( $brand_color_option->get_value() ); ?>',
						defaultColor: '<?php echo esc_attr( $brand_color_option->get_default_value() ); ?>',
						initialMode: '<?php echo esc_attr( $brand_foreground_mode_option->get_value() ); ?>'
					})"
					class="space-y-5"
				>
					<?php // Brand Color Row. ?>
					<div class="gap-8 md:flex md:items-center">
						<div class="md:w-1/3 flex-none">
							<label for="brand_color" class="text-sm font-semibold"><?php esc_html_e( 'Brand color', 'rewardswp' ); ?></label>
						</div>
						<div class="md:w-2/3 flex items-center gap-3">
							<?php
							echo wp_kses(
								get_view_component(
									'color-picker',
									[
										'section' => 'general',
										'name'    => 'brand_color',
										'x-model' => 'color',
									]
								),
								kses()
							);
							?>
							<input
								type="hidden"
								name="rewardswp_settings[rewards_widget][brand_foreground_color]"
								x-bind:value="brandForegroundColor"
							/>
						</div>
					</div>

					<?php // Brand Foreground Mode Row (Basic+ only). ?>
					<div class="gap-8 md:flex md:items-start">
						<div class="md:w-1/3 flex-none">
							<label class="text-sm font-semibold"><?php esc_html_e( 'Text & icons on brand color', 'rewardswp' ); ?></label>
							<p class="mt-1 text-xs text-gray-500">
								<?php esc_html_e( 'Controls button text, launcher icon, and header text', 'rewardswp' ); ?>
							</p>
						</div>
						<div class="md:w-2/3 mt-2 md:mt-0">
							<div class="flex items-center gap-4">
								<?php if ( $can_override_foreground ) : ?>
									<?php // Segmented control for Basic+. ?>
									<div class="relative inline-flex items-center h-9 p-1 text-gray-500 bg-gray-100 rounded-lg select-none">
										<input
											type="hidden"
											name="rewardswp_settings[rewards_widget][brand_foreground_mode]"
											x-bind:value="brandForegroundMode"
										/>
										<button
											x-ref="autoButton"
											x-on:click="setMode('auto'); positionFgMarker();"
											type="button"
											class="relative z-20 inline-flex items-center justify-center h-7 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap"
											x-bind:class="brandForegroundMode === 'auto' ? 'text-gray-900' : 'text-gray-600 hover:text-gray-900'"
										><?php esc_html_e( 'Auto', 'rewardswp' ); ?></button>
										<button
											x-ref="lightButton"
											x-on:click="setMode('light'); positionFgMarker();"
											type="button"
											class="relative z-20 inline-flex items-center justify-center h-7 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap"
											x-bind:class="brandForegroundMode === 'light' ? 'text-gray-900' : 'text-gray-600 hover:text-gray-900'"
										><?php esc_html_e( 'Light', 'rewardswp' ); ?></button>
										<button
											x-ref="darkButton"
											x-on:click="setMode('dark'); positionFgMarker();"
											type="button"
											class="relative z-20 inline-flex items-center justify-center h-7 px-3 text-sm font-medium transition-all rounded-md cursor-pointer whitespace-nowrap"
											x-bind:class="brandForegroundMode === 'dark' ? 'text-gray-900' : 'text-gray-600 hover:text-gray-900'"
										><?php esc_html_e( 'Dark', 'rewardswp' ); ?></button>
										<div
											x-ref="fgMarker"
											class="absolute z-10 duration-200 ease-out bg-white rounded-md top-1"
											style="height: 28px;"
										></div>
									</div>
								<?php else : ?>
									<?php // Segmented control with locked Light/Dark for Lite users. ?>
									<?php // No hidden input - preserve existing DB value when downgraded from Basic. ?>
									<div
										x-on:click="$dispatch('show-upgrade-modal', 'brand_foreground_mode')"
										class="relative inline-flex items-center h-9 p-1 text-gray-500 bg-gray-100 rounded-lg select-none cursor-pointer"
									>
										<?php // Auto button (selected). ?>
										<div class="relative z-20 inline-flex items-center justify-center h-7 px-3 text-sm font-medium rounded-md bg-white text-gray-900">
											<?php esc_html_e( 'Auto', 'rewardswp' ); ?>
										</div>
										<?php // Light button (locked). ?>
										<div class="relative z-20 inline-flex items-center justify-center gap-1 h-7 px-3 text-sm font-medium text-gray-400 cursor-not-allowed">
											<?php esc_html_e( 'Light', 'rewardswp' ); ?>
											<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 14 14">
												<path fill-rule="evenodd" d="M6.99997 2c-1.10457 0-2 0.89543-2 2v1h4V4c0-1.10457-0.89543-2-2-2Zm-4 2v1H2.5C1.67157 5 1 5.67157 1 6.5v6c0 0.8284 0.67157 1.5 1.5 1.5h9c0.8284 0 1.5-0.6716 1.5-1.5v-6c0-0.82843-0.6716-1.5-1.5-1.5H11V4c0-2.20914-1.79089-4-4.00003-4-2.20914 0-4 1.79086-4 4Z" clip-rule="evenodd"/>
											</svg>
										</div>
										<?php // Dark button (locked). ?>
										<div class="relative z-20 inline-flex items-center justify-center gap-1 h-7 px-3 text-sm font-medium text-gray-400 cursor-not-allowed">
											<?php esc_html_e( 'Dark', 'rewardswp' ); ?>
											<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 14 14">
												<path fill-rule="evenodd" d="M6.99997 2c-1.10457 0-2 0.89543-2 2v1h4V4c0-1.10457-0.89543-2-2-2Zm-4 2v1H2.5C1.67157 5 1 5.67157 1 6.5v6c0 0.8284 0.67157 1.5 1.5 1.5h9c0.8284 0 1.5-0.6716 1.5-1.5v-6c0-0.82843-0.6716-1.5-1.5-1.5H11V4c0-2.20914-1.79089-4-4.00003-4-2.20914 0-4 1.79086-4 4Z" clip-rule="evenodd"/>
											</svg>
										</div>
									</div>
								<?php endif; ?>

								<?php // Preview swatch showing text on brand. ?>
								<div
									class="flex items-center justify-center w-10 h-10 rounded-lg text-sm font-bold"
									x-bind:style="'background-color: ' + color + '; color: ' + brandForegroundColor"
									title="<?php esc_attr_e( 'Preview', 'rewardswp' ); ?>"
								>
									Aa
								</div>

								<?php // Low contrast warning icon with tooltip. ?>
								<?php if ( $can_override_foreground ) : ?>
								<div
									x-ref="contrastWarning"
									x-show="isLowContrast && brandForegroundMode !== 'auto'"
									x-transition
								>
									<svg class="w-5 h-5 text-amber-500 cursor-help" fill="none" viewBox="0 0 24 24" stroke="currentColor">
										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
									</svg>
								</div>
								<?php endif; ?>
							</div>

							<?php // Upgrade CTA for Lite users. ?>
							<?php if ( ! $can_override_foreground ) : ?>
								<p class="text-sm text-gray-600 mt-3">
									<a
										href="<?php echo esc_url( get_upgrade_url( 'customize_foreground_mode', 'rewards-widget-settings', 'Basic', 'brand_foreground_mode' ) ); ?>"
										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', 'rewardswp' ); ?>
										<svg class="w-4 h-4" 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>
								</p>
							<?php endif; ?>
						</div>
					</div>
				</div>
			</div>

			<div class="py-5">
				<div class="gap-8 md:flex md:items-start">
					<div class="md:w-1/3 flex-none">
						<label for="rewardswp_settings[rewards_widget][welcome_heading]" class="text-sm font-semibold">
							<?php esc_html_e( 'Welcome heading', 'rewardswp' ); ?>
						</label>
						<p class="mt-2 text-xs text-gray-500">
							<?php esc_html_e( 'The welcome message shown in the panel header', 'rewardswp' ); ?>
						</p>
					</div>
					<div class="md:w-2/3">
						<div class="flex flex-col mt-2 xs:mt-0">
							<?php
							echo wp_kses(
								get_view_component(
									'input',
									[
										'section'     => 'rewards_widget',
										'name'        => 'welcome_heading',
										'id'          => 'rewardswp_settings[rewards_widget][welcome_heading]',
										'value'       => get_option_value( WelcomeHeadingOption::class ),
										'x-model'     => 'welcomeGreeting',
										'x-on:input'  => '$dispatch(\'setting-updated\', { key: \'welcome_heading\', value: $event.target.value })',
										'x-on:focus'  => '$dispatch(\'setting-updated\', { key: \'welcome_heading\', value: $event.target.value })',
										'placeholder' => esc_attr__( 'Welcome to', 'rewardswp' ),
									]
								),
								kses()
							);
							?>
						</div>
					</div>
				</div>
			</div>

			<div class="py-5">
				<div class="gap-8 md:flex md:items-start">
					<div class="md:w-1/3 flex-none">
						<label for="rewardswp_settings[rewards_widget][program_name]" class="text-sm font-semibold">
							<?php esc_html_e( 'Program name', 'rewardswp' ); ?>
						</label>
						<p class="mt-2 text-xs text-gray-500">
							<?php esc_html_e( 'The name of your rewards program', 'rewardswp' ); ?>
						</p>
					</div>
					<div class="md:w-2/3">
						<div
							x-data="{
								errorMessage: '',
								validate(value) {
									if (!value.trim()) {
										this.errorMessage = '<?php esc_html_e( 'Program name cannot be empty.', 'rewardswp' ); ?>';
										setFieldError('program_name', this.errorMessage);
									} else {
										this.errorMessage = '';
										clearFieldError('program_name');
									}
								}
							}"
							x-init="validate(programName)"
							class="flex flex-col mt-2 xs:mt-0"
						>
							<?php
							echo wp_kses(
								get_view_component(
									'input',
									[
										'section'     => 'rewards_widget',
										'name'        => 'program_name',
										'id'          => 'rewardswp_settings[rewards_widget][program_name]',
										'value'       => get_option_value( ProgramNameOption::class ),
										'x-model'     => 'programName',
										'x-on:input'  => 'validate($event.target.value); $dispatch(\'setting-updated\', { key: \'program_name\', value: $event.target.value })',
										'x-on:focus'  => '$dispatch(\'setting-updated\', { key: \'program_name\', value: $event.target.value })',
										'placeholder' => esc_attr__( 'My Rewards', 'rewardswp' ),
										'required'    => true,
									]
								),
								kses()
							);
							?>
							<p x-show="errorMessage" class="text-red-600 text-sm mt-2" x-text="errorMessage"></p>
						</div>
					</div>
				</div>
			</div>

		</div>

		<?php
	}
}
