<?php
namespace PowerpackElements\Modules\Marquee\Widgets;

use PowerpackElements\Base\Powerpack_Widget;
use PowerpackElements\Classes\PP_Posts_Query_Builder;
use PowerpackElements\Classes\PP_Config;
use PowerpackElements\Modules\Posts\Traits\Posts_Query_Controls;

// Elementor Classes
use Elementor\Controls_Manager;
use Elementor\Control_Media;
use Elementor\Utils;
use Elementor\Icons_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Text_Stroke;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;

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

/**
 * Marquee Widget
 */
class Marquee extends Powerpack_Widget {

	use Posts_Query_Controls;

	/**
	 * Retrieve Marquee widget name.
	 *
	 * @access public
	 *
	 * @return string Widget name.
	 */
	public function get_name() {
		return parent::get_widget_name( 'Marquee' );
	}

	/**
	 * Retrieve Marquee widget title.
	 *
	 * @access public
	 *
	 * @return string Widget title.
	 */
	public function get_title() {
		return parent::get_widget_title( 'Marquee' );
	}

	/**
	 * Retrieve Marquee widget icon.
	 *
	 * @access public
	 *
	 * @return string Widget icon.
	 */
	public function get_icon() {
		return parent::get_widget_icon( 'Marquee' );
	}

	/**
	 * Get widget keywords.
	 *
	 * Retrieve the list of keywords the widget belongs to.
	 *
	 * @access public
	 *
	 * @return array Widget keywords.
	 */
	public function get_keywords() {
		return parent::get_widget_keywords( 'Marquee' );
	}

	protected function is_dynamic_content(): bool {
		return false;
	}

	/**
	 * Retrieve the list of scripts the Marquee widget depended on.
	 *
	 * Used to set scripts dependencies required to run the widget.
	 *
	 * @access public
	 *
	 * @return array Widget scripts dependencies.
	 */
	public function get_script_depends() {
		return [
			'pp-marquee',
		];
	}

	/**
	 * Get style dependencies.
	 *
	 * Retrieve the list of style dependencies the widget requires.
	 *
	 * @since 2.13.0
	 * @access public
	 *
	 * @return array Widget style dependencies.
	 */
	public function get_style_depends(): array {
		return [ 'widget-pp-marquee' ];
	}

	/**
	 * Register Marquee widget controls.
	 *
	 * Adds different input fields to allow the user to change and customize the widget settings.
	 *
	 * @access protected
	 */
	protected function register_controls() {
		// Controls.
		$this->register_content_marquee_controls();
		$this->register_query_section_controls( [ 'source' => 'posts' ], 'marquee', '', 'no', false );
		$this->register_content_separator_controls();
		$this->register_content_settings_controls();

		// Style.
		$this->register_style_layout_controls();
		$this->register_style_items_controls();
		$this->register_style_text_controls();
		$this->register_style_image_controls();
		$this->register_style_separator_controls();
	}

