{% extends "base.html" %}

{% block title %}Activity Feed{% endblock %}
{% block page_title %}Activity Feed{% endblock %}
{% block page_subtitle %}
<span class="text-xs text-slate-500 font-mono ml-2" id="feed-count">-- events</span>
{% endblock %}

{% block header_actions %}
<button onclick="loadFeed()" class="text-xs text-slate-400 hover:text-slate-200 bg-slate-800/50 border border-slate-700/50 rounded-lg px-3 py-1.5 transition-colors flex items-center gap-1.5">
  <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
  Refresh
</button>
{% endblock %}

{% block content %}
<!-- Type filter pills -->
<div class="flex items-center gap-2 mb-5 flex-wrap">
  <button onclick="setFilter('all')" data-filter="all" class="filter-pill active px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
    All
    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-all">0</span>
  </button>
  <button onclick="setFilter('diary')" data-filter="diary" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
    Diary
    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-diary">0</span>
  </button>
  <button onclick="setFilter('change')" data-filter="change" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
    Changes
    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-change">0</span>
  </button>
  <button onclick="setFilter('cortex')" data-filter="cortex" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
    Cortex
    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-cortex">0</span>
  </button>
  <button onclick="setFilter('cron')" data-filter="cron" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
    <svg class="w-3 h-3 inline mr-1" 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>
    Crons
    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-cron">0</span>
  </button>
  <button onclick="setFilter('decision')" data-filter="decision" class="filter-pill px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-200">
    <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>
    Decisions
    <span class="ml-1 font-mono text-[10px] opacity-70" id="count-decision">0</span>
  </button>

  <!-- Live indicator -->
  <div class="ml-auto flex items-center gap-2">
    <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 glow-dot" style="color: #34d399;"></div>
    <span class="text-[10px] text-slate-500 uppercase tracking-wider">Live</span>
  </div>
</div>

<!-- Feed container -->
<div id="feed-list" class="space-y-2">
  <!-- Loading skeleton -->
  <div id="feed-skeleton" class="space-y-2">
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 animate-pulse"><div class="h-4 bg-slate-800 rounded w-3/4"></div><div class="h-3 bg-slate-800/50 rounded w-1/2 mt-3"></div></div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 animate-pulse"><div class="h-4 bg-slate-800 rounded w-2/3"></div><div class="h-3 bg-slate-800/50 rounded w-1/3 mt-3"></div></div>
    <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 animate-pulse"><div class="h-4 bg-slate-800 rounded w-1/2"></div><div class="h-3 bg-slate-800/50 rounded w-2/5 mt-3"></div></div>
  </div>
</div>

<!-- Empty state -->
<div id="feed-empty" class="hidden text-center py-20">
  <svg class="w-12 h-12 mx-auto text-slate-700 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
  <p class="text-sm text-slate-500">No activity events yet</p>
  <p class="text-xs text-slate-600 mt-1">Events will appear here as NEXO operates</p>
</div>

