<?php
namespace AITheme\Elementor\Widgets;

use Elementor\Controls_Manager;
use Elementor\Repeater;

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

class Timeline_Vertical extends AI_Widget_Base {
    public function get_name() { return 'ai_timeline_vertical'; }
    public function get_title() { return __('Timeline Vertical', 'ai-theme'); }
    public function get_icon() { return 'eicon-time-line'; }
    public function get_categories() { return array('ai-theme-timeline'); }

    protected function register_controls() {
        $this->start_controls_section('content_section', ['label' => __('Content', 'ai-theme'), 'tab' => Controls_Manager::TAB_CONTENT]);
        $this->add_control('title', ['label' => __('Title', 'ai-theme'), 'type' => Controls_Manager::TEXT]);

        $repeater = new Repeater();
        $repeater->add_control('date', ['label' => __('Date', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $repeater->add_control('title', ['label' => __('Title', 'ai-theme'), 'type' => Controls_Manager::TEXT]);
        $repeater->add_control('description', ['label' => __('Description', 'ai-theme'), 'type' => Controls_Manager::TEXTAREA]);
        $this->add_control('items', ['label' => __('Timeline Items', 'ai-theme'), 'type' => Controls_Manager::REPEATER, 'fields' => $repeater->get_controls()]);
        $this->end_controls_section();
    }

    protected function render() {
        $s = $this->get_settings_for_display();
        ?>
        <section class="ai-timeline ai-timeline-vertical bg-white py-16">
            <div class="ai-container-narrow">
                <?php if (!empty($s['title'])) : ?>
                <div class="text-center mb-12">
                    <h2 class="ai-timeline-title text-4xl font-bold text-gray-900 mb-4"><?php echo esc_html($s['title']); ?></h2>
                </div>
                <?php endif; ?>
                <div class="relative">
                    <!-- Vertical Line -->
                    <div class="absolute left-8 top-0 bottom-0 w-0.5 bg-gray-200"></div>

                    <div class="ai-timeline-items space-y-12">
                        <?php $idx = 0; foreach ($s['items'] as $item) : ?>
                        <div class="ai-timeline-item relative flex gap-6">
                            <!-- Icon -->
                            <div class="relative z-10 flex items-center justify-center w-16 h-16 rounded-full flex-shrink-0 bg-blue-600">
                                <span class="text-3xl text-white">○</span>
                            </div>

                            <!-- Content -->
                            <div class="flex-1 pb-8">
                                <?php if (!empty($item['date'])) : ?>
                                <span class="ai-timeline-date inline-block px-3 py-1 bg-blue-100 text-blue-600 text-sm font-semibold rounded-full mb-2">
                                    <?php echo esc_html($item['date']); ?>
                                </span>
                                <?php endif; ?>
                                <h3 class="text-2xl font-bold text-gray-900 mb-2"><?php echo esc_html($item['title']); ?></h3>
                                <div class="text-gray-600 leading-relaxed prose prose-sm max-w-none"><?php echo wp_kses_post($item['description']); ?></div>
                            </div>
                        </div>
                        <?php $idx++; endforeach; ?>
                    </div>
                </div>
            </div>
        </section>
        <?php
    }
}
