<?php

namespace Calio\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Text_Stroke;
use Elementor\Group_Control_Typography;

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

/**
 * Kinetic Card widget adapted from animated card interaction patterns.
 */
class KineticCardWidget extends BaseWidget
{
    public function get_name(): string
    {
        return 'calio-kinetic-card';
    }

    public function get_title(): string
    {
        return esc_html__('Kinetic Card', 'calio-addon');
    }

    public function get_icon(): string
    {
        return 'eicon-flip-box';
    }

    public function get_style_depends(): array
    {
        return $this->resolve_widget_style_depends('calio-widget-kinetic-card');
    }

    public function get_keywords(): array
    {
        return array_merge(parent::get_keywords(), ['animated', 'card', 'kinetic', 'reveal']);
    }

    protected function register_controls(): void
    {
        $this->register_content_controls();
        $this->register_style_controls();
    }

    private function register_content_controls(): void
    {
        $this->start_controls_section('section_content_card', [
            'label' => esc_html__('Kinetic Card', 'calio-addon'),
            'tab' => Controls_Manager::TAB_CONTENT,
        ]);

        $this->add_control('image', [
            'label' => esc_html__('Image', 'calio-addon'),
            'type' => Controls_Manager::MEDIA,
            'dynamic' => ['active' => true],
            'default' => ['url' => ''],
        ]);

        $this->add_control('title_text', [
            'label' => esc_html__('Title', 'calio-addon'),
            'type' => Controls_Manager::TEXT,
            'dynamic' => ['active' => true],
            'label_block' => true,
            'default' => esc_html__('Kinetic Card Title', 'calio-addon'),
        ]);

        $this->add_control('title_link_url', [
            'label' => esc_html__('Title Link URL', 'calio-addon'),
            'type' => Controls_Manager::URL,
            'dynamic' => ['active' => true],
            'placeholder' => 'https://your-link.com',
        ]);

        $this->add_control('sub_title_text', [
            'label' => esc_html__('Sub Title', 'calio-addon'),
            'type' => Controls_Manager::TEXT,
            'dynamic' => ['active' => true],
            'label_block' => true,
            'default' => esc_html__('This is a Label', 'calio-addon'),
        ]);

        $this->add_control('description_text', [
            'label' => esc_html__('Text', 'calio-addon'),
            'type' => Controls_Manager::WYSIWYG,
            'dynamic' => ['active' => true],
            'default' => esc_html__('Click edit button to change this text.', 'calio-addon'),
        ]);

        $this->end_controls_section();

        $this->start_controls_section('section_additional_settings', [
            'label' => esc_html__('Additional Settings', 'calio-addon'),
            'tab' => Controls_Manager::TAB_CONTENT,
        ]);

        $this->add_responsive_control('item_height', [
            'label' => esc_html__('Item Height', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['px', 'vh'],
            'default' => ['unit' => 'px', 'size' => 400],
            'range' => [
                'px' => ['min' => 120, 'max' => 1080],
                'vh' => ['min' => 10, 'max' => 100],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-item' => 'height: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('content_max_width', [
            'label' => esc_html__('Content Max Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 200, 'max' => 1200],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-content' => 'max-width: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Image_Size::get_type(), [
            'name' => 'thumbnail_size',
            'default' => 'full',
        ]);

        $this->add_control('layout_direction', [
            'label' => esc_html__('Image Position', 'calio-addon'),
            'type' => Controls_Manager::CHOOSE,
            'toggle' => false,
            'default' => 'style-1',
            'options' => [
                'style-2' => [
                    'title' => esc_html__('Left', 'calio-addon'),
                    'icon' => 'eicon-h-align-left',
                ],
                'style-1' => [
                    'title' => esc_html__('Right', 'calio-addon'),
                    'icon' => 'eicon-h-align-right',
                ],
            ],
        ]);

        $this->add_control('preset_style', [
            'label' => esc_html__('Preset Style', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'custom',
            'options' => [
                'custom' => esc_html__('Custom', 'calio-addon'),
                'soft' => esc_html__('Soft', 'calio-addon'),
                'bold' => esc_html__('Bold', 'calio-addon'),
                'neon' => esc_html__('Neon', 'calio-addon'),
            ],
        ]);

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

        $this->add_control('title_size', [
            'label' => esc_html__('Title HTML Tag', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'h3',
            'options' => $this->title_tags(),
            'condition' => ['show_title' => 'yes'],
        ]);

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

        $this->add_control('sub_title_size', [
            'label' => esc_html__('Sub Title HTML Tag', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'h4',
            'options' => $this->title_tags(),
            'condition' => ['show_sub_title' => 'yes'],
        ]);

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

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

        $this->add_responsive_control('text_align', [
            'label' => esc_html__('Alignment', 'calio-addon'),
            'type' => Controls_Manager::CHOOSE,
            'options' => [
                'left' => ['title' => esc_html__('Left', 'calio-addon'), 'icon' => 'eicon-text-align-left'],
                'center' => ['title' => esc_html__('Center', 'calio-addon'), 'icon' => 'eicon-text-align-center'],
                'right' => ['title' => esc_html__('Right', 'calio-addon'), 'icon' => 'eicon-text-align-right'],
                'justify' => ['title' => esc_html__('Justified', 'calio-addon'), 'icon' => 'eicon-text-align-justify'],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-content' => 'text-align: {{VALUE}} !important;',
            ],
        ]);

        $this->end_controls_section();

        $this->start_controls_section('section_content_readmore', [
            'label' => esc_html__('Read More', 'calio-addon'),
            'tab' => Controls_Manager::TAB_CONTENT,
            'condition' => ['readmore' => 'yes'],
        ]);

        $this->add_control('readmore_text', [
            'label' => esc_html__('Text', 'calio-addon'),
            'type' => Controls_Manager::TEXT,
            'dynamic' => ['active' => true],
            'default' => esc_html__('Read More', 'calio-addon'),
            'placeholder' => esc_html__('Read More', 'calio-addon'),
        ]);

        $this->add_control('readmore_link', [
            'label' => esc_html__('Link to', 'calio-addon'),
            'type' => Controls_Manager::URL,
            'dynamic' => ['active' => true],
            'placeholder' => esc_html__('https://your-link.com', 'calio-addon'),
            'default' => ['url' => '#'],
        ]);

        $this->add_control('readmore_icon', [
            'label' => esc_html__('Icon', 'calio-addon'),
            'type' => Controls_Manager::ICONS,
            'default' => [
                'value' => 'fas fa-arrow-right',
                'library' => 'fa-solid',
            ],
        ]);

        $this->add_control('readmore_icon_align', [
            'label' => esc_html__('Icon Position', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'right',
            'options' => [
                'left' => esc_html__('Left', 'calio-addon'),
                'right' => esc_html__('Right', 'calio-addon'),
            ],
            'condition' => ['readmore_icon[value]!' => ''],
        ]);

        $this->add_control('readmore_icon_indent', [
            'label' => esc_html__('Icon Spacing', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['max' => 100]],
            'default' => ['size' => 8],
            'condition' => [
                'readmore_icon[value]!' => '',
                'readmore_text!' => '',
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-btn .calio-button-icon-align-right' => is_rtl() ? 'margin-right: {{SIZE}}{{UNIT}};' : 'margin-left: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .calio-kinetic-card-btn .calio-button-icon-align-left' => is_rtl() ? 'margin-left: {{SIZE}}{{UNIT}};' : 'margin-right: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_control('button_css_id', [
            'label' => esc_html__('Button ID', 'calio-addon'),
            'type' => Controls_Manager::TEXT,
            'dynamic' => ['active' => true],
            'default' => '',
            'description' => esc_html__('Use unique id without #. Example: my-button', 'calio-addon'),
        ]);

        $this->end_controls_section();
    }

    private function register_style_controls(): void
    {
        $this->start_controls_section('section_style_card', [
            'label' => esc_html__('Card', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);

        $this->start_controls_tabs('card_state_tabs');
        $this->start_controls_tab('card_state_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_group_control(Group_Control_Background::get_type(), [
            'name' => 'card_bg',
            'types' => ['classic', 'gradient'],
            'selector' => '{{WRAPPER}} .calio-kinetic-card-circle::before',
        ]);
        $this->end_controls_tab();
        $this->start_controls_tab('card_state_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_group_control(Group_Control_Background::get_type(), [
            'name' => 'card_bg_hover',
            'types' => ['classic', 'gradient'],
            'selector' => '{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-circle::before',
        ]);
        $this->add_control('card_hover_border_color', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-circle::before' => 'border-color: {{VALUE}};',
            ],
        ]);
        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'card_border',
            'selector' => '{{WRAPPER}} .calio-kinetic-card-circle::before',
        ]);
        $this->add_dimensions_control('card_radius', esc_html__('Border Radius', 'calio-addon'), '{{WRAPPER}} .calio-kinetic-card-circle', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_control('card_reveal_radius', [
            'label' => esc_html__('Reveal Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 20, 'max' => 500]],
            'default' => ['unit' => 'px', 'size' => 120],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-circle::before' => 'clip-path: circle({{SIZE}}{{UNIT}} at center);',
            ],
        ]);
        $this->add_control('card_reveal_radius_hover', [
            'label' => esc_html__('Hover Reveal Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 120, 'max' => 2000]],
            'default' => ['unit' => 'px', 'size' => 1200],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-circle::before' => 'clip-path: circle({{SIZE}}{{UNIT}} at center);',
            ],
        ]);
        $this->add_dimensions_control('card_padding', esc_html__('Content Padding', 'calio-addon'), '{{WRAPPER}} .calio-kinetic-card-content', 'padding');
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'card_shadow',
            'selector' => '{{WRAPPER}} .calio-kinetic-card-item',
        ]);
        $this->end_controls_section();

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

        $this->start_controls_tabs('image_state_tabs');
        $this->start_controls_tab('image_state_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_control('image_height', [
            'label' => esc_html__('Height', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 120, 'max' => 900]],
            'selectors' => ['{{WRAPPER}} .calio-kinetic-card-img' => 'height: {{SIZE}}{{UNIT}};'],
        ]);
        $this->add_control('image_opacity', [
            'label' => esc_html__('Opacity', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['custom'],
            'range' => ['custom' => ['min' => 0.1, 'max' => 1, 'step' => 0.01]],
            'selectors' => ['{{WRAPPER}} .calio-kinetic-card-img' => 'opacity: {{SIZE}};'],
        ]);
        $this->add_group_control(Group_Control_Css_Filter::get_type(), [
            'name' => 'image_css_filters',
            'selector' => '{{WRAPPER}} .calio-kinetic-card-img',
        ]);
        $this->add_control('image_transition_duration', [
            'label' => esc_html__('Transition Duration', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['s'],
            'range' => ['s' => ['min' => 0.1, 'max' => 3, 'step' => 0.1]],
            'default' => ['unit' => 's', 'size' => 0.5],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-img' => 'transition-duration: {{SIZE}}s;',
                '{{WRAPPER}} .calio-kinetic-card-content' => 'transition-duration: {{SIZE}}s;',
                '{{WRAPPER}} .calio-kinetic-card-circle::before' => 'transition-duration: {{SIZE}}s;',
            ],
        ]);
        $this->end_controls_tab();

        $this->start_controls_tab('image_state_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_control('image_hover_height', [
            'label' => esc_html__('Hover Height', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 120, 'max' => 1100]],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-item:hover .calio-kinetic-card-img' => 'height: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_control('image_hover_horizontal_offset', [
            'label' => esc_html__('Image Offset', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['%'],
            'range' => ['%' => ['min' => 0, 'max' => 100]],
            'default' => ['unit' => '%', 'size' => 80],
            'selectors' => [
                '{{WRAPPER}} .calio-style-1:hover .calio-kinetic-card-img' => 'left: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .calio-style-2:hover .calio-kinetic-card-img' => 'right: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_control('image_hover_vertical_offset', [
            'label' => esc_html__('Hover Vertical Position', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['%'],
            'range' => ['%' => ['min' => 0, 'max' => 100]],
            'default' => ['unit' => '%', 'size' => 50],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-img' => 'top: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_control('image_hover_opacity', [
            'label' => esc_html__('Opacity', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['custom'],
            'range' => ['custom' => ['min' => 0.1, 'max' => 1, 'step' => 0.01]],
            'selectors' => ['{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-img' => 'opacity: {{SIZE}};'],
        ]);
        $this->add_group_control(Group_Control_Css_Filter::get_type(), [
            'name' => 'image_hover_css_filters',
            'selector' => '{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-img',
        ]);
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->end_controls_section();

        $this->start_controls_section('section_style_title', [
            'label' => esc_html__('Title', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
            'condition' => ['show_title' => 'yes'],
        ]);
        $this->add_control('title_spacing', [
            'label' => esc_html__('Spacing', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 120]],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->start_controls_tabs('title_state_tabs');
        $this->start_controls_tab('title_state_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'title_typography', 'selector' => '{{WRAPPER}} .calio-kinetic-card-title']);
        $this->add_control('title_color', ['label' => esc_html__('Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card-title, {{WRAPPER}} .calio-kinetic-card-title a' => 'color: {{VALUE}};']]);
        $this->add_group_control(Group_Control_Text_Stroke::get_type(), ['name' => 'title_stroke', 'selector' => '{{WRAPPER}} .calio-kinetic-card-title']);
        $this->add_group_control(Group_Control_Text_Shadow::get_type(), ['name' => 'title_shadow', 'selector' => '{{WRAPPER}} .calio-kinetic-card-title']);
        $this->end_controls_tab();
        $this->start_controls_tab('title_state_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_control('title_hover_color', ['label' => esc_html__('Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-title, {{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-title a, {{WRAPPER}} .calio-kinetic-card-title a:hover' => 'color: {{VALUE}};']]);
        $this->add_group_control(Group_Control_Text_Shadow::get_type(), ['name' => 'title_hover_shadow', 'selector' => '{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-title']);
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->end_controls_section();

        $this->start_controls_section('section_style_sub_title', [
            'label' => esc_html__('Sub Title', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
            'condition' => ['show_sub_title' => 'yes'],
        ]);
        $this->add_control('sub_title_spacing', [
            'label' => esc_html__('Spacing', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 120]],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-sub-title' => 'padding-bottom: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->start_controls_tabs('sub_title_state_tabs');
        $this->start_controls_tab('sub_title_state_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'sub_title_typography', 'selector' => '{{WRAPPER}} .calio-kinetic-card-sub-title']);
        $this->add_control('sub_title_color', ['label' => esc_html__('Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card-sub-title' => 'color: {{VALUE}};']]);
        $this->end_controls_tab();
        $this->start_controls_tab('sub_title_state_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_control('sub_title_hover_color', ['label' => esc_html__('Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-sub-title' => 'color: {{VALUE}};']]);
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->end_controls_section();

        $this->start_controls_section('section_style_text', [
            'label' => esc_html__('Text', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
            'condition' => ['show_description' => 'yes'],
        ]);
        $this->add_control('text_spacing', [
            'label' => esc_html__('Spacing', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 120]],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-text' => 'padding-bottom: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->start_controls_tabs('text_state_tabs');
        $this->start_controls_tab('text_state_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'text_typography', 'selector' => '{{WRAPPER}} .calio-kinetic-card-text']);
        $this->add_control('text_color', ['label' => esc_html__('Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card-text' => 'color: {{VALUE}};']]);
        $this->end_controls_tab();
        $this->start_controls_tab('text_state_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_control('text_hover_color', ['label' => esc_html__('Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card:hover .calio-kinetic-card-text' => 'color: {{VALUE}};']]);
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->end_controls_section();

        $this->start_controls_section('section_style_readmore', [
            'label' => esc_html__('Read More', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
            'condition' => ['readmore' => 'yes'],
        ]);
        $this->add_control('readmore_attention', [
            'label' => esc_html__('Attention', 'calio-addon'),
            'type' => Controls_Manager::SWITCHER,
        ]);
        $this->add_group_control(Group_Control_Typography::get_type(), ['name' => 'readmore_typography', 'selector' => '{{WRAPPER}} .calio-kinetic-card-btn']);
        $this->add_control('readmore_icon_size', [
            'label' => esc_html__('Icon Size', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 8, 'max' => 48]],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-btn .calio-button-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .calio-kinetic-card-btn .calio-button-icon svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_control('readmore_icon_shift_distance', [
            'label' => esc_html__('Icon Hover Shift', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 40]],
            'default' => ['unit' => 'px', 'size' => 10],
            'condition' => ['readmore_icon[value]!' => ''],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card' => '--calio-kc-icon-shift: {{SIZE}}{{UNIT}};',
            ],
        ]);
        $this->add_control('readmore_transition_duration', [
            'label' => esc_html__('Transition Duration', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'size_units' => ['s'],
            'range' => ['s' => ['min' => 0.1, 'max' => 3, 'step' => 0.1]],
            'default' => ['unit' => 's', 'size' => 0.3],
            'selectors' => [
                '{{WRAPPER}} .calio-kinetic-card-btn' => 'transition-duration: {{SIZE}}s;',
                '{{WRAPPER}} .calio-kinetic-card-btn .calio-button-icon i' => 'transition-duration: {{SIZE}}s;',
                '{{WRAPPER}} .calio-kinetic-card-btn .calio-button-icon svg' => 'transition-duration: {{SIZE}}s;',
            ],
        ]);
        $this->start_controls_tabs('readmore_state_tabs');
        $this->start_controls_tab('readmore_state_normal', ['label' => esc_html__('Normal', 'calio-addon')]);
        $this->add_control('readmore_color', ['label' => esc_html__('Text Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card-btn' => 'color: {{VALUE}};', '{{WRAPPER}} .calio-kinetic-card-btn svg' => 'fill: {{VALUE}};']]);
        $this->add_group_control(Group_Control_Background::get_type(), ['name' => 'readmore_bg', 'types' => ['classic', 'gradient'], 'selector' => '{{WRAPPER}} .calio-kinetic-card-btn']);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'readmore_shadow_normal', 'selector' => '{{WRAPPER}} .calio-kinetic-card-btn']);
        $this->end_controls_tab();
        $this->start_controls_tab('readmore_state_hover', ['label' => esc_html__('Hover', 'calio-addon')]);
        $this->add_control('readmore_hover_color', ['label' => esc_html__('Text Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card-btn:hover, {{WRAPPER}} .calio-kinetic-card-btn:focus-visible' => 'color: {{VALUE}};', '{{WRAPPER}} .calio-kinetic-card-btn:hover svg, {{WRAPPER}} .calio-kinetic-card-btn:focus-visible svg' => 'fill: {{VALUE}};']]);
        $this->add_group_control(Group_Control_Background::get_type(), ['name' => 'readmore_bg_hover', 'types' => ['classic', 'gradient'], 'selector' => '{{WRAPPER}} .calio-kinetic-card-btn:hover, {{WRAPPER}} .calio-kinetic-card-btn:focus-visible']);
        $this->add_control('readmore_hover_border_color', ['label' => esc_html__('Border Color', 'calio-addon'), 'type' => Controls_Manager::COLOR, 'selectors' => ['{{WRAPPER}} .calio-kinetic-card-btn:hover, {{WRAPPER}} .calio-kinetic-card-btn:focus-visible' => 'border-color: {{VALUE}};']]);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), ['name' => 'readmore_shadow_hover', 'selector' => '{{WRAPPER}} .calio-kinetic-card-btn:hover, {{WRAPPER}} .calio-kinetic-card-btn:focus-visible']);
        $this->add_control('readmore_hover_animation', [
            'label' => esc_html__('Hover Animation', 'calio-addon'),
            'type' => Controls_Manager::HOVER_ANIMATION,
        ]);
        $this->end_controls_tab();
        $this->end_controls_tabs();
        $this->add_group_control(Group_Control_Border::get_type(), ['name' => 'readmore_border', 'selector' => '{{WRAPPER}} .calio-kinetic-card-btn']);
        $this->add_dimensions_control('readmore_radius', esc_html__('Border Radius', 'calio-addon'), '{{WRAPPER}} .calio-kinetic-card-btn', 'border-radius', ['size_units' => ['px', '%']]);
        $this->add_dimensions_control('readmore_padding', esc_html__('Padding', 'calio-addon'), '{{WRAPPER}} .calio-kinetic-card-btn', 'padding');
        $this->end_controls_section();
    }

    protected function render(): void
    {
        $settings = $this->get_settings_for_display();
        $direction = in_array((string) ($settings['layout_direction'] ?? ''), ['style-1', 'style-2'], true) ? (string) $settings['layout_direction'] : 'style-1';
        $preset = in_array((string) ($settings['preset_style'] ?? ''), ['custom', 'soft', 'bold', 'neon'], true) ? (string) $settings['preset_style'] : 'custom';

        $this->add_render_attribute('wrapper', 'class', ['calio-kinetic-card', 'calio-' . $direction, 'calio-kinetic-preset-' . $preset]);

        echo '<div ' . wp_kses_post($this->get_render_attribute_string('wrapper')) . '>';
        echo '<div class="calio-kinetic-card-item">';
        echo '<div class="calio-kinetic-card-circle"></div>';
        echo '<div class="calio-kinetic-card-content">';
        $this->render_sub_title($settings);
        $this->render_title($settings);
        $this->render_description($settings);
        $this->render_readmore($settings);
        echo '</div>';
        echo '<div class="calio-kinetic-card-img-wrap">';
        $this->render_image($settings);
        echo '</div>';
        echo '</div>';
        echo '</div>';
    }

    private function render_sub_title(array $settings): void
    {
        if (($settings['show_sub_title'] ?? 'yes') !== 'yes' || empty($settings['sub_title_text'])) {
            return;
        }

        $tag = $this->sanitize_tag((string) ($settings['sub_title_size'] ?? 'h4'));
        echo '<' . tag_escape($tag) . ' class="calio-kinetic-card-sub-title">' . esc_html((string) $settings['sub_title_text']) . '</' . tag_escape($tag) . '>';
    }

    private function render_title(array $settings): void
    {
        if (($settings['show_title'] ?? 'yes') !== 'yes' || empty($settings['title_text'])) {
            return;
        }

        $tag = $this->sanitize_tag((string) ($settings['title_size'] ?? 'h3'));
        echo '<' . tag_escape($tag) . ' class="calio-kinetic-card-title">';
        if (!empty($settings['title_link_url']['url'])) {
            $this->add_link_attributes('kinetic_title_link', $settings['title_link_url']);
            echo '<a ' . wp_kses_post($this->get_render_attribute_string('kinetic_title_link')) . '>' . esc_html((string) $settings['title_text']) . '</a>';
        } else {
            echo esc_html((string) $settings['title_text']);
        }
        echo '</' . tag_escape($tag) . '>';
    }

    private function render_description(array $settings): void
    {
        if (($settings['show_description'] ?? 'yes') !== 'yes' || empty($settings['description_text'])) {
            return;
        }

        echo '<div class="calio-kinetic-card-text">' . wp_kses_post((string) $settings['description_text']) . '</div>';
    }

    private function render_readmore(array $settings): void
    {
        if (($settings['readmore'] ?? '') !== 'yes' || empty($settings['readmore_text'])) {
            return;
        }

        $this->add_render_attribute('readmore', 'class', ['calio-kinetic-card-btn']);
        if (($settings['readmore_attention'] ?? '') === 'yes') {
            $this->add_render_attribute('readmore', 'class', 'calio-attention-button');
        }
        $hover_animation = preg_replace('/[^A-Za-z0-9_-]/', '', (string) ($settings['readmore_hover_animation'] ?? ''));
        if ($hover_animation !== '') {
            $this->add_render_attribute('readmore', 'class', 'elementor-animation-' . $hover_animation);
        }
        if (!empty($settings['readmore_link']['url'])) {
            $this->add_link_attributes('readmore', $settings['readmore_link']);
        } else {
            $this->add_render_attribute('readmore', 'href', '#');
        }

        $button_id = preg_replace('/[^A-Za-z0-9_-]/', '', (string) ($settings['button_css_id'] ?? ''));
        if ($button_id !== '') {
            $this->add_render_attribute('readmore', 'id', $button_id);
        }

        $icon_align = (string) ($settings['readmore_icon_align'] ?? 'right');
        $icon_align = in_array($icon_align, ['left', 'right'], true) ? $icon_align : 'right';

        echo '<div class="calio-kinetic-card-btn-wrap">';
        echo '<a ' . wp_kses_post($this->get_render_attribute_string('readmore')) . '>';
        if (!empty($settings['readmore_icon']['value']) && $icon_align === 'left') {
            echo '<span class="calio-button-icon calio-button-icon-align-left">' . wp_kses_post($this->get_icon_markup($settings['readmore_icon'], ['class' => 'fa-fw'])) . '</span>';
        }
        echo '<span class="calio-button-text">' . esc_html((string) $settings['readmore_text']) . '</span>';
        if (!empty($settings['readmore_icon']['value']) && $icon_align === 'right') {
            echo '<span class="calio-button-icon calio-button-icon-align-right">' . wp_kses_post($this->get_icon_markup($settings['readmore_icon'], ['class' => 'fa-fw'])) . '</span>';
        }
        echo '</a>';
        echo '</div>';
    }

    private function render_image(array $settings): void
    {
        $image_url = '';
        $image_id = (int) ($settings['image']['id'] ?? 0);

        if ($image_id > 0) {
            $resolved = Group_Control_Image_Size::get_attachment_image_src($image_id, 'thumbnail_size', $settings);
            if (!empty($resolved)) {
                $image_url = (string) $resolved;
            }
        }

        if ($image_url === '' && !empty($settings['image']['url'])) {
            $image_url = (string) $settings['image']['url'];
        }

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

        $alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
        if ($alt === '') {
            $alt = (string) ($settings['title_text'] ?? '');
        }

        echo '<img class="calio-kinetic-card-img" src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '">';
    }

    /**
     * @return array<string, string>
     */
    private function title_tags(): array
    {
        return [
            'h1' => 'H1',
            'h2' => 'H2',
            'h3' => 'H3',
            'h4' => 'H4',
            'h5' => 'H5',
            'h6' => 'H6',
            'div' => 'DIV',
            'span' => 'SPAN',
            'p' => 'P',
        ];
    }

    private function sanitize_tag(string $tag): string
    {
        return array_key_exists($tag, $this->title_tags()) ? $tag : 'div';
    }
}