<style>
  .filter-pill {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.5);
    color: #94a3b8;
  }
  .filter-pill:hover {
    background: rgba(51, 65, 85, 0.5);
    color: #e2e8f0;
  }
  .filter-pill.active {
    background: rgba(124, 58, 237, 0.15);
    border-color: rgba(124, 58, 237, 0.4);
    color: #a78bfa;
  }

  .event-card {
    transition: all 0.2s ease;
  }
  .event-card:hover {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.06);
  }

  @keyframes slideInFeed {
    0% { opacity: 0; transform: translateY(-12px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .event-new {
    animation: slideInFeed 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .event-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
  }
  .event-details.open {
    max-height: 600px;
    opacity: 1;
  }

  .icon-diary { color: #a78bfa; background: rgba(167, 139, 250, 0.1); }
  .icon-change { color: #34d399; background: rgba(52, 211, 153, 0.1); }
  .icon-cortex { color: #f472b6; background: rgba(244, 114, 182, 0.1); }
  .icon-cron { color: #fbbf24; background: rgba(251, 191, 36, 0.1); }
  .icon-decision { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }

  .type-badge-diary { color: #a78bfa; background: rgba(167, 139, 250, 0.1); border: 1px solid rgba(167, 139, 250, 0.2); }
  .type-badge-change { color: #34d399; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.2); }
  .type-badge-cortex { color: #f472b6; background: rgba(244, 114, 182, 0.1); border: 1px solid rgba(244, 114, 182, 0.2); }
  .type-badge-cron { color: #fbbf24; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.2); }
  .type-badge-decision { color: #60a5fa; background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.2); }
</style>
{% endblock %}

{% block scripts %}
<script>
const ICONS = {
  diary: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>`,
  change: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>`,
  cortex: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>`,
  cron: `<svg class="w-4 h-4" 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>`,
  decision: `<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>`
};

const TYPE_LABELS = { diary: 'Diary', change: 'Change', cortex: 'Cortex', cron: 'Cron', decision: 'Decision' };

let allEvents = [];
let currentFilter = 'all';
let knownIds = new Set();

function setFilter(type) {
  currentFilter = type;
  document.querySelectorAll('.filter-pill').forEach(btn => {
    btn.classList.toggle('active', btn.dataset.filter === type);
  });
  renderEvents();
}

function renderEvents() {
  const list = document.getElementById('feed-list');
  const skeleton = document.getElementById('feed-skeleton');
  const empty = document.getElementById('feed-empty');
  if (skeleton) skeleton.remove();

  const filtered = currentFilter === 'all'
    ? allEvents
    : allEvents.filter(e => e.type === currentFilter);

  if (filtered.length === 0) {
    list.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');

  list.innerHTML = filtered.map((ev, i) => {
    const icon = ICONS[ev.type] || ICONS.change;
    const snippet = escapeHtml((ev.content || '').substring(0, 200));
    const full = escapeHtml(ev.content || '');
    const isNew = !knownIds.has(ev.id || i);
    return `
      <div class="event-card bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 cursor-pointer ${isNew ? 'event-new' : ''}"
           onclick="toggleDetails(this)" data-event-id="${ev.id || i}">
        <div class="flex items-start gap-3">
          <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 icon-${ev.type}">
            ${icon}
          </div>
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-1">
              <span class="type-badge-${ev.type} text-[10px] font-semibold uppercase tracking-wider px-1.5 py-0.5 rounded">
                ${TYPE_LABELS[ev.type] || ev.type}
              </span>
              ${ev.source ? `<span class="text-[10px] text-slate-600">${escapeHtml(ev.source)}</span>` : ''}
              <span class="ml-auto text-[10px] text-slate-500 font-mono flex-shrink-0">${relativeTime(ev.created_at)}</span>
            </div>
            <p class="text-sm text-slate-300 leading-relaxed line-clamp-2">${snippet}${(ev.content || '').length > 200 ? '...' : ''}</p>
          </div>
          <svg class="w-4 h-4 text-slate-600 flex-shrink-0 mt-1 transition-transform duration-200 expand-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </div>
        <div class="event-details mt-3 pl-11">
          <div class="border-t border-slate-800/50 pt-3">
            <pre class="text-xs text-slate-400 font-mono whitespace-pre-wrap leading-relaxed">${full}</pre>
            <div class="flex items-center gap-4 mt-3 text-[10px] text-slate-600">
              <span>ID: ${escapeHtml(String(ev.id || '--'))}</span>
              <span>${ev.created_at ? new Date(ev.created_at).toLocaleString('en-GB') : '--'}</span>
              ${ev.session_id ? `<span>Session: ${escapeHtml(ev.session_id)}</span>` : ''}
            </div>
          </div>
        </div>
      </div>
    `;
  }).join('');
}

function toggleDetails(card) {
  const details = card.querySelector('.event-details');
  const chevron = card.querySelector('.expand-chevron');
  details.classList.toggle('open');
  chevron.style.transform = details.classList.contains('open') ? 'rotate(180deg)' : '';
}

function updateCounts() {
  const counts = { all: allEvents.length, diary: 0, change: 0, cortex: 0, cron: 0, decision: 0 };
  allEvents.forEach(e => { if (counts[e.type] !== undefined) counts[e.type]++; });
  Object.keys(counts).forEach(k => {
    const el = document.getElementById('count-' + k);
    if (el) el.textContent = counts[k];
  });
  document.getElementById('feed-count').textContent = `${allEvents.length} events`;
}

async function loadFeed() {
  const data = await fetchJSON('/api/feed');
  if (!data || !data.events) return;

  const oldIds = new Set(allEvents.map(e => e.id));
  allEvents = data.events;
  knownIds = oldIds;
  updateCounts();
  renderEvents();

  // Mark all as known after render
  setTimeout(() => {
    allEvents.forEach(e => knownIds.add(e.id));
  }, 500);
}

// Initial load
loadFeed();

// Auto-refresh every 30s
setInterval(loadFeed, 30000);
</script>
{% endblock %}