<?php
/**
 * Widget Name: Image Mask
 * Description: Displays an image clipped into a decorative shape ( blobs,
 *              circle, squircle, hexagon, arch and more ) using scalable SVG
 *              masks, with optional accent backdrops behind the shape and a
 *              hover zoom. Pure CSS — no frontend JS. Ships with selectable
 *              visual styles; 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\Group_Control_Box_Shadow;
use Elementor\Control_Media;
use Elementor\Utils;

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

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

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

	/**
	 * Get widget icon.
	 *
	 * @since 1.7.0
	 * @return string
	 */
	public function get_icon(): string {
		return 'eicon-image-rollover 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( 'image', 'mask', 'shape', 'blob', 'clip', 'crop', 'captain-widgets-kit' );
	}

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

	/**
	 * 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 – Clean Mask', 'captain-widgets-kit' ),
			'style-2' => esc_html__( 'Style 2 – Accent Offset', 'captain-widgets-kit' ),
			'style-3' => esc_html__( 'Style 3 – Outline Ring', 'captain-widgets-kit' ),
			'style-4' => esc_html__( 'Style 4 – Gradient Glow', 'captain-widgets-kit' ),
			'style-5' => esc_html__( 'Style 5 – Duotone Hover', 'captain-widgets-kit' ),
		);
	}

	/**
	 * Selectable mask shapes.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	private function captwiki_shape_options(): array {
		return array(
			'blob-1'   => esc_html__( 'Blob 1', 'captain-widgets-kit' ),
			'blob-2'   => esc_html__( 'Blob 2', 'captain-widgets-kit' ),
			'blob-3'   => esc_html__( 'Blob 3', 'captain-widgets-kit' ),
			'circle'   => esc_html__( 'Circle', 'captain-widgets-kit' ),
			'squircle' => esc_html__( 'Squircle', 'captain-widgets-kit' ),
			'hexagon'  => esc_html__( 'Hexagon', 'captain-widgets-kit' ),
			'pentagon' => esc_html__( 'Pentagon', 'captain-widgets-kit' ),
			'rhombus'  => esc_html__( 'Rhombus', 'captain-widgets-kit' ),
			'arch'     => esc_html__( 'Arch', 'captain-widgets-kit' ),
			'shield'   => esc_html__( 'Shield', 'captain-widgets-kit' ),
		);
	}

	/**
	 * Allowed aspect ratio options.
	 *
	 * @since 1.7.0
	 * @return array
	 */
	private function captwiki_ratio_options(): array {
		return array(
			'1-1'  => '1:1',
			'4-3'  => '4:3',
			'3-4'  => '3:4',
			'16-9' => '16:9',
			'auto' => esc_html__( 'Original Image', 'captain-widgets-kit' ),
		);
	}

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

		$this->register_layout_style_controls();
		$this->register_effects_style_controls();
	}

	/**
	 * Content tab — image & shape.
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_content_controls(): void {

		$this->start_controls_section(
			'section_content',
			array(
				'label' => esc_html__( 'Image Mask', '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(),
			)
		);

		$this->add_control(
			'image',
			array(
				'label'   => esc_html__( 'Image', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => array( 'url' => Utils::get_placeholder_image_src() ),
				'dynamic' => array( 'active' => true ),
			)
		);

		$this->add_control(
			'mask_shape',
			array(
				'label'   => esc_html__( 'Shape', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'blob-1',
				'options' => $this->captwiki_shape_options(),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — layout ( width, alignment, ratio ).
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_layout_style_controls(): void {

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

		$this->add_responsive_control(
			'box_width',
			array(
				'label'      => esc_html__( 'Width', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 80,
						'max' => 1000,
					),
					'%'  => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'selectors'  => array(
					'{{WRAPPER}} .captwiki-imask' => 'max-width: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'box_align',
			array(
				'label'                => esc_html__( 'Alignment', 'captain-widgets-kit' ),
				'type'                 => Controls_Manager::CHOOSE,
				'default'              => 'center',
				'options'              => array(
					'left'   => array(
						'title' => esc_html__( 'Left', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center' => array(
						'title' => esc_html__( 'Center', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'selectors_dictionary' => array(
					'left'   => 'margin-left: 0; margin-right: auto;',
					'center' => 'margin-left: auto; margin-right: auto;',
					'right'  => 'margin-left: auto; margin-right: 0;',
				),
				'selectors'            => array(
					'{{WRAPPER}} .captwiki-imask' => '{{VALUE}}',
				),
			)
		);

		$this->add_control(
			'aspect_ratio',
			array(
				'label'                => esc_html__( 'Aspect Ratio', 'captain-widgets-kit' ),
				'type'                 => Controls_Manager::SELECT,
				'default'              => '1-1',
				'options'              => $this->captwiki_ratio_options(),
				'selectors_dictionary' => array(
					'1-1'  => '--captwiki-imask-ratio: 1 / 1;',
					'4-3'  => '--captwiki-imask-ratio: 4 / 3;',
					'3-4'  => '--captwiki-imask-ratio: 3 / 4;',
					'16-9' => '--captwiki-imask-ratio: 16 / 9;',
					'auto' => '--captwiki-imask-ratio: auto;',
				),
				'selectors'            => array(
					'{{WRAPPER}} .captwiki-imask' => '{{VALUE}}',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Style tab — effects ( accent, zoom, shadow ).
	 *
	 * @since 1.7.0
	 * @return void
	 */
	private function register_effects_style_controls(): void {

		$this->start_controls_section(
			'section_effects_style',
			array(
				'label' => esc_html__( 'Effects', '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-imask' => '--captwiki-imask-accent: {{VALUE}};',
				),
				'description' => esc_html__( 'Used by the backdrop shape in the offset, ring and glow styles.', 'captain-widgets-kit' ),
			)
		);

		$this->add_control(
			'hover_zoom',
			array(
				'label'        => esc_html__( 'Zoom on Hover', 'captain-widgets-kit' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'captain-widgets-kit' ),
				'label_off'    => esc_html__( 'No', 'captain-widgets-kit' ),
				'return_value' => 'yes',
				'default'      => 'yes',
			)
		);

		$this->add_control(
			'image_opacity',
			array(
				'label'     => esc_html__( 'Image Opacity', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0.2,
						'max'  => 1,
						'step' => 0.01,
					),
				),
				'default'   => array( 'size' => 1 ),
				'selectors' => array(
					'{{WRAPPER}} .captwiki-imask__img' => 'opacity: {{SIZE}};',
				),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'        => 'stage_shadow',
				'label'       => esc_html__( 'Drop Shadow', 'captain-widgets-kit' ),
				'selector'    => '{{WRAPPER}} .captwiki-imask__stage',
				'description' => esc_html__( 'Applied to the stage box, not the shape outline.', 'captain-widgets-kit' ),
			)
		);

		$this->end_controls_section();
	}

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

		$image_url = ! empty( $settings['image']['url'] ) ? $settings['image']['url'] : '';

		if ( '' === $image_url ) {
			return;
		}

		$allowed_styles = array_keys( $this->captwiki_style_options() );
		$allowed_shapes = array_keys( $this->captwiki_shape_options() );
		$style          = in_array( $settings['widget_style'], $allowed_styles, true ) ? $settings['widget_style'] : 'style-1';
		$shape          = in_array( $settings['mask_shape'], $allowed_shapes, true ) ? $settings['mask_shape'] : 'blob-1';
		$zoom           = 'yes' === $settings['hover_zoom'];

		$image_alt = ! empty( $settings['image']['id'] ) ? Control_Media::get_image_alt( $settings['image'] ) : '';

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

		$classes = 'captwiki-imask captwiki-' . $style . ' captwiki-imask--shape-' . $shape;

		if ( $zoom ) {
			$classes .= ' captwiki-imask--zoom';
		}

		echo '<div class="' . esc_attr( $classes ) . '">';
		echo '<div class="captwiki-imask__stage">';
		echo '<span class="captwiki-imask__backdrop" aria-hidden="true"></span>';
		echo '<div class="captwiki-imask__media">';

		printf(
			'<img class="captwiki-imask__img" src="%1$s" alt="%2$s" loading="lazy" />',
			esc_url( $image_url ),
			esc_attr( $image_alt )
		);

		echo '</div>'; // media.
		echo '</div>'; // stage.
		echo '</div>'; // imask.
	}
}
