<?php
/**
 * EPP Hotspot Widget
 *
 * Image with interactive pin markers. Each pin has X/Y position (% from
 * top-left), tooltip content (title + description + optional link), and
 * individual icon/color overrides. Tooltip triggers on hover or click.
 *
 * @package AdMoreWidgetsSuite
 * @since   1.4.2
 */

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

class EPPRO_Hotspot_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-hotspot'; }
    public function get_title(): string { return __( 'Hotspot', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-image-hotspot'; }
    public function get_keywords(): array { return [ 'hotspot', 'image', 'pin', 'marker', 'tooltip', 'interactive', 'eppro' ]; }
    public function get_style_depends(): array  { return [ 'eppro-hotspot' ]; }
    public function get_script_depends(): array { return [ 'eppro-hotspot-script' ]; }

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

    protected function register_controls(): void {

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

        $this->add_control( 'image', [
            'label'   => __( 'Image', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::MEDIA,
            'default' => [ 'url' => EPPRO_URL . 'widgets/hotspot/assets/img/placeholder.svg' ],
            'dynamic' => [ 'active' => true ],
        ] );

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

        $this->end_controls_section();

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

        $repeater = new \Elementor\Repeater();

        $repeater->add_control( 'x_position', [
            'label'   => __( 'Horizontal Position (%)', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SLIDER,
            'range'   => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],
            'default' => [ 'size' => 50 ],
        ] );

        $repeater->add_control( 'y_position', [
            'label'   => __( 'Vertical Position (%)', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SLIDER,
            'range'   => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],
            'default' => [ 'size' => 50 ],
        ] );

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

        $repeater->add_control( 'pin_color', [
            'label' => __( 'Pin Color', 'admore-widgets-suite' ),
            'type'  => \Elementor\Controls_Manager::COLOR,
        ] );

        $repeater->add_control( 'pin_bg', [
            'label' => __( 'Pin Background', 'admore-widgets-suite' ),
            'type'  => \Elementor\Controls_Manager::COLOR,
        ] );

        $repeater->add_control( 'tooltip_title', [
            'label'       => __( 'Tooltip Title', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'Feature Name', 'admore-widgets-suite' ),
            'label_block' => true,
            'separator'   => 'before',
            'dynamic'     => [ 'active' => true ],
        ] );

        $repeater->add_control( 'tooltip_desc', [
            'label'   => __( 'Tooltip Description', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::TEXTAREA,
            'default' => __( 'A short description for this hotspot.', 'admore-widgets-suite' ),
            'rows'    => 3,
            'dynamic' => [ 'active' => true ],
        ] );

        $repeater->add_control( 'tooltip_link', [
            'label'   => __( 'Tooltip Link', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::URL,
            'dynamic' => [ 'active' => true ],
        ] );

        $this->add_control( 'hotspots', [
            'label'       => __( 'Hotspots', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::REPEATER,
            'fields'      => $repeater->get_controls(),
            'default'     => [
                [ 'x_position' => [ 'size' => 30 ], 'y_position' => [ 'size' => 40 ], 'tooltip_title' => __( 'Feature One', 'admore-widgets-suite' ), 'tooltip_desc' => __( 'Highlight this part of the image.', 'admore-widgets-suite' ) ],
                [ 'x_position' => [ 'size' => 65 ], 'y_position' => [ 'size' => 60 ], 'tooltip_title' => __( 'Feature Two', 'admore-widgets-suite' ), 'tooltip_desc' => __( 'Another interesting detail here.', 'admore-widgets-suite' ) ],
            ],
            'title_field' => '{{{ tooltip_title }}}',
        ] );

        $this->end_controls_section();

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

        $this->add_control( 'trigger', [
            'label'   => __( 'Tooltip Trigger', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'hover',
            'options' => [
                'hover' => __( 'Hover', 'admore-widgets-suite' ),
                'click' => __( 'Click', 'admore-widgets-suite' ),
            ],
        ] );

        $this->add_control( 'tooltip_position', [
            'label'   => __( 'Default Tooltip Position', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SELECT,
            'default' => 'top',
            'options' => [
                'top'    => __( 'Top',    'admore-widgets-suite' ),
                'bottom' => __( 'Bottom', 'admore-widgets-suite' ),
                'left'   => __( 'Left',   'admore-widgets-suite' ),
                'right'  => __( 'Right',  'admore-widgets-suite' ),
            ],
        ] );

        $this->add_control( 'pulse', [
            'label'        => __( 'Pulse Animation', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => '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_border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::DIMENSIONS,
            'size_units' => [ 'px', '%' ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-hotspot-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
                '{{WRAPPER}} .eppro-hotspot-img'  => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ] );

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

        $this->end_controls_section();

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

        $this->add_responsive_control( 'pin_size', [
            'label'      => __( 'Pin Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 16, 'max' => 80 ] ],
            'default'    => [ 'size' => 32, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-hotspot-pin' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};' ],
        ] );

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

        $this->add_control( 'pin_bg', [
            'label'     => __( 'Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => EPPRO_Elementor_Helper::brand_color(),
            'selectors' => [ '{{WRAPPER}} .eppro-hotspot-pin' => 'background-color: {{VALUE}};' ],
        ] );

        $this->add_responsive_control( 'pin_icon_size', [
            'label'      => __( 'Icon Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 6, 'max' => 40 ] ],
            'default'    => [ 'size' => 14, 'unit' => 'px' ],
            'selectors'  => [
                '{{WRAPPER}} .eppro-hotspot-pin i'   => 'font-size: {{SIZE}}{{UNIT}};',
                '{{WRAPPER}} .eppro-hotspot-pin svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
            ],
        ] );

        $this->add_responsive_control( 'pin_border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px', '%' ],
            'default'    => [ 'size' => 50, 'unit' => '%' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-hotspot-pin' => 'border-radius: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

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

        $this->add_control( 'tooltip_bg', [
            'label'     => __( 'Background', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#1f2937',
            'selectors' => [
                '{{WRAPPER}} .eppro-hotspot-tooltip'                   => 'background-color: {{VALUE}};',
                '{{WRAPPER}} .eppro-hotspot-tooltip[data-pos="top"]::after'    => 'border-top-color: {{VALUE}};',
                '{{WRAPPER}} .eppro-hotspot-tooltip[data-pos="bottom"]::after' => 'border-bottom-color: {{VALUE}};',
                '{{WRAPPER}} .eppro-hotspot-tooltip[data-pos="left"]::after'   => 'border-left-color: {{VALUE}};',
                '{{WRAPPER}} .eppro-hotspot-tooltip[data-pos="right"]::after'  => 'border-right-color: {{VALUE}};',
            ],
        ] );

        $this->add_responsive_control( 'tooltip_width', [
            'label'      => __( 'Width', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 120, 'max' => 400 ] ],
            'default'    => [ 'size' => 220, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-hotspot-tooltip' => 'width: {{SIZE}}{{UNIT}};' ],
        ] );

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

        $this->add_responsive_control( 'tooltip_border_radius', [
            'label'      => __( 'Border Radius', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'default'    => [ 'size' => 6, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-hotspot-tooltip' => 'border-radius: {{SIZE}}{{UNIT}};' ],
        ] );

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

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

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

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

        $this->end_controls_section();

        $this->eppro_register_entrance_animation_controls();
    }

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

    protected function render(): void {
        $s        = $this->get_settings_for_display();
        $hotspots = $s['hotspots']         ?? [];
        $trigger  = $s['trigger']          ?? 'hover';
        $def_pos  = $s['tooltip_position'] ?? 'top';
        $pulse    = 'yes' === ( $s['pulse'] ?? 'yes' );

        $img_html = \Elementor\Group_Control_Image_Size::get_attachment_image_html( $s, 'image', 'image' );
        if ( ! $img_html ) return;

        $img_html = str_replace( '<img ', '<img class="eppro-hotspot-img" ', $img_html );
        ?>
        <div class="eppro-hotspot-wrap" data-trigger="<?php echo esc_attr( $trigger ); ?>">
            <?php echo wp_kses_post( $img_html ); ?>

            <?php foreach ( $hotspots as $pin ) :
                $x     = (float) ( $pin['x_position']['size'] ?? 50 );
                $y     = (float) ( $pin['y_position']['size'] ?? 50 );
                $icon  = $pin['icon'] ?? [];
                $p_col = $pin['pin_color'] ?? '';
                $p_bg  = $pin['pin_bg']    ?? '';
                $title = $pin['tooltip_title'] ?? '';
                $desc  = $pin['tooltip_desc']  ?? '';
                $link  = $pin['tooltip_link']  ?? [];
                $lurl  = $link['url'] ?? '';
                $lext  = ! empty( $link['is_external'] );

                $pin_style = 'left:' . $x . '%;top:' . $y . '%;';

                $icon_style = '';
                if ( $p_col ) $icon_style .= 'color:' . esc_attr( $p_col ) . ';';
                if ( $p_bg )  $icon_style .= 'background-color:' . esc_attr( $p_bg ) . ';';

                $pin_class = 'eppro-hotspot-pin';
                if ( $pulse ) $pin_class .= ' eppro-hotspot-pin--pulse';
            ?>
            <div class="eppro-hotspot-point" style="<?php echo esc_attr( $pin_style ); ?>">
                <button class="<?php echo esc_attr( $pin_class ); ?>"
                        type="button"
                        aria-expanded="false"
                        <?php if ( $icon_style ) echo 'style="' . esc_attr( $icon_style ) . '"'; ?>>
                    <?php if ( ! empty( $icon['value'] ) ) :
                        \Elementor\Icons_Manager::render_icon( $icon, [ 'aria-hidden' => 'true' ] );
                    endif; ?>
                </button>

                <?php if ( $title || $desc ) : ?>
                <div class="eppro-hotspot-tooltip" data-pos="<?php echo esc_attr( $def_pos ); ?>" role="tooltip">
                    <?php if ( $title ) : ?>
                    <p class="eppro-hotspot-tooltip__title"><?php echo esc_html( $title ); ?></p>
                    <?php endif; ?>
                    <?php if ( $desc ) : ?>
                    <p class="eppro-hotspot-tooltip__desc"><?php echo wp_kses_post( $desc ); ?></p>
                    <?php endif; ?>
                    <?php if ( $lurl ) : ?>
                    <a href="<?php echo esc_url( $lurl ); ?>"
                       class="eppro-hotspot-tooltip__link"
                       <?php if ( $lext ) echo 'target="_blank" rel="noopener noreferrer"'; ?>>
                        <?php esc_html_e( 'Learn More', 'admore-widgets-suite' ); ?> &rarr;
                    </a>
                    <?php endif; ?>
                </div>
                <?php endif; ?>
            </div>
            <?php endforeach; ?>
        </div>
        <?php
    }
}