<?php
if ( ! defined( 'ABSPATH' ) ) exit;

class EPPRO_Image_Carousel_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-image-carousel'; }
    public function get_title(): string { return __( 'Image Carousel', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-media-carousel'; }
    public function get_keywords(): array { return [ 'image', 'carousel', 'slider', 'gallery', 'photos', 'eppro' ]; }

    public function get_style_depends(): array  { return [ 'eppro-image-carousel', 'swiper' ]; }
    public function get_script_depends(): array { return [ 'eppro-image-carousel-script', 'swiper' ]; }

    protected function register_controls(): void {

        $this->start_controls_section( 'section_images', [
            'label' => __( 'Images', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'images', [
            'label'   => __( 'Images', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::GALLERY,
            'default' => [],
        ] );

        $this->add_control( 'image_size', [
            'label'   => __( 'Image Size', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'large',
            'options' => [
                'thumbnail' => __( 'Thumbnail', 'admore-widgets-suite' ),
                'medium'    => __( 'Medium', 'admore-widgets-suite' ),
                'large'     => __( 'Large', 'admore-widgets-suite' ),
                'full'      => __( 'Full', 'admore-widgets-suite' ),
            ],
        ] );

        $this->add_control( 'link_to', [
            'label'   => __( 'Link To', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'none',
            'options' => [
                'none'  => __( 'None', 'admore-widgets-suite' ),
                'file'  => __( 'Media File (Lightbox)', 'admore-widgets-suite' ),
                'custom'=> __( 'Custom URL', 'admore-widgets-suite' ),
            ],
        ] );

        $this->end_controls_section();

        /* ── Slider Settings ── */
        $this->start_controls_section( 'section_slider', [
            'label' => __( 'Carousel Settings', 'admore-widgets-suite' ),
        ] );

        $this->add_responsive_control( 'slides_to_show', [
            'label'          => __( 'Slides to Show', 'admore-widgets-suite' ),
            'type'           => \Elementor\Controls_Manager::NUMBER,
            'default'        => 3,
            'tablet_default' => 2,
            'mobile_default' => 1,
            'min'            => 1,
            'max'            => 6,
        ] );

        $this->add_control( 'slides_gap', [
            'label'   => __( 'Gap Between Slides', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SLIDER,
            'range'   => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
            'default' => [ 'size' => 20 ],
        ] );

        $this->add_control( 'autoplay', [
            'label'        => __( 'Autoplay', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => 'yes',
        ] );

        $this->add_control( 'autoplay_speed', [
            'label'     => __( 'Autoplay Speed (ms)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::NUMBER,
            'default'   => 3000,
            'min'       => 500,
            'condition' => [ 'autoplay' => 'yes' ],
        ] );

        $this->add_control( 'pause_on_hover', [
            'label'        => __( 'Pause on Hover', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => 'yes',
            'condition'    => [ 'autoplay' => 'yes' ],
        ] );

        $this->add_control( 'loop', [
            'label'        => __( 'Infinite Loop', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => 'yes',
        ] );

        $this->add_control( 'show_arrows', [
            'label'        => __( 'Show Arrows', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => 'yes',
        ] );

        $this->add_control( 'show_dots', [
            'label'        => __( 'Show Dots', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => 'yes',
        ] );

        $this->add_control( 'effect', [
            'label'   => __( 'Effect', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'slide',
            'options' => [
                'slide' => __( 'Slide', 'admore-widgets-suite' ),
                'fade'  => __( 'Fade', 'admore-widgets-suite' ),
                'coverflow' => __( 'Coverflow', 'admore-widgets-suite' ),
            ],
        ] );

        $this->add_control( 'speed', [
            'label'   => __( 'Transition Speed (ms)', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::NUMBER,
            'default' => 600,
            'min'     => 100,
        ] );

        $this->end_controls_section();

        /* ── Style: Image ── */
        $this->start_controls_section( 'section_style_image', [
            'label' => __( 'Image', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
        ] );

        $this->add_control( 'image_height', [
            'label'      => __( 'Image Height', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 100, 'max' => 800 ] ],
            'default'    => [ 'size' => 280 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-ic-slide img' => 'height: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'image_fit', [
            'label'     => __( 'Object Fit', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SELECT,
            'default'   => 'cover',
            'options'   => [ 'cover'=>'Cover','contain'=>'Contain','fill'=>'Fill','none'=>'None' ],
            'selectors' => [ '{{WRAPPER}} .eppro-ic-slide img' => 'object-fit: {{VALUE}};' ],
        ] );

        $this->add_control( 'border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
            'default'    => [ 'size' => 8 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-ic-slide img' => 'border-radius: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'hover_zoom', [
            'label'        => __( 'Hover Zoom Effect', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'return_value' => 'yes',
            'prefix_class' => 'eppro-ic--zoom-',
        ] );

        $this->add_control( 'show_caption', [
            'label'        => __( 'Show Caption Overlay', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => '',
            'return_value' => 'yes',
            'separator'    => 'before',
            'description'  => __( 'Displays each image attachment caption as an overlay on the slide.', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'caption_position', [
            'label'     => __( 'Caption Position', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SELECT,
            'default'   => 'bottom',
            'options'   => [
                'top'    => __( 'Top', 'admore-widgets-suite' ),
                'bottom' => __( 'Bottom', 'admore-widgets-suite' ),
                'center' => __( 'Center', 'admore-widgets-suite' ),
            ],
            'condition' => [ 'show_caption' => 'yes' ],
            'prefix_class' => 'eppro-ic--cap-',
        ] );

        $this->add_control( 'caption_bg_color', [
            'label'     => __( 'Caption Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => 'rgba(0,0,0,0.55)',
            'condition' => [ 'show_caption' => 'yes' ],
            'selectors' => [ '{{WRAPPER}} .eppro-ic-caption' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_control( 'caption_color', [
            'label'     => __( 'Caption Text Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'condition' => [ 'show_caption' => 'yes' ],
            'selectors' => [ '{{WRAPPER}} .eppro-ic-caption' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'image_overlay_color', [
            'label'     => __( 'Hover Overlay Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'separator' => 'before',
            'selectors' => [ '{{WRAPPER}} .eppro-ic-slide:hover img' => 'filter: brightness(0.85);', '{{WRAPPER}} .eppro-ic-slide::after' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [
            'name'     => 'image_shadow',
            'selector' => '{{WRAPPER}} .eppro-ic-slide img',
        ] );

        $this->end_controls_section();

        /* ── Style: Navigation ── */
        $this->start_controls_section( 'section_style_nav', [
            'label' => __( 'Navigation', 'admore-widgets-suite' ),
            'tab'   => \Elementor\Controls_Manager::TAB_STYLE,
        ] );

        $this->add_control( 'arrow_color', [
            'label'     => __( 'Arrow Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'selectors' => [ '{{WRAPPER}} .eppro-ic-arrow' => 'color: {{VALUE}};' ],
            'condition' => [ 'show_arrows' => 'yes' ],
        ] );

        $this->add_control( 'arrow_bg', [
            'label'     => __( 'Arrow Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => 'rgba(0,0,0,.5)',
            'selectors' => [ '{{WRAPPER}} .eppro-ic-arrow' => 'background-color: {{VALUE}};' ],
            'condition' => [ 'show_arrows' => 'yes' ],
        ] );

        $this->add_control( 'dot_color', [
            'label'     => __( 'Dot Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#7c3aed',
            'selectors' => [
                '{{WRAPPER}} .swiper-pagination-bullet-active' => 'background: {{VALUE}};',
                '{{WRAPPER}} .swiper-pagination-bullet'        => 'background: {{VALUE}}; opacity:.4;',
            ],
            'condition' => [ 'show_dots' => 'yes' ],
        ] );

        $this->add_control( 'arrow_size', [
            'label'      => __( 'Arrow Box Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 20, 'max' => 80 ] ],
            'default'    => [ 'size' => 36 ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-ic-arrow' => 'width: {{SIZE}}px; height: {{SIZE}}px; font-size: {{SIZE}}px;',
            ],
            'condition' => [ 'show_arrows' => 'yes' ],
        ] );

        $this->add_control( 'arrow_border_radius', [
            'label'      => __( 'Arrow Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', '%' ],
            'default'    => [ 'size' => 50, 'unit' => '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-ic-arrow' => 'border-radius: {{SIZE}}{{UNIT}};' ],
            'condition'  => [ 'show_arrows' => 'yes' ],
        ] );

        $this->add_control( 'arrow_bg_hover', [
            'label'     => __( 'Arrow Hover Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-ic-arrow:hover' => 'background-color: {{VALUE}};' ],
            'condition' => [ 'show_arrows' => 'yes' ],
        ] );

        // No shadow by default; add one here if wanted.
        $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [
            'name'      => 'arrow_box_shadow',
            'label'     => __( 'Arrow Shadow', 'admore-widgets-suite' ),
            'selector'  => '{{WRAPPER}} .eppro-ic-arrow',
            'condition' => [ 'show_arrows' => 'yes' ],
        ] );

        $this->end_controls_section();

        $this->eppro_register_entrance_animation_controls();
    }

    protected function render(): void {
        $s = $this->get_settings_for_display();
        if ( empty( $s['images'] ) ) {
            echo '<div class="eppro-editor-placeholder">
                <svg width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="eppro-editor-placeholder__icon"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m3 9 5-4 4 6 3-2 6 9H3z"/><circle cx="8.5" cy="7.5" r="1.5"/></svg>
                <p class="eppro-editor-placeholder__title">' . esc_html__( 'Image Carousel', 'admore-widgets-suite' ) . '</p>
                <p class="eppro-editor-placeholder__desc">' . esc_html__( 'Add images in the widget settings to display the carousel.', 'admore-widgets-suite' ) . '</p>
            </div>';
            return;
        }

        $options = [
            'slides'       => intval( $s['slides_to_show'] ?? 3 ),
            'slidesMob'    => intval( $s['slides_to_show_mobile'] ?? 1 ),
            'slidesTab'    => intval( $s['slides_to_show_tablet'] ?? 2 ),
            'gap'          => intval( $s['slides_gap']['size'] ?? 20 ),
            'autoplay'     => 'yes' === ( $s['autoplay'] ?? 'yes' ),
            'delay'        => intval( $s['autoplay_speed'] ?? 3000 ),
            'pauseOnHover' => 'yes' === ( $s['pause_on_hover'] ?? 'yes' ),
            'loop'         => 'yes' === ( $s['loop'] ?? 'yes' ),
            'arrows'       => 'yes' === ( $s['show_arrows'] ?? 'yes' ),
            'dots'         => 'yes' === ( $s['show_dots'] ?? 'yes' ),
            'effect'       => $s['effect'] ?? 'slide',
            'speed'        => intval( $s['speed'] ?? 600 ),
        ];
        $show_caption = 'yes' === ( $s['show_caption'] ?? '' );
        $link_to = $s['link_to'] ?? 'none';
        $size    = $s['image_size'] ?? 'large';
        $uid     = 'eppro-ic-' . $this->get_id();
        ?>
        <div class="eppro-ic-wrap" id="<?php echo esc_attr( $uid ); ?>"
             data-opts="<?php echo esc_attr( wp_json_encode( $options ) ); ?>">
            <div class="swiper eppro-ic-swiper">
                <div class="swiper-wrapper">
                    <?php foreach ( $s['images'] as $img ) :
                        $src = wp_get_attachment_image_url( $img['id'], $size ) ?: $img['url'];
                        $alt = get_post_meta( $img['id'], '_wp_attachment_image_alt', true ) ?: '';
                        $href = '';
                        if ( 'file' === $link_to ) {
                            $href = wp_get_attachment_url( $img['id'] );
                        }
                        ?>
                        <div class="swiper-slide eppro-ic-slide">
                            <?php if ( $href ) : ?>
                            <a href="<?php echo esc_url( $href ); ?>" data-elementor-open-lightbox="yes">
                            <?php endif; ?>
                            <img src="<?php echo esc_url( $src ); ?>"
                                 alt="<?php echo esc_attr( $alt ); ?>"
                                 loading="lazy">
                            <?php if ( $href ) : ?></a><?php endif; ?>
                            <?php if ( $show_caption ) :
                                $caption = get_post_field( 'post_excerpt', $img['id'] );
                                if ( ! $caption ) $caption = wp_get_attachment_caption( $img['id'] );
                                if ( $caption ) : ?>
                            <div class="eppro-ic-caption"><?php echo esc_html( $caption ); ?></div>
                            <?php endif; endif; ?>
                        </div>
                    <?php endforeach; ?>
                </div>
                <?php if ( $options['dots'] ) : ?>
                <div class="swiper-pagination"></div>
                <?php endif; ?>
                <?php if ( $options['arrows'] ) : ?>
                <?php
                // Through Icons_Manager: with Elementor's inline-SVG icons (default)
                // the eicons font is not loaded on the frontend, so a bare
                // <i class="eicon-…"> rendered as an empty box for visitors.
                ?>
                <button type="button" class="eppro-ic-arrow eppro-ic-arrow--prev" aria-label="<?php esc_attr_e( 'Previous', 'admore-widgets-suite' ); ?>">
                    <?php \Elementor\Icons_Manager::render_icon( [ 'library' => 'eicons', 'value' => 'eicon-chevron-left' ], [ 'aria-hidden' => 'true' ] ); ?>
                </button>
                <button type="button" class="eppro-ic-arrow eppro-ic-arrow--next" aria-label="<?php esc_attr_e( 'Next', 'admore-widgets-suite' ); ?>">
                    <?php \Elementor\Icons_Manager::render_icon( [ 'library' => 'eicons', 'value' => 'eicon-chevron-right' ], [ 'aria-hidden' => 'true' ] ); ?>
                </button>
                <?php endif; ?>
            </div>
        </div>
        <?php
    }
}