<?php
/**
 * EPP Flip Box Widget
 *
 * Two-sided card (front + back) with CSS 3D flip on hover.
 * Supports horizontal/vertical flip direction, custom backgrounds,
 * icon/image on either side, and an optional action button on the back.
 *
 * @package AdMoreWidgetsSuite
 * @since   1.4.2
 */

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

class EPPRO_Flip_Box_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-flip-box'; }
    public function get_title(): string { return __( 'Flip Box', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-flip-box'; }
    public function get_keywords(): array { return [ 'flip', 'box', 'card', '3d', 'rotate', 'hover', 'eppro' ]; }
    public function get_style_depends(): array { return [ 'eppro-flip-box' ]; }

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

    protected function register_controls(): void {

        /* ── Front side ── */
        $this->start_controls_section( 'section_front', [
            'label' => __( 'Front Side', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'front_graphic', [
            'label'   => __( 'Graphic', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'icon',
            'options' => [
                'none'  => __( 'None',  'admore-widgets-suite' ),
                'icon'  => __( 'Icon',  'admore-widgets-suite' ),
                'image' => __( 'Image', 'admore-widgets-suite' ),
            ],
        ] );

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

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

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

        $this->add_control( 'front_description', [
            'label'   => __( 'Description', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::TEXTAREA,
            'default' => __( 'Short description on the front side of the card.', 'admore-widgets-suite' ),
            'rows'    => 3,
            'dynamic' => [ 'active' => true ],
        ] );

        $this->end_controls_section();

        /* ── Back side ── */
        $this->start_controls_section( 'section_back', [
            'label' => __( 'Back Side', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'back_graphic', [
            'label'   => __( 'Graphic', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'icon',
            'options' => [
                'none'  => __( 'None',  'admore-widgets-suite' ),
                'icon'  => __( 'Icon',  'admore-widgets-suite' ),
                'image' => __( 'Image', 'admore-widgets-suite' ),
            ],
        ] );

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

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

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

        $this->add_control( 'back_description', [
            'label'   => __( 'Description', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::TEXTAREA,
            'default' => __( 'Additional details appear on the back side of the card.', 'admore-widgets-suite' ),
            'rows'    => 3,
            'dynamic' => [ 'active' => true ],
        ] );

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

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

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

        $this->end_controls_section();

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

        $this->add_control( 'flip_direction', [
            'label'   => __( 'Flip Direction', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'right',
            'options' => [
                'right' => __( 'Flip Right',  'admore-widgets-suite' ),
                'left'  => __( 'Flip Left',   'admore-widgets-suite' ),
                'up'    => __( 'Flip Up',     'admore-widgets-suite' ),
                'down'  => __( 'Flip Down',   'admore-widgets-suite' ),
            ],
        ] );

        $this->add_control( 'flip_effect', [
            'label'   => __( 'Effect', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'flip',
            'options' => [
                'flip' => __( '3D Flip',  'admore-widgets-suite' ),
                'fade' => __( 'Fade',     'admore-widgets-suite' ),
                'push' => __( 'Slide In', 'admore-widgets-suite' ),
            ],
        ] );

        $this->add_responsive_control( 'box_height', [
            'label'      => __( 'Box Height', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', 'vh' ],
            'range'      => [ 'px' => [ 'min' => 100, 'max' => 800 ], 'vh' => [ 'min' => 10, 'max' => 100 ] ],
            'default'    => [ 'size' => 280, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-flip-box' => 'height: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->add_control( 'flip_speed', [
            'label'     => __( 'Flip Speed (ms)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 100, 'max' => 1500, 'step' => 50 ] ],
            'default'   => [ 'size' => 600 ],
            'selectors' => [
                '{{WRAPPER}} .eppro-flip-box__inner' => 'transition-duration: {{SIZE}}ms;',
                '{{WRAPPER}} .eppro-flip-box--fade .eppro-flip-box__back' => 'transition-duration: {{SIZE}}ms;',
                '{{WRAPPER}} .eppro-flip-box--push .eppro-flip-box__back' => 'transition-duration: {{SIZE}}ms;',
            ],
        ] );

        $this->end_controls_section();

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

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

        $this->add_responsive_control( 'front_padding', [
            'label'      => __( 'Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em', '%' ],
            'default'    => [ 'top' => '30', 'right' => '20', 'bottom' => '30', 'left' => '20', 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-flip-box__front' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_control( 'front_align', [
            'label'     => __( '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',
            'selectors' => [ '{{WRAPPER}} .eppro-flip-box__front' => 'text-align: {{VALUE}};' ],
        ] );

        $this->add_control( 'front_icon_color', [
            'label'     => __( 'Icon Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'separator' => 'before',
            'selectors' => [
                '{{WRAPPER}} .eppro-flip-box__front .eppro-flip-graphic i'   => 'color: {{VALUE}};',
                '{{WRAPPER}} .eppro-flip-box__front .eppro-flip-graphic svg' => 'fill: {{VALUE}};',
            ],
        ] );

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

        $this->add_control( 'front_title_color', [
            'label'     => __( 'Title Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'separator' => 'before',
            'selectors' => [ '{{WRAPPER}} .eppro-flip-box__front .eppro-flip-title' => 'color: {{VALUE}};' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'front_title_typo',
            'selector' => '{{WRAPPER}} .eppro-flip-box__front .eppro-flip-title',
        ] );

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

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'front_desc_typo',
            'selector' => '{{WRAPPER}} .eppro-flip-box__front .eppro-flip-desc',
        ] );

        $this->end_controls_section();

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

        $this->add_group_control( \Elementor\Group_Control_Background::get_type(), [
            'name'     => 'back_bg',
            'selector' => '{{WRAPPER}} .eppro-flip-box__back',
            'fields_options' => [
                'background' => [ 'default' => 'classic' ],
                'color'      => [ 'default' => '#7c3aed' ],
            ],
        ] );

        $this->add_responsive_control( 'back_padding', [
            'label'      => __( 'Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', 'em', '%' ],
            'default'    => [ 'top' => '30', 'right' => '20', 'bottom' => '30', 'left' => '20', 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-flip-box__back' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_control( 'back_align', [
            'label'     => __( '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',
            'selectors' => [ '{{WRAPPER}} .eppro-flip-box__back' => 'text-align: {{VALUE}};' ],
        ] );

        $this->add_control( 'back_icon_color', [
            'label'     => __( 'Icon Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'separator' => 'before',
            'selectors' => [
                '{{WRAPPER}} .eppro-flip-box__back .eppro-flip-graphic i'   => 'color: {{VALUE}};',
                '{{WRAPPER}} .eppro-flip-box__back .eppro-flip-graphic svg' => 'fill: {{VALUE}};',
            ],
        ] );

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

        $this->add_control( 'back_title_color', [
            'label'     => __( 'Title Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'separator' => 'before',
            'selectors' => [ '{{WRAPPER}} .eppro-flip-box__back .eppro-flip-title' => 'color: {{VALUE}};' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'back_title_typo',
            'selector' => '{{WRAPPER}} .eppro-flip-box__back .eppro-flip-title',
        ] );

        $this->add_control( 'back_desc_color', [
            'label'     => __( 'Description Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => 'rgba(255,255,255,0.9)',
            'selectors' => [ '{{WRAPPER}} .eppro-flip-box__back .eppro-flip-desc' => 'color: {{VALUE}};' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'     => 'back_desc_typo',
            'selector' => '{{WRAPPER}} .eppro-flip-box__back .eppro-flip-desc',
        ] );

        $this->add_control( 'back_btn_color', [
            'label'     => __( 'Button Text Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#7c3aed',
            'separator' => 'before',
            'selectors' => [ '{{WRAPPER}} .eppro-flip-btn' => 'color: {{VALUE}};' ],
        ] );

        $this->add_control( 'back_btn_bg', [
            'label'     => __( 'Button Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#ffffff',
            'selectors' => [ '{{WRAPPER}} .eppro-flip-btn' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'back_btn_padding', [
            'label'      => __( 'Button Padding', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px' ],
            'default'    => [ 'top' => '10', 'right' => '22', 'bottom' => '10', 'left' => '22', 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-flip-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};' ],
        ] );

        $this->add_responsive_control( 'back_btn_radius', [
            'label'      => __( 'Button Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 0, 'max' => 50 ] ],
            'default'    => [ 'size' => 4, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-flip-btn' => 'border-radius: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

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

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

        $this->end_controls_section();

        $this->eppro_register_entrance_animation_controls();
    }

    // -------------------------------------------------------------------------
    // Render helper
    // -------------------------------------------------------------------------

    private function render_side( array $s, string $side ): void {
        $graphic = $s[ $side . '_graphic' ] ?? 'none';
        $title   = $s[ $side . '_title'   ] ?? '';
        $desc    = $s[ $side . '_description' ] ?? '';
        ?>
        <?php if ( 'icon' === $graphic && ! empty( $s[ $side . '_icon' ]['value'] ) ) : ?>
        <div class="eppro-flip-graphic">
            <?php \Elementor\Icons_Manager::render_icon( $s[ $side . '_icon' ], [ 'aria-hidden' => 'true' ] ); ?>
        </div>
        <?php elseif ( 'image' === $graphic && ! empty( $s[ $side . '_image' ]['url'] ) ) : ?>
        <div class="eppro-flip-graphic eppro-flip-graphic--image">
            <img src="<?php echo esc_url( $s[ $side . '_image' ]['url'] ); ?>" alt="" loading="lazy">
        </div>
        <?php endif; ?>
        <?php if ( $title ) : ?>
        <h3 class="eppro-flip-title"><?php echo esc_html( $title ); ?></h3>
        <?php endif; ?>
        <?php if ( $desc ) : ?>
        <p class="eppro-flip-desc"><?php echo wp_kses_post( $desc ); ?></p>
        <?php endif; ?>
        <?php
    }

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

    protected function render(): void {
        $s        = $this->get_settings_for_display();
        $dir      = $s['flip_direction'] ?? 'right';
        $effect   = $s['flip_effect']    ?? 'flip';
        $show_btn = 'yes' === ( $s['back_button_show'] ?? 'yes' );
        $btn_text = $s['back_button_text'] ?? '';
        $btn_link = $s['back_button_link'] ?? [];
        $btn_url  = $btn_link['url']       ?? '#';
        $btn_ext  = ! empty( $btn_link['is_external'] );
        $btn_nof  = ! empty( $btn_link['nofollow'] );

        $box_class = 'eppro-flip-box eppro-flip-box--' . esc_attr( $dir ) . ' eppro-flip-box--' . esc_attr( $effect );
        ?>
        <div class="<?php echo esc_attr( $box_class ); ?>">
            <div class="eppro-flip-box__inner">
                <div class="eppro-flip-box__front">
                    <?php $this->render_side( $s, 'front' ); ?>
                </div>
                <div class="eppro-flip-box__back">
                    <?php $this->render_side( $s, 'back' ); ?>
                    <?php if ( $show_btn && $btn_text ) :
                        $rel = [];
                        if ( $btn_nof ) $rel[] = 'nofollow';
                        if ( $btn_ext ) $rel[] = 'noopener noreferrer';
                    ?>
                    <a href="<?php echo esc_url( $btn_url ); ?>"
                       class="eppro-flip-btn"
                       <?php if ( $btn_ext ) echo 'target="_blank"'; ?>
                       <?php if ( $rel ) echo 'rel="' . esc_attr( implode( ' ', $rel ) ) . '"'; ?>>
                        <?php echo esc_html( $btn_text ); ?>
                    </a>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <?php
    }
}