<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Controls_Manager;
use Sifency\Traits\Sifency_Addons_Master_Typography;
use Sifency\Traits\Sifency_Addons_Flex_Controls;
use Sifency\Traits\Sifency_Addons_Help_Controls;

class Sifency_Image_Trail extends Sifency_Addons_Widget_Base {
	use Sifency_Addons_Master_Typography;
	use Sifency_Addons_Flex_Controls;
	use Sifency_Addons_Help_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-image-trail',
			'title'          => 'Sifency Cursor Image Trail',
			'icon'           => 'eicon-image-rollover',
			'category'       => array( 'sifency-creative-widgets' ),
			'script_depends' => array( 'gsap', 'sifency-trail-script' ),
			'style_depends'  => array( 'sifency-creative-style' ),
			'keywords'       => array( 'cursor', 'trail', 'mouse follow', 'gallery', 'awwwards' ),
		);
	}

	protected function register_controls() {
		$this->start_controls_section(
			'section_content',
			array( 'label' => esc_html__( 'Trail Images', 'sifency-addons' ) )
		);

		$this->add_control(
			'gallery',
			array(
				'label'       => esc_html__( 'Select Images', 'sifency-addons' ),
				'type'        => Controls_Manager::GALLERY,
				'default'     => array(),
				'description' => 'Upload 5 to 15 images. They will appear sequentially as the mouse moves.',
			)
		);

		$this->add_control(
			'text_overlay',
			array(
				'label'       => esc_html__( 'Center Big Text (Optional)', 'sifency-addons' ),
				'type'        => Controls_Manager::TEXTAREA,
				'default'     => 'HELLO NEPTUNE',
				'description' => 'Like the screenshot, you can put a big text behind or in front of the trail.',
			)
		);

		$this->end_controls_section();

		// --- Settings Section ---
		$this->start_controls_section(
			'section_settings',
			array( 'label' => esc_html__( 'Trail Behavior', 'sifency-addons' ) )
		);

		$this->add_control(
			'distance_threshold',
			array(
				'label'       => esc_html__( 'Mouse Distance (px)', 'sifency-addons' ),
				'type'        => Controls_Manager::SLIDER,
				'range'       => array(
					'px' => array(
						'min' => 20,
						'max' => 300,
					),
				),
				'default'     => array( 'size' => 80 ),
				'description' => 'How far the mouse needs to move before the NEXT image pops up. Lower = More images.',
			)
		);

		$this->add_control(
			'visibility_duration',
			array(
				'label'   => esc_html__( 'Stay Visible For (Seconds)', 'sifency-addons' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => array(
					'px' => array(
						'min'  => 0.2,
						'max'  => 3,
						'step' => 0.1,
					),
				),
				'default' => array( 'size' => 0.8 ),
			)
		);

		$this->add_control(
			'random_rotation',
			array(
				'label'       => esc_html__( 'Random Tilt (Rotation)', 'sifency-addons' ),
				'type'        => Controls_Manager::SWITCHER,
				'default'     => 'yes',
				'description' => 'Gives the images a chaotic, artistic tilt like the screenshot.',
			)
		);

		$this->end_controls_section();

		// --- Style Section ---
		$this->start_controls_section(
			'section_style',
			array(
				'label' => esc_html__( 'Appearance', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'section_height',
			array(
				'label'      => esc_html__( 'Area Height', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vh' ),
				'default'    => array(
					'unit' => 'vh',
					'size' => 100,
				),
				'selectors'  => array(
					'{{WRAPPER}} .sifency-trail-area' => 'height: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'image_size',
			array(
				'label'      => esc_html__( 'Image Width', 'sifency-addons' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'vw' ),
				'range'      => array(
					'px' => array(
						'min' => 50,
						'max' => 800,
					),
				),
				'default'    => array(
					'size' => 250,
					'unit' => 'px',
				),
				'selectors'  => array(
					'{{WRAPPER}}' => '--trail-img-width: {{SIZE}}{{UNIT}};',
				),
			)
		);
		$this->add_sifency_addons_flex_alignment_controls(
			array(
				'selector'  => '{{WRAPPER}} .sifency-trail-area',
				'condition' => array(),
			)
		);

		$this->end_controls_section();
		$this->add_sifency_addons_master_typography_controls(
			array(
				'selector'             => '{{WRAPPER}} .sifency-trail-text',
				'show_max_width'       => true,
				'show_background_blur' => true,
				'exclude'              => array( 'text_shadow', 'tabs', 'transition', 'border', 'margin', 'padding' ),
			)
		);
	}

	protected function render_dom( array $context ) {
		$settings   = $this->get_settings_for_display();
		$wrapper_id = esc_attr( $context['dom_id'] );

		$gallery    = $settings['gallery'];
		$image_urls = array();
		if ( ! empty( $gallery ) ) {
			foreach ( $gallery as $image ) {
				$image_urls[] = $image['url'];
			}
		}

		$data_attributes = array(
			'data-distance' => $settings['distance_threshold']['size'] ?? 80,
			'data-duration' => $settings['visibility_duration']['size'] ?? 0.8,
			'data-rotation' => $settings['random_rotation'] === 'yes' ? 'true' : 'false',
		);

		?>
		<div id="<?php echo esc_attr( $wrapper_id ); ?>" class="sifency-trail-wrapper"
			data-images='<?php echo esc_attr( wp_json_encode( $image_urls ) ); ?>'
			data-distance="<?php echo esc_attr( $data_attributes['data-distance'] ); ?>"
			data-duration="<?php echo esc_attr( $data_attributes['data-duration'] ); ?>"
			data-rotation="<?php echo esc_attr( $data_attributes['data-rotation'] ); ?>">
			
			<div class="sifency-trail-area">
				<?php if ( ! empty( $settings['text_overlay'] ) ) : ?>
					<h1 class="sifency-trail-text"><?php echo nl2br( esc_html( $settings['text_overlay'] ) ); ?></h1>
				<?php endif; ?>
				
			</div>

		</div>
		<?php
	}
}
