{# Timeline Module - Modern animated timeline with lazy loading #}

{% set timeline_id = "timeline-" ~ name %}
{% set layout_class = "timeline-layout-" ~ module.layout.layout_type %}
{% set mobile_class = module.layout.mobile_layout == "single" ? "timeline-mobile-single" : "" %}
{% set animation_class = module.style.enable_animations ? "timeline-animation-" ~ module.style.animation_type : "" %}

{# Critical inline styles for immediate render #}
<style>
  .{{ timeline_id }} {
    padding-top: {{ module.style.padding_top }}px;
    padding-bottom: {{ module.style.padding_bottom }}px;
    --dot-size: {{ module.style.dot_size|default(3) }}rem;
    --header-spacing: 2rem;
  }

  .{{ timeline_id }} .timeline-line {
    background-color: var(--color-primary);
  }

  .{{ timeline_id }} .timeline-dot {
    background-color: var(--color-primary);
  }

  .{{ timeline_id }} .timeline-card {
    --card-bg: {{ module.style.card_background.color }};
    background-color: {{ module.style.card_background.color }};
    color: {{ module.style.card_text_color.color }};
  }

  .{{ timeline_id }} .timeline-date {
    color: {{ module.style.date_color.color }};
  }

  .{{ timeline_id }} .timeline-divider {
    background-color: var(--color-primary);
  }

  .{{ timeline_id }} .timeline-item.highlight .timeline-card {
    --highlight-color: {{ module.style.highlight_color.color }};
    border-color: {{ module.style.highlight_color.color }};
  }

  .{{ timeline_id }} .timeline-item.highlight .timeline-dot {
    background-color: {{ module.style.highlight_color.color }};
  }

  .{{ timeline_id }} .timeline-item + .timeline-item {
    margin-top: {{ module.style.item_spacing }}px;
  }

  {% if module.style.enable_animations %}
  .{{ timeline_id }} .timeline-item {
    transition-duration: {{ module.style.animation_duration }}ms;
  }
  {% endif %}
</style>

{% if theme.dark_mode.enabled %}
<style>
  @media (prefers-color-scheme: dark) {
    .{{ timeline_id }} .timeline-line,
    .{{ timeline_id }} .timeline-divider {
      background-color: var(--color-text);
    }
    .{{ timeline_id }} .timeline-dot {
      background-color: var(--color-text);
    }
    .{{ timeline_id }} .timeline-card {
      --card-bg: var(--color-bg-secondary);
      background-color: var(--color-bg-secondary) !important;
      color: var(--color-text) !important;
    }
    .{{ timeline_id }} .timeline-date {
      color: var(--color-text-secondary) !important;
    }
    /* Moved from module.css (which can't be gated): event title keeps brand color. */
    .{{ timeline_id }} .timeline-event-title {
      color: var(--color-primary);
    }
  }

</style>
{% endif %}

<div class="timeline-module {{ timeline_id }} {{ layout_class }} {{ mobile_class }} {{ animation_class }}{% if module.advanced.custom_class %} {{ module.advanced.custom_class }}{% endif %}"
     {% if module.advanced.custom_id %}id="{{ module.advanced.custom_id }}"{% endif %}
     role="region"
     aria-label="{{ module.content.timeline_title|default('Timeline', true) }}"
     data-lazy="{{ module.advanced.lazy_load }}"
     data-lazy-offset="{{ module.advanced.lazy_load_offset }}"
     data-animation="{{ module.style.enable_animations }}"
     data-animation-type="{{ module.style.animation_type }}"
     data-animation-duration="{{ module.style.animation_duration }}"
     data-stagger="{{ module.style.stagger_delay }}">
  
  {# Timeline Header #}
  {% if module.content.timeline_title or module.content.subtitle %}
  <div class="timeline-header">
    {% if module.content.timeline_title %}
      <h2 class="timeline-title">{{ module.content.timeline_title }}</h2>
    {% endif %}
    {% if module.content.subtitle %}
      <p class="timeline-subtitle">{{ module.content.subtitle }}</p>
    {% endif %}
    <span class="timeline-divider" aria-hidden="true"></span>
  </div>
  {% endif %}

  {# Timeline Container #}
  <div class="timeline-container">
    {# Timeline Line #}
    {% if module.layout.show_connecting_line %}
      <div class="timeline-line" aria-hidden="true"></div>
    {% endif %}

    {# Timeline Items #}
    <div class="timeline-items" role="list">
      {% for item in module.content.timeline_items %}
        <div class="timeline-item {% if item.highlight %}highlight{% endif %}" 
             role="listitem"
             data-index="{{ loop.index0 }}">
          
          {# Timeline Dot & Icon #}
          <div class="timeline-dot" aria-hidden="true">
            {% if item.icon != "none" %}
              <span class="timeline-icon">
                {% if item.icon == "check" %}✓
                {% elif item.icon == "star" %}★
                {% elif item.icon == "heart" %}♥
                {% elif item.icon == "rocket" %}🚀
                {% elif item.icon == "trophy" %}🏆
                {% elif item.icon == "lightbulb" %}💡
                {% elif item.icon == "globe" %}🌍
                {% elif item.icon == "flag" %}🚩
                {% elif item.icon == "fire" %}🔥
                {% endif %}
              </span>
            {% endif %}
          </div>
          
          {# Timeline Content #}
          <div class="timeline-content">
            <article class="timeline-card">
              {% if item.date %}
                <time class="timeline-date" datetime="{{ item.date }}">
                  {{ item.date }}
                </time>
              {% endif %}
              
              {% if item.title %}
                <h3 class="timeline-event-title">{{ item.title }}</h3>
              {% endif %}
              
              {% if item.description %}
                <div class="timeline-description">
                  {{ item.description }}
                </div>
              {% endif %}
            </article>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{# JavaScript for Intersection Observer and Animations — deferred to footer. #}
{% require_js position="footer" %}
<script>
(function() {
  const timeline = document.querySelector('.{{ timeline_id }}');
  if (!timeline) return;
  
  const isLazy = timeline.dataset.lazy === 'true';
  const hasAnimation = timeline.dataset.animation === 'true';
  const animationDuration = parseInt(timeline.dataset.animationDuration) || 600;
  const staggerDelay = parseInt(timeline.dataset.stagger) || 100;
  const lazyOffset = parseInt(timeline.dataset.lazyOffset) || 200;
  
  // Function to initialize timeline
  function initTimeline() {
    if (!hasAnimation) {
      // If no animations, just show everything
      const items = timeline.querySelectorAll('.timeline-item');
      items.forEach(item => {
        item.style.opacity = '1';
        item.style.transform = 'none';
      });
      return;
    }
    
    // Set up Intersection Observer for animations
    const observerOptions = {
      root: null,
      rootMargin: `${lazyOffset}px`,
      threshold: 0.1
    };
    
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const index = parseInt(entry.target.dataset.index);
          setTimeout(() => {
            entry.target.classList.add('animated');
          }, index * staggerDelay);
          observer.unobserve(entry.target);
        }
      });
    }, observerOptions);
    
    // Observe all timeline items
    const items = timeline.querySelectorAll('.timeline-item');
    items.forEach(item => observer.observe(item));
  }
  
  // Lazy load the entire timeline if enabled
  if (isLazy) {
    const lazyObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          initTimeline();
          lazyObserver.unobserve(entry.target);
        }
      });
    }, {
      rootMargin: `${lazyOffset}px`,
      threshold: 0
    });
    
    lazyObserver.observe(timeline);
  } else {
    // Initialize immediately if not lazy loading
    initTimeline();
  }
  
  // Handle reduced motion preference
  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
  if (prefersReducedMotion.matches) {
    const items = timeline.querySelectorAll('.timeline-item');
    items.forEach(item => {
      item.style.opacity = '1';
      item.style.transform = 'none';
      item.style.transition = 'none';
    });
  }
})();
</script>
{% end_require_js %}