<?php
/**
 * Custom Icon Picker Control for Elementor
 *
 * @package Product_Display
 */

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

use Elementor\Base_Data_Control;

/**
 * Product Display Icon Picker Control for Elementor
 */
class PRODDISP_Icon_Picker_Control extends Base_Data_Control {

	/**
	 * Get control type
	 */
	public function get_type() {
		return 'proddisp_icon_picker';
	}

	/**
	 * Get default settings
	 */
	protected function get_default_settings() {
		return array(
			'context' => '',
			'show_popular' => true,
			'show_categories' => true,
		);
	}

	/**
	 * Render control output in the editor
	 */
	public function content_template() {
		$control_uid = $this->get_control_uid();
		?>
		<div class="elementor-control-field">
			<# if ( data.label ) { #>
				<label for="<?php echo esc_attr($control_uid); ?>" class="elementor-control-title">{{{ data.label }}}</label>
			<# } #>
			
			<div class="elementor-control-input-wrapper">
				<div class="proddisp-elementor-icon-picker" data-setting="{{ data.name }}" data-context="{{ data.context }}">
					<div class="icon-picker-trigger">
						<div class="selected-icon">
							<# if ( data.controlValue && data.controlValue !== '' ) { #>
								<i class="icon-display {{ data.controlValue }}"></i>
								<span class="icon-class">{{ data.controlValue }}</span>
							<# } else { #>
								<span class="icon-placeholder">
									<i class="fas fa-plus-circle"></i>
									Select Icon
								</span>
							<# } #>
						</div>
						<span class="dropdown-arrow">
							<i class="fas fa-chevron-down"></i>
						</span>
					</div>
					
					<div class="icon-picker-dropdown">
						<div class="icon-search">
							<input type="text" placeholder="Search icons..." class="icon-search-input" />
							<i class="fas fa-search search-icon"></i>
						</div>
						
						<div class="icon-categories">
							<div class="loading-icons">
								<i class="fas fa-spinner fa-spin"></i>
								Loading icons...
							</div>
						</div>
					</div>
				</div>
			</div>
			
			<# if ( data.description ) { #>
				<div class="elementor-control-field-description">{{{ data.description }}}</div>
			<# } #>
		</div>
		
		<style>
		.proddisp-elementor-icon-picker {
			position: relative;
		}
		
		.proddisp-elementor-icon-picker .icon-picker-trigger {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8px 12px;
			border: 1px solid #d5dadf;
			border-radius: 3px;
			background: #fff;
			cursor: pointer;
			transition: all 0.2s ease;
		}
		
		.proddisp-elementor-icon-picker .icon-picker-trigger:hover {
			border-color: #a4afb7;
		}
		
		.proddisp-elementor-icon-picker .selected-icon {
			display: flex;
			align-items: center;
			gap: 8px;
			flex: 1;
		}
		
		.proddisp-elementor-icon-picker .icon-placeholder {
			color: #a4afb7;
			display: flex;
			align-items: center;
			gap: 6px;
		}
		
		.proddisp-elementor-icon-picker .icon-class {
			font-size: 11px;
			color: #6d7882;
		}
		
		.proddisp-elementor-icon-picker .dropdown-arrow {
			color: #a4afb7;
			font-size: 12px;
		}
		
		.proddisp-elementor-icon-picker .icon-picker-dropdown {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: #fff;
			border: 1px solid #d5dadf;
			border-radius: 3px;
			box-shadow: 0 2px 15px rgba(0,0,0,0.1);
			z-index: 99999;
			max-height: 300px;
			overflow-y: auto;
			display: none;
		}
		
		.proddisp-elementor-icon-picker .icon-search {
			position: relative;
			padding: 10px;
			border-bottom: 1px solid #e6e9ec;
		}
		
		.proddisp-elementor-icon-picker .icon-search-input {
			width: 100%;
			padding: 6px 30px 6px 10px;
			border: 1px solid #d5dadf;
			border-radius: 3px;
			font-size: 12px;
		}
		
		.proddisp-elementor-icon-picker .search-icon {
			position: absolute;
			right: 18px;
			top: 50%;
			transform: translateY(-50%);
			color: #a4afb7;
			font-size: 12px;
		}
		
		.proddisp-elementor-icon-picker .icon-categories {
			padding: 10px;
		}
		
		.proddisp-elementor-icon-picker .loading-icons {
			text-align: center;
			padding: 20px;
			color: #a4afb7;
			font-size: 12px;
		}
		
		.proddisp-elementor-icon-picker .icon-category {
			margin-bottom: 15px;
		}
		
		.proddisp-elementor-icon-picker .category-title {
			font-size: 11px;
			font-weight: 600;
			color: #495157;
			margin: 0 0 8px 0;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}
		
		.proddisp-elementor-icon-picker .contextual-category .category-title {
			color: #71d7f7;
		}
		
		.proddisp-elementor-icon-picker .contextual-badge {
			background: #71d7f7;
			color: white;
			padding: 2px 6px;
			border-radius: 10px;
			font-size: 9px;
			margin-left: 6px;
		}
		
		.proddisp-elementor-icon-picker .icon-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
			gap: 4px;
		}
		
