<?php
/**
 * EPP Icon Box Widget
 *
 * Icon + Title + Description + optional link, with full style controls.
 * Supports icon position (top / left / right) and all layout variations.
 *
 * @package AdMoreWidgetsSuite
 * @since   1.0.0
 */

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

class EPPRO_Icon_Box_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-icon-box'; }
    public function get_title(): string { return __( 'Icon Box', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-icon-box'; }
    public function get_keywords(): array { return [ 'icon', 'box', 'feature', 'service', 'card', 'eppro' ]; }
    public function get_style_depends(): array { return [ 'eppro-icon-box' ]; }

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

    protected function register_controls(): void {

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

        $this->add_control( 'icon', [
            'label'   => __( 'Icon', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::ICONS,
            'default' => [ 'value' => 'fas fa-star', 'library' => 'fa-solid' ],
        ] );

        $this->add_control( 'icon_position', [
            'label'   => __( 'Icon 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',
        ] );

        $this->add_control( 'icon_shape', [
            'label'        => __( 'Icon Shape', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            'default'      => 'none',
            'options'      => [
                'none'    => __( 'None (icon only)', 'admore-widgets-suite' ),
                'circle'  => __( 'Circle', 'admore-widgets-suite' ),
                'square'  => __( 'Square', 'admore-widgets-suite' ),
                'rounded' => __( 'Rounded', 'admore-widgets-suite' ),
            ],
            'prefix_class' => 'eppro-icon-box--shape-',
            'separator'    => 'after',
        ] );

        $this->add_control( 'title', [
            'label'       => __( 'Title', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'Icon 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 of the icon box goes here.', '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' ),
                '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',
            'separator' => 'before',
            'condition' => [ 'icon_position' => 'top' ],
            'selectors' => [ '{{WRAPPER}} .eppro-icon-box' => 'text-align: {{VALUE}};', '{{WRAPPER}} .eppro-icon-box__icon' => 'justify-content: {{VALUE}};' ],
        ] );

        $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'   => __( 'Learn 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->end_controls_section();

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

        $this->add_responsive_control( 'icon_size', [
            'label'      => __( 'Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', 'em' ],
            'range'      => [ 'px' => [ 'min' => 10, 'max' => 120 ] ],
            'default'    => [ 'size' => 40, 'unit' => 'px' ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-icon-box__icon i'   => 'font-size: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-icon-box__icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
            ],
        ] );

        $this->start_controls_tabs( 'icon_color_tabs' );

        $this->start_controls_tab( 'icon_normal', [ 'label' => __( 'Normal', 'admore-widgets-suite' ) ] );

        $this->add_control( 'icon_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .eppro-icon-box__icon i'   => 'color: {{VALUE}};',
                '{{WRAPPER}} .eppro-icon-box__icon svg' => 'fill: {{VALUE}};',
            ],
        ] );

        $this->add_control( 'icon_bg_color', [
            'label'     => __( 'Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-icon-box__icon-wrap' => 'background-color: {{VALUE}};' ],
        ] );

        $this->end_controls_tab();

        $this->start_controls_tab( 'icon_hover', [ 'label' => __( 'Hover', 'admore-widgets-suite' ) ] );

        $this->add_control( 'icon_color_hover', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .eppro-icon-box:hover .eppro-icon-box__icon i'   => 'color: {{VALUE}};',
                '{{WRAPPER}} .eppro-icon-box:hover .eppro-icon-box__icon svg' => 'fill: {{VALUE}};',
            ],
        ] );

        $this->add_control( 'icon_bg_color_hover', [
            'label'     => __( 'Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-icon-box:hover .eppro-icon-box__icon-wrap' => 'background-color: {{VALUE}};' ],
        ] );

        $this->end_controls_tab();
        $this->end_controls_tabs();

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

        $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
            'name'      => 'icon_border',
            'selector'  => '{{WRAPPER}} .eppro-icon-box__icon-wrap',
            'separator' => 'before',
        ] );

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

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

        $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-icon-box__title',
        ] );

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

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

        $this->add_responsive_control( 'title_spacing', [
            'label'     => __( 'Spacing', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 0, 'max' => 40 ] ],
            'default'   => [ 'size' => 8, 'unit' => 'px' ],
            'selectors' => [ '{{WRAPPER}} .eppro-icon-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-icon-box__description',
        ] );

        $this->add_control( 'desc_color', [
            'label'     => __( 'Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-icon-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-icon-box',
        ] );

        $this->add_group_control( \Elementor\Group_Control_Border::get_type(), [
            'name'     => 'box_border',
            'selector' => '{{WRAPPER}} .eppro-icon-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-icon-box' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_responsive_control( 'box_padding', [
            'label'      => __( 'Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em', '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-icon-box' => '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-icon-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-icon-box:hover',
        ] );

        $this->add_control( 'box_hover_bg', [
            'label'     => __( 'Hover Background Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-icon-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-icon-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['icon_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_anim   = $s['hover_animation']      ?? '';
        $is_external  = ! empty( $s['link']['is_external'] );
        $no_follow    = ! empty( $s['link']['nofollow'] );

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

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

        $wrap_tag  = ( $link_url && 'box' === $link_type ) ? 'a' : 'div';
        $wrap_open = '<' . $wrap_tag . ' class="' . $box_classes . '"' . ( $wrap_tag === 'a' ? $link_attrs : '' ) . '>';
        $wrap_close = '</' . $wrap_tag . '>';
        ?>
        <?php echo wp_kses_post( $wrap_open ); ?>
            <?php if ( ! empty( $s['icon']['value'] ) ) : ?>
            <div class="eppro-icon-box__icon">
                <span class="eppro-icon-box__icon-wrap">
                    <?php \Elementor\Icons_Manager::render_icon( $s['icon'], [ 'aria-hidden' => 'true' ] ); ?>
                </span>
            </div>
            <?php endif; ?>
            <div class="eppro-icon-box__content">
                <?php if ( ! empty( $s['title'] ) ) : ?>
                <?php if ( $link_url && 'title' === $link_type ) : ?>
                <<?php echo esc_html( $tag ); ?> class="eppro-icon-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-icon-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-icon-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-icon-box__btn eppro-icon-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 echo esc_html( $s['button_text'] ); ?>
                </a>
                <?php endif; ?>
            </div>
        <?php echo wp_kses_post( $wrap_close ); ?>
        <?php
    }

    protected function content_template(): void { ?>
        <# var position = settings.icon_position || 'top';
           var tag      = settings.title_tag     || 'h3';
           var link     = settings.link && settings.link.url ? settings.link.url : '';
           var linkType = settings.link_type || 'box';
           var hoverAnim = settings.hover_animation ? ' elementor-animation-' + settings.hover_animation : '';
           var boxClass = 'eppro-icon-box eppro-icon-box--' + position + hoverAnim;
           var wrapTag = (link && linkType === 'box') ? 'a' : 'div';
           var wrapAttrs = (link && linkType === 'box') ? ' href="' + _.escape(link) + '"' : '';
        #>
        <{{{wrapTag}}} class="{{{boxClass}}}" {{{wrapAttrs}}}>
            <# if ( settings.icon && settings.icon.value ) { #>
            <div class="eppro-icon-box__icon">
                <span class="eppro-icon-box__icon-wrap">
                    <# var iconHTML = elementor.helpers.renderIcon( view, settings.icon, { 'aria-hidden': true }, 'i', 'object' ); #>
                    {{{ iconHTML.value }}}
                </span>
            </div>
            <# } #>
            <div class="eppro-icon-box__content">
                <# if ( settings.title ) { #>
                    <{{{tag}}} class="eppro-icon-box__title">{{{settings.title}}}</{{{tag}}}>
                <# } #>
                <# if ( settings.description ) { #>
                    <p class="eppro-icon-box__description">{{{settings.description}}}</p>
                <# } #>
            </div>
        </{{{wrapTag}}}>
        <?php
    }
}