<?php
if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

class Luman_IOS_Notification_Box extends \Elementor\Widget_Base {

    public function get_name() {
        return 'luman_ios_notification_box';
    }

    public function get_title() {
        return esc_html__('جعبه اعلان iOS', 'luman-plus');
    }

    public function get_icon() {
        // آیکن bell برای اعلان
        return 'eicon-notification';
    }

    public function get_categories() {
        return ['luman-plus'];
    }

    public function get_keywords() {
        return ['اعلان', 'ios', 'جعبه', 'هشدار'];
    }

    public function get_script_depends() {
        return ['jquery'];
    }

    public function get_style_depends() {
        return ['luman-ios-notification-style'];
    }

    protected function register_controls() {
        // Content Section
        $this->start_controls_section(
            'section_content',
            [
                'label' => esc_html__('محتوا', 'luman-plus'),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );

        $repeater = new \Elementor\Repeater();

        $repeater->add_control(
            'notification_title',
            [
                'label' => esc_html__('عنوان', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__('100% رضایت', 'luman-plus'),
            ]
        );

        $repeater->add_control(
            'notification_message',
            [
                'label' => esc_html__('پیام', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'default' => esc_html__('سلام! طراحی جدید رو دیدی؟', 'luman-plus'),
            ]
        );

        $repeater->add_control(
            'notification_icon',
            [
                'label' => esc_html__('آیکن', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_control(
            'notifications',
            [
                'label' => esc_html__('اعلان‌ها', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => $repeater->get_controls(),
                'default' => [
                    [
                        'notification_title' => esc_html__('100% رضایت', 'luman-plus'),
                        'notification_message' => esc_html__('سلام! طراحی جدید رو دیدی؟', 'luman-plus'),
                    ],
                ],
                'title_field' => '{{{ notification_title }}}',
            ]
        );

        $this->end_controls_section();

        // Style Section
        $this->start_controls_section(
            'section_style',
            [
                'label' => esc_html__('استایل', 'luman-plus'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_responsive_control(
            'widget_alignment',
            [
                'label' => esc_html__('تراز ویجت', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'right' => [
                        'title' => esc_html__('راست', 'luman-plus'),
                        'icon' => 'eicon-text-align-right',
                    ],
                    'center' => [
                        'title' => esc_html__('وسط', 'luman-plus'),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'left' => [
                        'title' => esc_html__('چپ', 'luman-plus'),
                        'icon' => 'eicon-text-align-left',
                    ],
                ],
                'default' => 'right',
                'selectors' => [
                    '{{WRAPPER}} .luman-ios-notification-list' => 'margin: 0 auto; float: {{VALUE}};',
                ],
                'selectors_dictionary' => [
                    'right' => 'right',
                    'center' => 'none',
                    'left' => 'left',
                ],
            ]
        );

        $this->add_control(
            'icon_position',
            [
                'label' => esc_html__('موقعیت آیکن', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'right',
                'options' => [
                    'right' => esc_html__('راست', 'luman-plus'),
                    'left' => esc_html__('چپ', 'luman-plus'),
                    'top' => esc_html__('بالا', 'luman-plus'),
                ],
            ]
        );

        $this->add_responsive_control(
            'box_width',
            [
                'label' => esc_html__('عرض جعبه', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => ['px', '%'],
                'range' => [
                    'px' => [
                        'min' => 100,
                        'max' => 1000,
                    ],
                    '%' => [
                        'min' => 10,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => 'px',
                    'size' => 240,
                ],
                'selectors' => [
                    '{{WRAPPER}} .luman-ios-notification-item' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

        $this->add_control(
            'box_background',
            [
                'label' => esc_html__('رنگ پس‌زمینه', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::COLOR,
                'default' => 'rgba(255, 255, 255, 0.95)',
                'selectors' => [
                    '{{WRAPPER}} .luman-ios-notification-item' => 'background: {{VALUE}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'box_border',
                'label' => esc_html__('حاشیه', 'luman-plus'),
                'selector' => '{{WRAPPER}} .luman-ios-notification-item',
            ]
        );

        $this->add_control(
            'box_border_radius',
            [
                'label' => esc_html__('گرد گوشه', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => ['px', '%'],
                'default' => [
                    'top' => 16,
                    'right' => 16,
                    'bottom' => 16,
                    'left' => 16,
                    'unit' => 'px',
                ],
                'selectors' => [
                    '{{WRAPPER}} .luman-ios-notification-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'box_shadow',
                'label' => esc_html__('سایه', 'luman-plus'),
                'selector' => '{{WRAPPER}} .luman-ios-notification-item',
            ]
        );

        $this->end_controls_section();

        // Typography Section
        $this->start_controls_section(
            'section_typography',
            [
                'label' => esc_html__('تایپوگرافی', 'luman-plus'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'title_typography',
                'label' => esc_html__('تایپوگرافی عنوان', 'luman-plus'),
                'selector' => '{{WRAPPER}} .luman-ios-notification-title',
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'message_typography',
                'label' => esc_html__('تایپوگرافی پیام', 'luman-plus'),
                'selector' => '{{WRAPPER}} .luman-ios-notification-message',
            ]
        );

        $this->end_controls_section();

        // Animation Section
        $this->start_controls_section(
            'section_animation',
            [
                'label' => esc_html__('انیمیشن', 'luman-plus'),
                'tab' => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->add_control(
            'animation_interval',
            [
                'label' => esc_html__('فاصله زمانی انیمیشن (میلی‌ثانیه)', 'luman-plus'),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'default' => 3000,
                'min' => 1000,
                'max' => 10000,
                'step' => 100,
            ]
        );

        $this->end_controls_section();
    }

    protected function render() {
        $settings = $this->get_settings_for_display();
        $icon_position = $settings['icon_position'];
        $animation_interval = $settings['animation_interval'];
        ?>
        <ul id="notification-list-<?php echo $this->get_id(); ?>" class="luman-ios-notification-list">
            <?php foreach ($settings['notifications'] as $notification) : ?>
                <li class="luman-ios-notification-item">
                    <div class="luman-ios-notification-box luman-ios-notification-box-position-<?php echo esc_attr($icon_position); ?>">
                        <div class="luman-ios-notification-icon-wrapper">
                            <a href="#" class="luman-ios-notification-icon-link">
                                <img src="<?php echo esc_url($notification['notification_icon']['url']); ?>" 
                                     alt="<?php echo esc_attr($notification['notification_title']); ?>" 
                                     width="24" height="22">
                            </a>
                        </div>
                        <div class="luman-ios-notification-content-wrapper">
                            <div class="luman-ios-notification-title"><?php echo esc_html($notification['notification_title']); ?></div>
                            <div class="luman-ios-notification-message"><?php echo esc_html($notification['notification_message']); ?></div>
                        </div>
                    </div>
                </li>
            <?php endforeach; ?>
        </ul>

        <script>
            jQuery(document).ready(function($) {
                const list = document.getElementById('notification-list-<?php echo $this->get_id(); ?>');
                const items = Array.from(list.querySelectorAll('.luman-ios-notification-item'));

                function rotateClasses() {
                    items.forEach(item => {
                        item.classList.remove('luman-ios-notification-front', 'luman-ios-notification-second', 'luman-ios-notification-third', 'luman-ios-notification-hidden');
                    });

                    const len = items.length;

                    if(len === 1) {
                        items[0].classList.add('luman-ios-notification-front');
                        clearInterval(rotateInterval);
                        return;
                    }

                    for(let i = 0; i < len; i++) {
                        if(i === 0) items[i].classList.add('luman-ios-notification-front');
                        else if(i === 1) items[i].classList.add('luman-ios-notification-second');
                        else if(i === 2) items[i].classList.add('luman-ios-notification-third');
                        else items[i].classList.add('luman-ios-notification-hidden');
                    }
                }

                function rotate() {
                    if(items.length <= 1) return;

                    const first = items.shift();
                    items.push(first);

                    rotateClasses();
                }

                rotateClasses();

                let rotateInterval;
                if(items.length > 1) {
                    rotateInterval = setInterval(() => {
                        rotate();
                    }, <?php echo esc_js($animation_interval); ?>);
                }
            });
        </script>
        <?php
    }
}