{% extends "base.html" %}
{% from '_archive.html' import show_archived_toggle %}
{% block title %}Timeline{% if scope_type %} — {{ entity_label }}{% endif %}{% endblock %}
{% block content %}
{%- set view = view_mode or 'notes' -%}
{# Build the base URL for the current scope so the view toggle preserves it. #}
{%- if is_global -%}
  {%- set view_base = '/timeline' -%}
  {%- if scope_type and scope_id -%}{%- set view_base = view_base ~ '?scope_type=' ~ scope_type ~ '&scope_id=' ~ scope_id -%}{%- endif -%}
{%- else -%}
  {%- set view_base = '/timeline/' ~ entity_type ~ '/' ~ entity_id -%}
{%- endif -%}
{%- set view_join = '&' if '?' in view_base else '?' -%}

{% if is_global %}
<h1>Timeline</h1>
<p class="meta small">{{ 'All mutations, newest first.' if view == 'log' else 'All garden commentary, newest first.' }}
  {{ show_archived_toggle(show_archived, '/timeline') }}
</p>
{% else %}
<nav class="breadcrumbs">
  <a href="{{ back_url }}">&larr; Back to {{ entity_type }}</a>
</nav>
<h1>Timeline — <small class="muted">{{ entity_type }}:</small> <a href="{{ back_url }}">{{ entity_label }}</a></h1>
<p class="meta small">{{ show_archived_toggle(show_archived, '/timeline/' ~ entity_type ~ '/' ~ entity_id) }}</p>
{% endif %}

<div class="timeline-view-toggle">
  <a href="{{ view_base }}" class="comment-toggle {% if view == 'notes' %}on{% else %}off{% endif %}">
    {% if view == 'notes' %}✓{% else %}○{% endif %} Notes
  </a>
  <a href="{{ view_base }}{{ view_join }}view=log" class="comment-toggle {% if view == 'log' %}on{% else %}off{% endif %}">
    {% if view == 'log' %}✓{% else %}○{% endif %} Detailed log
  </a>
</div>

{# ---- Filter bar ---- #}
{% if filter_options %}
<form method="get" action="/timeline" class="timeline-filter">
  <label>
    <span class="filter-label">Scope:</span>
    <select name="scope" onchange="this.form.submit()">
      <option value="">— All garden commentary —</option>
      <optgroup label="Areas">
        {% for aid, label in filter_options.areas %}
        <option value="area:{{ aid }}"{% if scope_type == 'area' and scope_id == aid %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </optgroup>
      <optgroup label="Plantings">
        {% for pid, label in filter_options.plantings %}
        <option value="planting:{{ pid }}"{% if scope_type == 'planting' and scope_id == pid %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </optgroup>
      <optgroup label="Plant groups">
        {% for plid, label in filter_options.plants %}
        <option value="plant:{{ plid }}"{% if scope_type == 'plant' and scope_id == plid %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </optgroup>
      <optgroup label="Species">
        {% for sid, label in filter_options.species %}
        <option value="species:{{ sid }}"{% if scope_type == 'species' and scope_id == sid %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </optgroup>
      <optgroup label="Varieties">
        {% for vid, label in filter_options.varieties %}
        <option value="variety:{{ vid }}"{% if scope_type == 'variety' and scope_id == vid %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </optgroup>
      <optgroup label="Stations">
        {% for stid, label in filter_options.stations %}
        <option value="station:{{ stid }}"{% if scope_type == 'station' and scope_id == stid %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </optgroup>
      <optgroup label="Years">
        {% for yid, label in filter_options.years %}
        <option value="year:{{ yid }}"{% if scope_type == 'year' and scope_id == yid %} selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </optgroup>
    </select>
  </label>
  {# keep current children/related on scope change via the hidden inputs below; parsed server-side #}
  {% if include_children %}<input type="hidden" name="children" value="1">{% else %}<input type="hidden" name="children" value="0">{% endif %}
  {% if include_related %}<input type="hidden" name="related" value="1">{% else %}<input type="hidden" name="related" value="0">{% endif %}
  <noscript><button type="submit" class="btn small">Apply</button></noscript>
</form>

<script>
// Expand 'scope=area:49' into scope_type+scope_id when the select changes
document.querySelector('.timeline-filter select[name="scope"]').addEventListener('change', function(e) {
  var v = e.target.value;
  var form = e.target.form;
  // Remove any existing scope_type/scope_id inputs
  form.querySelectorAll('input[name="scope_type"], input[name="scope_id"]').forEach(function(x){x.remove();});
  if (v) {
    var parts = v.split(':');
    var typeIn = document.createElement('input');
    typeIn.type = 'hidden'; typeIn.name = 'scope_type'; typeIn.value = parts[0];
    form.appendChild(typeIn);
    var idIn = document.createElement('input');
    idIn.type = 'hidden'; idIn.name = 'scope_id'; idIn.value = parts[1];
    form.appendChild(idIn);
  }
  // Remove the combined scope param since we're posting discrete ones
  e.target.removeAttribute('name');
  form.submit();
});
</script>

{% if scope_type %}
<div id="comments" class="timeline-toggles">
  {% if supports_children %}
  {% set children_flip = 0 if include_children else 1 %}
  <a href="/timeline?scope_type={{ scope_type }}&scope_id={{ scope_id }}&children={{ children_flip }}&related={{ 1 if include_related else 0 }}#comments"
     class="comment-toggle {% if include_children %}on{% else %}off{% endif %}">
    {% if include_children %}✓{% else %}○{% endif %} child comments
  </a>
  {% endif %}
  {% set related_flip = 0 if include_related else 1 %}
  <a href="/timeline?scope_type={{ scope_type }}&scope_id={{ scope_id }}{% if supports_children %}&children={{ 1 if include_children else 0 }}{% endif %}&related={{ related_flip }}#comments"
     class="comment-toggle {% if include_related %}on{% else %}off{% endif %}">
    {% if include_related %}✓{% else %}○{% endif %} related comments
  </a>
  <a href="/timeline" class="comment-toggle clear">× clear filter</a>
</div>
{% endif %}
{% endif %}

{% if view == 'log' %}
{% if log_entries %}
<ul class="comment-list timeline-list activity-log-list">
  {% for e in log_entries %}
  <li class="activity-log-row activity-log-{{ e.category }}">
    <div class="activity-log-head">
      <span class="activity-log-cat cat-{{ e.category }}">{{ e.category|capitalize }}</span>
      <time class="activity-log-ts">{{ e.created_at }}</time>
      {% if e.entity_url %}
      <a href="{{ e.entity_url }}" class="chip type-{{ e.entity_type }}">{{ e.entity_type }}{% if e.entity_id %} #{{ e.entity_id }}{% endif %}</a>
      {% else %}
      <span class="chip chip-muted">{{ e.entity_type }}{% if e.entity_id %} #{{ e.entity_id }}{% endif %}</span>
      {% endif %}
    </div>
    <div class="activity-log-summary">{{ e.summary }}</div>
    {% if e.field and (e.old_value is not none or e.new_value is not none) %}
    <div class="activity-log-diff meta small">
      <span class="activity-log-field">{{ e.field }}:</span>
      <span class="activity-log-old">{{ e.old_value if e.old_value is not none else '—' }}</span>
      <span class="activity-log-arrow">→</span>
      <span class="activity-log-new">{{ e.new_value if e.new_value is not none else '—' }}</span>
    </div>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p class="empty">No mutations recorded{% if scope_type %} for this {{ scope_type }}{% endif %}.</p>
{% endif %}

{% else %}

{% if comments %}
<ul class="comment-list timeline-list">
  {% for c in comments %}
  {% set next_url = '/timeline' if is_global else '/timeline/' ~ entity_type ~ '/' ~ entity_id %}
  <li class="comment{% if not c.is_primary %} comment-indirect{% endif %}{% if c.is_archived %} is-archived{% endif %}">
    <div class="comment-head">
      <span class="comment-title">
        <time class="comment-date">{{ c.comment_date }}</time>
        <span class="comment-dash">—</span>
        <a href="{{ c.primary_url }}" class="chip type-{{ c.primary_type }}">{{ c.primary_type }}: {{ c.primary_short_label }}</a>
        {% if not is_global and not c.is_primary %}
        <span class="chip chip-muted" title="this entity was inferred, not the primary target">inherited</span>
        {% endif %}
        {% if c.is_archived %}<span class="archived-chip">Archived</span>{% endif %}
      </span>
      <div class="comment-actions">
        <a href="/comments/{{ c.id }}/edit?next={{ next_url }}" class="link">edit</a>
        {% if c.is_archived %}
        <form method="post" action="/unarchive/comment/{{ c.id }}" class="inline">
          <input type="hidden" name="next" value="{{ next_url }}">
          <button type="submit" class="link">unarchive</button>
        </form>
        {% else %}
        <form method="post" action="/archive/comment/{{ c.id }}" class="inline">
          <input type="hidden" name="next" value="{{ next_url }}">
          <button type="submit" class="link">archive</button>
        </form>
        {% endif %}
      </div>
    </div>
    {% if c.body %}<div class="comment-body">{{ c.body }}</div>{% endif %}
    {% if c.audio_path %}
    <audio class="comment-audio" controls preload="none" src="/notes/{{ c.audio_path }}"></audio>
    {% endif %}
    {% if c.photos %}
    <div class="comment-photos">
      {% for p in c.photos %}
      <a href="/notes/{{ p }}" target="_blank" rel="noopener" class="comment-photo-thumb">
        <img src="/notes/{{ p }}" alt="photo" loading="lazy">
      </a>
      {% endfor %}
    </div>
    {% endif %}
    {% if c.other_targets %}
    <div class="comment-also">
      {% for t in c.other_targets %}
      <span class="chip-pill type-{{ t.type }}" title="{{ t.type }}: {{ t.label }}">
        <a href="{{ t.url }}" class="chip-pill-link">{{ t.short_label }}</a>
        <form method="post" action="/comments/{{ c.id }}/targets/{{ t.type }}/{{ t.id }}/delete" class="chip-pill-form">
          <input type="hidden" name="next" value="{{ next_url }}">
          <button type="submit" class="chip-pill-remove" aria-label="Remove link to {{ t.label }}">×</button>
        </form>
      </span>
      {% endfor %}
    </div>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p class="empty">No comments{% if scope_type %} matching this filter{% endif %} yet.</p>
{% endif %}

{% endif %}
{% endblock %}