<?php
/**
 * EPP Image Box Widget
 *
 * Image + Title + Description + optional link. Supports image position
 * (top / left / right), overlay effect on hover, and full style controls.
 *
 * @package AdMoreWidgetsSuite
 * @since   1.0.0
 */

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

class EPPRO_Image_Box_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-image-box'; }
    public function get_title(): string { return __( 'Image Box', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-image-box'; }
    public function get_keywords(): array { return [ 'image', 'box', 'photo', 'picture', 'card', 'media', 'eppro' ]; }
    public function get_style_depends(): array { return [ 'eppro-image-box' ]; }

    // -------------------------------------------------------------------------
    // Controls
    // -------------------------------------------------------------------------

    protected function register_controls(): void {

        /* ── Content ── */
        $this->start_controls_section( 'section_content', [
            'label' => __( 'Image Box', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'image', [
            'label'   => __( 'Image', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::MEDIA,
            'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
            'dynamic' => [ 'active' => true ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Image_Size::get_type(), [
            'name'      => 'image',
            'default'   => 'large',
            'separator' => 'none',
        ] );

        $this->add_control( 'image_position', [
            'label'     => __( 'Image Position', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'top'   => [ 'title' => __( 'Top',   'admore-widgets-suite' ), 'icon' => 'eicon-v-align-top' ],
                'left'  => [ 'title' => __( 'Left',  'admore-widgets-suite' ), 'icon' => 'eicon-h-align-left' ],
                'right' => [ 'title' => __( 'Right', 'admore-widgets-suite' ), 'icon' => 'eicon-h-align-right' ],
            ],
            'default'   => 'top',
            'separator' => 'after',
        ] );

        $this->add_control( 'title', [
            'label'       => __( 'Title', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'Image Box Title', 'admore-widgets-suite' ),
            'label_block' => true,
            'dynamic'     => [ 'active' => true ],
        ] );

        $this->add_control( 'title_tag', [
            'label'   => __( 'Title HTML Tag', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'h3',
            'options' => [
                'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4',
                'h5' => 'H5', 'h6' => 'H6', 'p'  => 'P', 'div' => 'div',
            ],
        ] );

        $this->add_control( 'description', [
            'label'   => __( 'Description', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::TEXTAREA,
            'default' => __( 'A short description for the image box.', 'admore-widgets-suite' ),
            'rows'    => 4,
            'dynamic' => [ 'active' => true ],
        ] );

        $this->add_control( 'link', [
            'label'       => __( 'Link', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::URL,
            'placeholder' => 'https://example.com',
            'dynamic'     => [ 'active' => true ],
            'separator'   => 'before',
        ] );

        $this->add_control( 'link_type', [
            'label'     => __( 'Link Applies To', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SELECT,
            'default'   => 'box',
            'options'   => [
                'box'   => __( 'Whole Box',  'admore-widgets-suite' ),
                'image' => __( 'Image Only', 'admore-widgets-suite' ),
                'title' => __( 'Title Only', 'admore-widgets-suite' ),
            ],
            'condition' => [ 'link[url]!' => '' ],
        ] );

        $this->add_responsive_control( 'alignment', [
            'label'     => __( 'Content Alignment', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'left'   => [ 'title' => __( 'Left',   'admore-widgets-suite' ), 'icon' => 'eicon-text-align-left' ],
                'center' => [ 'title' => __( 'Center', 'admore-widgets-suite' ), 'icon' => 'eicon-text-align-center' ],
                'right'  => [ 'title' => __( 'Right',  'admore-widgets-suite' ), 'icon' => 'eicon-text-align-right' ],
            ],
            'default'   => 'center',
            'condition' => [ 'image_position' => 'top' ],
            'selectors' => [ '{{WRAPPER}} .eppro-image-box' => 'text-align: {{VALUE}};' ],
            'separator' => 'before',
        ] );

        $this->add_control( 'show_button', [
            'label'        => __( 'Show Button', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'return_value' => 'yes',
            'separator'    => 'before',
        ] );

        $this->add_control( 'button_text', [
            'label'     => __( 'Button Text', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::TEXT,
            'default'   => __( 'Read More', 'admore-widgets-suite' ),
            'condition' => [ 'show_button' => 'yes' ],
            'dynamic'   => [ 'active' => true ],
        ] );

        $this->add_control( 'button_link', [
            'label'     => __( 'Button Link', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::URL,
            'condition' => [ 'show_button' => 'yes' ],
            'dynamic'   => [ 'active' => true ],
        ] );

        $this->add_control( 'button_style', [
            'label'     => __( 'Button Style', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SELECT,
            'default'   => 'link',
            'options'   => [
                'link'    => __( 'Link', 'admore-widgets-suite' ),
                'filled'  => __( 'Filled', 'admore-widgets-suite' ),
                'outline' => __( 'Outline', 'admore-widgets-suite' ),
            ],
            'condition' => [ 'show_button' => 'yes' ],
        ] );

        $this->add_control( 'button_icon', [
            'label'     => __( 'Button Icon', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::ICONS,
            'condition' => [ 'show_button' => 'yes' ],
        ] );

        $this->end_controls_section();

        /* ── Hover Overlay ── */
        $this->start_controls_section( 'section_overlay', [
            'label' => __( 'Hover Overlay', 'admore-widgets-suite' ),
        ] );

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

        $this->add_control( 'hover_overlay_text', [
            'label'     => __( 'Overlay Text', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::TEXT,
            'default'   => __( 'View Details', 'admore-widgets-suite' ),
            'condition' => [ 'show_hover_overlay' => 'yes' ],
            'dynamic'   => [ 'active' => true ],
        ] );

        $this->add_control( 'hover_overlay_icon', [
            'label'     => __( 'Overlay Icon', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::ICONS,
            'condition' => [ 'show_hover_overlay' => 'yes' ],
        ] );

        $this->add_control( 'hover_overlay_color', [
            'label'     => __( 'Overlay Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => 'rgba(0,0,0,0.55)',
            'selectors' => [ '{{WRAPPER}} .eppro-image-box__overlay' => 'background: {{VALUE}};' ],
            'condition' => [ 'show_hover_overlay' => 'yes' ],
        ] );

        $this->add_control( 'hover_overlay_text_color', [
            'label'     => __( 'Text / Icon Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'selectors' => [ '{{WRAPPER}} .eppro-image-box__overlay' => 'color: {{VALUE}};', '{{WRAPPER}} .eppro-image-box__overlay svg' => 'fill: {{VALUE}};' ],
            'condition' => [ 'show_hover_overlay' => 'yes' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'      => 'overlay_typography',
            'selector'  => '{{WRAPPER}} .eppro-image-box__overlay',
            'condition' => [ 'show_hover_overlay' => 'yes' ],
        ] );

        $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_responsive_control( 'image_width', [
            'label'      => __( 'Width', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', '%' ],
            'range'      => [ 'px' => [ 'min' => 40, 'max' => 600 ], '%' => [ 'min' => 10, 'max' => 100 ] ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-image-box__image'     => 'width: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-image-box__image img' => 'width: 100%;',
            ],
        ] );

        $this->add_responsive_control( 'image_height', [
            'label'      => __( 'Height', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', 'vh' ],
            'range'      => [ 'px' => [ 'min' => 60, 'max' => 800 ] ],
            'selectors'  => [ '{{WRAPPER}} .eppro-image-box__image img' => 'height: {{SIZE}}{{UNIT}}; object-fit: cover;' ],
        ] );

        $this->add_responsive_control( 'image_spacing', [
            'label'     => __( 'Spacing', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 0, 'max' => 60 ] ],
            'default'   => [ 'size' => 20, 'unit' => 'px' ],
            'selectors' => [
                '{{WRAPPER}} .eppro-image-box--top   .eppro-image-box__image' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-image-box--left  .eppro-image-box__image' => 'margin-right: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-image-box--right .eppro-image-box__image' => 'margin-left: {{SIZE}}{{UNIT}};',
            ],
        ] );

        $this->add_responsive_control( 'image_border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%' ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-image-box__image img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                '{{WRAPPER}} .eppro-image-box__image'     => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
            ],
        ] );

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

        $this->add_control( 'image_hover_effect', [
            'label'   => __( 'Hover Effect', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'none',
            'options' => [
                'none'    => __( 'None',    'admore-widgets-suite' ),
                'zoom'    => __( 'Zoom In', 'admore-widgets-suite' ),
                'zoomout' => __( 'Zoom Out','admore-widgets-suite' ),
                'lift'    => __( 'Lift (shadow)', 'admore-widgets-suite' ),
                'grey'    => __( 'Greyscale', 'admore-widgets-suite' ),
            ],
            'separator' => 'before',
        ] );

        $this->end_controls_section();

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

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'title_typography',
            'selector' => '{{WRAPPER}} .eppro-image-box__title',
        ] );

        $this->add_control( 'title_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-image-box__title, {{WRAPPER}} .eppro-image-box__title a' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'title_hover_color', [
            'label'     => __( 'Hover Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-image-box:hover .eppro-image-box__title, {{WRAPPER}} .eppro-image-box:hover .eppro-image-box__title a' => 'color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'title_spacing', [
            'label'     => __( 'Bottom Spacing', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
            'default'   => [ 'size' => 8, 'unit' => 'px' ],
            'selectors' => [ '{{WRAPPER}} .eppro-image-box__title' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

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

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'desc_typography',
            'selector' => '{{WRAPPER}} .eppro-image-box__description',
        ] );

        $this->add_control( 'desc_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-image-box__description' => 'color: {{VALUE}};' ],
        ] );

        $this->end_controls_section();

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

        $this->add_group_control( \Elementor\Group_Control_Background::get_type(), [
            'name'     => 'box_bg',
            'selector' => '{{WRAPPER}} .eppro-image-box',
        ] );

        $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
            'name'     => 'box_border',
            'selector' => '{{WRAPPER}} .eppro-image-box',
        ] );

        $this->add_responsive_control( 'box_border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-image-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_responsive_control( 'content_padding', [
            'label'      => __( 'Content Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em', '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-image-box__content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [
            'name'     => 'box_shadow',
            'selector' => '{{WRAPPER}} .eppro-image-box',
        ] );

        $this->add_group_control( \Elementor\Group_Control_Box_Shadow::get_type(), [
            'name'     => 'box_shadow_hover',
            'label'    => __( 'Hover Box Shadow', 'admore-widgets-suite' ),
            'selector' => '{{WRAPPER}} .eppro-image-box:hover',
        ] );

        $this->add_control( 'box_hover_bg', [
            'label'     => __( 'Hover Background Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-image-box:hover' => 'background-color: {{VALUE}};' ],
            'separator' => 'before',
        ] );

        $this->add_control( 'box_hover_border_color', [
            'label'     => __( 'Hover Border Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-image-box:hover' => 'border-color: {{VALUE}};' ],
        ] );

        $this->add_control( 'hover_animation', [
            'label' => __( 'Hover Animation', 'admore-widgets-suite' ),
            'type'  => \Elementor\Controls_Manager::HOVER_ANIMATION,
        ] );

        $this->end_controls_section();

        $this->eppro_register_entrance_animation_controls();
    }

    // -------------------------------------------------------------------------
    // Render
    // -------------------------------------------------------------------------

    protected function render(): void {
        $s           = $this->get_settings_for_display();
        $position    = $s['image_position']   ?? 'top';
        $tag         = in_array( $s['title_tag'] ?? 'h3', [ 'h2','h3','h4','h5','h6','p','div' ], true ) ? $s['title_tag'] : 'h3';
        $link_url    = $s['link']['url']       ?? '';
        $link_type   = $s['link_type']         ?? 'box';
        $hover_fx    = $s['image_hover_effect'] ?? 'none';
        $hover_anim  = $s['hover_animation']   ?? '';
        $is_external = ! empty( $s['link']['is_external'] );
        $no_follow   = ! empty( $s['link']['nofollow'] );

        $rel = [];
        if ( $no_follow )   $rel[] = 'nofollow';
        if ( $is_external ) $rel[] = 'noopener noreferrer';
        $link_attrs  = $link_url ? ' href="' . esc_url( $link_url ) . '"' : '';
        if ( $is_external ) $link_attrs .= ' target="_blank"';
        if ( $rel )         $link_attrs .= ' rel="' . esc_attr( implode( ' ', $rel ) ) . '"';

        $box_class = 'eppro-image-box eppro-image-box--' . esc_attr( $position );
        if ( $hover_anim ) $box_class .= ' elementor-animation-' . esc_attr( $hover_anim );

        $img_class = 'eppro-image-box__image';
        if ( 'none' !== $hover_fx ) $img_class .= ' eppro-image-box__image--' . esc_attr( $hover_fx );

        $wrap_tag  = ( $link_url && 'box' === $link_type ) ? 'a' : 'div';
        $wrap_open  = '<' . $wrap_tag . ' class="' . $box_class . '"' . ( $wrap_tag === 'a' ? $link_attrs : '' ) . '>';
        $wrap_close = '</' . $wrap_tag . '>';

        $img_html = \Elementor\Group_Control_Image_Size::get_attachment_image_html( $s, 'image', 'image' );
        ?>
        <?php echo wp_kses_post( $wrap_open ); ?>
            <?php if ( $img_html ) : ?>
            <div class="<?php echo esc_attr( $img_class ); ?>">
                <?php if ( $link_url && 'image' === $link_type ) : ?>
                    <a<?php echo wp_kses_post( $link_attrs ); ?>><?php echo wp_kses_post( $img_html ); ?></a>
                <?php else : ?>
                    <?php echo wp_kses_post( $img_html ); ?>
                <?php endif; ?>
                <?php if ( 'yes' === ( $s['show_hover_overlay'] ?? '' ) ) : ?>
                <div class="eppro-image-box__overlay">
                    <?php if ( ! empty( $s['hover_overlay_icon']['value'] ) ) : ?>
                        <span class="eppro-image-box__overlay-icon"><?php \Elementor\Icons_Manager::render_icon( $s['hover_overlay_icon'], [ 'aria-hidden' => 'true' ] ); ?></span>
                    <?php endif; ?>
                    <?php if ( ! empty( $s['hover_overlay_text'] ) ) : ?>
                        <span class="eppro-image-box__overlay-text"><?php echo esc_html( $s['hover_overlay_text'] ); ?></span>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            </div>
            <?php endif; ?>

            <div class="eppro-image-box__content">
                <?php if ( ! empty( $s['title'] ) ) : ?>
                <?php if ( $link_url && 'title' === $link_type ) : ?>
                <<?php echo esc_html( $tag ); ?> class="eppro-image-box__title">
                    <a<?php echo wp_kses_post( $link_attrs ); ?>><?php echo esc_html( $s['title'] ); ?></a>
                </<?php echo esc_html( $tag ); ?>>
                <?php else : ?>
                <<?php echo esc_html( $tag ); ?> class="eppro-image-box__title"><?php echo esc_html( $s['title'] ); ?></<?php echo esc_html( $tag ); ?>>
                <?php endif; ?>
                <?php endif; ?>
                <?php if ( ! empty( $s['description'] ) ) : ?>
                <p class="eppro-image-box__description"><?php echo wp_kses_post( $s['description'] ); ?></p>
                <?php endif; ?>
                <?php if ( 'yes' === ( $s['show_button'] ?? '' ) && ! empty( $s['button_text'] ) ) :
                    $btn_url = $s['button_link']['url'] ?? $link_url;
                    $btn_ext = ! empty( $s['button_link']['is_external'] );
                    $btn_rel = $btn_ext ? ' rel="noopener noreferrer"' : '';
                    $btn_trg = $btn_ext ? ' target="_blank"' : '';
                    $btn_cls = 'eppro-image-box__btn eppro-image-box__btn--' . esc_attr( $s['button_style'] ?? 'link' );
                ?>
                <a class="<?php echo esc_attr( $btn_cls ); ?>" href="<?php echo esc_url( $btn_url ); ?>"<?php echo wp_kses_post( $btn_trg . $btn_rel ); ?>>
                    <?php if ( ! empty( $s['button_icon']['value'] ) ) : ?>
                        <span class="eppro-image-box__btn-icon"><?php \Elementor\Icons_Manager::render_icon( $s['button_icon'], [ 'aria-hidden' => 'true' ] ); ?></span>
                    <?php endif; ?>
                    <?php echo esc_html( $s['button_text'] ); ?>
                </a>
                <?php endif; ?>
            </div>
        <?php echo wp_kses_post( $wrap_close ); ?>
        <?php
    }
}