<?php

use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Image_Size;
use Elementor\Repeater;
use Elementor\Widget_Base;
use Elementor\Utils;

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

class CRT_Circle_Text extends Widget_Base {

    public function get_name() {
        return 'crt-circle-text';
    }

    public function get_title() {
        return esc_html__( 'Circle Text Animation', 'crt-manage' );
    }

    public function get_icon() {
        return 'crt-icon eicon-sync';
    }

    public function get_categories() {
        return [ 'crt_manage_theme' ];
    }

    public function get_script_depends() {
        return [ 'crt-manage-lib-gsap', 'crt-manage-lib-scroll-trigger', 'crt-circle-text' ];
    }

    public function get_style_depends() {
        return [ 'crt-circle-text' ];
    }

    protected function register_controls() {
        
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__( 'Circle Text', 'crt-manage' ),
            ]
        );

        $this->add_control(
            'text',
            [
                'label' => esc_html__( 'Text Content', 'crt-manage' ),
                'type' => Controls_Manager::TEXT,
                'default' => esc_html__( 'Premium Design Agency • Digital Experiences • ', 'crt-manage' ),
                'label_block' => true,
            ]
        );

        $this->add_control(
            'center_icon',
            [
                'label' => esc_html__( 'Center Icon', 'crt-manage' ),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-star',
                    'library' => 'fa-solid',
                ],
            ]
        );

        $this->add_responsive_control(
            'circle_size',
            [
                'label' => esc_html__( 'Circle Radius Size', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 50,
                        'max' => 500,
                    ],
                ],
                'default' => [
                    'size' => 150,
                ],
                'selectors' => [
                    '{{WRAPPER}} .crt-circle-text-container' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'show_shape',
            [
                'label' => esc_html__( 'Show Inner Circle Shape', 'crt-manage' ),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'label_on' => esc_html__( 'Yes', 'crt-manage' ),
                'label_off' => esc_html__( 'No', 'crt-manage' ),
                'return_value' => 'yes',
            ]
        );

        $this->end_controls_section();

        // Animation Settings
        $this->start_controls_section(
            'section_animation',
            [
                'label' => esc_html__( 'Animation Settings', 'crt-manage' ),
            ]
        );

        $this->add_control(
            'direction',
            [
                'label' => esc_html__( 'Direction', 'crt-manage' ),
                'type' => Controls_Manager::SELECT,
                'default' => 'cw',
                'options' => [
                    'cw'  => esc_html__( 'Clockwise', 'crt-manage' ),
                    'ccw' => esc_html__( 'Counter-Clockwise', 'crt-manage' ),
                ],
            ]
        );

        $this->add_control(
            'speed',
            [
                'label' => esc_html__( 'Rotation Duration (seconds)', 'crt-manage' ),
                'description' => esc_html__( 'Lower numbers spin faster.', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 1,
                        'max' => 60,
                        'step' => 0.5,
                    ],
                ],
                'default' => [
                    'size' => 15,
                ],
            ]
        );

        $this->add_control(
            'scroll_effect',
            [
                'label' => esc_html__( 'Speed Up on Scroll', 'crt-manage' ),
                'description' => esc_html__( 'The circle will spin faster when you scroll down or up.', 'crt-manage' ),
                'type' => Controls_Manager::SWITCHER,
                'default' => 'yes',
                'label_on' => esc_html__( 'Yes', 'crt-manage' ),
                'label_off' => esc_html__( 'No', 'crt-manage' ),
                'return_value' => 'yes',
            ]
        );

        $this->end_controls_section();

        // Style Options
        $this->start_controls_section(
            'section_style_text',
            [
                'label' => esc_html__( 'Text Style', 'crt-manage' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'typography',
                'selector' => '{{WRAPPER}} .crt-circle-text-svg text',
            ]
        );

        $this->add_control(
            'text_color',
            [
                'label' => esc_html__( 'Text Color', 'crt-manage' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-circle-text-svg text' => 'fill: {{VALUE}};',
                ],
            ]
        );

        // Gap from edge
        $this->add_responsive_control(
            'text_offset',
            [
                'label' => esc_html__( 'Text Margin from Shape', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [ 'px' => [ 'min' => -80, 'max' => 80 ] ],
                'default' => [ 'size' => 25 ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_shape',
            [
                'label' => esc_html__( 'Shape Style', 'crt-manage' ),
                'tab' => Controls_Manager::TAB_STYLE,
                'condition' => [
                    'show_shape' => 'yes',
                ],
            ]
        );

        $this->add_control(
            'shape_bg_color',
            [
                'label' => esc_html__( 'Shape Background', 'crt-manage' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-inner-shape' => 'background-color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'shape_border',
                'selector' => '{{WRAPPER}} .crt-inner-shape',
            ]
        );

        $this->add_control(
            'shape_gap',
            [
                'label' => esc_html__( 'Shape Inset Gap', 'crt-manage' ),
                'description' => esc_html__( 'Shrink the inner shape away from the text.', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [ 'px' => [ 'min' => 0, 'max' => 100 ] ],
                'default' => [ 'size' => 20 ],
                'selectors' => [
                    '{{WRAPPER}} .crt-inner-shape' => 'top: {{SIZE}}{{UNIT}}; left: {{SIZE}}{{UNIT}}; right: {{SIZE}}{{UNIT}}; bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        $this->start_controls_section(
            'section_style_icon',
            [
                'label' => esc_html__( 'Icon Style', 'crt-manage' ),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label' => esc_html__( 'Icon Color', 'crt-manage' ),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .crt-center-icon i' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .crt-center-icon svg path' => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_size',
            [
                'label' => esc_html__( 'Icon Size', 'crt-manage' ),
                'type' => Controls_Manager::SLIDER,
                'range' => [ 'px' => [ 'min' => 10, 'max' => 200 ] ],
                'default' => [ 'size' => 30 ],
                'selectors' => [
                    '{{WRAPPER}} .crt-center-icon' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        
        $text = $settings['text'];
        $speed = $settings['speed']['size'] ? $settings['speed']['size'] : 15;
        $direction = $settings['direction'] ? $settings['direction'] : 'cw';
        $scroll_effect = $settings['scroll_effect'] === 'yes' ? 'true' : 'false';
        $show_shape = $settings['show_shape'] === 'yes';

        $this->add_render_attribute( 'wrapper', 'class', 'crt-circle-text-wrapper' );
        $this->add_render_attribute( 'wrapper', 'data-speed', $speed );
        $this->add_render_attribute( 'wrapper', 'data-direction', $direction );
        $this->add_render_attribute( 'wrapper', 'data-scroll-effect', $scroll_effect );
        
        // Calculate offset radius
        $offset = isset($settings['text_offset']['size']) ? $settings['text_offset']['size'] : 0;
        // Standard viewbox is 200x200, radius is 100. Let's make radius 80 + offset.
        // That gives text breathing room from the edge of the viewBox.
        
        // Let's use a 500x500 svg to avoid clipping. Center is 250, 250. Radius is 200.
        $cx = 250;
        $cy = 250;
        $r = 250 - ($offset + 20); // allow text height room
        // Generate SVG PATH data for a circle
        // M cx, cy-r A r,r 0 1,1 cx, cy+r A r,r 0 1,1 cx, cy-r
        $pathData = "M {$cx}, ".($cy - $r)." A {$r},{$r} 0 1,1 {$cx}, ".($cy + $r)." A {$r},{$r} 0 1,1 {$cx}, ".($cy - $r);

        ?>
        <div class="crt-circle-text-container">
            
            <?php if ( $show_shape ) : ?>
                <div class="crt-inner-shape"></div>
            <?php endif; ?>

            <?php if ( ! empty( $settings['center_icon']['value'] ) ) : ?>
                <div class="crt-center-icon">
                    <?php \Elementor\Icons_Manager::render_icon( $settings['center_icon'], [ 'aria-hidden' => 'true' ] ); ?>
                </div>
            <?php endif; ?>

            <div <?php echo $this->get_render_attribute_string( 'wrapper' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
                <svg class="crt-circle-text-svg" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
                    <path id="circlePath_<?php echo esc_attr( $this->get_id() ); ?>" d="<?php echo esc_attr($pathData); ?>" fill="none" stroke="none" />
                    <text>
                        <textPath href="#circlePath_<?php echo esc_attr( $this->get_id() ); ?>" startOffset="0%">
                            <?php echo esc_html( $text ); ?>
                        </textPath>
                    </text>
                </svg>
            </div>
            
        </div>
        <?php
    }
}
