<?php
/**
 * Number component view.
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Components
 * @since 1.0.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Components;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;
use function Awesomemotive\Rewardswp\Helpers\tag_attr;

class NumberComponentView extends AbstractView implements ViewInterface {
	/**
	 * Render the template.
	 *
	 * @since 1.0.0
	 *
	 * @param array $args
	 *
	 * @return void
	 */
	public function render( array $args = [] ): void {
		$args = wp_parse_args(
			$args,
			[
				'name'            => '',
				'id'              => '',
				'x-bind:id'       => '',
				'value'           => '',
				'x-bind:value'    => '',
				'x-on:input'      => '',
				'x-model'         => '',
				'placeholder'     => '',
				'min'             => '',
				'max'             => '',
				'step'            => '1',
				'required'        => false,
				'width'           => 'w-32',
				'error_condition' => '',
				'integers_only'   => false,
			]
		);

		$value_input_name = empty( $args['x-bind:value'] )
			? 'value'
			: 'x-bind:value';
		$value_input_val  = empty( $args['x-bind:value'] )
			? $args['value']
			: $args['x-bind:value'];

		$id_input_name = empty( $args['x-bind:id'] )
			? 'id'
			: 'x-bind:id';
		$id_input_val  = empty( $args['x-bind:id'] )
			? $args['id']
			: $args['x-bind:id'];

		// Build dynamic classes for error conditions similar to AmountComponentView
		$class_binding = '';
		if ( ! empty( $args['error_condition'] ) ) {
			$condition     = $args['error_condition'];
			$bind_class    = sprintf(
				"{ 'text-red-900 outline-red-300 focus-within:outline-red-600': %s, 'outline-gray-300 focus-within:outline-blue-600': !(%s) }",
				$condition,
				$condition
			);
			$class_binding = sprintf( 'x-bind:class="%s"', esc_attr( $bind_class ) );
		}

		// Determine input type and validation based on integers_only setting.
		$input_type = $args['integers_only'] ? 'text' : 'number';

		// Build integer validation handler for x-on:input when integers_only is true.
		$input_handler = $args['x-on:input'];
		if ( $args['integers_only'] && ! empty( $args['x-model'] ) ) {
			// Extract the model path for the input handler.
			$model_path = $args['x-model'];
			$min_value  = ! empty( $args['min'] ) ? absint( $args['min'] ) : 1;
		// phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable -- $event is an Alpine.js built-in variable.
			$input_handler = sprintf(
				'%s = Math.max(%d, parseInt($event.target.value.replace(/[^0-9]/g, "")) || %d)',
				$model_path,
				$min_value,
				$min_value
			);
		}

		?>
		<div class="<?php echo esc_attr( $args['width'] ); ?>">
			<div
				class="flex items-center rounded-md bg-white px-3 outline-1 -outline-offset-1 focus-within:outline-2 focus-within:-outline-offset-2<?php echo empty( $args['error_condition'] ) ? ' outline-gray-300 focus-within:outline-blue-600' : ''; ?>"
				<?php
				if ( ! empty( $class_binding ) ) {
					echo wp_kses_post( $class_binding );
				}
				?>
			>
			<input
				<?php tag_attr( 'x-model', $args['x-model'] ); ?>
				<?php tag_attr( $value_input_name, $value_input_val ); ?>
				<?php tag_attr( 'x-on:input', $input_handler ); ?>
				<?php tag_attr( $id_input_name, $id_input_val ); ?>
				<?php tag_attr( 'name', $args['name'] ); ?>
					type="<?php echo esc_attr( $input_type ); ?>"
					<?php if ( $args['integers_only'] ) : ?>
						inputmode="numeric"
						pattern="[0-9]*"
					<?php else : ?>
						<?php tag_attr( 'min', $args['min'] ); ?>
						<?php tag_attr( 'max', $args['max'] ); ?>
						<?php tag_attr( 'step', $args['step'] ); ?>
					<?php endif; ?>
					placeholder="<?php echo esc_attr( $args['placeholder'] ); ?>"
					<?php if ( $args['required'] ) : ?>
						required
					<?php endif; ?>
					class="block min-w-0 grow py-2 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6"
				>
			</div>
		</div>
		<?php
	}
}