		.proddisp-elementor-icon-picker .icon-option {
			width: 32px;
			height: 32px;
			border: 1px solid #e6e9ec;
			border-radius: 3px;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all 0.2s ease;
			font-size: 14px;
			color: #495157;
		}
		
		.proddisp-elementor-icon-picker .icon-option:hover {
			border-color: #71d7f7;
			background: #f8fcff;
			color: #71d7f7;
		}
		
		.proddisp-elementor-icon-picker .icon-option.selected {
			border-color: #71d7f7;
			background: #71d7f7;
			color: white;
		}
		</style>
		
		<script>
		(function($) {
			// Wait for the control to be fully rendered
			setTimeout(function() {
				var $control = $('.proddisp-elementor-icon-picker[data-setting="{{ data.name }}"]');
				
				if ($control.length && !$control.data('initialized')) {
					$control.data('initialized', true);
					
					// Initialize icon picker
					if (typeof window.proddispElementorIconPicker !== 'undefined') {
						window.proddispElementorIconPicker.init($control, {
							context: '{{ data.context }}' || '',
							showPopular: true,
							showCategories: true,
							value: '{{ data.controlValue }}' || '',
							onChange: function(iconClass) {
								// Update the control value in Elementor
								$control.trigger('input');
								
								// Find and update the control model
								var controlName = '{{ data.name }}';
								var elementorPanel = elementor.getPanelView();
								
								if (elementorPanel && elementorPanel.getCurrentPageView) {
									var currentPage = elementorPanel.getCurrentPageView();
									if (currentPage && currentPage.model) {
										currentPage.model.setSetting(controlName, iconClass);
									}
								}
							}
						});
					} else {
						console.warn('Product Display: Icon picker not loaded');
					}
				}
			}, 100);
		})(jQuery);
		</script>
		<?php
	}

	/**
	 * Enqueue control scripts and styles
	 */
	public function enqueue() {
		// Enqueue FontAwesome
		wp_enqueue_style('wcps-font-awesome');

		// Enqueue our icon picker script
		wp_enqueue_script(
			'proddisp-elementor-icon-picker',
			PRODDISP_PLUGIN_URL . 'assets/src/js/wcps-elementor-icon-picker.js',
			array( 'jquery', 'elementor-editor' ),
			PRODDISP_VERSION,
			true
		);

		// Localize script with icon data
		wp_localize_script('proddisp-elementor-icon-picker', 'proddispElementorIcons', array(
			'icons' => PRODDISP_Assets::get_instance()->get_fontawesome_icons_public(),
			'nonce' => wp_create_nonce('proddisp_elementor_nonce'),
			'debug' => defined('WP_DEBUG') && WP_DEBUG,
		));
	}
}
