<?php
/**
 * Widget Name: Process Steps
 * Description: A "how it works" widget that lays out a numbered sequence of
 *              steps with an icon or auto number, a title and a description.
 *              Ships with selectable visual styles — horizontal connected
 *              steps, vertical timeline, numbered cards, zigzag timeline and
 *              an arrow flow. Only the selected style CSS file is loaded on
 *              the frontend.
 *
 * @package    captain-widgets-kit
 * @subpackage captain-widgets-kit/includes
 * @since      1.7.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Icons_Manager;

/**
 * Class Captwiki_Process_Steps
 *
 * @since 1.7.0
 */
class Captwiki_Process_Steps extends Widget_Base {

	/**
	 * Get widget name.
	 *
	 * @since 1.7.0
	 * @return string
	 */
	public function get_name(): string {
		return 'captwiki-process-steps';
	}

	/**
	 * Get widget title.
	 *
	 * @since 1.7.0
	 * @return string
	 */
	public function get_title(): string {
		return esc_html__( 'Process Steps', 'captain-widgets-kit' );
	}

	/**
	 * Get widget icon.
	 *
	 * @since 1.7.0
	 * @return string
	 */
	public function get_icon(): string {
		return 'eicon-time-line captwiki-el-logo';
	}

	/**
	 * Get widget categories.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	public function get_categories(): array {
		return array( 'captwiki-essential' );
	}

	/**
	 * Get widget keywords.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	public function get_keywords(): array {
		return array( 'process', 'steps', 'timeline', 'how it works', 'workflow', 'roadmap', 'captain-widgets-kit' );
	}

	/**
	 * Common stylesheet dependency.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	public function get_style_depends(): array {
		return array( 'captwiki_process_steps' );
	}

	/**
	 * Disable Elementor's default inner wrapper.
	 *
	 * @since 1.7.0
	 * @return bool
	 */
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Selectable visual styles.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	private function captwiki_style_options(): array {
		return array(
			'style-1' => esc_html__( 'Style 1 – Horizontal Steps', 'captain-widgets-kit' ),
			'style-2' => esc_html__( 'Style 2 – Vertical Timeline', 'captain-widgets-kit' ),
			'style-3' => esc_html__( 'Style 3 – Numbered Cards', 'captain-widgets-kit' ),
			'style-4' => esc_html__( 'Style 4 – Zigzag Timeline', 'captain-widgets-kit' ),
			'style-5' => esc_html__( 'Style 5 – Arrow Flow', 'captain-widgets-kit' ),
		);
	}

