<?php

namespace Unlockafe_addons\Widgets;

use Unlockafe_addons\Traits\Utils as UnlockafeUtils;
use Unlockafe_addons\Traits\Widget_helper;
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Background;

if (!defined('ABSPATH'))
    exit; // Exit if accessed directly

/**
 * Counter Widget
 *
 * @since 1.0.0
 */
class Counter extends Widget_Base
{
    use Widget_helper, UnlockafeUtils;

    /**
     * Retrieve the widget name.
     */
    public function get_name()
    {
        return 'unlockafe-counter';
    }

    /**
     * Retrieve the widget title.
     */
    public function get_title()
    {
        return __('Counter', 'unlock-addons-for-elementor');
    }

    /**
     * Retrieve the widget icon.
     */
    public function get_icon()
    {
        return 'eicon-counter ulicon';
    }

    /**
     * Retrieve the list of categories.
     */
    public function get_categories()
    {
        return ['unlockafe-addons'];
    }

    /**
     * Retrieve the list of keywords.
     */
    public function get_keywords()
    {
        return ['counter', 'number', 'statistics', 'count', 'animate', 'stats'];
    }

    /**
     * Retrieve the list of scripts.
     */
    public function get_script_depends()
    {
        return ['unlockafe-counter-scripts'];
    }

    /**
     * Retrieve the list of styles.
     */
    public function get_style_depends()
    {
        return ['unlockafe-counter-style', 'font-awesome'];
    }

    /**
     * Register widget controls.
     */
    protected function register_controls()
    {
        $this->register_content_controls();
        $this->register_style_controls();
    }

