<?php
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Image_Size;
use Elementor\Repeater;
use Elementor\Widget_Base;
use Elementor\Utils;

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

class CRT_Image_Text_Hover extends Widget_Base {
    
    public function get_name() {
        return 'crt-image-text-hover';
    }

    public function get_title() {
        return esc_html__( 'Image Hover Repeater', 'crt-manage' );
    }

    public function get_icon() {
        return 'crt-icon eicon-gallery-grid';
    }

    public function get_categories() {
        return [ 'crt_manage_theme' ];
    }

    public function get_keywords() {
        return [ 'image', 'text', 'hover', 'scale', 'grid', 'repeater' ];
    }

    protected function register_controls() {

        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__( 'Hover Items', 'crt-manage' ),
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'item_type',
            [
                'label' => esc_html__( 'Item Type', 'crt-manage' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'text',
                'options' => [
                    'text' => esc_html__( 'Text', 'crt-manage' ),
                    'image' => esc_html__( 'Image', 'crt-manage' ),
                ],
            ]
        );

        $repeater->add_control(
            'item_image',
            [
                'label' => esc_html__( 'Image', 'crt-manage' ),
                'type' => Controls_Manager::MEDIA,
                'default' => [
                    'url' => Utils::get_placeholder_image_src(),
                ],
                'condition' => [
                    'item_type' => 'image',
                ],
            ]
        );

        $repeater->add_control(
            'item_text',
            [
                'label' => esc_html__( 'Text Content', 'crt-manage' ),
                'type' => Controls_Manager::TEXTAREA,
                'default' => esc_html__( 'Sample dynamic text', 'crt-manage' ),
                'condition' => [
                    'item_type' => 'text',
                ],
            ]
        );
        
        $repeater->add_control(
            'item_link',
            [
                'label' => esc_html__( 'Link', 'crt-manage' ),
                'type' => Controls_Manager::URL,
                'dynamic' => [
                    'active' => true,
                ],
            ]
        );

        $this->add_control(
            'items',
            [
                'label' => esc_html__( 'Cards', 'crt-manage' ),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'item_type' => 'text',
                        'item_text' => esc_html__( 'We create', 'crt-manage' ),
                    ],
                    [
                        'item_type' => 'image',
                    ],
                    [
                        'item_type' => 'text',
                        'item_text' => esc_html__( 'beautiful digital experiences.', 'crt-manage' ),
                    ],
                ],
                'title_field' => '{{{ item_type === \'text\' ? item_text.substring(0,20) : \'Image Item\' }}}',
            ]
        );

        $this->add_responsive_control(
            'alignment',
            [
                'label' => esc_html__( 'Alignment', 'crt-manage' ),
                'type' => Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => esc_html__( 'Left', 'crt-manage' ),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Center', 'crt-manage' ),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__( 'Right', 'crt-manage' ),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'selectors' => [
                    '{{WRAPPER}} .crt-it-grid' => 'text-align: {{VALUE}}; justify-content: {{VALUE}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Style Section
        $this->start_controls_section(
            'section_style',
            [
                'label' => esc_html__( 'Styles & Effects', 'crt-manage' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'gap',
            [
                'label' => esc_html__( 'Grid Gap', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'size_units' => [ 'px', 'em', 'rem' ],
                'range' => [
                    'px' => [ 'min' => 0, 'max' => 100 ],
                ],
                'default' => [
                    'size' => 30,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .crt-it-grid' => 'gap: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'border_radius',
            [
                'label' => esc_html__( 'Image Border Radius', 'crt-manage' ),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em', 'rem' ],
                'selectors' => [
                    '{{WRAPPER}} .crt-it-img-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_width',
            [
                'label' => esc_html__( 'Image Width', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%', 'vw', 'custom' ],
                'range' => [
                    'px' => [ 'min' => 10, 'max' => 800 ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .crt-it-img-wrapper' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'image_height',
            [
                'label' => esc_html__( 'Image Height', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%', 'vh', 'custom' ],
                'range' => [
                    'px' => [ 'min' => 10, 'max' => 800 ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .crt-it-img-wrapper' => 'height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'hover_scale',
            [
                'label' => esc_html__( 'Hover Scale Effect (Small)', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [ 'min' => 1, 'max' => 1.5, 'step' => 0.01 ],
                ],
                'default' => [ 'size' => 1.05 ],
                'selectors' => [
                    '{{WRAPPER}} .crt-it-card:hover .crt-it-img' => 'transform: scale({{SIZE}});',
                ],
            ]
        );

        $this->add_control(
            'text_color',
            [
                'label' => esc_html__( 'Text Color', 'crt-manage' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-it-text' => 'color: {{VALUE}};',
                ],
                'separator' => 'before',
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'typography',
                'label' => esc_html__( 'Text Typography', 'crt-manage' ),
                'selector' => '{{WRAPPER}} .crt-it-text',
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        
        if ( empty( $settings['items'] ) ) {
            return;
        }

        echo '<style>
            .crt-it-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 15px; }
            .crt-it-card { display: inline-flex; align-items: center; vertical-align: middle; text-decoration: none !important; }
            .crt-it-img-wrapper { display: inline-block; vertical-align: middle; overflow: hidden; position: relative; width: 70px; height: 55px; border-radius: 0; }
            .crt-it-img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 0.4s ease-out; will-change: transform; }
            .crt-it-text { display: inline-block; vertical-align: middle; font-size: 44px; font-weight: 300; line-height: 1.2; color: #111; font-family: "Optima", "Cinzel", "Playfair Display", serif; text-transform: uppercase; letter-spacing: 2px; }
        </style>';
        ?>

        <div class="crt-it-grid">
            <?php foreach ( $settings['items'] as $index => $item ) : 
                $link_url = ! empty($item['item_link']['url']) ? esc_url($item['item_link']['url']) : 'javascript:void(0)';
                $type = ! empty($item['item_type']) ? $item['item_type'] : 'text';
                ?>
                
                <a href="<?php echo $link_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>" class="crt-it-card elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
                    <?php if ( 'image' === $type ) : ?>
                        <?php $img_url = ! empty($item['item_image']['url']) ? esc_url($item['item_image']['url']) : Utils::get_placeholder_image_src(); ?>
                        <div class="crt-it-img-wrapper">
                            <img src="<?php echo $img_url; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>" class="crt-it-img" alt="Item Image" />
                        </div>
                    <?php else : ?>
                        <?php if ( ! empty( $item['item_text'] ) ) : ?>
                            <div class="crt-it-text">
                                <?php echo wp_kses_post( $item['item_text'] ); ?>
                            </div>
                        <?php endif; ?>
                    <?php endif; ?>
                </a>

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