<?php
/**
 * EPP Progress Bar Widget
 *
 * Animated horizontal progress bars with label, percentage, and full style
 * controls. Supports a repeater for multiple bars in one widget.
 *
 * @package AdMoreWidgetsSuite
 * @since   1.4.2
 */

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

class EPPRO_Progress_Bar_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-progress-bar'; }
    public function get_title(): string { return __( 'Progress Bar', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-skill-bar'; }
    public function get_keywords(): array { return [ 'progress', 'bar', 'skill', 'percentage', 'chart', 'animated', 'eppro' ]; }
    public function get_style_depends(): array  { return [ 'eppro-progress-bar' ]; }
    public function get_script_depends(): array { return [ 'eppro-progress-bar-script' ]; }

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

    protected function register_controls(): void {

        /* ── Bars list ── */
        $this->start_controls_section( 'section_content', [
            'label' => __( 'Progress Bars', 'admore-widgets-suite' ),
        ] );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control( 'label', [
            'label'       => __( 'Label', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::TEXT,
            'default'     => __( 'Design', 'admore-widgets-suite' ),
            'label_block' => true,
            'dynamic'     => [ 'active' => true ],
        ] );

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

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

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

        $this->add_control( 'bars', [
            'label'       => __( 'Bars', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::REPEATER,
            'fields'      => $repeater->get_controls(),
            'default'     => [
                [ 'label' => __( 'Design',      'admore-widgets-suite' ), 'percentage' => [ 'size' => 85 ] ],
                [ 'label' => __( 'Development', 'admore-widgets-suite' ), 'percentage' => [ 'size' => 70 ] ],
                [ 'label' => __( 'Marketing',   'admore-widgets-suite' ), 'percentage' => [ 'size' => 60 ] ],
            ],
            'title_field' => '{{{ label }}} — {{{ percentage.size }}}%',
        ] );

        $this->end_controls_section();

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

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

        $this->add_control( 'percentage_position', [
            'label'     => __( 'Percentage Position', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SELECT,
            'default'   => 'inline',
            'options'   => [
                'inline'  => __( 'Inline (right of label)', 'admore-widgets-suite' ),
                'tooltip' => __( 'Tooltip (above bar end)',  'admore-widgets-suite' ),
                'inside'  => __( 'Inside bar',               'admore-widgets-suite' ),
            ],
            'condition' => [ 'show_percentage' => 'yes' ],
        ] );

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

        $this->add_control( 'animation_duration', [
            'label'     => __( 'Duration (ms)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 200, 'max' => 3000, 'step' => 100 ] ],
            'default'   => [ 'size' => 1200 ],
            'condition' => [ 'animate' => 'yes' ],
            'selectors' => [ '{{WRAPPER}} .eppro-pb-fill' => 'transition-duration: {{SIZE}}ms;' ],
        ] );

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

        $this->add_control( 'stripe_animate', [
            'label'        => __( 'Animate Stripes', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'return_value' => 'yes',
            'condition'    => [ 'stripe' => 'yes' ],
        ] );

        $this->end_controls_section();

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

        $this->add_responsive_control( 'bar_height', [
            'label'      => __( 'Height', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'size_units' => [ 'px' ],
            'range'      => [ 'px' => [ 'min' => 4, 'max' => 60 ] ],
            'default'    => [ 'size' => 16, 'unit' => 'px' ],
            'selectors'  => [ '{{WRAPPER}} .eppro-pb-track' => 'height: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->add_control( 'track_color', [
            'label'     => __( 'Track Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'default'   => '#e5e7eb',
            'selectors' => [ '{{WRAPPER}} .eppro-pb-track' => 'background-color: {{VALUE}};' ],
        ] );

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

        $this->end_controls_section();

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

        $this->add_group_control( \Elementor\Group_Control_Background::get_type(), [
            'name'     => 'fill_bg',
            'types'    => [ 'classic', 'gradient' ],
            'selector' => '{{WRAPPER}} .eppro-pb-fill',
        ] );

        $this->end_controls_section();

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

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

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

        $this->add_control( 'pct_color', [
            'label'     => __( 'Percentage Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .eppro-pb-label-pct'  => 'color: {{VALUE}};',
                '{{WRAPPER}} .eppro-pb-tooltip'    => 'background-color: {{VALUE}};',
                '{{WRAPPER}} .eppro-pb-tooltip::after' => 'border-top-color: {{VALUE}};',
            ],
        ] );

        $this->add_responsive_control( 'label_spacing', [
            'label'     => __( 'Label Spacing', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 0, 'max' => 24 ] ],
            'default'   => [ 'size' => 6, 'unit' => 'px' ],
            'selectors' => [ '{{WRAPPER}} .eppro-pb-label' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->add_responsive_control( 'bar_spacing', [
            'label'     => __( 'Bar Spacing', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 4, 'max' => 48 ] ],
            'default'   => [ 'size' => 20, 'unit' => 'px' ],
            'selectors' => [ '{{WRAPPER}} .eppro-pb-item:not(:last-child)' => 'margin-bottom: {{SIZE}}{{UNIT}};' ],
        ] );

        $this->end_controls_section();

        $this->eppro_register_entrance_animation_controls();
    }

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

    protected function render(): void {
        $s         = $this->get_settings_for_display();
        $bars      = $s['bars']                ?? [];
        $show_pct  = 'yes' === ( $s['show_percentage'] ?? 'yes' );
        $pct_pos   = $s['percentage_position'] ?? 'inline';
        $animate   = 'yes' === ( $s['animate'] ?? 'yes' );
        $stripe    = 'yes' === ( $s['stripe']  ?? '' );
        $stripe_an = 'yes' === ( $s['stripe_animate'] ?? '' );

        if ( empty( $bars ) ) return;

        $wrap_attrs = '';
        if ( $animate ) {
            $wrap_attrs = ' data-eppro-pb-animate="1"';
        }
        ?>
        <div class="eppro-progress-bars"<?php echo wp_kses_post( $wrap_attrs ); ?>>
        <?php foreach ( $bars as $bar ) :
            $label      = $bar['label']     ?? '';
            $pct        = (int) ( $bar['percentage']['size'] ?? 0 );
            $bar_color  = $bar['bar_color'] ?? '';
            $bg_color   = $bar['bar_bg_color'] ?? '';

            $fill_style = '';
            if ( $bar_color ) $fill_style .= 'background-color:' . esc_attr( $bar_color ) . ';';
            $track_style = $bg_color ? ' style="background-color:' . esc_attr( $bg_color ) . ';"' : '';

            $fill_class = 'eppro-pb-fill';
            if ( $stripe )    $fill_class .= ' eppro-pb-fill--striped';
            if ( $stripe_an ) $fill_class .= ' eppro-pb-fill--animated';
        ?>
            <div class="eppro-pb-item">
                <?php if ( $label || $show_pct ) : ?>
                <div class="eppro-pb-label">
                    <?php if ( $label ) : ?>
                    <span class="eppro-pb-label-text"><?php echo esc_html( $label ); ?></span>
                    <?php endif; ?>
                    <?php if ( $show_pct && 'inline' === $pct_pos ) : ?>
                    <span class="eppro-pb-label-pct"><?php echo esc_html( $pct ); ?>%</span>
                    <?php endif; ?>
                </div>
                <?php endif; ?>

                <div class="eppro-pb-track"<?php echo wp_kses_post( $track_style ); ?>>
                    <?php $width = $animate ? '0' : $pct; ?>
                    <div class="<?php echo esc_attr( $fill_class ); ?>"
                         style="width:<?php echo esc_attr( $width ); ?>%;<?php echo esc_attr( $fill_style ); ?>"
                         data-eppro-width="<?php echo esc_attr( $pct ); ?>"
                         role="progressbar"
                         aria-valuenow="<?php echo esc_attr( $pct ); ?>"
                         aria-valuemin="0"
                         aria-valuemax="100">
                        <?php if ( $show_pct && 'inside' === $pct_pos ) : ?>
                        <span class="eppro-pb-inside-pct"><?php echo esc_html( $pct ); ?>%</span>
                        <?php endif; ?>
                        <?php if ( $show_pct && 'tooltip' === $pct_pos ) : ?>
                        <span class="eppro-pb-tooltip"><?php echo esc_html( $pct ); ?>%</span>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
        </div>
        <?php
    }
}