	protected function register_content_marquee_controls() {
		$this->start_controls_section(
			'section_marquee',
			[
				'label' => esc_html__( 'Marquee', 'powerpack' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'source',
			[
				'label'   => esc_html__( 'Source', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'custom',
				'options' => [
					'custom' => esc_html__( 'Custom', 'powerpack' ),
					'posts'  => esc_html__( 'Posts', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'posts_per_page',
			[
				'label'     => __( 'Posts Count', 'powerpack' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 5,
				'condition' => [
					'source' => 'posts',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'      => 'image',
				'label'     => esc_html__( 'Image Size', 'powerpack' ),
				'default'   => 'medium_large',
				'condition' => [
					'source' => 'posts',
				],
			]
		);

		$this->add_control(
			'posts_link_to',
			[
				'label'     => esc_html__( 'Link to', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'post_url',
				'options'   => [
					'post_url' => esc_html__( 'Post URL', 'powerpack' ),
					'custom'   => esc_html__( 'Custom URL', 'powerpack' ),
				],
				'condition' => [
					'source' => 'posts',
				],
			]
		);

		$this->add_control(
			'posts_link',
			[
				'label'       => esc_html__( 'Link', 'powerpack' ),
				'show_label'  => false,
				'type'        => Controls_Manager::URL,
				'condition'   => [
					'source'        => 'posts',
					'posts_link_to' => 'custom',
				],
			]
		);

		$this->add_control(
			'post_link_target',
			[
				'label'        => esc_html__( 'Open in a New Tab', 'powerpack' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'label_on'     => esc_html__( 'Yes', 'powerpack' ),
				'label_off'    => esc_html__( 'No', 'powerpack' ),
				'return_value' => 'yes',
				'condition'    => [
					'source'        => 'posts',
					'posts_link_to' => 'post_url',
				],
			]
		);

		$repeater = new Repeater();

		$repeater->start_controls_tabs( 'tabs_item_content' );

		$repeater->start_controls_tab(
			'tab_item_content',
			[
				'label' => esc_html__( 'Content', 'powerpack' ),
			]
		);

		$repeater->add_control(
			'marquee_image',
			[
				'label'       => esc_html__( 'Image', 'powerpack' ),
				'type'        => Controls_Manager::MEDIA,
				'label_block' => true,
				'dynamic'     => [
					'active' => true,
				],
			]
		);

		$repeater->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'    => 'image',
				'label'   => esc_html__( 'Image Size', 'powerpack' ),
				'default' => 'medium',
				'exclude' => [ 'custom' ],
			]
		);

		$repeater->add_control(
			'marquee_text',
			[
				'label'       => esc_html__( 'Text', 'powerpack' ),
				'type'        => Controls_Manager::TEXTAREA,
				'label_block' => true,
				'rows'        => 3,
				'dynamic'     => [
					'active' => true,
				],
			]
		);

		$repeater->add_control(
			'item_link',
			[
				'type'        => Controls_Manager::URL,
				'label'       => esc_html__( 'Link', 'powerpack' ),
				'placeholder' => 'https://example.com',
			]
		);

		$repeater->end_controls_tab();

		$repeater->start_controls_tab(
			'tab_item_style',
			[
				'label' => esc_html__( 'Style', 'powerpack' ),
			]
		);

		$this->register_field_style_controls( $repeater );

		$repeater->end_controls_tab();

		$repeater->end_controls_tabs();

		$this->add_control(
			'items',
			[
				'label'       => esc_html__( 'Items', 'powerpack' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => [
					[ 'marquee_image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
					[ 'marquee_image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
					[ 'marquee_image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
					[ 'marquee_image' => [ 'url' => Utils::get_placeholder_image_src() ] ],
				],
				'title_field' => '<# print( marquee_text || "Item" ); #>',
				'separator'   => 'before',
				'condition'   => [
					'source' => 'custom',
				],
			]
		);

		$posts_repeater = new Repeater();

		$posts_repeater->start_controls_tabs( 'tabs_post_field_content' );

		$posts_repeater->start_controls_tab(
			'tab_post_field_content',
			[
				'label' => esc_html__( 'Content', 'powerpack' ),
			]
		);

		$posts_repeater->add_control(
			'post_field',
			[
				'label'   => esc_html__( 'Field', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'featured_image',
				'options' => [
					'featured_image' => esc_html__( 'Featured Image', 'powerpack' ),
					'title'          => esc_html__( 'Title', 'powerpack' ),
					'date'           => esc_html__( 'Date', 'powerpack' ),
					'author'         => esc_html__( 'Author', 'powerpack' ),
				],
			]
		);

		$posts_repeater->end_controls_tab();

		$posts_repeater->start_controls_tab(
			'tab_post_field_style',
			[
				'label' => esc_html__( 'Style', 'powerpack' ),
			]
		);

		$this->register_field_style_controls( $posts_repeater, [
			'text_selector'       => '{{WRAPPER}} {{CURRENT_ITEM}}.pp-marquee-text',
			'text_hover_selector' => '{{WRAPPER}} {{CURRENT_ITEM}}.pp-marquee-text:hover',
			'item_selector'       => '{{WRAPPER}} {{CURRENT_ITEM}}',
			'image_condition'     => [ 'post_field' => 'featured_image' ],
			'text_condition'      => [ 'post_field!' => 'featured_image' ],
		] );

		$posts_repeater->end_controls_tab();

		$posts_repeater->end_controls_tabs();

		$this->add_control(
			'posts_items',
			[
				'label'       => esc_html__( 'Fields', 'powerpack' ),
				'description' => esc_html__( 'Each row becomes one marquee item per post, in this order.', 'powerpack' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $posts_repeater->get_controls(),
				'default'     => [
					[ 'post_field' => 'featured_image' ],
					[ 'post_field' => 'title' ],
				],
				'title_field' => '{{{ post_field }}}',
				'separator'   => 'before',
				'condition'   => [
					'source' => 'posts',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Register per-field style controls (image filters + text colors) on a repeater.
	 *
	 * Shared between the custom items repeater and the posts fields repeater so
	 * both expose the same Style tab without duplicating control declarations.
	 *
	 * Selectors are parameterized because the two repeaters emit different DOM:
	 * custom items carry the repeater-id class on an ancestor wrapper (descendant
	 * selector), while post fields carry it on the same span as `.pp-marquee-text`
	 * (concatenated selector).
	 *
	 * @since 2.13.0
	 * @access protected
	 *
	 * @param Repeater $repeater Repeater instance to receive the controls.
	 * @param array    $args     Optional overrides: image_selector, image_hover_selector,
	 *                           text_selector, text_hover_selector, item_selector,
	 *                           image_condition, text_condition.
	 */
	protected function register_field_style_controls( Repeater $repeater, array $args = [] ) {
		$args = array_merge( [
			'image_selector'       => '{{WRAPPER}} {{CURRENT_ITEM}} .pp-marquee-img',
			'image_hover_selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .pp-marquee-img:hover',
			'text_selector'        => '{{WRAPPER}} {{CURRENT_ITEM}} .pp-marquee-text',
			'text_hover_selector'  => '{{WRAPPER}} {{CURRENT_ITEM}} .pp-marquee-text:hover',
			'item_selector'        => '{{WRAPPER}} {{CURRENT_ITEM}} .pp-marquee-fields',
			'image_condition'      => [],
			'text_condition'       => [],
		], $args );

		$repeater->add_control(
			'field_item_style_heading',
			[
				'label' => esc_html__( 'Item', 'powerpack' ),
				'type'  => Controls_Manager::HEADING,
			]
		);

		$repeater->add_control(
			'item_background_color',
			[
				'label'     => esc_html__( 'Background Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					$args['item_selector'] => 'background-color: {{VALUE}};',
				],
			]
		);

		$repeater->add_control(
			'item_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					$args['item_selector'] => 'border-color: {{VALUE}};',
				],
			]
		);

		$repeater->add_control(
			'field_image_style_heading',
			[
				'label'     => esc_html__( 'Image', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => $args['image_condition'],
			]
		);

		$repeater->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'      => 'css_filters',
				'selector'  => $args['image_selector'],
				'condition' => $args['image_condition'],
			]
		);

		$repeater->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'      => 'css_hover_filters',
				'label'     => esc_html__( 'CSS Filters', 'powerpack' ) . ' ' . esc_html__( 'Hover', 'powerpack' ),
				'selector'  => $args['image_hover_selector'],
				'condition' => $args['image_condition'],
			]
		);

		$repeater->add_control(
			'field_text_style_heading',
			[
				'label'     => esc_html__( 'Text', 'powerpack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => $args['text_condition'],
			]
		);

		$repeater->add_control(
			'text_color',
			[
				'label'     => esc_html__( 'Text Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					$args['text_selector'] => 'color: {{VALUE}};',
				],
				'condition' => $args['text_condition'],
			]
		);

		$repeater->add_control(
			'text_color_hover',
			[
				'label'     => esc_html__( 'Text Hover Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					$args['text_hover_selector'] => 'color: {{VALUE}};',
				],
				'condition' => $args['text_condition'],
			]
		);
	}

	protected function register_content_separator_controls() {
		$this->start_controls_section(
			'section_separator',
			[
				'label' => esc_html__( 'Separator', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'separator',
			[
				'label'   => esc_html__( 'Separator', 'powerpack' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'separator_type',
			[
				'label'     => esc_html__( 'Type', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'icon',
				'options'   => [
					'icon'  => esc_html__( 'Icon', 'powerpack' ),
					'text'  => esc_html__( 'Text', 'powerpack' ),
					'image' => esc_html__( 'Image', 'powerpack' ),
				],
				'condition' => [
					'separator' => 'yes',
				],
			]
		);

		$this->add_control(
			'separator_icon',
			[
				'label'     => esc_html__( 'Icon', 'powerpack' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => [
					'value'   => 'fas fa-star-of-life',
					'library' => 'fa-solid',
				],
				'condition' => [
					'separator'       => 'yes',
					'separator_type!' => [ 'text', 'image' ],
				],
			]
		);

		$this->add_control(
			'separator_text',
			[
				'label'       => esc_html__( 'Text', 'powerpack' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => '/',
				'label_block' => true,
				'dynamic'     => [
					'active' => true,
				],
				'condition'   => [
					'separator'      => 'yes',
					'separator_type' => 'text',
				],
			]
		);

		$this->add_control(
			'separator_image',
			[
				'label'     => esc_html__( 'Image', 'powerpack' ),
				'type'      => Controls_Manager::MEDIA,
				'dynamic'   => [
					'active' => true,
				],
				'default'   => [
					'url' => Utils::get_placeholder_image_src(),
				],
				'condition' => [
					'separator'      => 'yes',
					'separator_type' => 'image',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name'      => 'separator_image',
				'label'     => esc_html__( 'Image Size', 'powerpack' ),
				'default'   => 'thumbnail',
				'condition' => [
					'separator'      => 'yes',
					'separator_type' => 'image',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_content_settings_controls() {
		$this->start_controls_section(
			'section_settings',
			[
				'label' => esc_html__( 'Settings', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

		$this->add_control(
			'direction',
			[
				'label'   => esc_html__( 'Direction', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'left',
				'options' => [
					'left'   => esc_html__( 'Left', 'powerpack' ),
					'right'  => esc_html__( 'Right', 'powerpack' ),
					'top'    => esc_html__( 'Top', 'powerpack' ),
					'bottom' => esc_html__( 'Bottom', 'powerpack' ),
				],
			]
		);

		$this->add_responsive_control(
			'container_height',
			[
				'label'      => esc_html__( 'Container Height', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'vh' ],
				'default'    => [
					'unit' => 'vh',
					'size' => 100,
				],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 3000,
					],
					'vh' => [
						'min' => 0,
						'max' => 100,
					],
					'%' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee' => 'height: {{SIZE}}{{UNIT}};',
				],
				'condition'  => [
					'direction' => ['top', 'bottom'],
				],
			]
		);

		$this->add_control(
			'on_hover',
			[
				'label'   => esc_html__( 'On Hover', 'powerpack' ),
				'type'    => Controls_Manager::SELECT,
				'default' => '',
				'options' => [
					''      => esc_html__( 'None', 'powerpack' ),
					'pause' => esc_html__( 'Pause', 'powerpack' ),
					'slow'  => esc_html__( 'Slow Down', 'powerpack' ),
				],
			]
		);

		$this->add_control(
			'slow_down_factor',
			[
				'label'       => esc_html__( 'Slow Down By', 'powerpack' ),
				'description' => esc_html__( 'Multiplier applied to the animation speed on hover. Higher means slower.', 'powerpack' ),
				'type'        => Controls_Manager::SLIDER,
				'range'       => [
					'px' => [
						'min'  => 1.5,
						'max'  => 10,
						'step' => 0.5,
					],
				],
				'default'     => [
					'size' => 3,
				],
				'condition'   => [
					'on_hover' => 'slow',
				],
			]
		);

		$this->add_control(
			'speed',
			[
				'label'     => esc_html__( 'Speed', 'powerpack' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => [
					'px' => [
						'min' => 0,
						'max' => 150,
					],
				],
				'default'   => [
					'size' => 50,
					'unit' => 'px',
				],
				'selectors' => [
					'{{WRAPPER}} .pp-marquee' => '--speed: {{SIZE}};',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_style_layout_controls() {
		$this->start_controls_section(
			'section_layout_style',
			[
				'label' => esc_html__( 'Layout', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'fields_layout',
			[
				'label'     => esc_html__( 'Fields Layout', 'powerpack' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'row',
				'options'   => [
					'row'    => esc_html__( 'Inline', 'powerpack' ),
					'column' => esc_html__( 'Stack', 'powerpack' ),
				],
				'selectors' => [
					'{{WRAPPER}} .pp-marquee' => '--fields-layout: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'fields_gap',
			[
				'label'      => esc_html__( 'Fields Gap', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 100,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee' => '--fields-gap: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'items_gap',
			[
				'label'      => esc_html__( 'Items gap', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'range'      => [
					'%' => [
						'min' => 1,
						'max' => 100,
					],
					'px' => [
						'min' => 1,
						'max' => 1000,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee-animation' => '--items-gap: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .pp-marquee-separator' => 'margin-inline-start: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'marquee_rotation',
			[
				'label'      => esc_html__( 'Rotation', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'deg' ],
				'range'      => [
					'deg' => [
						'min'  => -360,
						'max'  => 360,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee' => 'transform: rotate({{SIZE}}{{UNIT}});',
				],
			]
		);

		$this->end_controls_section();
	}

	protected function register_style_items_controls() {
		$this->start_controls_section(
			'section_items_style',
			[
				'label' => esc_html__( 'Items', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'items_padding',
			[
				'label'      => esc_html__( 'Padding', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee-fields' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_items' );

		$this->start_controls_tab(
			'tab_items_normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'marquee_bg',
				'label'    => esc_html__( 'Background', 'powerpack' ),
				'types'    => ['classic', 'gradient'],
				'exclude'  => ['image'],
				'selector' => '{{WRAPPER}} .pp-marquee-fields',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'items_border',
				'selector' => '{{WRAPPER}} .pp-marquee-fields',
			]
		);

		$this->add_responsive_control(
			'items_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'powerpack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee-fields' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'items_box_shadow',
				'exclude'  => [
					'box_shadow_position',
				],
				'selector' => '{{WRAPPER}} .pp-marquee-fields',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_items_hover',
			[
				'label' => esc_html__( 'Hover', 'powerpack' ),
			]
		);

		$this->add_control(
			'items_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .pp-marquee-fields:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'items_box_shadow_hover',
				'exclude'  => [
					'box_shadow_position',
				],
				'selector' => '{{WRAPPER}} .pp-marquee-fields:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	/**
	 * @since 2.13.0
	 */
	protected function register_style_text_controls() {
		$this->start_controls_section(
			'section_text_style',
			[
				'label' => esc_html__( 'Text', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'text_typography',
				'selector' => '{{WRAPPER}} .pp-marquee-text',
			]
		);

		$this->add_responsive_control(
			'text_align',
			[
				'label'                => esc_html__( 'Alignment', 'powerpack' ),
				'type'                 => Controls_Manager::CHOOSE,
				'options'              => [
					'left'   => [
						'title' => esc_html__( 'Left', 'powerpack' ),
						'icon'  => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'powerpack' ),
						'icon'  => 'eicon-text-align-center',
					],
					'right'  => [
						'title' => esc_html__( 'Right', 'powerpack' ),
						'icon'  => 'eicon-text-align-right',
					],
				],
				'selectors_dictionary' => [
					'left'   => 'flex-start',
					'center' => 'center',
					'right'  => 'flex-end',
				],
				'selectors'            => [
					'{{WRAPPER}} .pp-marquee-fields' => 'justify-content: {{VALUE}}; align-items: {{VALUE}};',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_text' );

		$this->start_controls_tab(
			'tab_text_normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_control(
			'text_color',
			[
				'label'     => esc_html__( 'Text Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .pp-marquee-text' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'text_shadow',
				'label'    => esc_html__( 'Text Shadow', 'powerpack' ),
				'selector' => '{{WRAPPER}} .pp-marquee-text',
			]
		);

		$this->add_group_control(
			Group_Control_Text_Stroke::get_type(),
			[
				'name'     => 'text_stroke',
				'label'    => esc_html__( 'Text Stroke', 'powerpack' ),
				'selector' => '{{WRAPPER}} .pp-marquee-text',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_text_hover',
			[
				'label' => esc_html__( 'Hover', 'powerpack' ),
			]
		);

		$this->add_control(
			'text_color_hover',
			[
				'label'     => esc_html__( 'Text Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .pp-marquee-text:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name'     => 'text_shadow_hover',
				'label'    => esc_html__( 'Text Shadow', 'powerpack' ),
				'selector' => '{{WRAPPER}} .pp-marquee-text:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	/**
	 * @since 2.13.0
	 */
	protected function register_style_image_controls() {
		$this->start_controls_section(
			'section_image_style',
			[
				'label' => esc_html__( 'Image', 'powerpack' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_responsive_control(
			'image_width',
			[
				'label'      => esc_html__( 'Image Width', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 400,
					],
				],
				'default'    => [
					'unit' => 'px',
					'size' => 120,
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee-img' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'image_height',
			[
				'label'      => esc_html__( 'Image Height', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 400,
					],
				],
				'default'    => [
					'unit' => 'px',
					'size' => 120,
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee-img' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_image' );

		$this->start_controls_tab(
			'tab_image_normal',
			[
				'label' => esc_html__( 'Normal', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'     => 'image_css_filters',
				'selector' => '{{WRAPPER}} .pp-marquee-img',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_image_hover',
			[
				'label' => esc_html__( 'Hover', 'powerpack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name'     => 'image_css_hover_filters',
				'selector' => '{{WRAPPER}} .pp-marquee-img:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();
	}

	protected function register_style_separator_controls() {
		$this->start_controls_section(
			'section_separator_style',
			[
				'label'     => esc_html__( 'Separator', 'powerpack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'separator' => 'yes',
				],
			]
		);

		$this->add_control(
			'separator_icon_color',
			[
				'label'     => esc_html__( 'Color', 'powerpack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'global'    => [
					'default' => Global_Colors::COLOR_PRIMARY,
				],
				'selectors' => [
					'{{WRAPPER}} .pp-marquee-separator' => '--separator-color: {{VALUE}};',
				],
				'condition' => [
					'separator' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'separator_icon_size',
			[
				'label'      => esc_html__( 'Size', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 6,
						'max' => 300,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee-separator' => '--separator-size: {{SIZE}}{{UNIT}};',
				],
				'condition'  => [
					'separator' => 'yes',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'separator_text_typography',
				'label'     => esc_html__( 'Typography', 'powerpack' ),
				'selector'  => '{{WRAPPER}} .pp-marquee-separator-text',
				'condition' => [
					'separator'      => 'yes',
					'separator_type' => 'text',
				],
			]
		);

		$this->add_responsive_control(
			'separator_image_width',
			[
				'label'      => esc_html__( 'Image Width', 'powerpack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'range'      => [
					'px' => [
						'min' => 6,
						'max' => 400,
					],
				],
				'default'    => [
					'unit' => 'px',
					'size' => 60,
				],
				'selectors'  => [
					'{{WRAPPER}} .pp-marquee-separator-image img' => 'width: {{SIZE}}{{UNIT}};',
				],
				'condition'  => [
					'separator'      => 'yes',
					'separator_type' => 'image',
				],
			]
		);

		$this->add_control(
			'separator_icon_fit_to_size',
			[
				'label'       => esc_html__( 'Fit to Size', 'powerpack' ),
				'type'        => Controls_Manager::SWITCHER,
				'description' => esc_html__( 'Avoid gaps around icons when width and height aren\'t equal', 'powerpack' ),
				'label_off'   => esc_html__( 'Off', 'powerpack' ),
				'label_on'    => esc_html__( 'On', 'powerpack' ),
				'selectors'   => [
					'{{WRAPPER}} .pp-marquee-separator svg' => 'width: 100%;',
				],
				'condition'   => [
					'separator'               => 'yes',
					'separator_type!'         => [ 'text', 'image' ],
					'separator_icon[library]' => 'svg',
				],
			]
		);

		$this->add_responsive_control(
			'separator_icon_rotate',
			[
				'label'          => esc_html__( 'Rotate', 'powerpack' ),
				'type'           => Controls_Manager::SLIDER,
				'size_units'     => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
				'default'        => [
					'unit' => 'deg',
				],
				'tablet_default' => [
					'unit' => 'deg',
				],
				'mobile_default' => [
					'unit' => 'deg',
				],
				'selectors'      => [
					'{{WRAPPER}} .pp-marquee-separator' => '--separator-rotate: {{SIZE}}{{UNIT}};',
				],
				'condition'      => [
					'separator' => 'yes',
				],
			]
		);

		$this->end_controls_section();
	}

	/**
	 * Render Marquee widget output on the frontend.
	 *
	 * Written in PHP and used to generate the final HTML.
	 *
	 * @access protected
	 */
	protected function render() {
		$settings  = $this->get_settings_for_display();		
		$direction = $settings['direction'];
		$vertical  = '';

		$classes = [ 'pp-marquee', 'pp-marquee-' . esc_attr( $this->get_id() )];

		if ( 'top' === $direction || 'bottom' === $direction ) {
			$classes[] = 'pp-marquee-vertical';
			$vertical  = 'yes';
			$direction = ( 'top' === $settings['direction'] ) ? '1' : '-1';
		} else {
			$direction = ( 'left' === $settings['direction'] ) ? '1' : '-1';
		}

		$pause_on_hover = ( 'pause' === $settings['on_hover'] ) ? 'true' : 'false';
		$slow_factor    = ( 'slow' === $settings['on_hover'] && ! empty( $settings['slow_down_factor']['size'] ) )
			? (float) $settings['slow_down_factor']['size']
			: 1;

		$this->add_render_attribute( [
			'marquee' => [
				'class'                => $classes,
				'data-v-direction'     => esc_attr( $vertical ),
				'data-viewport-offset' => '0.01',
				'data-slow-factor'     => esc_attr( $slow_factor ),
				'style'                => "--direction: {$direction}; --pause-on-hover: {$pause_on_hover};",
			],
		] );
		?>

		<div <?php $this->print_render_attribute_string( 'marquee' ); ?>>
			<div class="pp-marquee-animation">
			<?php
			if ( 'posts' === $settings['source'] ) {
				$marquee_data = $this->get_marquee_posts();
			} else {
				$marquee_data = $this->get_marquee_data();
			}

			if ( ! empty( $marquee_data ) ) {
				foreach ( $marquee_data as $index => $item ) {
					$item_key = 'marquee-item-' . $index;

					$this->add_render_attribute( $item_key, 'class', [
						'pp-marquee-item',
						'elementor-repeater-item-' . $item['_id'],
					] );
					?>
					<div <?php $this->print_render_attribute_string( $item_key ); ?>>
					<?php
					$this->render_item( $item, $index );
					if ( 'yes' === $settings['separator'] ) {
						$this->render_separator();
					}
					?>
					</div>
					<?php
				}
			} ?>
			</div>
		</div>

		<?php
	}

	protected function get_marquee_data() {
		$settings = $this->get_settings_for_display();
		$items    = ! empty( $settings['items'] ) ? $settings['items'] : [];

		foreach ( $items as &$item ) {
			$fields = [];

			if ( ! empty( $item['marquee_image']['url'] ) || ! empty( $item['marquee_image']['id'] ) ) {
				$fields[] = [
					'type'       => 'image',
					'value'      => $item['marquee_image'],
					'image_size' => ! empty( $item['image_size'] ) ? $item['image_size'] : 'medium',
				];
			}

			if ( '' !== trim( (string) ( $item['marquee_text'] ?? '' ) ) ) {
				$fields[] = [
					'type'  => 'text',
					'value' => $item['marquee_text'],
				];
			}

			$item['fields'] = $fields;
		}

		return $items;
	}

	/**
	 * Render a single marquee item: wraps all fields in one link (if set)
	 * and delegates to field renderers.
	 *
	 * @since 2.13.0
	 * @access protected
	 */
	protected function render_item( $item, $index ) {
		if ( empty( $item['fields'] ) ) {
			return;
		}

		$has_link = ! empty( $item['item_link']['url'] );
		$key      = 'marquee-item-fields-' . $index;
		$tag      = $has_link ? 'a' : 'span';

		$this->add_render_attribute( $key, 'class', 'pp-marquee-fields' );

		if ( $has_link ) {
			$this->add_link_attributes( $key, $item['item_link'] );
			$this->add_render_attribute( $key, 'class', 'pp-marquee-url' );
		}

		echo '<' . $tag . ' ';
		$this->print_render_attribute_string( $key );
		echo '>';

		foreach ( $item['fields'] as $field ) {
			if ( 'image' === $field['type'] ) {
				$this->render_image_field( $field );
			} elseif ( 'text' === $field['type'] ) {
				$this->render_text_field( $field );
			}
		}

		echo '</' . $tag . '>';
	}

	/**
	 * @since 2.13.0
	 */
	protected function render_image_field( $field ) {
		$image = $field['value'];

		if ( empty( $image['url'] ) && empty( $image['id'] ) ) {
			return;
		}

		$size      = ! empty( $field['image_size'] ) ? $field['image_size'] : 'medium';
		$image_id  = ! empty( $image['id'] ) ? apply_filters( 'wpml_object_id', $image['id'], 'attachment', true ) : 0;
		$classes   = [ 'pp-marquee-content', 'pp-marquee-image' ];
		if ( ! empty( $field['field_key'] ) ) {
			$classes[] = 'elementor-repeater-item-' . $field['field_key'];
		}
		?>
		<span class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">
			<?php
			if ( $image_id ) {
				echo wp_get_attachment_image( $image_id, $size, '', [ 'class' => 'pp-marquee-img' ] );
			} else {
				printf(
					'<img class="pp-marquee-img" src="%s" alt="%s" loading="lazy" decoding="async" />',
					esc_url( $image['url'] ),
					esc_attr( Control_Media::get_image_alt( $image ) )
				);
			}
			?>
		</span>
		<?php
	}

	/**
	 * @since 2.13.0
	 */
	protected function render_text_field( $field ) {
		if ( '' === trim( (string) $field['value'] ) ) {
			return;
		}

		$classes = [ 'pp-marquee-content', 'pp-marquee-text' ];
		if ( ! empty( $field['field_key'] ) ) {
			$classes[] = 'elementor-repeater-item-' . $field['field_key'];
		}
		?>
		<span class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>"><?php echo esc_html( $field['value'] ); ?></span>
		<?php
	}

	protected function render_separator() {
		$settings = $this->get_settings_for_display();
		$type     = ! empty( $settings['separator_type'] ) ? $settings['separator_type'] : 'icon';

		if ( 'text' === $type ) {
			$text = isset( $settings['separator_text'] ) ? $settings['separator_text'] : '';

			if ( '' === trim( (string) $text ) ) {
				return;
			}
			?>
			<span class="pp-marquee-separator pp-marquee-separator-text" aria-hidden="true"><?php echo esc_html( $text ); ?></span>
			<?php
			return;
		}

		if ( 'image' === $type ) {
			if ( empty( $settings['separator_image']['url'] ) && empty( $settings['separator_image']['id'] ) ) {
				return;
			}
			?>
			<span class="pp-marquee-separator pp-marquee-separator-image" aria-hidden="true">
				<?php echo Group_Control_Image_Size::get_attachment_image_html( $settings, 'separator_image', 'separator_image' ); ?>
			</span>
			<?php
			return;
		}

		if ( empty( $settings['separator_icon']['value'] ) ) {
			return;
		}
		?>
		<span class="pp-marquee-separator pp-icon">
			<?php Icons_Manager::render_icon( $settings['separator_icon'], [ 'aria-hidden' => 'true' ] ); ?>
		</span>
		<?php
	}

	protected function render_separator_icon() {
		$this->render_separator();
	}

	/**
	 * Get post query arguments.
	 *
	 * @access protected
	 */
	protected function get_posts_query_arguments() {
		return PP_Posts_Query_Builder::build( $this->get_settings_for_display(), [
			'widget_type' => 'marquee',
		] );
	}

	/**
	 * Build one field entry for a post item.
	 *
	 * @since 2.13.0
	 * @access protected
	 */
	protected function build_post_field( $post_id, $field, $image_size ) {
		switch ( $field ) {
			case 'featured_image':
				$attachment_id = get_post_thumbnail_id( $post_id );
				$url           = wp_get_attachment_image_src( $attachment_id, $image_size );
				return [
					'type'       => 'image',
					'value'      => [
						'id'  => $attachment_id,
						'url' => ! empty( $url ) ? $url[0] : '',
					],
					'image_size' => $image_size,
				];
			case 'date':
				return [ 'type' => 'text', 'value' => get_the_date( '', $post_id ) ];
			case 'author':
				return [ 'type' => 'text', 'value' => get_the_author_meta( 'display_name', get_post_field( 'post_author', $post_id ) ) ];
			case 'title':
			default:
				return [ 'type' => 'text', 'value' => get_the_title( $post_id ) ];
		}
	}

	protected function get_marquee_posts() {
		$settings     = $this->get_settings();
		$post_fields  = ! empty( $settings['posts_items'] ) ? $settings['posts_items'] : [ [ 'post_field' => 'featured_image' ] ];
		$image_size   = ! empty( $settings['image_size'] ) ? $settings['image_size'] : 'medium_large';

		$i     = 0;
		$items = [];

		$args        = $this->get_posts_query_arguments();
		$posts_query = PP_Posts_Query_Builder::run( $args );

		if ( $posts_query->have_posts() ) {
			while ( $posts_query->have_posts() ) {
				$posts_query->the_post();
				$post_id = $posts_query->post->ID;

				if ( 'post_url' === $settings['posts_link_to'] ) {
					$link = [
						'url'         => esc_url( get_permalink( $post_id ) ),
						'is_external' => ( 'yes' === $settings['post_link_target'] ) ? 'on' : '',
						'nofollow'    => '',
					];
				} else {
					$link = $settings['posts_link'];
				}

				$fields = [];
				foreach ( $post_fields as $field_config ) {
					$name  = ! empty( $field_config['post_field'] ) ? $field_config['post_field'] : 'title';
					$field = $this->build_post_field( $post_id, $name, $image_size );

					if ( ! empty( $field_config['_id'] ) ) {
						$field['field_key'] = $field_config['_id'];
					}

					$fields[] = $field;
				}

				$items[] = [
					'_id'       => 'ppm' . $i,
					'item_link' => $link,
					'fields'    => $fields,
				];

				$i++;
			}
		}

		wp_reset_postdata();

		return $items;
	}
}
