<?php
/**
 * Color picker component view.
 *
 * Renders a color swatch, editable hex input, and hidden Coloris trigger.
 * Designed to work with the `colorField` Alpine component and `x-model`.
 *
 * Usage:
 *   get_view_component( 'color-picker', [
 *       'section' => 'rewards_widget',
 *       'name'    => 'header_bg_color',
 *       'x-model' => 'headerBgColor',
 *   ] );
 *
 * @package Awesomemotive\Rewardswp\Views\Admin\Components
 * @since 1.5.0
 */

namespace Awesomemotive\Rewardswp\Views\Admin\Components;

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

use Awesomemotive\Rewardswp\Abstracts\AbstractView;
use Awesomemotive\Rewardswp\Interfaces\ViewInterface;

class ColorPickerComponentView extends AbstractView implements ViewInterface {
	/**
	 * Render the color picker component.
	 *
	 * @since 1.5.0
	 *
	 * @param array $args {
	 *     @type string $section Settings section (e.g. 'rewards_widget').
	 *     @type string $name    Setting name (e.g. 'header_bg_color').
	 *     @type string $x-model Alpine model expression on the parent scope.
	 *     @type string $id      Optional. HTML id for the form input. Defaults to $name.
	 * }
	 */
	public function render( array $args = [] ): void {
		$args = wp_parse_args(
			$args,
			[
				'section' => '',
				'name'    => '',
				'x-model' => '',
				'id'      => '',
			]
		);

		if ( empty( $args['section'] ) || empty( $args['name'] ) || empty( $args['x-model'] ) ) {
			esc_html_e( 'Color picker requires section, name, and x-model.', 'rewardswp' );
			return;
		}

		$input_name = sprintf( 'rewardswp_settings[%s][%s]', $args['section'], $args['name'] );
		$input_id   = ! empty( $args['id'] ) ? $args['id'] : $args['name'];
		$picker_id  = $input_id . '_picker';
		$model      = esc_attr( $args['x-model'] );

		?>
		<div
			x-data="colorField"
			x-modelable="value"
			x-model="<?php echo esc_attr( $model ); ?>"
			class="flex items-center gap-3"
		>
			<?php // Hidden input for form submission. ?>
			<input type="hidden" id="<?php echo esc_attr( $input_id ); ?>" name="<?php echo esc_attr( $input_name ); ?>" x-bind:value="value">

			<?php // Swatch with hidden Coloris input anchored behind it for popover positioning. ?>
			<div class="relative w-10 h-10 shrink-0">
				<button
					type="button"
					tabindex="-1"
					x-on:click="$refs.colorInput.click()"
					class="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer focus:outline-none"
					x-bind:style="'background-color: ' + value"
				></button>
				<input
					type="text"
					id="<?php echo esc_attr( $picker_id ); ?>"
					x-ref="colorInput"
					x-bind:value="value"
					tabindex="-1"
					class="coloris-picker absolute inset-0 opacity-0 pointer-events-none"
					data-coloris
				>
			</div>

			<?php // Editable hex input. ?>
			<input
				type="text"
				x-bind:value="value"
				x-on:input="onInput($event.target.value)"
				x-on:click="$refs.colorInput.click()"
				x-on:focus="$refs.colorInput.click()"
				maxlength="7"
				class="w-28 text-sm font-mono px-2 py-1.5 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
				placeholder="#000000"
			>
		</div>
		<?php
	}
}
