{{$sessionID := index .session "session_id"}}
{{$sessionKey := index .session "session_key"}}
{{$state := index .session "state"}}
{{$summary := index .session "summary"}}

<div id="interrupted-banner" class="dismiss-banner" style="display:none">
  <span class="dismiss-icon">⚠</span>
  <p><strong>Session inactive.</strong> Last heartbeat was <span id="heartbeat-ago">—</span> ago.</p>
  <button class="btn btn-ghost" style="flex-shrink:0;font-size:11px;" onclick="document.getElementById('interrupted-banner').remove()">Dismiss</button>
</div>

<div class="session-header">
  <div>
    <div class="session-label">Session</div>
    <div class="session-id">
      {{$sessionKey}}
      <span class="session-id-copy" onclick="copyToClipboard('{{$sessionKey}}').then(() => showCopiedFeedback(this))">copy</span>
    </div>
    <div class="session-meta">
      <span class="badge badge-{{$state}}">
        <span class="badge-dot"></span>{{if eq $state "active"}}Active{{else}}Inactive{{end}}
      </span>
      <span class="meta-divider"></span>
      <span class="meta-item">Agent: <strong>{{index .session "agent_id"}}</strong></span>
      <span class="meta-divider"></span>
      <span class="meta-item">Started <strong id="started-ago">—</strong></span>
    </div>
  </div>
</div>

