<?php
namespace UM_Elementor;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Css_Filter;
use Elementor\Repeater;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use UM_Elementor\Base\UM_Elementor_Base_Widget;
use UM_Elementor\Helpers\UM_User_Meta_Renderer;
use UM_Elementor\Helpers\UM_Elementor_Utils;

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

// Autoloader is now loaded in the main plugin initialization

/**
 * User Directory Grid Widget
 * 
 * Displays users in a responsive grid layout with customizable styling
 */
class UM_ELEMENTOR_LIST_MODULE extends UM_Elementor_Base_Widget {

	/**
	 * @var UM_User_Meta_Renderer
	 */
	private $meta_renderer;

	/**
	 * @var UM_Elementor_Utils
	 */

	/**
	 * Get widget name
	 */
	public function get_name() {
		return 'ele-um-user-list';
	}

	/**
	 * Get widget title
	 */
	public function get_title() {
		return __( 'Member Directory Grid', 'ultimate-member-widgets-for-elementor' );
	}

	public function get_description() {
		return __( 'Display Ultimate Member members in a customizable grid with filters, search, and pagination.', 'ultimate-member-widgets-for-elementor' );
	}

	public function get_keywords() {
		return [ 'ultimate member', 'um', 'members', 'directory', 'users', 'list', 'grid' ];
	}

	/**
	 * Get widget icon
	 */
	public function get_icon() {
		return 'eicon-person';
	}

	/**
	 * Get meta renderer instance
	 */
	private function get_meta_renderer() {
		if ( !$this->meta_renderer ) {
			$this->meta_renderer = new UM_User_Meta_Renderer();
		}
		return $this->meta_renderer;
	}

	/**
	 * Register widget-specific controls
	 */
	protected function register_widget_controls() {
		$this->register_layout_controls();
		$this->register_pagination_controls();
		$this->register_filter_controls();
		$this->register_search_controls();
		$this->register_user_meta_controls('User Fields', 'um_user_meta_control');
		$this->register_title_style_controls();
		$this->register_meta_style_controls();
		$this->register_pagination_style_controls();
		$this->register_search_filters_style_controls();
	}

