<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Sifency\Traits\Sifency_Addons_Animation_Controls;
use Sifency\Traits\Sifency_Addons_Animation_Manager;
use Sifency\Traits\Sifency_Addons_Master_Typography;
use Sifency\Traits\Sifency_Addons_Help_Controls;
use Sifency\Traits\Sifency_Addons_Custom_CSS_Controls;

class Sifency_Addons_Interactive_Typography extends Sifency_Addons_Widget_Base {
	use Sifency_Addons_Master_Typography;
	use Sifency_Addons_Animation_Controls;
	use Sifency_Addons_Help_Controls;
	use Sifency_Addons_Custom_CSS_Controls;

	public function __construct( $data = array(), $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = array(
			'name'           => 'sifency-addons-interactive-typography',
			'title'          => 'Sifency Cinematic Typography',
			'icon'           => 'eicon-typography',
			'category'       => array( 'sifency-creative-widgets' ),
			'script_depends' => array( 'gsap', 'gsap-scrolltrigger', 'sifency-interactive-typo-script' ),
			'style_depends'  => array( 'sifency-sun-style' ),
			'keywords'       => array( 'typography', 'interactive', '3d flip', 'hover', 'mask', 'framer' ),
		);
	}

	protected function register_controls() {
		$this->start_controls_section(
			'section_features',
			array( 'label' => esc_html__( 'Features Toggle', 'sifency-addons' ) )
		);

		$this->add_control(
			'enable_scroll',
			array(
				'label'   => esc_html__( '1. Scroll Expansion (Mask)', 'sifency-addons' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);
		$this->add_control(
			'enable_hover',
			array(
				'label'   => esc_html__( '2. Hover Height Stretch', 'sifency-addons' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);
		$this->add_control(
			'enable_3d',
			array(
				'label'   => esc_html__( '3. 3D Perspective Flip', 'sifency-addons' ),
				'type'    => Controls_Manager::SWITCHER,
				'default' => 'yes',
			)
		);

		$this->end_controls_section();

		// --- Content Section ---
		$this->start_controls_section(
			'section_content',
			array( 'label' => esc_html__( 'Typography Content', 'sifency-addons' ) )
		);

		$this->add_control(
			'bg_word',
			array(
				'label'   => esc_html__( 'Background Word', 'sifency-addons' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'PRODUCT DESIGNER', 'sifency-addons' ),
			)
		);
		$this->add_control(
			'center_text',
			array(
				'label'     => esc_html__( 'Center Text (Optional)', 'sifency-addons' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'I am a', 'sifency-addons' ),
				'condition' => array( 'enable_scroll' => 'yes' ),
			)
		);

		$this->add_responsive_control(
			'repeat_count',
			array(
				'label'     => esc_html__( 'Repeat Rows', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 1,
						'max'  => 10,
						'step' => 1,
					),
				),
				'default'   => array( 'size' => 5 ),
				'selectors' => array( '{{WRAPPER}}' => '--s-repeat-count: {{SIZE}};' ),
			)
		);

		$this->end_controls_section();

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

		$this->add_responsive_control(
			'scroll_start_clip',
			array(
				'label'     => esc_html__( 'Scroll Start Clip (%)', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					),
				),
				'default'   => array( 'size' => 35 ),
				'condition' => array( 'enable_scroll' => 'yes' ),
				'selectors' => array( '{{WRAPPER}}' => '--s-start-clip: {{SIZE}};' ),
			)
		);

		$this->add_responsive_control(
			'scroll_end_clip',
			array(
				'label'     => esc_html__( 'Scroll End Clip (%)', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					),
				),
				'default'   => array( 'size' => 0 ),
				'condition' => array( 'enable_scroll' => 'yes' ),
				'selectors' => array( '{{WRAPPER}}' => '--s-end-clip: {{SIZE}};' ),
			)
		);

		$this->add_responsive_control(
			'scroll_duration',
			array(
				'label'     => esc_html__( 'Scroll Animation Height (viewport)', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 100,
						'max'  => 300,
						'step' => 10,
					),
				),
				'default'   => array( 'size' => 150 ),
				'condition' => array( 'enable_scroll' => 'yes' ),
				'selectors' => array( '{{WRAPPER}}' => '--s-scroll-dur: {{SIZE}};' ),
			)
		);

		// Hover Settings
		$this->add_responsive_control(
			'hover_scale',
			array(
				'label'     => esc_html__( 'Hover Stretch Amount', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 1.1,
						'max'  => 3,
						'step' => 0.1,
					),
				),
				'default'   => array( 'size' => 1.8 ),
				'condition' => array( 'enable_hover' => 'yes' ),
				'selectors' => array( '{{WRAPPER}}' => '--s-hover-scale: {{SIZE}};' ),
			)
		);

