<?php
if ( ! defined( 'ABSPATH' ) ) exit;

class EPPRO_Pie_Chart_Widget extends EPPRO_Base_Widget {

    public function get_name(): string  { return 'eppro-pie-chart'; }
    public function get_title(): string { return __( 'Pie / Donut Chart', 'admore-widgets-suite' ); }
    public function get_icon(): string  { return 'eicon-circle-o'; }
    public function get_keywords(): array { return [ 'pie', 'donut', 'chart', 'graph', 'stats', 'data', 'eppro' ]; }

    public function get_style_depends(): array  { return [ 'eppro-pie-chart' ]; }
    public function get_script_depends(): array { return [ 'eppro-pie-chart-script' ]; }

    protected function register_controls(): void {

        $this->start_controls_section( 'section_slices', [
            'label' => __( 'Chart Slices', 'admore-widgets-suite' ),
        ] );

        $this->add_control( 'chart_type', [
            'label'        => __( 'Chart Type', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            'default'      => 'donut',
            'options'      => [
                'donut' => __( 'Donut', 'admore-widgets-suite' ),
                'pie'   => __( 'Pie', 'admore-widgets-suite' ),
            ],
            'prefix_class' => 'eppro-pc--type-',
        ] );

        $repeater = new \Elementor\Repeater();

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

        $repeater->add_control( 'value', [
            'label'   => __( 'Value (%)', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::NUMBER,
            'default' => 25,
            'min'     => 1,
            'max'     => 100,
        ] );

        $repeater->add_control( 'color', [
            'label'   => __( 'Color', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::COLOR,
            'default' => '#7c3aed',
        ] );

        $this->add_control( 'slices', [
            'label'       => __( 'Slices', 'admore-widgets-suite' ),
            'type'        => \Elementor\Controls_Manager::REPEATER,
            'fields'      => $repeater->get_controls(),
            'default'     => [
                [ 'label' => __( 'Category A', 'admore-widgets-suite' ), 'value' => 40, 'color' => '#7c3aed' ],
                [ 'label' => __( 'Category B', 'admore-widgets-suite' ), 'value' => 30, 'color' => '#ec4899' ],
                [ 'label' => __( 'Category C', 'admore-widgets-suite' ), 'value' => 20, 'color' => '#06b6d4' ],
                [ 'label' => __( 'Category D', 'admore-widgets-suite' ), 'value' => 10, 'color' => '#f59e0b' ],
            ],
            'title_field' => '{{{ label }}} ({{{ value }}}%)',
        ] );

        $this->add_control( 'show_center_text', [
            'label'        => __( 'Center Text', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => 'yes',
            'condition'    => [ 'chart_type' => 'donut' ],
        ] );

        $this->add_control( 'center_text', [
            'label'     => __( 'Center Value', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::TEXT,
            'default'   => '100%',
            'condition' => [ 'chart_type' => 'donut', 'show_center_text' => 'yes' ],
        ] );

        $this->add_control( 'center_label', [
            'label'     => __( 'Center Label', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::TEXT,
            'default'   => __( 'Total', 'admore-widgets-suite' ),
            'condition' => [ 'chart_type' => 'donut', 'show_center_text' => 'yes' ],
        ] );

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

        $this->add_control( 'legend_position', [
            'label'        => __( 'Legend Position', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            'default'      => 'bottom',
            'options'      => [
                'bottom' => __( 'Below Chart', 'admore-widgets-suite' ),
                'right'  => __( 'Right of Chart', 'admore-widgets-suite' ),
                'left'   => __( 'Left of Chart', 'admore-widgets-suite' ),
            ],
            'prefix_class' => 'eppro-pc--legend-',
            'condition'    => [ 'show_legend' => 'yes' ],
        ] );

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

        $this->add_control( 'animation_duration', [
            'label'     => __( 'Animation Duration (ms)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::NUMBER,
            'default'   => 800,
            'min'       => 100,
            'max'       => 4000,
            'step'      => 100,
            'condition' => [ 'animate' => 'yes' ],
        ] );

        $this->add_control( 'start_angle', [
            'label'   => __( 'Start Angle (°)', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SLIDER,
            'range'   => [ 'px' => [ 'min' => 0, 'max' => 360 ] ],
            'default' => [ 'size' => 0 ],
        ] );

        $this->add_control( 'show_tooltip', [
            'label'        => __( 'Hover Tooltip', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SWITCHER,
            'default'      => 'yes',
            'return_value' => 'yes',
            'description'  => __( 'Show label + value when hovering a slice.', 'admore-widgets-suite' ),
        ] );

        $this->end_controls_section();

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

        $this->add_responsive_control( 'chart_size', [
            'label'      => __( 'Chart Size', 'admore-widgets-suite' ),
            'type'       => \Elementor\Controls_Manager::SLIDER,
            'range'      => [ 'px' => [ 'min' => 100, 'max' => 500 ] ],
            'default'    => [ 'size' => 240 ],
            'selectors'  => [ '{{WRAPPER}} .eppro-pc-svg-wrap' => 'width: {{SIZE}}px; height: {{SIZE}}px;' ],
        ] );

        $this->add_control( 'donut_thickness', [
            'label'     => __( 'Donut Thickness (%)', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::SLIDER,
            'range'     => [ 'px' => [ 'min' => 5, 'max' => 50 ] ],
            'default'   => [ 'size' => 25 ],
            'condition' => [ 'chart_type' => 'donut' ],
        ] );

        $this->add_control( 'gap', [
            'label'   => __( 'Slice Gap', 'admore-widgets-suite' ),
            'type'    => \Elementor\Controls_Manager::SLIDER,
            'range'   => [ 'px' => [ 'min' => 0, 'max' => 10 ] ],
            'default' => [ 'size' => 2 ],
        ] );

        $this->add_responsive_control( 'chart_align', [
            'label'     => __( 'Chart Alignment', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::CHOOSE,
            'options'   => [
                'flex-start' => [ 'title' => __( 'Left', 'admore-widgets-suite' ),   'icon' => 'eicon-h-align-left' ],
                'center'     => [ 'title' => __( 'Center', 'admore-widgets-suite' ), 'icon' => 'eicon-h-align-center' ],
                'flex-end'   => [ 'title' => __( 'Right', 'admore-widgets-suite' ),  'icon' => 'eicon-h-align-right' ],
            ],
            'default'   => 'center',
            'selectors' => [ '{{WRAPPER}} .eppro-pc-wrap' => 'align-items: {{VALUE}};' ],
        ] );

        $this->add_control( 'center_value_color', [
            'label'     => __( 'Center Value Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'separator' => 'before',
            'selectors' => [ '{{WRAPPER}} .eppro-pc-center-val' => 'color: {{VALUE}};' ],
            'condition' => [ 'chart_type' => 'donut' ],
        ] );

        $this->add_control( 'center_label_color', [
            'label'     => __( 'Center Label Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-pc-center-lbl' => 'color: {{VALUE}};' ],
            'condition' => [ 'chart_type' => 'donut' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'      => 'center_value_typography',
            'label'     => __( 'Center Value Typography', 'admore-widgets-suite' ),
            'selector'  => '{{WRAPPER}} .eppro-pc-center-val',
            'condition' => [ 'chart_type' => 'donut' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'      => 'center_label_typography',
            'label'     => __( 'Center Label Typography', 'admore-widgets-suite' ),
            'selector'  => '{{WRAPPER}} .eppro-pc-center-lbl',
            'condition' => [ 'chart_type' => 'donut' ],
        ] );

        $this->add_group_control( \Elementor\Group_Control_Typography::get_type(), [
            'name'      => 'legend_typography',
            'label'     => __( 'Legend Typography', 'admore-widgets-suite' ),
            'selector'  => '{{WRAPPER}} .eppro-pc-legend-label, {{WRAPPER}} .eppro-pc-legend-val',
            'separator' => 'before',
            'condition' => [ 'show_legend' => 'yes' ],
        ] );

        $this->add_control( 'legend_label_color', [
            'label'     => __( 'Legend Label Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-pc-legend-label' => 'color: {{VALUE}};' ],
            'condition' => [ 'show_legend' => 'yes' ],
        ] );

        $this->add_control( 'legend_val_color', [
            'label'     => __( 'Legend Value Color', 'admore-widgets-suite' ),
            'type'      => \Elementor\Controls_Manager::COLOR,
            'selectors' => [ '{{WRAPPER}} .eppro-pc-legend-val' => 'color: {{VALUE}};' ],
            'condition' => [ 'show_legend' => 'yes' ],
        ] );

        $this->add_control( 'legend_dot_shape', [
            'label'        => __( 'Legend Dot Shape', 'admore-widgets-suite' ),
            'type'         => \Elementor\Controls_Manager::SELECT,
            'default'      => 'square',
            'separator'    => 'before',
            'options'      => [
                'square' => __( 'Square', 'admore-widgets-suite' ),
                'circle' => __( 'Circle', 'admore-widgets-suite' ),
                'line'   => __( 'Line',   'admore-widgets-suite' ),
            ],
            'prefix_class' => 'eppro-pc--dot-',
            'condition'    => [ 'show_legend' => 'yes' ],
        ] );

        $this->end_controls_section();
    }

    protected function render(): void {
        $s        = $this->get_settings_for_display();
        $type     = $s['chart_type'] ?? 'donut';
        $slices   = $s['slices'] ?? [];
        $animate  = 'yes' === ( $s['animate'] ?? 'yes' );
        $legend   = 'yes' === ( $s['show_legend'] ?? 'yes' );
        $thickness= intval( $s['donut_thickness']['size'] ?? 25 );
        $gap      = intval( $s['gap']['size'] ?? 2 );

        $anim_dur = intval( $s['animation_duration'] ?? 800 );

        if ( empty( $slices ) ) {
            if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
                echo '<div class="eppro-editor-placeholder">
                    <svg width="36" height="36" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="eppro-editor-placeholder__icon"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"/><path d="M22 12A10 10 0 0 0 12 2v10z"/></svg>
                    <p class="eppro-editor-placeholder__title">' . esc_html__( 'Pie Chart', 'admore-widgets-suite' ) . '</p>
                    <p class="eppro-editor-placeholder__desc">' . esc_html__( 'Add chart slices in the Content tab.', 'admore-widgets-suite' ) . '</p>
                </div>';
            }
            return;
        }

        $start_angle  = intval( $s['start_angle']['size'] ?? 0 );
        $show_tooltip = 'yes' === ( $s['show_tooltip'] ?? 'yes' );
        $is_editor    = \Elementor\Plugin::$instance->editor->is_edit_mode();

        $data = [];
        foreach ( $slices as $sl ) {
            // Only characters that are valid in a CSS colour (hex, rgb(), hsl(), var(--global)).
            $color = trim( (string) ( $sl['color'] ?? '' ) );
            if ( '' === $color || ! preg_match( '/^[#a-zA-Z0-9.,()%\s\/_-]+$/', $color ) ) {
                $color = '#7c3aed';
            }
            $data[] = [ 'label' => sanitize_text_field( (string) ( $sl['label'] ?? '' ) ), 'value' => floatval( $sl['value'] ?? 0 ), 'color' => $color ];
        }
        ?>
        <div class="eppro-pc-wrap"
             data-type="<?php echo esc_attr( $type ); ?>"
             data-thickness="<?php echo esc_attr( $thickness ); ?>"
             data-gap="<?php echo esc_attr( $gap ); ?>"
             data-animate="<?php echo esc_attr( ( $animate && ! $is_editor ) ? '1' : '0' ); ?>"
             data-duration="<?php echo esc_attr( $anim_dur ); ?>"
             data-start-angle="<?php echo esc_attr( $start_angle ); ?>"
             data-tooltip="<?php echo esc_attr( $show_tooltip ? '1' : '0' ); ?>"
             data-slices="<?php echo esc_attr( wp_json_encode( $data ) ); ?>">
            <div class="eppro-pc-svg-wrap">
                <svg class="eppro-pc-svg" viewBox="0 0 100 100" role="img" aria-label="<?php esc_attr_e( 'Pie chart', 'admore-widgets-suite' ); ?>">
                    <title><?php esc_html_e( 'Pie chart', 'admore-widgets-suite' ); ?></title>
                </svg>
                <?php if ( 'donut' === $type && 'yes' === ( $s['show_center_text'] ?? 'yes' ) ) : ?>
                <div class="eppro-pc-center">
                    <span class="eppro-pc-center-val"><?php echo esc_html( $s['center_text'] ?? '100%' ); ?></span>
                    <span class="eppro-pc-center-lbl"><?php echo esc_html( $s['center_label'] ?? '' ); ?></span>
                </div>
                <?php endif; ?>
            </div>

            <div class="eppro-pc-tooltip" role="tooltip" aria-hidden="true"></div>

            <?php if ( $legend ) : ?>
            <ul class="eppro-pc-legend">
                <?php foreach ( $data as $d ) : ?>
                <li class="eppro-pc-legend-item">
                    <span class="eppro-pc-legend-dot" style="background:<?php echo esc_attr( $d['color'] ); ?>"></span>
                    <span class="eppro-pc-legend-label"><?php echo esc_html( $d['label'] ); ?></span>
                    <span class="eppro-pc-legend-val"><?php echo esc_html( $d['value'] ); ?>%</span>
                </li>
                <?php endforeach; ?>
            </ul>
            <?php endif; ?>
        </div>
        <?php
    }
}