	/**
	 * Register layout controls
	 */
	protected function register_layout_controls() {
		$this->start_controls_section(
			'um_elementor_section_member_grid_layout_' . $this->get_name(),
			[
				'label' => __( 'Layout', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE
			]
		);

		$this->add_column_control();
		$this->add_layout_type_control();

		$this->end_controls_section();
	}

	/**
	 * Add column control
	 */
	private function add_column_control() {
		$this->add_control(
			'grid_column_no',
			[
				'label'   => esc_html__( 'Columns', 'ultimate-member-widgets-for-elementor' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '3',
				'options' => $this->get_column_options(),
			]
		);
	}

	/**
	 * Get column options
	 */
	private function get_column_options() {
		return [
			'1' => esc_html__( '1', 'ultimate-member-widgets-for-elementor' ),
			'2' => esc_html__( '2', 'ultimate-member-widgets-for-elementor' ),
			'3' => esc_html__( '3', 'ultimate-member-widgets-for-elementor' ),
			'4' => esc_html__( '4', 'ultimate-member-widgets-for-elementor' ),
			'5' => esc_html__( '5', 'ultimate-member-widgets-for-elementor' ),
			'6' => esc_html__( '6', 'ultimate-member-widgets-for-elementor' ),
		];
	}

	/**
	 * Add layout type control.
	 *
	 * Free layouts: '1' (Card Grid), '2' (List).
	 * Locked Pro layouts: 'table_pro', 'carousel_pro'.
	 *
	 * The editor JS in ep-elements-editor.js intercepts any click on the
	 * locked options and reverts the value, showing an upgrade tooltip.
	 * The RAW_HTML notice below serves as a secondary in-panel CTA in case
	 * the value somehow persists (e.g. copied widget data from Pro site).
	 */
	private function add_layout_type_control() {
		$this->add_control(
			'user_layout',
			[
				'label'   => esc_html__( 'Layout Type', 'ultimate-member-widgets-for-elementor' ),
				'type'    => Controls_Manager::CHOOSE,
				'default' => '1',
				'toggle'  => false,
				'options' => [
					'1' => [
						'title' => esc_html__( 'Card Grid', 'ultimate-member-widgets-for-elementor' ),
						'icon'  => 'eicon-posts-grid',
					],
					'2' => [
						'title' => esc_html__( 'List', 'ultimate-member-widgets-for-elementor' ),
						'icon'  => 'eicon-post-list',
					],
					'table_pro' => [
						'title' => esc_html__( 'Table - Pro', 'ultimate-member-widgets-for-elementor' ),
						'icon'  => 'eicon-table',
					],
					'carousel_pro' => [
						'title' => esc_html__( 'Carousel - Pro', 'ultimate-member-widgets-for-elementor' ),
						'icon'  => 'eicon-carousel',
					],
				],
			]
		);

		/*
		 * Inline upgrade notice - visible only when a pro layout value is
		 * stored (Elementor evaluates 'condition' server-side for RAW_HTML).
		 * The JS revert prevents this from appearing in normal use; it acts
		 * as a safe fallback for edge cases (e.g. template import from Pro).
		 */
		$this->add_control(
			'um_pro_layout_notice',
			[
				'type'      => Controls_Manager::RAW_HTML,
				'raw'       => $this->get_pro_layout_notice_html(),
				'condition' => [
					'user_layout' => [ 'table_pro', 'carousel_pro' ],
				],
				'separator' => 'before',
			]
		);
	}

	/**
	 * Build the HTML for the inline Pro upgrade notice.
	 */
	private function get_pro_layout_notice_html(): string {
		$url = UM_Elementor_Pro_Links::upgrade_url( 'widget-layout-notice' );
		return sprintf(
			'<div class="um-elementor-pro-notice">' .
				'<span class="um-pro-notice-icon">&#x1F512;</span>' .
				'<div class="um-pro-notice-content">' .
					'<strong>%1$s</strong>' .
					'<p>%2$s</p>' .
					'<a href="%3$s" target="_blank" class="um-pro-notice-btn">%4$s</a>' .
				'</div>' .
			'</div>',
			esc_html__( 'Pro Layout Selected', 'ultimate-member-widgets-for-elementor' ),
			esc_html__( 'Table and Carousel layouts are available in the Pro version. Upgrade to unlock advanced layouts, filters, and the Profile Builder.', 'ultimate-member-widgets-for-elementor' ),
			esc_url( $url ),
			esc_html__( 'Upgrade to Pro ->', 'ultimate-member-widgets-for-elementor' )
		);
	}

	/**
	 * Register pagination controls
	 */
	protected function register_pagination_controls() {
		$this->start_controls_section(
			'um_elementor_section_pagination_' . $this->get_name(),
			[
				'label' => __( 'Pagination', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT
			]
		);

		$this->add_control(
			'enable_pagination',
			[
				'label' => __( 'Enable Pagination', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => __( 'Yes', 'ultimate-member-widgets-for-elementor' ),
				'label_off' => __( 'No', 'ultimate-member-widgets-for-elementor' ),
				'return_value' => 'yes',
			]
		);

		$this->add_control(
			'users_per_page',
			[
				'label' => __( 'Users Per Page', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::NUMBER,
				'default' => 12,
				'min' => 1,
				'max' => 100,
				'description' => __( 'Number of users on each page when pagination is enabled. When pagination is off, use “Number of Users” in User Query instead.', 'ultimate-member-widgets-for-elementor' ),
				'condition' => ['enable_pagination' => 'yes'],
			]
		);

		$this->add_control(
			'pagination_style',
			[
				'label' => __( 'Pagination Style', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'numbers',
				'options' => [
					'numbers' => __( 'Numbers', 'ultimate-member-widgets-for-elementor' ),
					'load_more' => __( 'Load More Button', 'ultimate-member-widgets-for-elementor' ),
					'infinite_scroll' => __( 'Infinite Scroll', 'ultimate-member-widgets-for-elementor' ),
				],
				'condition' => ['enable_pagination' => 'yes'],
			]
		);

		$this->add_control(
			'pagination_position',
			[
				'label' => __( 'Pagination Position', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'bottom',
				'options' => [
					'top' => __( 'Top', 'ultimate-member-widgets-for-elementor' ),
					'bottom' => __( 'Bottom', 'ultimate-member-widgets-for-elementor' ),
					'both' => __( 'Both', 'ultimate-member-widgets-for-elementor' ),
				],
				'condition' => ['enable_pagination' => 'yes'],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register filter controls
	 */
	protected function register_filter_controls() {
		$this->start_controls_section(
			'um_elementor_section_filters_' . $this->get_name(),
			[
				'label' => __( 'Advanced Filters', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT
			]
		);

		$this->add_control(
			'enable_filters',
			[
				'label' => __( 'Enable Advanced Filters', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => __( 'Yes', 'ultimate-member-widgets-for-elementor' ),
				'label_off' => __( 'No', 'ultimate-member-widgets-for-elementor' ),
				'return_value' => 'yes',
				'description' => __( 'Enable advanced filtering, sorting, and search functionality', 'ultimate-member-widgets-for-elementor' ),
			]
		);



		// Filter Persistence
		$this->add_control(
			'enable_filter_persistence',
			[
				'label' => __( 'Enable Filter Persistence', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => __( 'Yes', 'ultimate-member-widgets-for-elementor' ),
				'label_off' => __( 'No', 'ultimate-member-widgets-for-elementor' ),
				'return_value' => 'yes',
				'description' => __( 'Remember user filter selections across page visits', 'ultimate-member-widgets-for-elementor' ),
				'condition' => ['enable_filters' => 'yes'],
			]
		);

		$this->add_control(
			'enable_url_params',
			[
				'label' => __( 'Enable URL Parameters', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => __( 'Yes', 'ultimate-member-widgets-for-elementor' ),
				'label_off' => __( 'No', 'ultimate-member-widgets-for-elementor' ),
				'return_value' => 'yes',
				'description' => __( 'Update URL with filter state for bookmarking and sharing', 'ultimate-member-widgets-for-elementor' ),
				'condition' => ['enable_filters' => 'yes'],
			]
		);

		// Accessibility Settings
		$this->add_control(
			'enable_keyboard_navigation',
			[
				'label' => __( 'Enable Keyboard Navigation', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => __( 'Yes', 'ultimate-member-widgets-for-elementor' ),
				'label_off' => __( 'No', 'ultimate-member-widgets-for-elementor' ),
				'return_value' => 'yes',
				'description' => __( 'Allow users to navigate filters using keyboard', 'ultimate-member-widgets-for-elementor' ),
				'condition' => ['enable_filters' => 'yes'],
			]
		);

		$this->add_control(
			'enable_aria_labels',
			[
				'label' => __( 'Enable ARIA Labels', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => __( 'Yes', 'ultimate-member-widgets-for-elementor' ),
				'label_off' => __( 'No', 'ultimate-member-widgets-for-elementor' ),
				'return_value' => 'yes',
				'description' => __( 'Add accessibility labels for screen readers', 'ultimate-member-widgets-for-elementor' ),
				'condition' => ['enable_filters' => 'yes'],
			]
		);

		// Advanced Filter Fields (inspired by um-user-list-filter.php)
		$filter_repeater = new Repeater();

		$filter_repeater->add_control(
			'um_user_filter_field_value',
			[
				'label' => esc_html__( 'Meta Key', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SELECT,
				'default' => esc_html__( 'description', 'ultimate-member-widgets-for-elementor' ),
				'label_block' => true,
				'options' => user_elementor_um_get_user_meta_keys_combine(),
			]
		);

		$filter_repeater->add_control(
			'um_user_filter_field_icon',
			[
				'label' => esc_html__( 'Icon', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::ICONS,
				'fa4compatibility' => 'icon',
				'skin' => 'inline',
				'label_block' => false,
			]
		);

		$filter_repeater->add_control(
			'filter_type',
			[
				'label' => __( 'Filter Type', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'dropdown',
				'options' => [
					'dropdown' => __( 'Dropdown', 'ultimate-member-widgets-for-elementor' ),
					'checkbox' => __( 'Checkbox', 'ultimate-member-widgets-for-elementor' ),
					'radio' => __( 'Radio Buttons', 'ultimate-member-widgets-for-elementor' ),
				],
			]
		);


		$filter_upgrade_url = esc_url( UM_Elementor_Pro_Links::upgrade_url( 'widget-filter-fields' ) );

		$this->add_control(
			'um_user_filter_control',
			[
				'label' => esc_html__( 'Filter Fields', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::REPEATER,
				'seperator' => 'before',
				'fields' => $filter_repeater->get_controls(),
				'title_field' => '{{{um_user_filter_field_value}}}',
				'default' => [
					['um_user_filter_field_value' => 'birth_date'],
					['um_user_filter_field_value' => 'description'],
				],
				'condition' => ['enable_filters' => 'yes'],
				'max_items' => 2,
				'description' => sprintf(
					/* translators: %s: Pro upgrade URL */
					__( 'Free version allows up to 2 filter fields. <a href="%s" target="_blank" rel="noopener noreferrer" class="um-upgrade-link">Upgrade to Pro</a> for unlimited filter fields.', 'ultimate-member-widgets-for-elementor' ),
					$filter_upgrade_url
				),
			]
		);

		// Add upgrade notice for filter fields
		$this->add_control(
			'filter_upgrade_notice',
			[
				'type' => Controls_Manager::RAW_HTML,
				'raw' => '<div class="elementor-control-raw-html um-upgrade-notice">
					<div class="um-upgrade-notice-content">
						<i class="fas fa-star" style="color: #ffd700; margin-right: 5px;"></i>
						<strong>' . __( 'Pro Feature', 'ultimate-member-widgets-for-elementor' ) . '</strong><br>
						' . __( 'Add unlimited filter fields with advanced filtering options. Upgrade to Pro for enhanced functionality!', 'ultimate-member-widgets-for-elementor' ) . '
						<br><br>
						<a href="' . $filter_upgrade_url . '" target="_blank" rel="noopener noreferrer" class="um-upgrade-button" style="background: #0073aa; color: white; padding: 8px 16px; text-decoration: none; border-radius: 4px; display: inline-block;">
							' . __( 'Upgrade to Pro', 'ultimate-member-widgets-for-elementor' ) . '
						</a>
					</div>
				</div>',
				'condition' => ['enable_filters' => 'yes'],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register search controls
	 */
	protected function register_search_controls() {
		$this->start_controls_section(
			'um_elementor_section_search_' . $this->get_name(),
			[
				'label' => __( 'Search', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_CONTENT
			]
		);

		$this->add_control(
			'enable_search',
			[
				'label' => __( 'Enable Search', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'no',
				'label_on' => __( 'Yes', 'ultimate-member-widgets-for-elementor' ),
				'label_off' => __( 'No', 'ultimate-member-widgets-for-elementor' ),
				'return_value' => 'yes',
			]
		);

		$this->add_control(
			'search_placeholder',
			[
				'label' => __( 'Search Placeholder', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::TEXT,
				'default' => __( 'Search users...', 'ultimate-member-widgets-for-elementor' ),
				'condition' => ['enable_search' => 'yes'],
			]
		);

		$this->add_control(
			'search_fields',
			[
				'label' => __( 'Search Fields', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SELECT2,
				'multiple' => true,
				'default' => ['display_name', 'user_email'],
				'options' => [
					'display_name' => __( 'Display Name', 'ultimate-member-widgets-for-elementor' ),
					'user_email' => __( 'Email', 'ultimate-member-widgets-for-elementor' ),
					'first_name' => __( 'First Name', 'ultimate-member-widgets-for-elementor' ),
					'last_name' => __( 'Last Name', 'ultimate-member-widgets-for-elementor' ),
					'user_login' => __( 'Username', 'ultimate-member-widgets-for-elementor' ),
				],
				'condition' => ['enable_search' => 'yes'],
			]
		);

		$this->add_control(
			'search_position',
			[
				'label' => __( 'Search Position', 'ultimate-member-widgets-for-elementor' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'top',
				'options' => [
					'top' => __( 'Top', 'ultimate-member-widgets-for-elementor' ),
					'bottom' => __( 'Bottom', 'ultimate-member-widgets-for-elementor' ),
				],
				'condition' => ['enable_search' => 'yes'],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register title style controls
	 */
	protected function register_title_style_controls() {
		$this->start_controls_section(
			'um_ele_user_style_title_section',
			[
				'label' => __( 'Title', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE
			]
		);

		$this->add_title_color_controls();
		$this->add_title_typography_control();

		$this->end_controls_section();
	}

	/**
	 * Add title color controls
	 */
	private function add_title_color_controls() {
		// Member Name Color
		$this->add_control(
			'um_member_block_title_color',
			[
				'label'     => __( 'Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#303133',
				'selectors' => [
					'{{WRAPPER}} .um-elementor-member-name, {{WRAPPER}} .um-elementor-member-name a' => 'color: {{VALUE}};',
				]
			]
		);

		// Member Name Hover Color
		$this->add_control(
			'um_member_block_title_hover_color',
			[
				'label'     => __( 'Hover Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#23527c',
				'selectors' => [
					'{{WRAPPER}} .um-elementor-member-name:hover, {{WRAPPER}} .um-elementor-member-name a:hover' => 'color: {{VALUE}};',
				]
			]
		);
	}

	/**
	 * Add title typography control
	 */
	private function add_title_typography_control() {
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'um_member_user_name_typography',
				'label'    => esc_html__( 'Typography', 'ultimate-member-widgets-for-elementor' ),
				'selector' => '{{WRAPPER}} .um-elementor-member-name a',
				'global'   => ['default' => Global_Typography::TYPOGRAPHY_PRIMARY,],
			]
		);
	}

	/**
	 * Register meta style controls
	 */
	protected function register_meta_style_controls() {
		$this->start_controls_section(
			'um_elementor_section_member_typography',
			[
				'label' => __( 'Meta Fields', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE
			]
		);

		$this->add_meta_color_controls();
		$this->add_meta_typography_controls();

		$this->end_controls_section();
	}

	/**
	 * Add meta color controls
	 */
	private function add_meta_color_controls() {
		// Member Meta Label Color
		$this->add_control(
			'um_member_meta_field_title_color',
			[
				'label'     => __( 'Label Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#444444',
				'selectors' => [
					'{{WRAPPER}} .um-custom-label' => 'color: {{VALUE}};',
				],
			]
		);

		// Member Meta Value Color
		$this->add_control(
			'um_member_meta_field_value_color',
			[
				'label'     => __( 'Value Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#444444',
				'selectors' => [
					'{{WRAPPER}} .um-custom-field' => 'color: {{VALUE}};',
				],
			]
		);

		// Member Meta Value Overlay Color
		$this->add_control(
			'um_member_meta_field_value_overlay_color',
			[
				'label'     => __( 'Overlay Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => 'rgba(63, 81, 181, 0)',
				'selectors' => [
					'{{WRAPPER}} .um-elementor-member-content, {{WRAPPER}} .um-hover-content' => 'background-color: {{VALUE}};',
				],
			]
		);
	}

	/**
	 * Add meta typography controls
	 */
	private function add_meta_typography_controls() {
		// Other Text Typography
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'um_member_other_text_typography',
				'label'    => esc_html__( 'Text Typography', 'ultimate-member-widgets-for-elementor' ),
				'selector' => '{{WRAPPER}} .um-item-user',
				'global'   => ['default' => Global_Typography::TYPOGRAPHY_TEXT,],
			]
		);

		// Meta Label Typography
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'um_member_meta_field_title_typography',
				'label'    => esc_html__( 'Label Typography', 'ultimate-member-widgets-for-elementor' ),
				'selector' => '{{WRAPPER}} .um-custom-label',
				'global'   => ['default' => Global_Typography::TYPOGRAPHY_TEXT,],
			]
		);

		// Meta Value Typography
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'um_member_meta_field_field_typography',
				'label'    => esc_html__( 'Value Typography', 'ultimate-member-widgets-for-elementor' ),
				'selector' => '{{WRAPPER}} .um-custom-field',
				'global'   => ['default' => Global_Typography::TYPOGRAPHY_TEXT,],
			]
		);
	}

	/**
	 * Register pagination style controls
	 */
	protected function register_pagination_style_controls() {
		$this->start_controls_section(
			'um_elementor_section_pagination_style_' . $this->get_name(),
			[
				'label' => __( 'Pagination Style', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE
			]
		);

		$this->add_pagination_color_controls();
		$this->add_pagination_typography_controls();

		$this->end_controls_section();
	}

	/**
	 * Register search and filters style controls
	 */
	protected function register_search_filters_style_controls() {
		$this->start_controls_section(
			'um_elementor_section_search_filters_style_' . $this->get_name(),
			[
				'label' => __( 'Search & Filters Style', 'ultimate-member-widgets-for-elementor' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_control(
			'um_search_input_bg_color',
			[
				'label'     => __( 'Search Input Background', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .um-search-input' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_search_input_text_color',
			[
				'label'     => __( 'Search Input Text', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#111827',
				'selectors' => [
					'{{WRAPPER}} .um-search-input' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_search_input_border_color',
			[
				'label'     => __( 'Search Input Border', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#d1d5db',
				'selectors' => [
					'{{WRAPPER}} .um-search-input' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_search_button_bg_color',
			[
				'label'     => __( 'Search Button Background', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#007cba',
				'selectors' => [
					'{{WRAPPER}} .um-search-button' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_search_button_text_color',
			[
				'label'     => __( 'Search Button Text', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .um-search-button' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_search_button_bg_hover_color',
			[
				'label'     => __( 'Search Button Hover', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#005f8d',
				'selectors' => [
					'{{WRAPPER}} .um-search-button:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_filter_toggle_bg_color',
			[
				'label'     => __( 'Filter Toggle Background', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#007cba',
				'selectors' => [
					'{{WRAPPER}} .um-filter-toggle-btn' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_filter_toggle_text_color',
			[
				'label'     => __( 'Filter Toggle Text', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .um-filter-toggle-btn' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_filter_toggle_bg_hover_color',
			[
				'label'     => __( 'Filter Toggle Hover', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#005f8d',
				'selectors' => [
					'{{WRAPPER}} .um-filter-toggle-btn:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_apply_filter_button_bg_color',
			[
				'label'     => __( 'Apply Button Background', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#007cba',
				'selectors' => [
					'{{WRAPPER}} .um-apply-filters' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_apply_filter_button_text_color',
			[
				'label'     => __( 'Apply Button Text', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .um-apply-filters' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_clear_filter_button_bg_color',
			[
				'label'     => __( 'Clear Button Background', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#6b7280',
				'selectors' => [
					'{{WRAPPER}} .um-clear-filters' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'um_clear_filter_button_text_color',
			[
				'label'     => __( 'Clear Button Text', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .um-clear-filters' => 'color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Add pagination color controls
	 */
	private function add_pagination_color_controls() {
		// Pagination Link Color
		$this->add_control(
			'um_pagination_link_color',
			[
				'label'     => __( 'Link Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#333333',
				'selectors' => [
					'{{WRAPPER}} .um-pagination a' => 'color: {{VALUE}};',
				],
			]
		);

		// Pagination Link Hover Color
		$this->add_control(
			'um_pagination_link_hover_color',
			[
				'label'     => __( 'Link Hover Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#23527c',
				'selectors' => [
					'{{WRAPPER}} .um-pagination a:hover' => 'color: {{VALUE}};',
				],
			]
		);

		// Pagination Active Link Color
		$this->add_control(
			'um_pagination_active_link_color',
			[
				'label'     => __( 'Active Link Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#23527c',
				'selectors' => [
					'{{WRAPPER}} .um-pagination .current' => 'color: {{VALUE}};',
				],
			]
		);

		// Pagination Background Color
		$this->add_control(
			'um_pagination_background_color',
			[
				'label'     => __( 'Background Color', 'ultimate-member-widgets-for-elementor' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => [
					'{{WRAPPER}} .um-pagination .current' => 'background-color: {{VALUE}};',
				],
			]
		);
	}

	/**
	 * Add pagination typography controls
	 */
	private function add_pagination_typography_controls() {
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'um_pagination_typography',
				'label'    => esc_html__( 'Typography', 'ultimate-member-widgets-for-elementor' ),
				'selector' => '{{WRAPPER}} .um-pagination a, {{WRAPPER}} .um-pagination .current',
				'global'   => ['default' => Global_Typography::TYPOGRAPHY_TEXT,],
			]
		);
	}

	/**
	 * Render widget output
	 */
	protected function render() {
		$settings = $this->get_settings_for_display();
		$widget_id = $this->get_id();
		$search_filters_form_id = 'um-search-filters-form-' . $widget_id;
		
		// Get current page from URL or default to 1
		$current_page = max(1, get_query_var('paged') ? get_query_var('paged') : 1);
		
		// Get users data first (needed for pagination)
		$users_data = $this->get_filtered_users_with_pagination($settings, $current_page);
		
		// Start main container with proper data attributes
		$post_id = (int) get_the_ID();
		echo '<div class="um-user-list-container" data-widget-id="' . esc_attr($widget_id) . '" 
			data-post-id="' . esc_attr( (string) $post_id ) . '"
			data-users-per-page="' . esc_attr($settings['users_per_page'] ?? 12) . '" 
			data-enable-pagination="' . esc_attr($settings['enable_pagination'] ?? 'no') . '" 
			data-pagination-style="' . esc_attr($settings['pagination_style'] ?? 'numbers') . '">';
		
		echo '<form class="um-search-filter-form" id="' . esc_attr($search_filters_form_id) . '" action="#" method="get" novalidate>';

		// Render search interface if enabled and position is top
		if (($settings['enable_search'] ?? 'no') === 'yes' && 
			($settings['search_position'] ?? 'top') === 'top') {
			$this->render_search_interface($settings, $widget_id);
		}
		
		// Render filter interface if enabled
		if (($settings['enable_filters'] ?? 'no') === 'yes') {
			$this->render_filter_interface($settings, $widget_id);
		}

		echo '</form>';
		
		// Render top pagination if enabled
		if (($settings['enable_pagination'] ?? 'no') === 'yes' && 
			($settings['pagination_position'] ?? 'bottom') !== 'bottom') {
			$this->render_pagination($settings, $widget_id, $current_page, 'top', $users_data['total_pages']);
		}
		
		// Render user grid container
		echo '<div class="um-results-announcer screen-reader-text" aria-live="polite"></div>';
		echo '<div class="um-filter-results">';
		
		if ( empty( $users_data['users'] ) ) {
			$this->render_no_users_message();
		} else {
			$this->render_user_grid($users_data['users'], $settings);
		}
		
		echo '</div>'; // End um-filter-results
		
		// Render bottom pagination if enabled
		if (($settings['enable_pagination'] ?? 'no') === 'yes' && 
			($settings['pagination_position'] ?? 'bottom') !== 'top') {
			$this->render_pagination($settings, $widget_id, $current_page, 'bottom', $users_data['total_pages']);
		}
		
		echo '</div>'; // End um-user-list-container
		
		// Localize script data for advanced filters
		$this->localize_script_data($settings);
		
		// Also output the data directly in the HTML for immediate access
		// Extract the meta field keys from the repeater to save them
		$meta_fields_to_save = [];
		if (!empty($settings['um_user_meta_control']) && is_array($settings['um_user_meta_control'])) {
		    foreach ($settings['um_user_meta_control'] as $item) {
		        if (!empty($item['um_user_meta_field_value'])) {
		            $meta_fields_to_save[] = $item['um_user_meta_field_value'];
		        }
		    }
		}

		$localized_data = [
			'ajax_url' => admin_url('admin-ajax.php'),
			'nonce' => $this->get_filter_nonce(),
			'post_id' => (int) get_the_ID(),
			'enable_persistence' => $settings['enable_filter_persistence'] ?? 'yes',
			'enable_url_params' => $settings['enable_url_params'] ?? 'yes',
			'enable_keyboard_nav' => $settings['enable_keyboard_navigation'] ?? 'yes',
			'enable_aria_labels' => $settings['enable_aria_labels'] ?? 'yes',
			'widget_settings' => [
				'users_per_page' => (int) ($settings['users_per_page'] ?? 12),
				'enable_pagination' => $settings['enable_pagination'] ?? 'no',
				'pagination_style' => $settings['pagination_style'] ?? 'numbers',
                'user_meta_fields' => $meta_fields_to_save,
			]
		];
		
		echo '<script type="text/javascript">';
		echo 'window.um_elementor_ajax_' . esc_js($widget_id) . ' = ' . wp_json_encode($localized_data) . ';';
		echo '</script>';
		
		// Widget-specific JavaScript - Prevent advanced-filters.js from interfering
		echo '<script type="text/javascript">
		jQuery(document).ready(function($) {
			var widgetId = "' . esc_js($widget_id) . '";
			var container = $(".um-user-list-container[data-widget-id=\"" + widgetId + "\"]");
			
			// CRITICAL: Prevent advanced-filters.js from initializing on this widget
			container.attr("data-advanced-filters-disabled", "true");
			
			// Remove any existing advanced-filters event handlers
			container.off("click", ".um-pagination-link");
			container.off("change", ".um-filter-control");
			container.off("change", ".um-filter-dropdown");
			container.off("click", ".um-apply-filters");
			container.off("click", ".um-clear-filters");
			container.off("input", ".um-global-search");
		});
		</script>';
		
        // Options updates removed
		
		um_reset_user();
	}

	/**
	 * Get filtered users with pagination
	 */
	private function get_filtered_users_with_pagination($settings, $current_page = 1) {
        $settings['paged'] = $current_page;
        
        if (um_use_new_query_engine()) {
            $result = \UM_User_Query_Engine::get_users($settings);
            $users = $result['users'];
            $total_users = $result['total'];
        } else {
            $args = \UM_Elementor\Helpers\UM_User_Query_Legacy::build($settings);
            $args['paged'] = $current_page;
            $members_query = new \WP_User_Query($args);
            $users_raw = $members_query->get_results();
            $total_users = \UM_Elementor\Helpers\UM_User_Query_Legacy::getTotalUsers($args);
            $users = \UM_Elementor\Helpers\UM_User_Query_Legacy::filterDisplayableUsers($users_raw);
        }

        $total_pages = ($settings['enable_pagination'] ?? 'no') === 'yes' ? 
            ceil($total_users / max(1, (int)($settings['users_per_page'] ?? 12))) : 1;

        return [
            'users' => $users,
            'total_users' => $total_users,
            'total_pages' => $total_pages
        ];
	}

	/**
	 * Get filtered users (legacy method for backward compatibility)
	 */
	private function get_filtered_users($settings) {
		$users_data = $this->get_filtered_users_with_pagination($settings, 1);
		return $users_data['users'];
	}

	/**
	 * Render no users message
	 */
	private function render_no_users_message() {
		echo esc_html__( 'No users found', 'ultimate-member-widgets-for-elementor' );
	}

	/**
	 * Render user grid
	 */
	private function render_user_grid($users, $settings) {
		$column = $settings['grid_column_no'] ?? '3';
		/*
		 * Layout can be an integer ('1', '2') or a Pro sentinel string
		 * ('table_pro', 'carousel_pro'). Use sanitize_key so string values
		 * are preserved; numeric values remain comparable with == 1 / == 2.
		 */
		$layout = sanitize_key( $settings['user_layout'] ?? '1' );
		$hover_animate = $settings['um_member_block_hover_animation'] ?? '';

		?>
		<div class="um-team-carousel-wrapper grid grid-cols-1 md:grid-cols-<?php echo esc_attr($column); ?>" role="list">
			<?php 
			foreach ( $users as $user_item ) :
                $user_id = is_object($user_item) ? $user_item->ID : $user_item;
				$this->render_user_item($user_id, $settings, $layout, $hover_animate);
			endforeach; 
			?>
		</div>
		<?php
	}

	/**
	 * Render single user item
	 */
	private function render_user_item($user_id, $settings, $layout, $hover_animate) {
		um_fetch_user($user_id);

		// N+1 filters removed. The database handles user exclusion

		$member_name_type = $settings['user_display_title'] ?? 'first_name';

		if ( $layout == 1 ) {
			$this->render_card_layout($user_id, $settings, $member_name_type, $hover_animate);
		} elseif ( $layout == 2 ) {
			$this->render_list_layout($user_id, $settings, $member_name_type, $hover_animate);
		} elseif ( $layout === 'table_pro' || $layout === 'carousel_pro' ) {
			/*
			 * A pro layout value somehow ended up saved (e.g. template import).
			 * Fall back to the card layout on the frontend so the page doesn't
			 * render a blank or broken widget.
			 */
			$this->render_card_layout($user_id, $settings, $member_name_type, $hover_animate);
		}
	}

	/**
	 * Render card layout
	 */
	private function render_card_layout($user_id, $settings, $member_name_type, $hover_animate) {
		$align = $settings['title_alignment'] ?? 'text-left';
		$meta_renderer = $this->get_meta_renderer();
		?>
		<div class="um-item-user elementor-animation-<?php echo esc_attr($hover_animate); ?>" role="listitem">
			<div class="um-widget-member-holder">
				<?php $this->render_user_avatar($user_id, $align, $settings); ?>
				
				<div class="um-elementor-member-content">
					<?php $this->render_user_name($user_id, $member_name_type, $align, $settings); ?>
					
					<div class="um-custom-field-container <?php echo esc_attr($align); ?>">
						<?php echo wp_kses_post($meta_renderer->render_meta_fields($settings)); ?>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render list layout
	 */
	private function render_list_layout($user_id, $settings, $member_name_type, $hover_animate) {
		$align = $settings['title_alignment'] ?? 'text-left';
		$meta_renderer = $this->get_meta_renderer();
		?>
		<div class="um-item-user elementor-animation-<?php echo esc_attr($hover_animate); ?>" role="listitem">
			<div class="um-widget-member-holder">
				<div class="user-layout-spaced grid">
					<div class="user-layout-spaced-one um-elementor-member-image <?php echo esc_attr($align); ?>">
						<a<?php echo $this->get_title_attribute( um_user('display_name') ); ?> href="<?php echo esc_url(um_user_profile_url()); ?>">
							<?php echo wp_kses_post(um_get_avatar('', $user_id, 100)); ?>
						</a>
					</div>

					<div class="user-layout-spaced-two um-elementor-member-info <?php echo esc_attr($align); ?>">
						<?php $this->render_user_name($user_id, $member_name_type, $align, $settings); ?>
						<?php echo wp_kses_post($meta_renderer->render_meta_fields($settings)); ?>
					</div>
				</div>
			</div>
		</div>
		<?php
	}

	/**
	 * Render user avatar
	 */
	private function render_user_avatar($user_id, $align, $settings) {
		if ( empty( $settings['um_elementor_show_user_image'] ) ) {
			return;
		}
		?>
		<div class="um-elementor-member-image <?php echo esc_attr($align); ?>">
			<a<?php echo $this->get_title_attribute( um_user('display_name') ); ?> href="<?php echo esc_url(um_user_profile_url()); ?>">
				<?php echo wp_kses_post(um_get_avatar('', $user_id, 100)); ?>
			</a>
		</div>
		<?php
	}

	/**
	 * Render user name
	 */
	private function render_user_name($user_id, $member_name_type, $align, $settings) {
		if ( empty( $settings['um_elementor_show_member_name'] ) ) {
			return;
		}
		?>
		<div class="um-elementor-member-name <?php echo esc_attr($align); ?>">
			<p>
				<a<?php echo $this->get_title_attribute( um_user($member_name_type) ); ?> href="<?php echo esc_url(um_user_profile_url()); ?>">
					<?php echo esc_html(um_user($member_name_type)); ?>
				</a>
			</p>
		</div>
		<?php
	}

	/**
	 * Return a safe title attribute only when value is non-empty.
	 */
	private function get_title_attribute($title): string {
		$title = trim( (string) $title );
		if ( $title === '' ) {
			return '';
		}
		return ' title="' . esc_attr( $title ) . '"';
	}

	/**
	 * Render search interface
	 */
	private function render_search_interface($settings, $widget_id) {
		$position = $settings['search_position'] ?? 'top';
		$placeholder = $settings['search_placeholder'] ?? __('Search users...', 'ultimate-member-widgets-for-elementor');
		$search_input_id = 'um-search-input-' . $widget_id;
		?>
		<div class="um-search-container um-search-<?php echo esc_attr($position); ?>" data-widget-id="<?php echo esc_attr($widget_id); ?>">
			<div class="um-search-form">
				<label for="<?php echo esc_attr($search_input_id); ?>" class="screen-reader-text">
					<?php esc_html_e('Search users', 'ultimate-member-widgets-for-elementor'); ?>
				</label>
				<input type="text" 
					   id="<?php echo esc_attr($search_input_id); ?>"
					   class="um-search-input" 
					   placeholder="<?php echo esc_attr($placeholder); ?>" 
					   data-search-fields="<?php echo esc_attr(json_encode($settings['search_fields'] ?? ['display_name', 'user_email'])); ?>">
				<button type="submit" class="um-search-button">
					<?php esc_html_e('Search', 'ultimate-member-widgets-for-elementor'); ?>
				</button>
			</div>
		</div>
		<?php
	}

	/**
	 * Render filter interface
	 */
	private function render_filter_interface($settings, $widget_id) {
		$enable_aria = $settings['enable_aria_labels'] ?? 'yes';
		$filter_panel_id = 'um-filter-panel-' . $widget_id;
		
		?>
		<div class="um-filter-interface" role="region" aria-label="<?php esc_attr_e('User Filter Controls', 'ultimate-member-widgets-for-elementor'); ?>">
			<div class="um-filter-header">
				<?php if (($settings['enable_search'] ?? 'no') === 'yes' && ($settings['search_position'] ?? 'top') === 'bottom'): ?>
					<div class="um-global-search-container">
						<div class="um-search-input-wrapper">
							<input type="text" 
								   class="um-global-search" 
								   placeholder="<?php echo esc_attr($settings['search_placeholder'] ?? __('Search users...', 'ultimate-member-widgets-for-elementor')); ?>"
								   data-search-delay="500"
								   <?php if ($enable_aria === 'yes'): ?>
								   aria-label="<?php esc_attr_e('Search users by name, email, or other information', 'ultimate-member-widgets-for-elementor'); ?>"
								   role="searchbox"
								   <?php endif; ?>>
							<i class="fas fa-search um-search-icon" aria-hidden="true"></i>
						</div>
					</div>
				<?php endif; ?>

				<button type="button" class="um-filter-toggle-btn"
						aria-controls="<?php echo esc_attr($filter_panel_id); ?>"
						<?php if ($enable_aria === 'yes'): ?>
						aria-label="<?php esc_attr_e('Toggle filter options', 'ultimate-member-widgets-for-elementor'); ?>"
						aria-expanded="false"
						<?php endif; ?>>
					<i class="fas fa-filter" aria-hidden="true"></i>
					<?php esc_html_e('Filters', 'ultimate-member-widgets-for-elementor'); ?>
					<i class="fas fa-chevron-down um-filter-arrow" aria-hidden="true"></i>
				</button>
			</div>

			<div class="um-filter-panel um-filter-panel-hidden" id="<?php echo esc_attr($filter_panel_id); ?>">
				<div class="um-filter-controls" role="group" aria-label="<?php esc_attr_e('Filter Options', 'ultimate-member-widgets-for-elementor'); ?>">
					<?php 
					$filter_fields = $this->render_advanced_filters($settings);
					if (empty($filter_fields)): ?>
						<div class="um-no-filters-message">
							<p><?php esc_html_e('No filter fields configured. Please add filter fields in the widget settings.', 'ultimate-member-widgets-for-elementor'); ?></p>
						</div>
					<?php endif; ?>
				</div>

				<?php if (!empty($filter_fields)): ?>
				<div class="um-filter-actions">
					<button type="submit" class="um-apply-filters"
							<?php if ($enable_aria === 'yes'): ?>
							aria-label="<?php esc_attr_e('Apply selected filters to user list', 'ultimate-member-widgets-for-elementor'); ?>"
							<?php endif; ?>>
						<?php esc_html_e('Apply Filters', 'ultimate-member-widgets-for-elementor'); ?>
					</button>
					<button type="reset" class="um-clear-filters"
							<?php if ($enable_aria === 'yes'): ?>
							aria-label="<?php esc_attr_e('Clear all filters and show all users', 'ultimate-member-widgets-for-elementor'); ?>"
							<?php endif; ?>>
						<?php esc_html_e('Clear All', 'ultimate-member-widgets-for-elementor'); ?>
					</button>
				</div>
				<?php endif; ?>
			</div>
		</div>
		<?php
	}

	/**
	 * Render advanced filters
	 */
	private function render_advanced_filters($settings) {
		$user_filter_control = $settings['um_user_filter_control'] ?? [];
		$user_meta_control = $settings['um_user_meta_control'] ?? [];
		$rendered_count = 0;
		
		// Use filter control if available, otherwise fall back to user meta control
		$filter_fields = !empty($user_filter_control) ? $user_filter_control : $user_meta_control;
		
		// Limit to 2 fields for free version
		$max_fields = 2;
		$filter_fields = array_slice($filter_fields, 0, $max_fields);
		
		foreach ($filter_fields as $index => $filter) {
			// Handle different field key names
			$meta_key = $filter['um_user_filter_field_value'] ?? $filter['um_user_meta_field_value'] ?? '';
			$filter_type = $filter['filter_type'] ?? 'dropdown';
			$field_type = UM()->Fields()->get_field_type($meta_key);
			
			if (empty($field_type)) {
				continue;
			}
			
			$this->render_single_filter($filter, $index, $meta_key, $filter_type);
			$rendered_count++;
		}
		
		// Note: Frontend upgrade notice removed - only show in Elementor editor
		// $total_configured_fields = count($user_filter_control) + count($user_meta_control);
		// if ($total_configured_fields > $max_fields) {
		//     $this->render_filter_upgrade_notice();
		// }
		
		return $rendered_count;
	}

	/**
	 * Render filter upgrade notice (Frontend notice removed - only used in Elementor editor)
	 */
	private function render_filter_upgrade_notice() {
		// Frontend upgrade notice removed - only show in Elementor editor
		// This method is kept for potential future use but currently disabled
	}

	/**
	 * Render single filter
	 */
	private function render_single_filter($filter, $index, $meta_key, $filter_type) {
		$field_label = UM()->Fields()->get_label($meta_key);
		$meta_values = $this->get_filter_meta_values($meta_key);
		
		if (empty($meta_values)) {
			return;
		}
		
		?>
		<div class="um-filter-item" data-meta-key="<?php echo esc_attr($meta_key); ?>">
			<label class="um-filter-label">
				<?php if (!empty($filter['um_user_filter_field_icon']['value'])): ?>
					<i class="<?php echo esc_attr($filter['um_user_filter_field_icon']['value']); ?>"></i>
				<?php endif; ?>
				<?php echo esc_html($field_label); ?>
			</label>
			
			<?php if ($filter_type === 'dropdown'): ?>
				<select class="um-filter-control um-filter-dropdown">
					<option value=""><?php esc_html_e('All', 'ultimate-member-widgets-for-elementor'); ?></option>
					<?php foreach ($meta_values as $value): ?>
						<option value="<?php echo esc_attr($value); ?>"><?php echo esc_html($value); ?></option>
					<?php endforeach; ?>
				</select>
			<?php elseif ($filter_type === 'checkbox'): ?>
				<div class="um-filter-checkboxes">
					<?php foreach ($meta_values as $value): ?>
						<label class="um-checkbox-item">
							<input type="checkbox" class="um-filter-control um-filter-checkbox" value="<?php echo esc_attr($value); ?>">
							<span><?php echo esc_html($value); ?></span>
						</label>
					<?php endforeach; ?>
				</div>
			<?php elseif ($filter_type === 'radio'): ?>
				<div class="um-filter-radios">
					<label class="um-radio-item">
						<input type="radio" class="um-filter-control um-filter-radio" name="filter_<?php echo esc_attr($meta_key); ?>" value="">
						<span><?php esc_html_e('All', 'ultimate-member-widgets-for-elementor'); ?></span>
					</label>
					<?php foreach ($meta_values as $value): ?>
						<label class="um-radio-item">
							<input type="radio" class="um-filter-control um-filter-radio" name="filter_<?php echo esc_attr($meta_key); ?>" value="<?php echo esc_attr($value); ?>">
							<span><?php echo esc_html($value); ?></span>
						</label>
					<?php endforeach; ?>
				</div>
			<?php endif; ?>
		</div>
		<?php
	}

	/**
	 * Get filter meta values
	 */
	private function get_filter_meta_values($meta_key) {
		global $wpdb;
		
		$all_values = $wpdb->get_col($wpdb->prepare(
			"SELECT meta_value FROM {$wpdb->usermeta} WHERE meta_key = %s AND meta_value != ''",
			$meta_key
		));

		$unique_options = [];
		
		foreach ($all_values as $value) {
			$unserialized = maybe_unserialize($value);
			
			if (is_array($unserialized)) {
				foreach ($unserialized as $sub_value) {
					if (!empty(trim($sub_value))) {
						$unique_options[trim($sub_value)] = 1;
					}
				}
			} else {
				if (!empty(trim($unserialized))) {
					$unique_options[trim($unserialized)] = 1;
				}
			}
		}
		
		$meta_values = array_keys($unique_options);
		sort($meta_values);
		
		return $meta_values;
	}



	/**
	 * Render pagination
	 */
	private function render_pagination($settings, $widget_id, $current_page, $position, $total_pages = null) {
		$pagination_style = $settings['pagination_style'] ?? 'numbers';
		
		// Always render pagination container when pagination is enabled
		echo '<div class="um-pagination-container um-pagination-' . esc_attr($position) . '">';
		
		if ($pagination_style === 'load_more') {
			$this->render_load_more_button($settings, $widget_id, $current_page);
		} elseif ($pagination_style === 'infinite_scroll') {
			$this->render_infinite_scroll_trigger($settings, $widget_id, $current_page);
		} else {
			// Always render numbered pagination when enabled, even if only 1 page
			$this->render_numbered_pagination($settings, $widget_id, $current_page, $position, $total_pages);
		}
		
		echo '</div>'; // End um-pagination-container
	}

	/**
	 * Render numbered pagination
	 */
	private function render_numbered_pagination($settings, $widget_id, $current_page, $position, $total_pages) {
		$users_per_page = (int) ($settings['users_per_page'] ?? 12);
		$total_users = $total_pages ? ($total_pages * $users_per_page) : 0;
		
		?>
		<div class="um-pagination um-pagination-<?php echo esc_attr($position); ?>" data-widget-id="<?php echo esc_attr($widget_id); ?>">
			<?php if ($total_users > 0): ?>
			<div class="um-pagination-info">
				<?php 
				$start = (($current_page - 1) * $users_per_page) + 1;
				$end = min($current_page * $users_per_page, $total_users);
				/* translators: 1: start number, 2: end number, 3: total number */
				printf(
					esc_html__('Showing %1$d-%2$d of %3$d users', 'ultimate-member-widgets-for-elementor'),
					esc_html($start),
					esc_html($end),
					esc_html($total_users)
				);
				?>
			</div>
			<?php endif; ?>
			
			<div class="um-pagination-links">
				<?php if ($total_pages && $total_pages > 1): ?>
					<?php if ($current_page > 1): ?>
						<a href="#" class="um-pagination-link um-pagination-prev" data-page="<?php echo esc_attr($current_page - 1); ?>">
							<?php echo esc_html__('Previous', 'ultimate-member-widgets-for-elementor'); ?>
						</a>
					<?php endif; ?>
					
					<?php
					$start_page = max(1, $current_page - 2);
					$end_page = min($total_pages, $current_page + 2);
					
					for ($i = $start_page; $i <= $end_page; $i++):
						$current_class = ($i === $current_page) ? 'current' : '';
						?>
						<a href="#" class="um-pagination-link <?php echo esc_attr($current_class); ?>" data-page="<?php echo esc_attr($i); ?>">
							<?php echo esc_html($i); ?>
						</a>
					<?php endfor; ?>
					
					<?php if ($current_page < $total_pages): ?>
						<a href="#" class="um-pagination-link um-pagination-next" data-page="<?php echo esc_attr($current_page + 1); ?>">
							<?php echo esc_html__('Next', 'ultimate-member-widgets-for-elementor'); ?>
						</a>
					<?php endif; ?>
				<?php else: ?>
					<span class="um-pagination-info"><?php esc_html_e('No pagination needed', 'ultimate-member-widgets-for-elementor'); ?></span>
				<?php endif; ?>
			</div>
		</div>
		<?php
	}

	/**
	 * Render load more button
	 */
	private function render_load_more_button($settings, $widget_id, $current_page) {
		?>
		<div class="um-load-more-container" data-widget-id="<?php echo esc_attr($widget_id); ?>">
			<button type="button" class="um-load-more-button" data-page="<?php echo esc_attr($current_page); ?>">
				<?php echo esc_html__('Load More Users', 'ultimate-member-widgets-for-elementor'); ?>
			</button>
		</div>
		<?php
	}

	/**
	 * Render infinite scroll trigger
	 */
	private function render_infinite_scroll_trigger($settings, $widget_id, $current_page) {
		?>
		<div class="um-infinite-scroll-trigger" data-widget-id="<?php echo esc_attr($widget_id); ?>" data-page="<?php echo esc_attr($current_page); ?>">
			<div class="um-infinite-scroll-spinner" style="display: none;">
				<?php echo esc_html__('Loading...', 'ultimate-member-widgets-for-elementor'); ?>
			</div>
		</div>
		<?php
	}

	/**
	 * Get widget style dependencies.
	 */
	public function get_style_depends() {
		return ['um-elementor-styles', 'wp-user-list-styles'];
	}

	/**
	 * Get script dependencies
	 */
	public function get_script_depends() {
		return ['um-user-list-js'];
	}

	/**
	 * Localize script data
	 */
	private function localize_script_data($settings) {
		$widget_id = $this->get_id();
		$script_handle = 'um_elementor_ajax_' . $widget_id;
		
		$localized_data = [
			'ajax_url' => admin_url('admin-ajax.php'),
			'nonce' => $this->get_filter_nonce(),
			'post_id' => (int) get_the_ID(),
			'enable_persistence' => $settings['enable_filter_persistence'] ?? 'yes',
			'enable_url_params' => $settings['enable_url_params'] ?? 'yes',
			'enable_keyboard_nav' => $settings['enable_keyboard_navigation'] ?? 'yes',
			'enable_aria_labels' => $settings['enable_aria_labels'] ?? 'yes',
			'widget_settings' => [
				'users_per_page' => (int) ($settings['users_per_page'] ?? 12),
				'enable_pagination' => $settings['enable_pagination'] ?? 'no',
				'pagination_style' => $settings['pagination_style'] ?? 'numbers',
			]
		];
		
		wp_localize_script('um-user-list-js', $script_handle, $localized_data);
	}

	/**
	 * Reuse one nonce value across all widget instances in the same request.
	 */
	private function get_filter_nonce(): string {
		static $nonce = null;
		if ( $nonce === null ) {
			$nonce = wp_create_nonce( 'um_filter_nonce' );
		}
		return $nonce;
	}

	/**
	 * Content template for Elementor editor
	 */
	protected function content_template() {}
}