		$this->add_responsive_control(
			'hover_radius',
			array(
				'label'     => esc_html__( 'Hover Radius (px)', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 50,
						'max'  => 500,
						'step' => 10,
					),
				),
				'default'   => array( 'size' => 200 ),
				'condition' => array( 'enable_hover' => 'yes' ),
				'selectors' => array( '{{WRAPPER}}' => '--s-hover-radius: {{SIZE}};' ),
			)
		);

		// 3D Settings
		$this->add_responsive_control(
			'heading_3d',
			array(
				'label'     => esc_html__( '3D Perspective Settings', 'sifency-addons' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => array( 'enable_3d' => 'yes' ),
			)
		);

		$this->add_control(
			'flip_pattern',
			array(
				'label'     => esc_html__( 'Apply 3D To', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'nth',
				'options'   => array(
					'nth'    => 'Every Nth Letter',
					'single' => 'Specific Single Letter',
				),
				'condition' => array( 'enable_3d' => 'yes' ),
			)
		);
		$this->add_control(
			'nth_letter',
			array(
				'label'     => esc_html__( 'Nth Letter Value', 'sifency-addons' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 3,
				'min'       => 1,
				'condition' => array(
					'enable_3d'    => 'yes',
					'flip_pattern' => 'nth',
				),
			)
		);
		$this->add_control(
			'single_letter',
			array(
				'label'     => esc_html__( 'Letter Index', 'sifency-addons' ),
				'type'      => Controls_Manager::NUMBER,
				'default'   => 3,
				'min'       => 1,
				'condition' => array(
					'enable_3d'    => 'yes',
					'flip_pattern' => 'single',
				),
			)
		);
		$this->add_control(
			'flip_axis',
			array(
				'label'     => esc_html__( 'Rotation Axis', 'sifency-addons' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'rotateY',
				'options'   => array(
					'rotateX' => 'Vertical (X-Axis)',
					'rotateY' => 'Horizontal (Y-Axis)',
				),
				'condition' => array( 'enable_3d' => 'yes' ),
			)
		);

		$this->add_responsive_control(
			'flip_duration',
			array(
				'label'     => esc_html__( 'Rotation Speed (s)', 'sifency-addons' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 1,
						'max'  => 10,
						'step' => 0.5,
					),
				),
				'default'   => array( 'size' => 4 ),
				'condition' => array( 'enable_3d' => 'yes' ),
				'selectors' => array( '{{WRAPPER}}' => '--s-flip-dur: {{SIZE}};' ),
			)
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style',
			array(
				'label' => esc_html__( 'Colors & Typography', 'sifency-addons' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);
		$this->add_control(
			'bg_color',
			array(
				'label'     => esc_html__( 'Section Background', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array( '{{WRAPPER}} .sifency-typo-wrapper' => 'background-color: {{VALUE}};' ),
			)
		);
		$this->add_control(
			'bg_text_color',
			array(
				'label'     => esc_html__( 'Typography Color', 'sifency-addons' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .sifency-bg-row'       => 'color: {{VALUE}};',
					'{{WRAPPER}} .sifency-typo-wrapper' => '--typo-color: {{VALUE}};',
				),
			)
		);
		$this->end_controls_section();

		$this->add_sifency_addons_master_typography_controls(
			array(
				'selector'  => '{{WRAPPER}} .sifency-bg-row',
				'condition' => array( 'enable_scroll' => 'yes' ),
				'exclude'   => array( 'alignment', 'bg', 'radius', 'border', 'tabs', 'transition' ),
			)
		);
		$this->add_sifency_addons_master_typography_controls(
			array(
				'prefix'    => 'center_',
				'selector'  => '.sifency-center-text',
				'condition' => array( 'enable_scroll' => 'yes' ),
				'exclude'   => array( 'alignment', 'bg', 'radius', 'border', 'tabs', 'transition' ),
			)
		);
		$this->add_Sifency_Addons_Animation_Controls();
		$this->add_Sifency_Addons_Custom_CSS_Controls();
		$this->update_control(
			'sifency_animation_target',
			array(
				'type'    => Controls_Manager::HIDDEN,
				'default' => 'wrapper',
			)
		);
	}

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

		$word  = strtoupper( $settings['bg_word'] );
		$chars = str_split( $word );

		// 3D Logic Values
		$pattern  = $settings['flip_pattern'];
		$nth_val  = max( 1, intval( $settings['nth_letter'] ) );
		$sing_val = max( 0, intval( $settings['single_letter'] ) - 1 );

		$config = array(
			'scroll' => $settings['enable_scroll'] === 'yes',
			'hover'  => $settings['enable_hover'] === 'yes',
			'flip'   => $settings['enable_3d'] === 'yes',
			'axis'   => $settings['flip_axis'] ?? 'rotateY',
		);

		$mask_class        = $config['scroll'] ? 'sifency-is-masked' : 'sifency-no-mask';
		$animation_manager = new Sifency_Addons_Animation_Manager( $settings );

		$wrapper_classes = array( 'sifency-typo-wrapper' );
		$wrapper_attrs   = $animation_manager->get_wrapper_attributes( $wrapper_classes );
		?>
		<div id="<?php echo esc_attr( $wrapper_id ); ?>" <?php echo wp_kses_post( $wrapper_attrs ); ?> data-config='<?php echo esc_attr( wp_json_encode( $config ) ); ?>'>
			<div class="sifency-typo-pin">
				
				<div class="sifency-typo-mask <?php echo esc_attr( $mask_class ); ?>">
					<div class="sifency-typo-grid">
						<?php
						// Always generate the maximum allowed rows (10). Javascript easily toggles
						// their display via the elementor generated dynamically assigned breakpoint CSS Var.
						for ( $i = 0; $i < 10; $i++ ) {
							echo '<div class="sifency-bg-row">';
							foreach ( $chars as $index => $char ) {
								$is_flip = false;
								if ( $config['flip'] ) {
									if ( $pattern === 'nth' ) {
										$is_flip = ( ( $index + 1 ) % $nth_val ) === 0;
									} else {
										$is_flip = ( $index === $sing_val );
									}
								}
								$flip_class = $is_flip ? 'sifency-is-flipping' : '';

								echo '<span class="sifency-char ' . esc_attr( $flip_class ) . '">';
								echo '<span class="sifency-char-inner">' . esc_html( $char ) . '</span>';
								echo '</span>';
							}
							echo '</div>';
						}
						?>
					</div>
				</div>

				<?php if ( $config['scroll'] && ! empty( $settings['center_text'] ) ) : ?>
					<div class="sifency-center-text"><?php echo esc_html( $settings['center_text'] ); ?></div>
				<?php endif; ?>

			</div>
		</div>
		<?php
	}
}
