{% extends "base.html" %}

{% block title %}Session Replay{% endblock %}
{% block page_title %}Session Replay{% endblock %}

{% block content %}
<div class="space-y-5">
  <!-- Active sessions -->
  <div>
    <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Active Sessions</div>
    <div class="grid grid-cols-3 gap-4" id="active-sessions">
      <div class="text-xs text-slate-600 py-4 text-center col-span-3">loading...</div>
    </div>
  </div>

  <!-- Main content: Diaries + Checkpoints -->
  <div class="grid grid-cols-3 gap-5">
    <!-- Diary timeline -->
    <div class="col-span-2 bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
      <div class="flex items-center justify-between mb-4">
        <div class="text-xs uppercase tracking-wider text-slate-400 font-medium">Session Diaries</div>
        <button onclick="loadMore()" id="load-more-btn" class="text-xs px-2.5 py-1 rounded-md bg-slate-800/50 text-slate-400 hover:bg-slate-700 transition-colors hidden">Load more</button>
      </div>
      <div class="space-y-3" id="diaries">
        <div class="text-xs text-slate-600 py-4 text-center">loading...</div>
      </div>
    </div>

    <!-- Sidebar: Checkpoints + Mental states -->
    <div class="space-y-5">
      <!-- Mental State -->
      <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
        <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Mental States</div>
        <div class="space-y-2" id="mental-states">
          <div class="text-xs text-slate-600">loading...</div>
        </div>
      </div>

      <!-- Checkpoints -->
      <div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-5 card">
        <div class="text-xs uppercase tracking-wider text-slate-400 font-medium mb-3">Checkpoints</div>
        <div class="space-y-2" id="checkpoints">
          <div class="text-xs text-slate-600">loading...</div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes livePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
  .live-pulse { animation: livePulse 2s ease-in-out infinite; }
</style>
{% endblock %}

{% block scripts %}
<script>
let diaryOffset = 0;
const PAGE_SIZE = 15;
let exhausted = false;

const STATE_BADGES = {
  focused: 'bg-violet-500/15 text-violet-400 border-violet-500/30',
  energized: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/30',
  tired: 'bg-amber-500/15 text-amber-400 border-amber-500/30',
  frustrated: 'bg-red-500/15 text-red-400 border-red-500/30',
  calm: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
  flow: 'bg-pink-500/15 text-pink-400 border-pink-500/30',
};

function renderActiveSession(s) {
  const sid = s.session_id || s.id || '';
  const shortId = String(sid).substring(0, 12);
  const lastHB = s.last_heartbeat || s.created_at;
  const cutoff = Date.now() - 15 * 60 * 1000;
  const isLive = new Date(lastHB).getTime() > cutoff;

  return `<div class="bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 card ${isLive ? 'live-pulse' : ''}">
    <div class="flex items-center gap-2 mb-2">
      <span class="relative flex h-2 w-2">
        ${isLive ? `<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>` : ''}
        <span class="relative inline-flex rounded-full h-2 w-2 ${isLive ? 'bg-emerald-500' : 'bg-slate-600'}"></span>
      </span>
      <span class="text-xs font-mono text-violet-400">${escapeHtml(shortId)}</span>
      <span class="ml-auto text-[10px] text-slate-500">${isLive ? 'LIVE' : 'idle'}</span>
    </div>
    <div class="text-[10px] text-slate-500">Started ${relativeTime(s.created_at)}</div>
    ${lastHB ? `<div class="text-[10px] text-slate-600">Last heartbeat: ${relativeTime(lastHB)}</div>` : ''}
  </div>`;
}

function renderDiary(d) {
  const sid = d.session_id || d.id || '';
  const state = d.mental_state || '';
  const stateLower = state.toLowerCase();
  const badgeClass = STATE_BADGES[stateLower] || 'bg-slate-500/15 text-slate-400 border-slate-500/30';

  return `<div class="bg-slate-800/30 border border-slate-800/30 rounded-lg p-4 hover:border-slate-700/50 transition-colors">
    <div class="flex items-center gap-2 mb-2 flex-wrap">
      <span class="text-xs font-mono text-violet-400">${escapeHtml(String(sid).substring(0, 12))}</span>
      <span class="text-[10px] text-slate-500">${escapeHtml(d.created_at || '')}</span>
      ${d.domain ? `<span class="text-[10px] px-1.5 py-0.5 rounded bg-slate-800 text-slate-400">${escapeHtml(d.domain)}</span>` : ''}
      ${state ? `<span class="text-[10px] px-1.5 py-0.5 rounded border ${badgeClass}">${escapeHtml(state)}</span>` : ''}
    </div>
    ${d.summary ? `<p class="text-sm text-slate-200 leading-relaxed mb-2 whitespace-pre-wrap">${escapeHtml(d.summary)}</p>` : ''}
    ${d.self_critique ? `<div class="border-l-2 border-amber-500/30 pl-3 mb-2"><p class="text-xs text-amber-300/80 leading-relaxed whitespace-pre-wrap">${escapeHtml(d.self_critique)}</p></div>` : ''}
  </div>`;
}