<div class="page-with-sidebar">
  <div class="main-col">

    <!-- EVENTS + CHECKPOINTS CARD -->
    <div class="card">
      <div class="tabs">
        <button class="tab active" onclick="switchTab(this,'events-pane','checkpoints-pane')">Events</button>
        <button class="tab" onclick="switchTab(this,'checkpoints-pane','events-pane')">Checkpoints</button>
      </div>

      <!-- EVENTS PANE -->
      <div id="events-pane"
        hx-get="/ui/session/{{$sessionID}}/events-data"
        hx-trigger="load"
        hx-swap="innerHTML">
        <div class="htmx-indicator" style="padding:32px;text-align:center;color:var(--muted);">Loading…</div>
      </div>

      <!-- CHECKPOINTS PANE (hidden initially) -->
      <div id="checkpoints-pane" style="display:none"
        hx-get="/ui/session/{{$sessionID}}/checkpoints-data"
        hx-trigger="revealed"
        hx-swap="innerHTML">
      </div>
    </div>

  </div>

  <!-- SIDEBAR -->
  <div class="sidebar">

    <!-- COMPACT PANEL -->
    <div class="compact-panel">
      <div class="compact-header">
        <div class="compact-title-row">
          <div class="compact-icon">⬡</div>
          <div>
            <div class="compact-label">Memory Compaction</div>
            <div class="compact-sublabel">Summarize events + checkpoints</div>
          </div>
        </div>
      </div>

      <!-- Stored summary -->
      <div class="compact-summary">
        <div class="summary-label">
          <span>Stored summary</span>
          <span class="token-count" id="summary-tokens">— tokens</span>
        </div>
        <div class="summary-text" id="summary-text">
          {{if $summary}}{{$summary}}{{else}}<em class="empty-state" style="display:block;padding:12px;">No summary yet. Compact to generate.</em>{{end}}
        </div>
      </div>

      <!-- Compact actions — plain JS fetch, no HTMX dependency -->
      <div class="compact-actions">
        <div class="btn-row">
          <button class="btn btn-ghost" id="compact-btn" onclick="compactNow('{{$sessionID}}')">
            ⬡ Compact Now
          </button>
          <button class="btn btn-ghost" id="copy-summary-btn"
            onclick="copyToClipboard(document.getElementById('summary-text').innerText).then(() => showCopiedFeedback(document.getElementById('copy-summary-btn')))">
            Copy
          </button>
        </div>
      </div>

      <div style="padding:0 18px 14px;" id="compact-status">
        <div class="compact-note" id="compact-note">Compact writes a summary of all recorded events</div>
      </div>
    </div>

    <!-- SESSION INFO -->
    <div class="card">
      <div class="card-header"><span class="card-title">Session info</span></div>
      <div style="padding:4px 18px 12px;">
        <div class="info-row">
          <span class="info-key">State</span>
          <span class="info-val" id="session-state-badge" style="color:var(--accent)">
            {{if eq $state "active"}}Active{{else}}Inactive{{end}}
          </span>
        </div>
        <div class="info-row">
          <span class="info-key">Agent</span>
          <span class="info-val">{{index .session "agent_id"}}</span>
        </div>
        <div class="info-row">
          <span class="info-key">Started</span>
          <span class="info-val" id="info-started">—</span>
        </div>
        <div class="info-row">
          <span class="info-key">Last heartbeat</span>
          <span class="info-val" id="info-heartbeat">—</span>
        </div>
      </div>
    </div>

    <!-- STATS -->
    <div class="card">
      <div class="card-header">
        <span class="card-title">Stats</span>
        <span class="card-action"
          hx-get="/ui/session/{{$sessionID}}/stats-data"
          hx-target="#session-stats"
          hx-swap="innerHTML">↺ refresh</span>
      </div>
      <div class="card-body" id="session-stats">
        <div class="stat-grid">
          <div class="stat-box">
            <div class="stat-val c-blue">{{len .events}}</div>
            <div class="stat-lbl">Events</div>
          </div>
          <div class="stat-box">
            <div class="stat-val c-purple">{{len .checkpoints}}</div>
            <div class="stat-lbl">Checkpoints</div>
          </div>
          <div class="stat-box">
            <div class="stat-val c-amber">—</div>
            <div class="stat-lbl">Flags</div>
          </div>
          <div class="stat-box">
            <div class="stat-val c-green">—</div>
            <div class="stat-lbl">Tasks</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
  // Time formatting
  function formatAgo(isoString) {
    if (!isoString) return '—';
    const diff = Date.now() - new Date(isoString).getTime();
    const s = Math.floor(diff / 1000);
    if (s < 60) return s + 's';
    const m = Math.floor(s / 60);
    if (m < 60) return m + 'm';
    const h = Math.floor(m / 60);
    if (h < 24) return h + 'h';
    return Math.floor(h / 24) + 'd';
  }

  function updateTimes() {
    const startedRaw = '{{index .session "started_at"}}';
    const heartbeatRaw = '{{index .session "last_heartbeat_at"}}';
    const state = '{{$state}}';

    const startedEl = document.getElementById('started-ago');
    const infoStarted = document.getElementById('info-started');
    const infoHeartbeat = document.getElementById('info-heartbeat');
    const heartbeatAgo = document.getElementById('heartbeat-ago');
    const banner = document.getElementById('interrupted-banner');

    if (startedEl) startedEl.textContent = formatAgo(startedRaw);
    if (infoStarted) infoStarted.textContent = formatAgo(startedRaw) + ' ago';
    if (infoHeartbeat) infoHeartbeat.textContent = heartbeatRaw ? formatAgo(heartbeatRaw) + ' ago' : '—';
    if (heartbeatAgo) heartbeatAgo.textContent = heartbeatRaw ? formatAgo(heartbeatRaw) : '—';

    // Show banner for non-active sessions
    if (banner && state !== 'active') {
      banner.style.display = 'flex';
    }
  }

  updateTimes();
  setInterval(updateTimes, 15000);

  // Compact — plain fetch, no HTMX
  async function compactNow(sessionId) {
    const btn = document.getElementById('compact-btn');
    const note = document.getElementById('compact-note');
    const summaryEl = document.getElementById('summary-text');
    btn.disabled = true;
    btn.textContent = 'Compacting…';
    try {
      const res = await fetch('/api/sessions/' + sessionId + '/compact', { method: 'POST', headers: {'Content-Type':'application/json'}, body: '{}' });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const data = await res.json();
      if (summaryEl && data.summary) {
        summaryEl.textContent = data.summary;
        summaryEl.style.fontStyle = 'normal';
      }
      if (note) note.textContent = 'Compacted successfully';
    } catch (e) {
      if (note) note.textContent = 'Compact failed: ' + e.message;
    } finally {
      btn.disabled = false;
      btn.textContent = '⬡ Compact Now';
    }
  }
</script>