	/**
	 * Register widget controls.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	protected function register_controls(): void {
		$this->register_steps_controls();

		$this->register_general_style_controls();
		$this->register_marker_style_controls();
		$this->register_content_style_controls();
		$this->register_card_style_controls();
	}

	/**
	 * Content tab — steps.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_steps_controls(): void {

		$this->start_controls_section(
			'section_steps',
			array(
				'label' => esc_html__( 'Steps', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'widget_style',
			array(
				'label'   => esc_html__( 'Style', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => $this->captwiki_style_options(),
			)
		);

		$repeater = new Repeater();

		$repeater->add_control(
			'step_title',
			array(
				'label'       => esc_html__( 'Title', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Step Title', 'captain-widgets-kit' ),
				'label_block' => true,
				'dynamic'     => array( 'active' => true ),
			)
		);

		$repeater->add_control(
			'step_description',
			array(
				'label'   => esc_html__( 'Description', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::TEXTAREA,
				'rows'    => 4,
				'default' => esc_html__( 'Describe what happens in this step of the process.', 'captain-widgets-kit' ),
				'dynamic' => array( 'active' => true ),
			)
		);

		$repeater->add_control(
			'step_icon',
			array(
				'label'       => esc_html__( 'Icon (optional)', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::ICONS,
				'skin'        => 'inline',
				'label_block' => false,
				'description' => esc_html__( 'Leave empty to show the step number instead.', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'steps',
			array(
				'label'       => esc_html__( 'Steps', 'captain-widgets-kit' ),
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $repeater->get_controls(),
				'default'     => array(
					array(
						'step_title'       => esc_html__( 'Discover', 'captain-widgets-kit' ),
						'step_description' => esc_html__( 'We learn about your goals, audience and requirements.', 'captain-widgets-kit' ),
					),
					array(
						'step_title'       => esc_html__( 'Design', 'captain-widgets-kit' ),
						'step_description' => esc_html__( 'Wireframes and visual designs are crafted and refined.', 'captain-widgets-kit' ),
					),
					array(
						'step_title'       => esc_html__( 'Develop', 'captain-widgets-kit' ),
						'step_description' => esc_html__( 'The approved design is built with clean, fast code.', 'captain-widgets-kit' ),
					),
					array(
						'step_title'       => esc_html__( 'Launch', 'captain-widgets-kit' ),
						'step_description' => esc_html__( 'After testing, your project goes live to the world.', 'captain-widgets-kit' ),
					),
				),
				'title_field' => '{{{ step_title }}}',
			)
		);

		$this->add_control(
			'title_tag',
			array(
				'label'     => esc_html__( 'Title HTML Tag', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'h3',
				'options'   => array(
					'h2'  => 'H2',
					'h3'  => 'H3',
					'h4'  => 'H4',
					'h5'  => 'H5',
					'h6'  => 'H6',
					'div' => 'div',
				),
				'separator' => 'before',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — general.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_general_style_controls(): void {

		$this->start_controls_section(
			'section_general_style',
			array(
				'label' => esc_html__( 'General', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'accent_color',
			array(
				'label'     => esc_html__( 'Accent Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-steps' => '--captwiki-ps-accent: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'connector_color',
			array(
				'label'     => esc_html__( 'Connector Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-steps' => '--captwiki-ps-line: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'steps_gap',
			array(
				'label'      => esc_html__( 'Gap Between Steps', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em' ),
				'range'      => array(
					'px' => array(
						'min' => 0,
						'max' => 120,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-steps' => '--captwiki-ps-gap: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — marker ( number / icon badge ).
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_marker_style_controls(): void {

		$this->start_controls_section(
			'section_marker_style',
			array(
				'label' => esc_html__( 'Marker', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'marker_size',
			array(
				'label'      => esc_html__( 'Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px' ),
				'range'      => array(
					'px' => array(
						'min' => 28,
						'max' => 120,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-steps' => '--captwiki-ps-marker: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_control(
			'marker_color',
			array(
				'label'     => esc_html__( 'Text / Icon Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-steps' => '--captwiki-ps-marker-color: {{VALUE}};',
				),
			)
		);

		$this->add_control(
			'marker_bg_color',
			array(
				'label'     => esc_html__( 'Background Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-steps' => '--captwiki-ps-marker-bg: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'marker_typography',
				'label'    => esc_html__( 'Number Typography', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-steps__marker',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — title & description.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_content_style_controls(): void {

		$this->start_controls_section(
			'section_content_style',
			array(
				'label' => esc_html__( 'Content', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'title_color',
			array(
				'label'     => esc_html__( 'Title Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-steps__title' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'title_typography',
				'label'    => esc_html__( 'Title Typography', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-steps__title',
			)
		);

		$this->add_control(
			'desc_color',
			array(
				'label'     => esc_html__( 'Description Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-steps__desc' => 'color: {{VALUE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'     => 'desc_typography',
				'label'    => esc_html__( 'Description Typography', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-steps__desc',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — card ( box ) styles.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_card_style_controls(): void {

		$this->start_controls_section(
			'section_card_style',
			array(
				'label' => esc_html__( 'Box', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_control(
			'card_bg_color',
			array(
				'label'     => esc_html__( 'Background Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => array(
					'{{WRAPPER}} .captwiki-steps' => '--captwiki-ps-card-bg: {{VALUE}};',
				),
			)
		);

		$this->add_responsive_control(
			'card_padding',
			array(
				'label'      => esc_html__( 'Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-steps__body' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'card_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em' ),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-steps__body' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'card_box_shadow',
				'label'    => esc_html__( 'Box Shadow', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .captwiki-steps__body',
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Capture an Elementor icon as an HTML string.
	 *
	 * @since 1.7.0
	 * @param array $icon Icon control value.
	 * @return string
	 */
	private function captwiki_get_icon_html( array $icon ): string {
		ob_start();
		Icons_Manager::render_icon( $icon, array( 'aria-hidden' => 'true' ) );
		return (string) ob_get_clean();
	}

