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

use Sifency\Classes\Sifency_Addons_Widget_Base;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Background;
use Elementor\Icons_Manager;
use Elementor\Repeater;
use Sifency\Traits\Sifency_Addons_Flex_Controls;
use Sifency\Traits\Sifency_Addons_Master_Typography;
use Sifency\Traits\Sifency_Addons_Item_Style_Controls;
use Sifency\Traits\Sifency_Addons_Section_Header;
use Sifency\Traits\Sifency_Addons_Help_Controls;

class Sifency_Process extends Sifency_Addons_Widget_Base {
    use Sifency_Addons_Master_Typography;
    use Sifency_Addons_Item_Style_Controls;
	use Sifency_Addons_Flex_Controls;
    use Sifency_Addons_Section_Header;
    use Sifency_Addons_Help_Controls;
	public function __construct( $data = [], $args = null ) {
		parent::__construct( $data, $args );
		$this->wg_config = [
        'name'       => 'sifency_process',
        'title'      => 'Sifency Process',
        'icon'       => 'eicon-flow',
        'category' => [ 'sifency-business-widgets' ],
        'style_depends'     => [ 'sifency-process-style' ],
		'keywords'      => ['process', 'steps', 'workflow', 'timeline', 'progress', 'flow'],
    ];}

	protected function register_controls() {
		$this->add_sifency_addons_section_header_controls();
        $this->start_controls_section(
			'section_layout',
			[ 'label' => esc_html__( 'Layout & Steps', 'sifency-addons' ) ]
		);
		$this->add_control(
			'skin',
			[
				'label'   => esc_html__( 'Layout Skin', 'sifency-addons' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'horizontal',
				'options' => [
					'horizontal' => 'Horizontal Standard',
					'bubble'     => 'Bubble Flow (ZigZag)',
					'vertical'   => 'Vertical Timeline',
					'chess'      => 'Chess (ZigZag Vertical)',
					'cards'      => 'Modern Cards',
				],
				'prefix_class' => 'sifency-process-skin-',
			]
		);
		$this->add_responsive_control(
			'columns',
			[
				'label' => 'Columns',
				'type' => Controls_Manager::SELECT,
				'default' => '4',
				'options' => [ '1'=>'1', '2'=>'2', '3'=>'3', '4'=>'4', '5'=>'5' ],
				'condition' => [ 'skin' => ['horizontal', 'cards', 'bubble'] ],
				'selectors' => [ '{{WRAPPER}} .sifency-process-wrapper' => 'grid-template-columns: repeat({{VALUE}}, 1fr);' ],
			]
		);
        $this->add_responsive_control(
            'process_gap',
            [
                'label'     => esc_html__( 'Gap', 'sifency-addons' ),
                'type'      => Controls_Manager::SLIDER,
                'default'   => [ 'size' => 30 ],
                'range'     => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],
                'selectors' => [ '{{WRAPPER}} .sifency-process-wrapper' => 'gap: {{SIZE}}{{UNIT}};' ],
            ]
        );
		$this->add_control(
			'show_process_number',
			[
				'label'        => esc_html__( 'Show Step Number', 'sifency-addons' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Show', 'sifency-addons' ),
				'label_off'    => esc_html__( 'Hide', 'sifency-addons' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			]
		);
        $this->add_sifency_addons_flex_alignment_controls( [
			'label'     => esc_html__( 'Use Flex Layout', 'sifency-addons' ),
			'selector'  => '.sifency-process-step',
        ]);
        $this->end_controls_section();

        $this->start_controls_section(
			'section_steps_data',
			[ 'label' => esc_html__( 'Process Items', 'sifency-addons' ) ]
		);
		$repeater = new Repeater();

		$repeater->add_control( 'title', [
			'label' => esc_html__( 'Title', 'sifency-addons' ),
			'type' => Controls_Manager::TEXT,
			'default' => 'Step Title',
			'label_block' => true,
		]);

		$repeater->add_control( 'description', [
			'label' => esc_html__( 'Description', 'sifency-addons' ),
			'type' => Controls_Manager::TEXTAREA,
			'default' => 'Short description of this process step.',
		]);

		$repeater->add_control( 'icon_type', [
			'label' => 'Graphic Type',
			'type' => Controls_Manager::CHOOSE,
			'options' => [
				'icon' => [ 'icon' => 'eicon-star' ],
				'text' => [ 'icon' => 'eicon-font' ],
				'none' => [ 'icon' => 'eicon-ban' ],
			],
			'default' => 'icon',
		]);

		$repeater->add_control( 'step_icon', [
			'label' => 'Icon',
			'type' => Controls_Manager::ICONS,
			'default' => [ 'value' => 'fas fa-rocket', 'library' => 'fa-solid' ],
			'condition' => [ 'icon_type' => 'icon' ],
		]);

		$repeater->add_control( 'step_number', [
			'label' => 'Custom Number/Text',
			'type' => Controls_Manager::TEXT,
			'placeholder' => '1',
			'condition' => [ 'icon_type' => 'text' ],
		]);

		$repeater->add_group_control(
			\Elementor\Group_Control_Background::get_type(),
			[
				'name'     => 'item_bg',
				'label'    => esc_html__( 'Background', 'sifency-addons' ),
				'types'    => [ 'classic', 'gradient' ], 
				'selector' => '{{WRAPPER}} {{CURRENT_ITEM}} .sifency-process-icon-box',
			]
		);
		$this->add_control(
			'steps',
			[
				'label' => esc_html__( 'Steps', 'sifency-addons' ),
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[ 'title' => 'Planning', 'item_color' => '#fddad3ff' ],
					[ 'title' => 'Strategy', 'item_color' => '#6d8fffff' ],
					[ 'title' => 'Design', 'item_color' => '#f4ff77' ],
					[ 'title' => 'Launch', 'item_color' => '#8b9dffff' ],
				],
				'title_field' => '{{{ title }}}',
			]
		);
		$this->end_controls_section();
		$this->add_sifency_addons_help_controls();
		$this->start_controls_section( 'style_general', [ 'label' => 'General', 'tab' => Controls_Manager::TAB_STYLE ] );
		$this->add_responsive_control( 'gap', [
			'label' => 'Gap',
			'type' => Controls_Manager::SLIDER,
			'selectors' => [ '{{WRAPPER}} .sifency-process-wrapper' => 'gap: {{SIZE}}px;' ],
		]);
        $this->end_controls_section();


		$this->start_controls_section( 'style_icon', [ 'label' => 'Icon / Bubble', 'tab' => Controls_Manager::TAB_STYLE ] );
		
		$this->add_responsive_control( 'icon_size', [
			'label' => 'Box Size',
			'type' => Controls_Manager::SLIDER,
			'range' => [ 'px' => [ 'min' => 40, 'max' => 200 ] ],
			'default' => [ 'size' => 100 ],
			'selectors' => [ 
                '{{WRAPPER}}' => '--sifency-icon-size: {{SIZE}}px;',
                '{{WRAPPER}} .sifency-process-icon-box' => 'width: {{SIZE}}px; height: {{SIZE}}px; flex: 0 0 {{SIZE}}px;' 
            ],
		]);

		$this->add_responsive_control( 'icon_font_size', [
			'label' => 'Icon Font Size',
			'type' => Controls_Manager::SLIDER,
			'selectors' => [ '{{WRAPPER}} .sifency-process-icon i, {{WRAPPER}} .sifency-process-icon svg' => 'font-size: {{SIZE}}px; height: {{SIZE}}px; width: {{SIZE}}px;' ],
		]);

		$this->add_control( 'icon_color', [ 'label' => 'Icon Color', 'type' => Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .sifency-process-icon i, {{WRAPPER}} .sifency-process-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}}' ] ] );
		$this->add_group_control( Group_Control_Background::get_type(), [ 'name' => 'icon_bg', 'selector' => '{{WRAPPER}} .sifency-process-icon-box' ] );
		$this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'icon_border', 'selector' => '{{WRAPPER}} .sifency-process-icon-box' ] );
		$this->add_responsive_control( 'icon_radius', [ 'label' => 'Radius', 'type' => Controls_Manager::DIMENSIONS, 'selectors' => [ '{{WRAPPER}} .sifency-process-icon-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ] ] );
		$this->add_group_control( Group_Control_Box_Shadow::get_type(), [ 'name' => 'icon_shadow', 'selector' => '{{WRAPPER}} .sifency-process-icon-box' ] );
        $this->end_controls_section();

        $this->start_controls_section( 'style_connector', [ 'label' => 'Connector Line', 'tab' => Controls_Manager::TAB_STYLE ] );
        
        $this->add_control( 'show_connector', [ 'label' => 'Show Line', 'type' => Controls_Manager::SWITCHER, 'default' => 'yes' ] );

        $this->add_control( 'connector_color', [
			'label' => 'Color',
			'type' => Controls_Manager::COLOR,
			'condition' => [ 'show_connector' => 'yes' ],
			'selectors' => [ 
                '{{WRAPPER}} .sifency-process-step:after' => 'border-color: {{VALUE}}; background-color: {{VALUE}}',
                '{{WRAPPER}}.sifency-process-skin-chess:before' => 'background-color: {{VALUE}}',
            ],
		]);

        $this->add_responsive_control( 'connector_width', [
			'label' => 'Thickness',
			'type' => Controls_Manager::SLIDER,
            'range' => [ 'px' => [ 'min' => 1, 'max' => 10 ] ],
            'default' => [ 'size' => 1 ],
			'condition' => [ 'show_connector' => 'yes' ],
			'selectors' => [ 
                '{{WRAPPER}} .sifency-process-step:after' => 'border-width: {{SIZE}}px;',
                '{{WRAPPER}}.sifency-process-skin-chess:before' => 'width: {{SIZE}}px;',
            ],
		]);

        $this->add_control( 'connector_style', [
			'label' => 'Style',
			'type' => Controls_Manager::SELECT,
            'options' => [
                'solid' => 'Solid',
                'dashed' => 'Dashed',
                'dotted' => 'Dotted',
            ],
            'default' => 'dashed',
			'condition' => [ 'show_connector' => 'yes', 'skin' => ['horizontal', 'bubble'] ],
			'selectors' => [ '{{WRAPPER}} .sifency-process-step:after' => 'border-bottom-style: {{VALUE}};' ],
		]);

        $this->add_responsive_control( 'connector_offset_top', [
			'label' => 'Top Offset',
			'type' => Controls_Manager::SLIDER,
			'condition' => [ 'show_connector' => 'yes', 'skin' => ['horizontal', 'bubble'] ],
			'selectors' => [ '{{WRAPPER}} .sifency-process-step:after' => 'top: calc( (var(--sifency-icon-size, 100px) / 2) + {{SIZE}}px );' ],
		]);

        $this->end_controls_section();
        $this->add_sifency_addons_item_style_controls([
            'prefix' => 'step_item',
            'label' => 'Step Item Box',
            'selector' => '.sifency-process-step',
        ]);
        $this->add_sifency_addons_master_typography_controls([
            'prefix'   => 'heading_style',
            'label'    => 'Title',
            'selector' => '.sifency-heading-style',
			'exclude' => [ 'transition', 'tabs', 'bg', 'radius' ],
        ]);
        $this->add_sifency_addons_master_typography_controls([
            'prefix'   => 'content_style',
            'label'    => 'Description',
            'selector' => '.sifency-content-style',
            'exclude' => [ 'shadow', 'stroke', 'transition', 'tabs', 'bg', 'radius' ],
			'color_only' => true,
			'show_max_width' => true,
        ]);
        $this->add_sifency_addons_master_typography_controls([
            'prefix'   => 'number_style',
            'label'    => 'Count Badge',
            'selector' => '.sifency-number-style',
            'exclude' => [ 'shadow', 'stroke', 'transition', 'tabs', 'alignment' ],
			'condition' => [ 'show_process_number' => 'yes' ],
			'color_only' => true,
        ]);
	}
	protected function render_dom( array $context ) {
		$wrapper_id = esc_attr( $context['dom_id'] );
		$settings = $this->get_settings_for_display();
		$wrapper_classes = 'sifency-process-wrapper';
		if ( 'yes' === $settings['show_connector'] ) $wrapper_classes .= ' has-connector';
		?>
		<?php $this->render_sifency_section_header_elements( $settings ); ?>
		<div id="<?php echo esc_attr ( $wrapper_id ); ?>" class="<?php echo esc_attr( $wrapper_classes ); ?>">
			<?php foreach ( $settings['steps'] as $index => $step ) : 
				$count = $index + 1;
				$step_classes = 'sifency-process-step elementor-repeater-item-' . $step['_id'];
				
				$delay = $index * 0.2; 
				$style_attr = "animation-delay: {$delay}s;";
			?>
				<div class="<?php echo esc_attr( $step_classes ); ?>" style="<?php echo esc_attr( $style_attr ); ?>">
					
					<div class="sifency-process-icon-wrap">
						<div class="sifency-process-icon-box">
							<?php if ( 'icon' === $step['icon_type'] ) : ?>
								<div class="sifency-process-icon">
									<?php \Elementor\Icons_Manager::render_icon( $step['step_icon'], [ 'aria-hidden' => 'true' ] ); ?>
								</div>
							<?php elseif ( 'text' === $step['icon_type'] ) : ?>
								<span class="sifency-process-icon-text"><?php echo esc_html( $step['step_number'] ); ?></span>
							<?php endif; ?>
						</div>

						<?php if ( 'yes' === $settings['show_process_number'] ) : ?>
							<div class="sifency-process-count sifency-number-style">
								<?php echo esc_html( $count ); ?>
							</div>
						<?php endif; ?>

					</div>

					<div class="sifency-process-content">
						<h4 class="sifency-process-title sifency-heading-style"><?php echo esc_html( $step['title'] ); ?></h4>
						<div class="sifency-process-desc sifency-content-style"><?php echo esc_html( $step['description'] ); ?></div>
					</div>

				</div>
			<?php endforeach; ?>
		</div>
		<?php
	}
}