<?php
namespace Unlockafe_addons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Repeater;
use Elementor\Icons_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;

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

class Time_Line extends Widget_Base
{

    public function get_name()
    {
        return 'unlockafe-time-line';
    }
    public function get_title()
    {
        return esc_html__('Event Timeline', 'unlock-addons-for-elementor');
    }
    public function get_icon()
    {
        return 'eicon-time-line ulicon';
    }
    public function get_categories()
    {
        return ['unlockafe-addons'];
    }
    public function get_script_depends()
    {
        return ['unlockafe-time-line-script'];
    }

    public function get_style_depends()
    {
        return ['unlockafe-time-line-style'];
    }

    protected function register_controls()
    {

        // Layout Section
        $this->start_controls_section('section_layout', [
            'label' => esc_html__('Layout', 'unlock-addons-for-elementor'),
        ]);
        $this->add_control('timeline_layout', [
            'label' => esc_html__('Timeline Layout', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SELECT,
            'default' => 'vertical',
            'options' => [
                'vertical' => esc_html__('Vertical', 'unlock-addons-for-elementor'),
                'horizontal' => esc_html__('Horizontal', 'unlock-addons-for-elementor'),
                'simple_vertical' => esc_html__('Simple Vertical', 'unlock-addons-for-elementor'),
            ],
        ]);
        $this->add_control('timeline_heading', [
            'label' => esc_html__('Heading', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'label_block' => true,
            'default' => esc_html__('Event Timeline', 'unlock-addons-for-elementor'),
            'placeholder' => esc_html__('Enter your timeline heading', 'unlock-addons-for-elementor'),
        ]);
        $this->end_controls_section();

        // Timeline Items Section
        $this->start_controls_section('section_timeline_items', [
            'label' => esc_html__('Timeline Items', 'unlock-addons-for-elementor'),
            'tab' => Controls_Manager::TAB_CONTENT,
        ]);
        $repeater = new Repeater();

        $repeater->add_control('item_title', [
            'label' => esc_html__('Title', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'label_block' => true,
            'default' => esc_html__('Timeline Title', 'unlock-addons-for-elementor'),
        ]);
        $repeater->add_control('item_subtitle', [
            'label' => esc_html__('Subtitle', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'label_block' => true,
            'default' => esc_html__('Timeline Subtitle', 'unlock-addons-for-elementor'),
        ]);
        $repeater->add_control('item_description', [
            'label' => esc_html__('Description', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXTAREA,
            'default' => esc_html__('A small river named Duden flows by their place.', 'unlock-addons-for-elementor'),
        ]);
        $repeater->add_control('item_author', [
            'label' => esc_html__('Author', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'default' => esc_html__('William Anderson', 'unlock-addons-for-elementor'),
        ]);
        $repeater->add_control('item_date', [
            'label' => esc_html__('Date', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'default' => '01 February 2025',
            'separator' => 'before',
        ]);
        $repeater->add_control('item_date_subtext', [
            'label' => esc_html__('Date Subtext', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'default' => 'New Office, CA',
        ]);
        $repeater->add_control('item_time', [
            'label' => esc_html__('Time', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::TEXT,
            'default' => '09:00 - 10:15',
            'separator' => 'before',
        ]);
        $repeater->add_control('item_icon', [
            'label' => esc_html__('Icon', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::ICONS,
            'separator' => 'before',
            'default' => [
                'value' => 'fas fa-glass-cheers',
                'library' => 'solid',
            ],
        ]);
        $repeater->add_control('item_theme', [
            'label' => esc_html__('Theme', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SELECT,
            'default' => 'green',
            'options' => [
                'green' => esc_html__('Green', 'unlock-addons-for-elementor'),
                'purple' => esc_html__('Purple', 'unlock-addons-for-elementor'),
                'pink' => esc_html__('Pink', 'unlock-addons-for-elementor'),
                'blue' => esc_html__('Blue', 'unlock-addons-for-elementor'),
                'custom' => esc_html__('Custom', 'unlock-addons-for-elementor'),
            ],
        ]);
        $repeater->add_control('item_custom_color', [
            'label' => esc_html__('Custom Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
        ]);
        $this->add_control('timeline_items', [
            'label' => esc_html__('Events', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::REPEATER,
            'fields' => $repeater->get_controls(),
            'default' => [
                [
                    'item_title' => 'Welcome here!',
                    'item_subtitle' => 'Hello World!',
                    'item_description' => 'A small river named Duden flows by their place and supplies it with the necessary regelialia.',
                    'item_date' => '01 February 2015',
                    'item_date_subtext' => 'New Office, CA',
                    'item_theme' => 'green',
                    'item_icon' => ['value' => '', 'library' => 'solid'],
                ],
                [
                    'item_title' => 'Be Productive!',
                    'item_subtitle' => 'First Work!',
                    'item_description' => 'A small river named Duden flows by their place and supplies it with the necessary regelialia.',
                    'item_date' => '05 February 2015',
                    'item_date_subtext' => 'Got new project!',
                    'item_theme' => 'purple',
                    'item_icon' => ['value' => '', 'library' => 'solid'],
                ],
                [
                    'item_title' => 'Merry Christmas!',
                    'item_subtitle' => 'Let\'s Celebrate',
                    'item_description' => 'A small river named Duden flows by their place and supplies it with the necessary regelialia.',
                    'item_date' => '31 December 2015',
                    'item_date_subtext' => 'New Office, CA',
                    'item_theme' => 'pink',
                    'item_icon' => ['value' => '', 'library' => 'solid'],
                ],
                [
                    'item_title' => 'Location Tracking',
                    'item_subtitle' => 'New Feature',
                    'item_description' => 'A small river named Duden flows by their place and supplies it with the necessary regelialia.',
                    'item_date' => '15 January 2016',
                    'item_date_subtext' => 'Product Update',
                    'item_theme' => 'blue',
                    'item_icon' => ['value' => '', 'library' => 'solid'],
                ],
            ],
            'title_field' => '{{{ item_title }}}',
        ]);
        $this->end_controls_section();

        // Style: Heading
        $this->start_controls_section('section_style_heading', [
            'label' => esc_html__('Heading', 'unlock-addons-for-elementor'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);
        $this->add_control('heading_color', [
            'label' => esc_html__('Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .timeline-heading' => 'color: {{VALUE}};',
            ],
        ]);
        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name' => 'heading_typography',
            'selector' => '{{WRAPPER}} .timeline-heading',
        ]);
        $this->end_controls_section();

        // Style: Card
        $this->start_controls_section('section_style_card', [
            'label' => esc_html__('Card', 'unlock-addons-for-elementor'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);
        $this->add_control('card_bg_color', [
            'label' => esc_html__('Background Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
            'default' => '#ffffff',
            'selectors' => [
                '{{WRAPPER}} .timeline-card' => 'background-color: {{VALUE}};',
            ],
        ]);
        $this->add_responsive_control('card_padding', [
            'label' => esc_html__('Padding', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::DIMENSIONS,
            'default' => [
                'top' => 25,
                'right' => 25,
                'bottom' => 25,
                'left' => 25,
                'unit' => 'px'
            ],
            'selectors' => [
                '{{WRAPPER}} .timeline-card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);
        $this->add_control('card_radius', [
            'label' => esc_html__('Border Radius', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 50]],
            'default' => ['size' => 12],
            'selectors' => [
                '{{WRAPPER}} .timeline-card' => 'border-radius: {{SIZE}}px;',
            ],
        ]);
        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'card_box_shadow',
            'selector' => '{{WRAPPER}} .timeline-card',
        ]);
        $this->end_controls_section();

        // Style: Icon
        $this->start_controls_section('section_style_icon', [
            'label' => esc_html__('Icon', 'unlock-addons-for-elementor'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);
        $this->add_responsive_control('icon_size', [
            'label' => esc_html__('Icon Size', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 10, 'max' => 100]],
            'default' => ['size' => 44],
            'selectors' => [
                '{{WRAPPER}} .card-icon' => 'width: {{SIZE}}px; height: {{SIZE}}px;',
                '{{WRAPPER}} .card-icon svg' => 'width: calc({{SIZE}}px / 2); height: calc({{SIZE}}px / 2);',
            ],
        ]);
        $this->end_controls_section();

        // Style: Timeline Line
        $this->start_controls_section('section_style_line', [
            'label' => esc_html__('Timeline Line', 'unlock-addons-for-elementor'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);
        $this->add_control('line_color', [
            'label' => esc_html__('Line Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
            'default' => '#e9f5ff',
            'selectors' => [
                '{{WRAPPER}} .vertical-timeline-container::after' => 'background-color: {{VALUE}};',
                '{{WRAPPER}} .horizontal-timeline-container::before' => 'background-color: {{VALUE}};',
            ],
        ]);
        $this->add_control('dot_color', [
            'label' => esc_html__('Dot Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
            'default' => '#85d7ff',
            'selectors' => [
                '{{WRAPPER}} .v-timeline-item::before' => 'border-color: {{VALUE}};',
                '{{WRAPPER}} .h-event-dot' => 'border-color: {{VALUE}};',
            ],
        ]);
        
        $this->add_control('icon_color', [
            'label' => esc_html__('Icon Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                // For vertical timeline icons - higher specificity
                '{{WRAPPER}} .vertical-timeline-container .timeline-card .card-icon svg' => 'stroke: {{VALUE}} !important; fill: {{VALUE}} !important;',
                '{{WRAPPER}} .vertical-timeline-container .timeline-card .card-icon i' => 'color: {{VALUE}} !important;',
                '{{WRAPPER}} .vertical-timeline-container .timeline-card .card-bg-icon svg' => 'stroke: {{VALUE}} !important; fill: {{VALUE}} !important;',
                '{{WRAPPER}} .vertical-timeline-container .timeline-card .card-bg-icon i' => 'color: {{VALUE}} !important;',
                // For horizontal timeline icons - higher specificity
                '{{WRAPPER}} .horizontal-timeline-wrapper .h-timeline-event .card-icon svg' => 'stroke: {{VALUE}} !important; fill: {{VALUE}} !important;',
                '{{WRAPPER}} .horizontal-timeline-wrapper .h-timeline-event .card-icon i' => 'color: {{VALUE}} !important;',
                // For simple vertical timeline icons - higher specificity
                '{{WRAPPER}} .simple-v-timeline .timeline-card .card-icon svg' => 'stroke: {{VALUE}} !important; fill: {{VALUE}} !important;',
                '{{WRAPPER}} .simple-v-timeline .timeline-card .card-icon i' => 'color: {{VALUE}} !important;',
                // Override hover states
                '{{WRAPPER}} .timeline-card:hover .card-icon svg' => 'stroke: {{VALUE}} !important; color: {{VALUE}} !important;',
                '{{WRAPPER}} .timeline-card:hover .card-icon i' => 'color: {{VALUE}} !important;',
                // Override default states
                '{{WRAPPER}} .card-icon svg' => 'stroke: {{VALUE}} !important; fill: {{VALUE}} !important;',
                '{{WRAPPER}} .card-icon i' => 'color: {{VALUE}} !important;',
            ],
        ]);
        $this->end_controls_section();

        // Style: Date
        $this->start_controls_section('section_style_date', [
            'label' => esc_html__('Date', 'unlock-addons-for-elementor'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);
        $this->add_control('date_color', [
            'label' => esc_html__('Date Text Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .date-text' => 'color: {{VALUE}};',
                '{{WRAPPER}} .h-event-date' => 'color: {{VALUE}};',
            ],
        ]);
        $this->add_control('date_subtext_color', [
            'label' => esc_html__('Date Subtext Color', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .date-subtext' => 'color: {{VALUE}};',
            ],
        ]);
        $this->end_controls_section();

        // Style: Spacing
        $this->start_controls_section('section_style_spacing', [
            'label' => esc_html__('Spacing', 'unlock-addons-for-elementor'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);
        $this->add_responsive_control('timeline_spacing', [
            'label' => esc_html__('Timeline Vertical Spacing', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 100]],
            'default' => ['size' => 20],
            'selectors' => [
                '{{WRAPPER}} .v-timeline-item' => 'padding-top: {{SIZE}}px; padding-bottom: {{SIZE}}px;',
            ],
        ]);
        $this->add_responsive_control('timeline_horizontal_padding', [
            'label' => esc_html__('Timeline Horizontal Padding', 'unlock-addons-for-elementor'),
            'type' => Controls_Manager::SLIDER,
            'range' => ['px' => ['min' => 0, 'max' => 100]],
            'default' => ['size' => 45],
            'selectors' => [
                '{{WRAPPER}} .v-timeline-item .timeline-content-container' => 'padding-left: {{SIZE}}px; padding-right: {{SIZE}}px;',
            ],
        ]);
        $this->end_controls_section();
    }

    protected function render()
    {
        $settings = $this->get_settings_for_display();
        $layout = $settings['timeline_layout'];
        $items = $settings['timeline_items'];

        if (empty($items))
            return;

        // Check if we're in Elementor editor or preview mode
        $is_editor_mode = \Elementor\Plugin::$instance->editor->is_edit_mode();
        $is_preview_mode = \Elementor\Plugin::$instance->preview->is_preview_mode();

        if (!empty($settings['timeline_heading'])) {
            echo '<h2 class="timeline-heading">' . esc_html($settings['timeline_heading']) . '</h2>';
        }

        switch ($layout) {
            case 'horizontal':
                $this->render_horizontal_timeline($items);
                break;
            case 'simple_vertical':
                $this->render_simple_vertical_timeline($items);
                break;
            default:
                $this->render_vertical_timeline($items);
        }
        
        // Add inline script for editor/preview mode initialization
        if ($is_editor_mode || $is_preview_mode) {
            ?>
            <script type="text/javascript">
            (function() {
                function initTimeline() {
                    if (typeof jQuery === 'undefined') {
                        setTimeout(initTimeline, 100);
                        return;
                    }
                    
                    var $ = jQuery;
                    var $widget = $('.elementor-widget-unlockafe-time-line').last();
                    
                    // Find all timeline items in this widget
                    var $items = $widget.find('.v-timeline-item, .h-timeline-event');
                    
                    if ($items.length === 0) {
                        setTimeout(initTimeline, 100);
                        return;
                    }
                    
                    // Make all items visible in editor mode
                    $items.each(function() {
                        $(this).addClass('is-visible');
                    });
                    
                    console.log('Event Timeline: Initialized', $items.length, 'items in editor mode');
                }
                
                // Start initialization
                if (document.readyState === 'loading') {
                    document.addEventListener('DOMContentLoaded', function() {
                        setTimeout(initTimeline, 100);
                    });
                } else {
                    setTimeout(initTimeline, 100);
                }
                
                // Also try after delays
                setTimeout(initTimeline, 300);
                setTimeout(initTimeline, 600);
            })();
            </script>
            <?php
        }
    }

    private function render_vertical_timeline($items)
    { ?>
        <div class="vertical-timeline-container">
            <?php foreach ($items as $index => $item):
                $theme = $item['item_theme'];
                $custom_style = ($theme === 'custom' && !empty($item['item_custom_color']))
                    ? 'style="--event-color:' . esc_attr($item['item_custom_color']) . ';"'
                    : '';
                $item_class = 'v-timeline-item event-' . esc_attr($theme);
                ?>
                <div class="<?php echo $item_class; ?>" <?php echo $custom_style; ?>>
                    <div class="timeline-content-container">
                        <div class="timeline-card">
                            <div class="card-bg-icon">
                                <?php \Elementor\Icons_Manager::render_icon($item['item_icon'], ['aria-hidden' => 'true']); ?>
                            </div>
                            <div class="card-header">
                                <div class="card-title-section">
                                    <?php if (!empty($item['item_subtitle'])): ?>
                                        <p class="card-subtitle"><?php echo esc_html($item['item_subtitle']); ?></p>
                                    <?php endif; ?>
                                    <h3 class="card-title"><?php echo esc_html($item['item_title']); ?></h3>
                                </div>
                                <div class="card-icon" style="background-color: var(--event-color, #85d7ff);">
                                    <?php \Elementor\Icons_Manager::render_icon($item['item_icon'], ['aria-hidden' => 'true']); ?>
                                </div>
                            </div>
                            <?php if (!empty($item['item_description'])): ?>
                                <p class="card-description"><?php echo esc_html($item['item_description']); ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="timeline-date">
                        <?php if (!empty($item['item_date'])): ?>
                            <span class="date-text"><?php echo esc_html($item['item_date']); ?></span>
                        <?php endif; ?>
                        <?php if (!empty($item['item_date_subtext'])): ?>
                            <span class="date-subtext"><?php echo esc_html($item['item_date_subtext']); ?></span>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php }



    private function render_horizontal_timeline($items)
    { ?>
        <div class="horizontal-timeline-wrapper">
            <div class="horizontal-timeline-container">
                <div class="h-timeline-events">
                    <?php foreach ($items as $item):
                        $theme = $item['item_theme'];
                        $theme_color = 'var(--' . $theme . ')';
                        $light_theme_color = 'var(--light-' . $theme . ')';
                        if ($theme === 'custom' && !empty($item['item_custom_color'])) {
                            $theme_color = esc_attr($item['item_custom_color']);
                            $light_theme_color = esc_attr($item['item_custom_color']) . '33';
                        }
                        ?>
                        <div class="h-timeline-event">
                            <div class="h-event-dot"></div>
                            <div class="h-event-card">
                                <div class="card-header">
                                    <div class="card-title-section">
                                        <?php if (!empty($item['item_subtitle'])): ?>
                                            <p class="card-subtitle" style="color: <?php echo $theme_color; ?>;">
                                                <?php echo esc_html($item['item_subtitle']); ?>
                                            </p>
                                        <?php endif; ?>
                                        <h3 class="card-title"><?php echo esc_html($item['item_title']); ?></h3>
                                    </div>
                                    <div class="card-icon" style="background-color: <?php echo $light_theme_color; ?>;">
                                        <?php \Elementor\Icons_Manager::render_icon($item['item_icon'], ['aria-hidden' => 'true', 'style' => 'stroke: ' . $theme_color . ';']); ?>
                                    </div>
                                </div>
                                <?php if (!empty($item['item_description'])): ?>
                                    <p class="card-description"><?php echo esc_html($item['item_description']); ?></p>
                                <?php endif; ?>
                            </div>
                            <h4 class="h-event-title"><?php echo esc_html($item['item_title']); ?></h4>
                            <p class="h-event-date"><?php echo esc_html($item['item_date']); ?></p>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    <?php }

    private function render_simple_vertical_timeline($items)
    { ?>
        <div class="vertical-timeline-container simple-v-timeline">
            <?php foreach ($items as $item):
                $theme = $item['item_theme'];
                $custom_style = ($theme === 'custom' && !empty($item['item_custom_color']))
                    ? 'style="--event-color:' . esc_attr($item['item_custom_color']) . ';"'
                    : '';
                $item_class = 'v-timeline-item event-' . esc_attr($theme);
                ?>
                <div class="<?php echo $item_class; ?>" <?php echo $custom_style; ?>>
                    <div class="timeline-content-container">
                        <div class="timeline-card">
                            <div class="card-icon">
                                <?php \Elementor\Icons_Manager::render_icon($item['item_icon'], ['aria-hidden' => 'true']); ?>
                            </div>
                            <h3 class="card-title"><?php echo esc_html($item['item_title']); ?></h3>
                            <?php if (!empty($item['item_author'])): ?>
                                <p class="card-author"><?php echo esc_html($item['item_author']); ?></p>
                            <?php endif; ?>
                            <?php if (!empty($item['item_time'])): ?>
                                <p class="card-time"><?php echo esc_html($item['item_time']); ?></p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php }
}
