<?php
/**
 * Enhanced Admin Controls for Product Display
 * Elementor-style controls for better UX
 *
 * @package Product_Display
 */

// Exit if accessed directly
if ( ! defined('ABSPATH') ) {
	exit;
}

/**
 * Class PRODDISP_Enhanced_Controls
 */
class PRODDISP_Enhanced_Controls {

	/**
	 * The single instance of the class
	 */
	protected static $_instance = null;

	/**
	 * Main Instance
	 */
	public static function get_instance() {
		if ( is_null(self::$_instance) ) {
			self::$_instance = new self();
		}
		return self::$_instance;
	}

	/**
	 * Render dimensions control (padding/margin)
	 */
	public static function render_dimensions_control($field_name, $label, $value = '', $description = '') {
		// Parse existing value (could be "20px" or "10px 15px 20px 25px")
		$dimensions = self::parse_dimensions($value);
		$control_id = 'proddisp_' . $field_name;
		?>
		<tr>
			<th scope="row">
				<label><?php echo esc_html($label); ?></label>
			</th>
			<td>
				<div class="proddisp-control-dimensions">
					<ul class="proddisp-dimensions-list">
						<li class="proddisp-control-dimension">
							<input 
								id="<?php echo esc_attr($control_id); ?>_top" 
								type="number" 
								data-setting="top" 
								data-field="<?php echo esc_attr($field_name); ?>"
								placeholder="0"
								value="<?php echo esc_attr($dimensions['top']); ?>"
								min="0"
								step="1"
							>
							<label for="<?php echo esc_attr($control_id); ?>_top" class="proddisp-dimension-label">
								<?php esc_html_e('Top', 'product-display'); ?>
							</label>
						</li>
						<li class="proddisp-control-dimension">
							<input 
								id="<?php echo esc_attr($control_id); ?>_right" 
								type="number" 
								data-setting="right" 
								data-field="<?php echo esc_attr($field_name); ?>"
								placeholder="0"
								value="<?php echo esc_attr($dimensions['right']); ?>"
								min="0"
								step="1"
							>
							<label for="<?php echo esc_attr($control_id); ?>_right" class="proddisp-dimension-label">
								<?php esc_html_e('Right', 'product-display'); ?>
							</label>
						</li>
						<li class="proddisp-control-dimension">
							<input 
								id="<?php echo esc_attr($control_id); ?>_bottom" 
								type="number" 
								data-setting="bottom" 
								data-field="<?php echo esc_attr($field_name); ?>"
								placeholder="0"
								value="<?php echo esc_attr($dimensions['bottom']); ?>"
								min="0"
								step="1"
							>
							<label for="<?php echo esc_attr($control_id); ?>_bottom" class="proddisp-dimension-label">
								<?php esc_html_e('Bottom', 'product-display'); ?>
							</label>
						</li>
						<li class="proddisp-control-dimension">
							<input 
								id="<?php echo esc_attr($control_id); ?>_left" 
								type="number" 
								data-setting="left" 
								data-field="<?php echo esc_attr($field_name); ?>"
								placeholder="0"
								value="<?php echo esc_attr($dimensions['left']); ?>"
								min="0"
								step="1"
							>
							<label for="<?php echo esc_attr($control_id); ?>_left" class="proddisp-dimension-label">
								<?php esc_html_e('Left', 'product-display'); ?>
							</label>
						</li>
						<li class="proddisp-link-dimensions-wrapper">
							<button 
								type="button"
								class="proddisp-link-dimensions" 
								data-tooltip="<?php esc_attr_e('Link values together', 'product-display'); ?>"
								data-field="<?php echo esc_attr($field_name); ?>"
							>
								<span class="proddisp-linked">
									<i class="dashicons dashicons-admin-links" aria-hidden="true"></i>
									<span class="screen-reader-text"><?php esc_html_e('Link values together', 'product-display'); ?></span>
								</span>
								<span class="proddisp-unlinked">
									<i class="dashicons dashicons-editor-unlink" aria-hidden="true"></i>
									<span class="screen-reader-text"><?php esc_html_e('Unlinked values', 'product-display'); ?></span>
								</span>
							</button>
						</li>
					</ul>
					<!-- Hidden input to store the final value -->
					<input 
						type="hidden" 
						id="<?php echo esc_attr($control_id); ?>" 
						name="<?php echo esc_attr($control_id); ?>" 
						value="<?php echo esc_attr($value); ?>"
					>
				</div>
				<?php if ($description) : ?>
					<p class="description"><?php echo esc_html($description); ?></p>
				<?php endif; ?>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render alignment control (text alignment)
	 */
	public static function render_alignment_control($field_name, $label, $value = 'left', $description = '') {
		$control_id = 'proddisp_' . $field_name;
		$name = $control_id;
		?>
		<tr>
			<th scope="row">
				<label><?php echo esc_html($label); ?></label>
			</th>
			<td>
				<div class="proddisp-control-input-wrapper">
					<div class="proddisp-choices">
						<input 
							id="<?php echo esc_attr($control_id); ?>_left" 
							type="radio" 
							name="<?php echo esc_attr($name); ?>" 
							value="left"
							<?php checked($value, 'left'); ?>
						>
						<label 
							class="proddisp-choices-label proddisp-control-unit-1" 
							for="<?php echo esc_attr($control_id); ?>_left" 
							data-tooltip="<?php esc_attr_e('Left', 'product-display'); ?>"
						>
							<i class="dashicons dashicons-editor-alignleft" aria-hidden="true"></i>
							<span class="screen-reader-text"><?php esc_html_e('Left', 'product-display'); ?></span>
						</label>

						<input 
							id="<?php echo esc_attr($control_id); ?>_center" 
							type="radio" 
							name="<?php echo esc_attr($name); ?>" 
							value="center"
							<?php checked($value, 'center'); ?>
						>
						<label 
							class="proddisp-choices-label proddisp-control-unit-1" 
							for="<?php echo esc_attr($control_id); ?>_center" 
							data-tooltip="<?php esc_attr_e('Center', 'product-display'); ?>"
						>
							<i class="dashicons dashicons-editor-aligncenter" aria-hidden="true"></i>
							<span class="screen-reader-text"><?php esc_html_e('Center', 'product-display'); ?></span>
						</label>

						<input 
							id="<?php echo esc_attr($control_id); ?>_right" 
							type="radio" 
							name="<?php echo esc_attr($name); ?>" 
							value="right"
							<?php checked($value, 'right'); ?>
						>
						<label 
							class="proddisp-choices-label proddisp-control-unit-1" 
							for="<?php echo esc_attr($control_id); ?>_right" 
							data-tooltip="<?php esc_attr_e('Right', 'product-display'); ?>"
						>
							<i class="dashicons dashicons-editor-alignright" aria-hidden="true"></i>
							<span class="screen-reader-text"><?php esc_html_e('Right', 'product-display'); ?></span>
						</label>

						<input 
							id="<?php echo esc_attr($control_id); ?>_justify" 
							type="radio" 
							name="<?php echo esc_attr($name); ?>" 
							value="justify"
							<?php checked($value, 'justify'); ?>
						>
						<label 
							class="proddisp-choices-label proddisp-control-unit-1" 
							for="<?php echo esc_attr($control_id); ?>_justify" 
							data-tooltip="<?php esc_attr_e('Justify', 'product-display'); ?>"
						>
							<i class="dashicons dashicons-editor-justify" aria-hidden="true"></i>
							<span class="screen-reader-text"><?php esc_html_e('Justify', 'product-display'); ?></span>
						</label>
					</div>
				</div>
				<?php if ($description) : ?>
					<p class="description"><?php echo esc_html($description); ?></p>
				<?php endif; ?>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render enhanced color picker with opacity
	 */
	public static function render_color_control($field_name, $label, $value = '#ffffff', $description = '', $alpha = true) {
		$control_id = 'proddisp_' . $field_name;
		?>
		<tr>
			<th scope="row">
				<label for="<?php echo esc_attr($control_id); ?>"><?php echo esc_html($label); ?></label>
			</th>
			<td>
				<div class="proddisp-color-control">
					<div class="proddisp-color-input-wrapper">
						<input 
							type="text" 
							id="<?php echo esc_attr($control_id); ?>" 
							name="<?php echo esc_attr($control_id); ?>" 
							class="proddisp-color-picker<?php echo $alpha ? ' proddisp-color-picker-alpha' : ''; ?>"
							value="<?php echo esc_attr($value); ?>"
							data-alpha-enabled="<?php echo $alpha ? 'true' : 'false'; ?>"
							data-alpha-color-type="hex"
						>
						<!-- <div class="proddisp-color-preview" style="background-color: <?php echo esc_attr($value); ?>"></div> -->
					</div>
					<div class="proddisp-color-presets">
						<button type="button" class="proddisp-color-preset" data-color="#ffffff" style="background: #ffffff;" title="White"></button>
						<button type="button" class="proddisp-color-preset" data-color="#000000" style="background: #000000;" title="Black"></button>
						<button type="button" class="proddisp-color-preset proddisp-color-clear" title="Clear">
							<i class="dashicons dashicons-no-alt"></i>
						</button>
					</div>
				</div>
				<?php if ($description) : ?>
					<p class="description"><?php echo esc_html($description); ?></p>
				<?php endif; ?>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render enhanced select control with icons
	 */
	public static function render_select_control($field_name, $label, $options, $value = '', $description = '', $icons = array()) {
		$control_id = 'proddisp_' . $field_name;
		$has_icons = !empty($icons);
		?>
		<tr>
			<th scope="row">
				<label for="<?php echo esc_attr($control_id); ?>"><?php echo esc_html($label); ?></label>
			</th>
			<td>
				<div class="proddisp-select-control<?php echo $has_icons ? ' proddisp-select-with-icons' : ''; ?>">
					<?php if ($has_icons) : ?>
						<div class="proddisp-select-visual">
							<?php foreach ($options as $option_value => $option_label) : ?>
								<div class="proddisp-select-option<?php echo $value === $option_value ? ' active' : ''; ?>" data-value="<?php echo esc_attr($option_value); ?>">
									<?php if (isset($icons[$option_value])) : ?>
										<i class="<?php echo esc_attr($icons[$option_value]); ?>"></i>
									<?php endif; ?>
									<span><?php echo esc_html($option_label); ?></span>
								</div>
							<?php endforeach; ?>
						</div>
						<select id="<?php echo esc_attr($control_id); ?>" name="<?php echo esc_attr($control_id); ?>" style="display: none;">
							<?php foreach ($options as $option_value => $option_label) : ?>
								<option value="<?php echo esc_attr($option_value); ?>" <?php selected($value, $option_value); ?>>
									<?php echo esc_html($option_label); ?>
								</option>
							<?php endforeach; ?>
						</select>
					<?php else : ?>
						<select id="<?php echo esc_attr($control_id); ?>" name="<?php echo esc_attr($control_id); ?>" class="proddisp-enhanced-select">
							<?php foreach ($options as $option_value => $option_label) : ?>
								<option value="<?php echo esc_attr($option_value); ?>" <?php selected($value, $option_value); ?>>
									<?php echo esc_html($option_label); ?>
								</option>
							<?php endforeach; ?>
						</select>
					<?php endif; ?>
				</div>
				<?php if ($description) : ?>
					<p class="description"><?php echo esc_html($description); ?></p>
				<?php endif; ?>
			</td>
		</tr>
		<?php
	}

	/**
	 * Render enhanced number control with slider
	 */
	public static function render_number_control($field_name, $label, $value = 0, $min = 0, $max = 100, $step = 1, $description = '', $unit = 'px') {
		$control_id = 'proddisp_' . $field_name;
		?>
		<tr>
			<th scope="row">
				<label for="<?php echo esc_attr($control_id); ?>"><?php echo esc_html($label); ?></label>
			</th>
			<td>
				<div class="proddisp-number-control">
					<div class="proddisp-number-input-wrapper">
						<input 
							type="number" 
							id="<?php echo esc_attr($control_id); ?>" 
							name="<?php echo esc_attr($control_id); ?>" 
							class="proddisp-number-input"
							value="<?php echo esc_attr($value); ?>"
							min="<?php echo esc_attr($min); ?>"
							max="<?php echo esc_attr($max); ?>"
							step="<?php echo esc_attr($step); ?>"
						>
						<span class="proddisp-number-unit"><?php echo esc_html($unit); ?></span>
					</div>
					<div class="proddisp-number-slider-wrapper">
						<input 
							type="range" 
							class="proddisp-number-slider"
							min="<?php echo esc_attr($min); ?>"
							max="<?php echo esc_attr($max); ?>"
							step="<?php echo esc_attr($step); ?>"
							value="<?php echo esc_attr($value); ?>"
							data-target="<?php echo esc_attr($control_id); ?>"
						>
					</div>
				</div>
				<?php if ($description) : ?>
					<p class="description"><?php echo esc_html($description); ?></p>
				<?php endif; ?>
			</td>
		</tr>
		<?php
	}

	/**
	 * Parse dimensions string into array
	 */
	private static function parse_dimensions($value) {
		$defaults = array(
			'top' => '',
			'right' => '',
			'bottom' => '',
			'left' => ''
		);

		if (empty($value)) {
			return $defaults;
		}

		// Remove 'px' and split by spaces
		$value = str_replace('px', '', $value);
		$parts = explode(' ', trim($value));
		$parts = array_filter($parts); // Remove empty elements

		switch (count($parts)) {
			case 1:
				// All sides same
				$defaults['top'] = $defaults['right'] = $defaults['bottom'] = $defaults['left'] = $parts[0];
				break;
			case 2:
				// Top/bottom, left/right
				$defaults['top'] = $defaults['bottom'] = $parts[0];
				$defaults['right'] = $defaults['left'] = $parts[1];
				break;
			case 3:
				// Top, left/right, bottom
				$defaults['top'] = $parts[0];
				$defaults['right'] = $defaults['left'] = $parts[1];
				$defaults['bottom'] = $parts[2];
				break;
			case 4:
				// Top, right, bottom, left
				$defaults['top'] = $parts[0];
				$defaults['right'] = $parts[1];
				$defaults['bottom'] = $parts[2];
				$defaults['left'] = $parts[3];
				break;
		}

		return $defaults;
	}
}

// Initialize admin class
PRODDISP_Enhanced_Controls::get_instance();