{% extends "base.html" %}
{% block title %}Activity Timeline{% endblock %}

{% block content %}
<div class="p-6 space-y-6">
  <!-- Header -->
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 bg-gray-800/50 p-6 rounded-xl border border-gray-700/50 backdrop-blur-sm">
    <div>
      <h1 class="text-3xl font-bold text-gray-100 flex items-center gap-3">
        <svg class="w-8 h-8 text-cyan-500/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Activity Timeline
      </h1>
      <p class="text-gray-400 mt-1">Audit log of all engagement activity</p>
    </div>
    <span class="px-4 py-2 bg-cyan-500/10 text-cyan-400 border border-cyan-500/20 rounded-lg text-sm">
      {{ events|length }} event{{ 's' if events|length != 1 else '' }}
    </span>
  </div>

  <!-- Timeline -->
  {% if events %}
    <div class="relative">
      <!-- Vertical line -->
      <div class="absolute left-6 top-0 bottom-0 w-px bg-gray-700/50"></div>

      <div class="space-y-1 ml-14">
        {% for event in events %}
          {% set colors = {
            'agent_registered': ('bg-green-500/20 text-green-400', 'border-green-500/30'),
            'agent_deleted':    ('bg-red-500/20 text-red-400',   'border-red-500/30'),
            'agent_cleaned_up': ('bg-orange-500/20 text-orange-400', 'border-orange-500/30'),
            'task_created':     ('bg-blue-500/20 text-blue-400',  'border-blue-500/30'),
            'task_completed':   ('bg-purple-500/20 text-purple-400', 'border-purple-500/30'),
            'data_received':    ('bg-yellow-500/20 text-yellow-400', 'border-yellow-500/30')
          } %}
          {% set badge = colors.get(event.event_type, ('bg-gray-500/20 text-gray-400', 'border-gray-500/30')) %}

          <div class="relative flex items-start gap-4 py-3 group">
            <!-- Dot on the line -->
            <div class="absolute -left-[2.15rem] mt-1 w-3 h-3 rounded-full border-2
              {% if event.event_type == 'agent_registered' %}border-green-500 bg-green-900
              {% elif event.event_type == 'agent_deleted' or event.event_type == 'agent_cleaned_up' %}border-red-500 bg-red-900
              {% elif event.event_type == 'task_created' %}border-blue-500 bg-blue-900
              {% elif event.event_type == 'task_completed' %}border-purple-500 bg-purple-900
              {% elif event.event_type == 'data_received' %}border-yellow-500 bg-yellow-900
              {% else %}border-gray-500 bg-gray-900{% endif %}">
            </div>

            <div class="flex-1 bg-gray-800/40 hover:bg-gray-800/70 rounded-lg px-4 py-3 border border-gray-700/30 transition-colors">
              <div class="flex items-center justify-between flex-wrap gap-2">
                <div class="flex items-center gap-3">
                  <span class="px-2 py-0.5 rounded text-xs font-medium {{ badge[0] }} border {{ badge[1] }}">
                    {{ event.event_type | replace('_', ' ') | title }}
                  </span>
                  {% if event.hostname or event.agent_id %}
                    <a href="{{ url_for('agent_detail', agent_id=event.agent_id) }}"
                       class="text-sm text-gray-300 hover:text-cyan-400 font-mono transition-colors">
                      {{ event.hostname or event.agent_id[:12] ~ '...' }}
                    </a>
                  {% endif %}
                  {% if event.details %}
                    {% set d = event.details | from_json %}
                    {% if d.command %}
                      <span class="text-xs text-gray-500">→ {{ d.command }}</span>
                    {% endif %}
                    {% if d.description %}
                      <span class="text-xs text-gray-500 truncate max-w-xs">{{ d.description }}</span>
                    {% endif %}
                    {% if d.data_type %}
                      <span class="text-xs text-gray-500">→ {{ d.data_type }}</span>
                    {% endif %}
                    {% if d.days_threshold %}
                      <span class="text-xs text-gray-500">offline > {{ d.days_threshold }}d</span>
                    {% endif %}
                  {% endif %}
                </div>
                <span class="text-xs text-gray-500 shrink-0">{{ event.created_at }}</span>
              </div>
            </div>
          </div>
        {% endfor %}
      </div>
    </div>
  {% else %}
    <div class="text-center py-20 bg-gray-800/50 rounded-xl border border-gray-700/50">
      <svg class="w-16 h-16 mx-auto text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <p class="mt-4 text-gray-300 font-medium">No activity yet</p>
      <p class="text-gray-500 text-sm mt-1">Events will appear here as agents register and tasks run</p>
    </div>
  {% endif %}
</div>
{% endblock %}