	/**
	 * Render a single step item.
	 *
	 * @since 1.7.0
	 * @param array  $step      Repeater item.
	 * @param int    $number    1-based step number.
	 * @param string $title_tag Sanitised heading tag.
	 * @return void
	 */
	private function captwiki_render_step( array $step, int $number, string $title_tag ): void {

		$title   = isset( $step['step_title'] ) ? trim( (string) $step['step_title'] ) : '';
		$desc    = isset( $step['step_description'] ) ? trim( (string) $step['step_description'] ) : '';
		$icon    = isset( $step['step_icon'] ) ? (array) $step['step_icon'] : array();
		$item_id = ! empty( $step['_id'] ) ? ' elementor-repeater-item-' . sanitize_html_class( $step['_id'] ) : '';

		echo '<li class="captwiki-steps__item' . esc_attr( $item_id ) . '">';

		echo '<div class="captwiki-steps__marker" aria-hidden="true">';
		if ( ! empty( $icon['value'] ) ) {
			echo '<span class="captwiki-steps__marker-icon">' . $this->captwiki_get_icon_html( $icon ) . '</span>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
		} else {
			echo '<span class="captwiki-steps__number">' . esc_html( (string) $number ) . '</span>';
		}
		echo '</div>';

		echo '<div class="captwiki-steps__body">';
		echo '<span class="captwiki-steps__ghost-number" aria-hidden="true">' . esc_html( str_pad( (string) $number, 2, '0', STR_PAD_LEFT ) ) . '</span>';

		if ( '' !== $title ) {
			echo '<' . esc_attr( $title_tag ) . ' class="captwiki-steps__title">' . esc_html( $title ) . '</' . esc_attr( $title_tag ) . '>';
		}

		if ( '' !== $desc ) {
			echo '<p class="captwiki-steps__desc">' . esc_html( $desc ) . '</p>';
		}

		echo '</div>';
		echo '</li>';
	}

	/**
	 * Render widget output on the frontend.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	protected function render(): void {
		$settings = $this->get_settings_for_display();

		if ( empty( $settings['steps'] ) || ! is_array( $settings['steps'] ) ) {
			return;
		}

		$allowed_styles = array_keys( $this->captwiki_style_options() );
		$style          = in_array( $settings['widget_style'], $allowed_styles, true ) ? $settings['widget_style'] : 'style-1';
		$title_tag      = in_array( $settings['title_tag'], array( 'h2', 'h3', 'h4', 'h5', 'h6', 'div' ), true ) ? $settings['title_tag'] : 'h3';

		// Load only the active style stylesheet, depending on the common one.
		wp_enqueue_style(
			'captwiki-process-steps-' . $style,
			CAPTWIKI_URL . 'assets/css/widgets/process-steps/captwiki-process-steps-' . $style . '.css',
			array( 'captwiki_process_steps' ),
			CAPTWIKI_VERSION
		);

		echo '<ol class="captwiki-steps captwiki-' . esc_attr( $style ) . '">';

		$number = 1;
		foreach ( $settings['steps'] as $step ) {
			$this->captwiki_render_step( (array) $step, $number, $title_tag );
			++$number;
		}

		echo '</ol>';
	}
}
