<?php

namespace Calio\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Utils;

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

/**
 * Renders a draggable before/after image comparison slider.
 */
class ImageComparisonSliderWidget extends BaseWidget
{
    public function get_name(): string
    {
        return 'calio-image-comparison-slider';
    }

    public function get_title(): string
    {
        return esc_html__('Image Comparison Slider', 'calio-addon');
    }

    public function get_icon(): string
    {
        return 'eicon-image-before-after';
    }

    public function get_keywords(): array
    {
        return array_merge(parent::get_keywords(), ['image comparison', 'before after', 'slider', 'draggable']);
    }

    protected function register_controls(): void
    {
        $this->start_controls_section(
            'section_images',
            [
                'label' => esc_html__('Images', 'calio-addon'),
            ]
        );

        $this->add_control(
            'before_image',
            [
                'label' => esc_html__('Before Image', 'calio-addon'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'after_image',
            [
                'label' => esc_html__('After Image', 'calio-addon'),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'before_alt',
            [
                'label' => esc_html__('Before Alt Text', 'calio-addon'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Before image', 'calio-addon'),
            ]
        );

        $this->add_control(
            'after_alt',
            [
                'label' => esc_html__('After Alt Text', 'calio-addon'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('After image', 'calio-addon'),
            ]
        );

        $this->add_responsive_control(
            'height',
            [
                'label' => esc_html__('Height', 'calio-addon'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'vh'],
                'range' => [
                    'px' => [
                        'min' => 160,
                        'max' => 900,
                    ],
                    'vh' => [
                        'min' => 20,
                        'max' => 90,
                    ],
                ],
                'default' => [
                    'size' => 420,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'image_position',
            [
                'label' => esc_html__('Image Position', 'calio-addon'),
                'type' => Controls_Manager::SELECT,
                'default' => 'center center',
                'options' => [
                    'center center' => esc_html__('Center', 'calio-addon'),
                    'center top' => esc_html__('Top', 'calio-addon'),
                    'center bottom' => esc_html__('Bottom', 'calio-addon'),
                    'left center' => esc_html__('Left', 'calio-addon'),
                    'right center' => esc_html__('Right', 'calio-addon'),
                ],
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison img' => 'object-position: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_labels',
            [
                'label' => esc_html__('Labels', 'calio-addon'),
            ]
        );

        $this->add_control(
            'show_labels',
            [
                'label' => esc_html__('Show Labels', 'calio-addon'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_control(
            'before_label',
            [
                'label' => esc_html__('Before Label', 'calio-addon'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('Before', 'calio-addon'),
                'condition' => [
                    'show_labels' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'after_label',
            [
                'label' => esc_html__('After Label', 'calio-addon'),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__('After', 'calio-addon'),
                'condition' => [
                    'show_labels' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'label_position',
            [
                'label' => esc_html__('Label Position', 'calio-addon'),
                'type' => Controls_Manager::SELECT,
                'default' => 'top',
                'options' => [
                    'top' => esc_html__('Top', 'calio-addon'),
                    'bottom' => esc_html__('Bottom', 'calio-addon'),
                ],
                'condition' => [
                    'show_labels' => 'yes',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_behavior',
            [
                'label' => esc_html__('Behavior', 'calio-addon'),
            ]
        );

        $this->add_control(
            'initial_position',
            [
                'label' => esc_html__('Initial Position', 'calio-addon'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'size' => 50,
                    'unit' => '%',
                ],
            ]
        );

        $this->add_control(
            'transition_speed',
            [
                'label' => esc_html__('Transition Speed', 'calio-addon'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'ms' => [
                        'min' => 0,
                        'max' => 1200,
                        'step' => 25,
                    ],
                ],
                'default' => [
                    'size' => 180,
                    'unit' => 'ms',
                ],
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => '--calio-comparison-speed: {{SIZE}}ms;',
                ],
            ]
        );

        $this->add_control(
            'handle_style',
            [
                'label' => esc_html__('Handle Style', 'calio-addon'),
                'type' => Controls_Manager::SELECT,
                'default' => 'circle',
                'options' => [
                    'circle' => esc_html__('Circle', 'calio-addon'),
                    'square' => esc_html__('Square', 'calio-addon'),
                    'minimal' => esc_html__('Minimal', 'calio-addon'),
                ],
            ]
        );

        $this->add_control(
            'show_handle_arrows',
            [
                'label' => esc_html__('Show Handle Arrows', 'calio-addon'),
                'type' => Controls_Manager::SWITCHER,
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->add_responsive_control(
            'handle_size',
            [
                'label' => esc_html__('Handle Size', 'calio-addon'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 24,
                        'max' => 96,
                    ],
                ],
                'default' => [
                    'size' => 54,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => '--calio-comparison-handle-size: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'divider_width',
            [
                'label' => esc_html__('Divider Width', 'calio-addon'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 12,
                    ],
                ],
                'default' => [
                    'size' => 3,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => '--calio-comparison-divider-width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_container',
            [
                'label' => esc_html__('Container', 'calio-addon'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'overlay_color',
            [
                'label' => esc_html__('Overlay Color', 'calio-addon'),
                'type' => Controls_Manager::COLOR,
                'default' => 'rgba(15, 23, 42, 0.18)',
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison::after' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'container_background',
            [
                'label' => esc_html__('Background Color', 'calio-addon'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_dimensions_control(
            'container_radius',
            esc_html__('Radius', 'calio-addon'),
            '{{WRAPPER}} .calio-image-comparison',
            'border-radius',
            [
                'size_units' => ['px', '%'],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'container_border',
                'selector' => '{{WRAPPER}} .calio-image-comparison',
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'container_shadow',
                'selector' => '{{WRAPPER}} .calio-image-comparison',
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_labels',
            [
                'label' => esc_html__('Labels', 'calio-addon'),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_labels' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'label_color',
            [
                'label' => esc_html__('Text Color', 'calio-addon'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .calio-comparison-label' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'label_background',
            [
                'label' => esc_html__('Background Color', 'calio-addon'),
                'type' => Controls_Manager::COLOR,
                'default' => 'rgba(15, 23, 42, 0.78)',
                'selectors' => [
                    '{{WRAPPER}} .calio-comparison-label' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'label_typography',
                'selector' => '{{WRAPPER}} .calio-comparison-label',
            ]
        );

        $this->add_dimensions_control(
            'label_padding',
            esc_html__('Padding', 'calio-addon'),
            '{{WRAPPER}} .calio-comparison-label',
            'padding'
        );

        $this->add_dimensions_control(
            'label_radius',
            esc_html__('Radius', 'calio-addon'),
            '{{WRAPPER}} .calio-comparison-label',
            'border-radius',
            [
                'size_units' => ['px', '%'],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_handle',
            [
                'label' => esc_html__('Handle', 'calio-addon'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'handle_color',
            [
                'label' => esc_html__('Handle Color', 'calio-addon'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => '--calio-comparison-handle-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'handle_icon_color',
            [
                'label' => esc_html__('Arrow Color', 'calio-addon'),
                'type' => Controls_Manager::COLOR,
                'default' => '#0f172a',
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => '--calio-comparison-handle-icon-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_control(
            'divider_color',
            [
                'label' => esc_html__('Divider Color', 'calio-addon'),
                'type' => Controls_Manager::COLOR,
                'default' => '#ffffff',
                'selectors' => [
                    '{{WRAPPER}} .calio-image-comparison' => '--calio-comparison-divider-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'handle_shadow',
                'selector' => '{{WRAPPER}} .calio-comparison-handle',
            ]
        );

        $this->end_controls_section();
    }

    protected function render(): void
    {
        $settings = $this->get_settings_for_display();
        $before_url = (string) ($settings['before_image']['url'] ?? '');
        $after_url = (string) ($settings['after_image']['url'] ?? '');

        if ($before_url === '' && $after_url === '') {
            return;
        }

        $position = isset($settings['initial_position']['size']) ? (float) $settings['initial_position']['size'] : 50.0;
        $position = max(0.0, min(100.0, $position));
        $speed = isset($settings['transition_speed']['size']) ? absint($settings['transition_speed']['size']) : 180;
        $show_labels = ($settings['show_labels'] ?? 'yes') === 'yes';
        $label_position = sanitize_html_class((string) ($settings['label_position'] ?? 'top'));
        $handle_style = sanitize_html_class((string) ($settings['handle_style'] ?? 'circle'));
        $classes = [
            'calio-image-comparison',
            'label-position-' . $label_position,
            'handle-' . $handle_style,
        ];

        if (($settings['show_handle_arrows'] ?? 'yes') !== 'yes') {
            $classes[] = 'hide-handle-arrows';
        }

        $before_alt = trim((string) ($settings['before_alt'] ?? ''));
        $after_alt = trim((string) ($settings['after_alt'] ?? ''));
        $before_label = trim((string) ($settings['before_label'] ?? esc_html__('Before', 'calio-addon')));
        $after_label = trim((string) ($settings['after_label'] ?? esc_html__('After', 'calio-addon')));
        $slider_label = sprintf(
            /* translators: 1: before label, 2: after label. */
            esc_html__('Compare %1$s and %2$s images', 'calio-addon'),
            $before_label !== '' ? $before_label : esc_html__('before', 'calio-addon'),
            $after_label !== '' ? $after_label : esc_html__('after', 'calio-addon')
        );

        $style = sprintf(
            '--calio-comparison-position:%1$s%%;--calio-comparison-speed:%2$dms;',
            esc_attr((string) $position),
            $speed
        );

        echo '<div class="' . esc_attr(implode(' ', $classes)) . '" style="' . esc_attr($style) . '" data-calio-image-comparison data-start="' . esc_attr((string) $position) . '">';
        echo '<div class="calio-comparison-stage">';

        echo '<div class="calio-comparison-image calio-comparison-before">';
        if ($before_url !== '') {
            echo '<img src="' . esc_url($before_url) . '" alt="' . esc_attr($before_alt) . '" loading="lazy" />';
        }
        echo '</div>';

        echo '<div class="calio-comparison-image calio-comparison-after" aria-hidden="true">';
        if ($after_url !== '') {
            echo '<img src="' . esc_url($after_url) . '" alt="' . esc_attr($after_alt) . '" loading="lazy" />';
        }
        echo '</div>';

        if ($show_labels) {
            if ($before_label !== '') {
                echo '<span class="calio-comparison-label calio-comparison-label-before">' . esc_html($before_label) . '</span>';
            }
            if ($after_label !== '') {
                echo '<span class="calio-comparison-label calio-comparison-label-after">' . esc_html($after_label) . '</span>';
            }
        }

        echo '<span class="calio-comparison-divider" aria-hidden="true"></span>';
        echo '<span class="calio-comparison-handle" aria-hidden="true"><span class="calio-comparison-handle-icon"></span></span>';
        echo '<input class="calio-comparison-range" type="range" min="0" max="100" value="' . esc_attr((string) $position) . '" aria-label="' . esc_attr($slider_label) . '" />';
        echo '</div>';
        echo '</div>';
    }
}