async function loadMore() {
  if (exhausted) return;
  const btn = document.getElementById('load-more-btn');
  btn.textContent = 'Loading...'; btn.disabled = true;

  try {
    const data = await fetchJSON(`/api/sessions?limit=${PAGE_SIZE}&offset=${diaryOffset}`);
    if (!data) throw new Error('No data');
    const diaries = data.diaries || data.sessions || [];

    if (diaries.length > 0) {
      document.getElementById('diaries').insertAdjacentHTML('beforeend', diaries.map(renderDiary).join(''));
      diaryOffset += diaries.length;
    }
    if (diaries.length < PAGE_SIZE) {
      exhausted = true; btn.classList.add('hidden');
    } else {
      btn.textContent = 'Load more'; btn.disabled = false;
    }
  } catch (err) {
    btn.textContent = 'Error -- retry'; btn.disabled = false;
  }
}

async function loadSessions() {
  const data = await fetchJSON('/api/sessions?limit=' + PAGE_SIZE);
  if (!data) return;

  // Active sessions
  const sessions = data.sessions || [];
  const activeContainer = document.getElementById('active-sessions');
  const cutoff = Date.now() - 15 * 60 * 1000;
  const activeSessions = sessions.filter(s => new Date(s.last_heartbeat || s.created_at || 0).getTime() > cutoff);

  if (activeSessions.length > 0) {
    activeContainer.innerHTML = activeSessions.map(renderActiveSession).join('');
  } else {
    activeContainer.innerHTML = '<div class="col-span-3 bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-xs text-slate-500 text-center">No active sessions</div>';
  }

  // Diaries
  const diaries = data.diaries || sessions;
  const diaryContainer = document.getElementById('diaries');
  if (diaries.length > 0) {
    diaryContainer.innerHTML = diaries.map(renderDiary).join('');
    diaryOffset = diaries.length;
    if (diaries.length >= PAGE_SIZE) {
      document.getElementById('load-more-btn').classList.remove('hidden');
    }
  } else {
    diaryContainer.innerHTML = '<div class="text-xs text-slate-600 py-4 text-center">No session diaries found</div>';
  }

  // Mental states
  const mentalContainer = document.getElementById('mental-states');
  const states = {};
  diaries.forEach(d => {
    if (d.mental_state) {
      const s = d.mental_state.toLowerCase();
      states[s] = (states[s] || 0) + 1;
    }
  });
  const stateEntries = Object.entries(states).sort((a, b) => b[1] - a[1]);
  if (stateEntries.length) {
    mentalContainer.innerHTML = stateEntries.map(([state, count]) => {
      const badgeClass = STATE_BADGES[state] || 'bg-slate-500/15 text-slate-400 border-slate-500/30';
      return `<div class="flex items-center justify-between">
        <span class="text-xs px-2 py-0.5 rounded border ${badgeClass}">${escapeHtml(state)}</span>
        <span class="text-xs font-mono text-slate-500">${count}</span>
      </div>`;
    }).join('');
  } else {
    mentalContainer.innerHTML = '<div class="text-xs text-slate-600">No mental state data</div>';
  }

  // Checkpoints
  const checkpoints = data.checkpoints || [];
  const cpContainer = document.getElementById('checkpoints');
  if (checkpoints.length) {
    cpContainer.innerHTML = checkpoints.slice(0, 10).map(cp => {
      return `<div class="flex items-center gap-2 py-1.5 border-b border-slate-800/30 last:border-0">
        <svg class="w-3.5 h-3.5 text-slate-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        <span class="text-xs text-slate-400 truncate flex-1">${escapeHtml(cp.label || cp.session_id || 'checkpoint')}</span>
        <span class="text-[10px] text-slate-600 font-mono">${relativeTime(cp.created_at)}</span>
      </div>`;
    }).join('');
  } else {
    cpContainer.innerHTML = '<div class="text-xs text-slate-600">No checkpoints</div>';
  }
}

loadSessions();
setInterval(() => {
  // Refresh active sessions only
  fetchJSON('/api/sessions?limit=5').then(data => {
    if (!data) return;
    const sessions = data.sessions || [];
    const activeContainer = document.getElementById('active-sessions');
    const cutoff = Date.now() - 15 * 60 * 1000;
    const activeSessions = sessions.filter(s => new Date(s.last_heartbeat || s.created_at || 0).getTime() > cutoff);
    if (activeSessions.length > 0) {
      activeContainer.innerHTML = activeSessions.map(renderActiveSession).join('');
    } else {
      activeContainer.innerHTML = '<div class="col-span-3 bg-slate-900/50 border border-slate-800/50 rounded-xl p-4 text-xs text-slate-500 text-center">No active sessions</div>';
    }
  });
}, 60000);
</script>
{% endblock %}