    /**
     * Register content controls.
     */
    protected function register_content_controls()
    {
        // General Settings
        $this->start_controls_section(
            'general_section',
            [
                'label' => __('General Settings', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $this->add_control(
            'counter_layout',
            [
                'label' => __('Layout', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    'layout-1' => __('Layout 1 - Icon Top', 'unlock-addons-for-elementor'),
                    'layout-2' => __('Layout 2 - Icon Left', 'unlock-addons-for-elementor'),
                    'layout-3' => __('Layout 3 - Icon Right', 'unlock-addons-for-elementor'),
                    'layout-4' => __('Layout 4 - Minimal', 'unlock-addons-for-elementor'),
                    'layout-5' => __('Layout 5 - Card Style', 'unlock-addons-for-elementor'),
                    'layout-6' => __('Layout 6 - Gradient', 'unlock-addons-for-elementor'),
                ],
                'default' => 'layout-1',
            ]
        );

        $this->add_control(
            'columns',
            [
                'label' => __('Columns', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SELECT,
                'options' => [
                    '1' => '1',
                    '2' => '2',
                    '3' => '3',
                    '4' => '4',
                    '5' => '5',
                    '6' => '6',
                ],
                'default' => '4',
            ]
        );

        $this->add_control(
            'animation_duration',
            [
                'label' => __('Animation Duration (ms)', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'range' => [
                    'px' => [
                        'min' => 500,
                        'max' => 5000,
                        'step' => 100,
                    ],
                ],
                'default' => [
                    'size' => 2000,
                ],
            ]
        );

        $this->add_control(
            'animate_on_scroll',
            [
                'label' => __('Animate on Scroll', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SWITCHER,
                'label_on' => __('Yes', 'unlock-addons-for-elementor'),
                'label_off' => __('No', 'unlock-addons-for-elementor'),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

        $this->end_controls_section();

        // Counter Items
        $this->start_controls_section(
            'counters_section',
            [
                'label' => __('Counter Items', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new Repeater();

        $repeater->add_control(
            'counter_icon',
            [
                'label' => __('Icon', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-star',
                    'library' => 'fa-solid',
                ],
            ]
        );

        $repeater->add_control(
            'counter_number',
            [
                'label' => __('Number', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::NUMBER,
                'default' => 1000,
                'min' => 0,
                'step' => 1,
            ]
        );

        $repeater->add_control(
            'counter_prefix',
            [
                'label' => __('Prefix', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'placeholder' => __('e.g., $, +', 'unlock-addons-for-elementor'),
                'default' => '',
            ]
        );

        $repeater->add_control(
            'counter_suffix',
            [
                'label' => __('Suffix', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'placeholder' => __('e.g., +, %, K, M', 'unlock-addons-for-elementor'),
                'default' => '',
            ]
        );

        $repeater->add_control(
            'counter_title',
            [
                'label' => __('Title', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXT,
                'default' => __('Counter Title', 'unlock-addons-for-elementor'),
                'placeholder' => __('Enter title', 'unlock-addons-for-elementor'),
                'dynamic' => [
                    'active' => true,
                ],
            ]
        );

        $repeater->add_control(
            'counter_description',
            [
                'label' => __('Description', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::TEXTAREA,
                'default' => '',
                'placeholder' => __('Enter description', 'unlock-addons-for-elementor'),
                'rows' => 3,
                'dynamic' => [
                    'active' => true,
                ],
            ]
        );

        $this->add_control(
            'counter_items',
            [
                'label' => __('Counter Items', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'counter_icon' => ['value' => 'fas fa-users', 'library' => 'fa-solid'],
                        'counter_number' => 1000,
                        'counter_suffix' => '+',
                        'counter_title' => __('Happy Clients', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'counter_icon' => ['value' => 'fas fa-project-diagram', 'library' => 'fa-solid'],
                        'counter_number' => 500,
                        'counter_suffix' => '+',
                        'counter_title' => __('Projects Done', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'counter_icon' => ['value' => 'fas fa-award', 'library' => 'fa-solid'],
                        'counter_number' => 50,
                        'counter_suffix' => '+',
                        'counter_title' => __('Awards Won', 'unlock-addons-for-elementor'),
                    ],
                    [
                        'counter_icon' => ['value' => 'fas fa-clock', 'library' => 'fa-solid'],
                        'counter_number' => 10,
                        'counter_suffix' => '+',
                        'counter_title' => __('Years Experience', 'unlock-addons-for-elementor'),
                    ],
                ],
                'title_field' => '{{{ counter_title }}}',
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Register style controls.
     */
    protected function register_style_controls()
    {
        // Container Style
        $this->start_controls_section(
            'container_style_section',
            [
                'label' => __('Container', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'container_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'container_gap',
            [
                'label' => __('Gap Between Items', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 30,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-wrapper' => '--counter-gap: {{SIZE}}{{UNIT}}; gap: var(--counter-gap) !important;',
                ],
            ]
        );

        $this->end_controls_section();

        // Item Style
        $this->start_controls_section(
            'item_style_section',
            [
                'label' => __('Counter Item', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            Group_Control_Background::get_type(),
            [
                'name' => 'item_background',
                'label' => __('Background', 'unlock-addons-for-elementor'),
                'types' => ['classic', 'gradient'],
                'selector' => '{{WRAPPER}} .unlockafe-counter-item',
            ]
        );

        $this->add_responsive_control(
            'item_padding',
            [
                'label' => __('Padding', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', 'em', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Border::get_type(),
            [
                'name' => 'item_border',
                'label' => __('Border', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-counter-item',
            ]
        );

        $this->add_control(
            'item_border_radius',
            [
                'label' => __('Border Radius', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'item_box_shadow',
                'label' => __('Box Shadow', 'unlock-addons-for-elementor'),
                'selector' => '{{WRAPPER}} .unlockafe-counter-item',
            ]
        );

        $this->end_controls_section();

        // Icon Style
        $this->start_controls_section(
            'icon_style_section',
            [
                'label' => __('Icon', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'icon_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-icon' => 'color: {{VALUE}};',
                    '{{WRAPPER}} .unlockafe-counter-icon svg' => 'fill: {{VALUE}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_size',
            [
                'label' => __('Size', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 10,
                        'max' => 200,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-icon' => 'font-size: {{SIZE}}{{UNIT}};',
                    '{{WRAPPER}} .unlockafe-counter-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_responsive_control(
            'icon_spacing',
            [
                'label' => __('Spacing', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 15,
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-layout-1 .unlockafe-counter-icon' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
                    '{{WRAPPER}} .unlockafe-counter-layout-2 .unlockafe-counter-icon' => 'margin-right: {{SIZE}}{{UNIT}} !important;',
                    '{{WRAPPER}} .unlockafe-counter-layout-3 .unlockafe-counter-icon' => 'margin-left: {{SIZE}}{{UNIT}} !important;',
                    '{{WRAPPER}} .unlockafe-counter-layout-4 .unlockafe-counter-icon' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
                    '{{WRAPPER}} .unlockafe-counter-layout-5 .unlockafe-counter-icon' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
                    '{{WRAPPER}} .unlockafe-counter-layout-6 .unlockafe-counter-icon' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
                ],
            ]
        );

        $this->end_controls_section();

        // Number Style
        $this->start_controls_section(
            'number_style_section',
            [
                'label' => __('Number', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'number_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-number' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'number_typography',
                'selector' => '{{WRAPPER}} .unlockafe-counter-number',
            ]
        );

        $this->add_responsive_control(
            'number_spacing',
            [
                'label' => __('Spacing', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-number' => 'margin-bottom: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Suffix Style
        $this->start_controls_section(
            'suffix_style_section',
            [
                'label' => __('Suffix', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'suffix_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-suffix' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'suffix_typography',
                'selector' => '{{WRAPPER}} .unlockafe-counter-suffix',
            ]
        );

        $this->add_responsive_control(
            'suffix_spacing',
            [
                'label' => __('Spacing', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::SLIDER,
                'size_units' => ['px', 'em'],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 50,
                    ],
                ],
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-suffix' => 'margin-left: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->end_controls_section();

        // Title Style
        $this->start_controls_section(
            'title_style_section',
            [
                'label' => __('Title', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'title_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-title' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'selector' => '{{WRAPPER}} .unlockafe-counter-title',
            ]
        );

        $this->end_controls_section();

        // Description Style
        $this->start_controls_section(
            'description_style_section',
            [
                'label' => __('Description', 'unlock-addons-for-elementor'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'description_color',
            [
                'label' => __('Color', 'unlock-addons-for-elementor'),
                'type' => Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .unlockafe-counter-description' => 'color: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'description_typography',
                'selector' => '{{WRAPPER}} .unlockafe-counter-description',
            ]
        );

        $this->end_controls_section();
    }

    /**
     * Render widget output on the frontend.
     */
    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $layout = $settings['counter_layout'] ?? 'layout-1';
        $columns = $settings['columns'] ?? '4';
        $animation_duration = !empty($settings['animation_duration']['size']) ? $settings['animation_duration']['size'] : 2000;
        $animate_on_scroll = $settings['animate_on_scroll'] === 'yes';
        $counter_items = !empty($settings['counter_items']) ? $settings['counter_items'] : [];

        $wrapper_class = 'unlockafe-counter-wrapper';
        $wrapper_class .= ' unlockafe-counter-' . esc_attr($layout);
        $wrapper_class .= ' unlockafe-counter-cols-' . esc_attr($columns);
        $wrapper_class .= ' elementor-widget-unlockafe-counter';
        
        // Note: Gap is handled by Elementor CSS selectors, not inline style
        // This allows responsive controls to work properly

        ?>
        <div class="<?php echo esc_attr($wrapper_class); ?>" 
             data-animation-duration="<?php echo esc_attr($animation_duration); ?>"
             data-animate-on-scroll="<?php echo $animate_on_scroll ? 'yes' : 'no'; ?>"
             style="display: grid !important; grid-template-columns: repeat(<?php echo esc_attr($columns); ?>, 1fr) !important;">
            <?php if (!empty($counter_items)): ?>
                <?php foreach ($counter_items as $index => $item): 
                    $icon = !empty($item['counter_icon']) ? $item['counter_icon'] : '';
                    $number = !empty($item['counter_number']) ? floatval($item['counter_number']) : 0;
                    $prefix = !empty($item['counter_prefix']) ? esc_html($item['counter_prefix']) : '';
                    $suffix = !empty($item['counter_suffix']) ? esc_html($item['counter_suffix']) : '';
                    $title = !empty($item['counter_title']) ? esc_html($item['counter_title']) : '';
                    $description = !empty($item['counter_description']) ? esc_html($item['counter_description']) : '';
                ?>
                    <div class="unlockafe-counter-item" data-target="<?php echo esc_attr($number); ?>">
                        <?php if (!empty($icon)): ?>
                            <div class="unlockafe-counter-icon">
                                <?php \Elementor\Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']); ?>
                            </div>
                        <?php endif; ?>
                        
                        <div class="unlockafe-counter-content">
                            <div class="unlockafe-counter-number-wrapper">
                                <?php if ($prefix): ?>
                                    <span class="unlockafe-counter-prefix"><?php echo $prefix; ?></span>
                                <?php endif; ?>
                                <span class="unlockafe-counter-number" data-target="<?php echo esc_attr($number); ?>">0</span>
                                <?php if ($suffix): ?>
                                    <span class="unlockafe-counter-suffix"><?php echo $suffix; ?></span>
                                <?php endif; ?>
                            </div>
                            
                            <?php if ($title): ?>
                                <h3 class="unlockafe-counter-title"><?php echo $title; ?></h3>
                            <?php endif; ?>
                            
                            <?php if ($description): ?>
                                <p class="unlockafe-counter-description"><?php echo $description; ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
        <?php
    }
}
