{% extends "base.html" %}
{% block content %}
{% set current_data = response_data(current_sessions) %}
{% set recent_data = response_data(recent_sessions) %}
{% set current_error = response_error(current_sessions) %}
{% set recent_error = response_error(recent_sessions) %}
{% set active_data = recent_data if active_tab == 'recent' else current_data %}
{% set active_error = recent_error if active_tab == 'recent' else current_error %}
{% set active_recent = active_tab == 'recent' %}
{% set active_hook = "octa_client.sessions.list(recent: true)" if active_recent else "octa_client.sessions.list" %}
<div class="w-full max-w-full space-y-6">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h1 class="text-lg font-semibold text-slate-100">Sessions</h1>
      <p class="mt-1 text-sm text-slate-500">
        <code class="text-cyan-400">octa_client.sessions.list</code> for discovery, with stop actions wired through <code class="text-cyan-400">octa_client.services.session(uuid).stop</code>.
      </p>
    </div>
    <div class="flex items-center gap-3">
      {% if playground_mock_active %}
        <span class="rounded bg-amber-500/15 px-2 py-0.5 text-[11px] font-medium text-amber-400">Mock: {{ playground_mock_scenario }}</span>
      {% endif %}
      <a href="/playground/sessions?tab={{ active_tab }}" class="rounded border border-slate-700 px-3 py-1.5 text-xs text-slate-400 transition-colors hover:border-slate-600 hover:text-slate-200">Refetch</a>
    </div>
  </div>

  {% if stop_notice %}
    <div class="rounded-xl border border-emerald-900/40 bg-emerald-500/5 p-4">
      <div class="flex items-start gap-3">
        <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-emerald-400"></span>
        <div class="min-w-0">
          <div class="text-sm font-medium text-emerald-200">Stop request submitted</div>
          <p class="mt-1 break-words text-xs leading-5 text-emerald-200/80">{{ stop_notice }}</p>
          {% if stop_request_id %}
            <p class="mt-1 font-mono text-[11px] text-emerald-300/80">request_id: {{ stop_request_id }}</p>
          {% endif %}
        </div>
      </div>
    </div>
  {% endif %}

  {% if stop_error %}
    <div class="rounded-xl border border-rose-900/40 bg-rose-500/5 p-4">
      <div class="flex items-start gap-3">
        <span class="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-rose-400"></span>
        <div class="min-w-0">
          <div class="text-sm font-medium text-rose-200">Stop request failed</div>
          <p class="mt-1 break-words text-xs leading-5 text-rose-200/80">{{ stop_error }}</p>
        </div>
      </div>
    </div>
  {% endif %}

  <div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900">
    <div class="flex gap-1 border-b border-slate-800 px-4 pt-2">
      <a href="/playground/sessions?tab=current" class="flex items-center gap-2 px-4 py-2.5 text-sm transition-colors {{ '-mb-px border-b-2 border-cyan-500 font-medium text-cyan-400' if active_tab == 'current' else 'text-slate-500 hover:text-slate-300' }}">
        <span>Current</span>
        <span class="text-[10px] text-slate-600">Active sessions</span>
      </a>
      <a href="/playground/sessions?tab=recent" class="flex items-center gap-2 px-4 py-2.5 text-sm transition-colors {{ '-mb-px border-b-2 border-cyan-500 font-medium text-cyan-400' if active_tab == 'recent' else 'text-slate-500 hover:text-slate-300' }}">
        <span>Recent</span>
        <span class="text-[10px] text-slate-600">Last 50 completed + active</span>
      </a>
    </div>

    <div class="space-y-4 px-4 py-4">
      <div class="flex items-center justify-between gap-4">
        <code class="text-[11px] text-cyan-500">{{ active_hook }}</code>
        <span class="text-xs text-slate-500">status: <span class="text-slate-300">{{ 'error' if active_error else 'success' }}</span></span>
      </div>

      {% if active_error %}
        {% set error = active_error %}
        {% include "shared/error_card.html" %}
      {% elif active_data is not none %}
        {% if not active_data %}
          <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-6 py-12 text-center text-sm text-slate-500">No {{ 'recent' if active_recent else 'active' }} sessions found.</div>
        {% else %}
          <div class="overflow-hidden rounded-lg border border-slate-800 bg-slate-950/40">
            <div class="border-b border-slate-800 px-4 py-3 text-xs text-slate-400">{{ active_data|length }} session{% if active_data|length != 1 %}s{% endif %}</div>
            {% set sessions = active_data %}
            {% set recent = active_recent %}
            {% include "shared/sessions_table.html" %}
          </div>
        {% endif %}
      {% else %}
        <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-6 py-12 text-center text-sm text-slate-500">No response available.</div>
      {% endif %}
    </div>
  </div>

  {% if active_data and not active_error %}
    <div class="rounded-lg border border-slate-800 bg-slate-900/50 p-4">
      <div class="mb-2 text-[11px] font-medium uppercase tracking-wider text-slate-500">Raw JSON</div>
      {% set data = active_data %}
      {% set max_height = "max-h-80" %}
      {% include "shared/json_viewer.html" %}
    </div>
  {% endif %}
</div>

{% if stop_target %}
  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 backdrop-blur-sm">
    <div class="w-full max-w-sm rounded-xl border border-slate-700 bg-slate-900 p-6 shadow-2xl">
      <h3 class="text-sm font-semibold text-slate-100">Stop session?</h3>
      <p class="mt-2 text-xs leading-5 text-slate-400">This will stop session <span class="font-mono text-slate-200">{{ stop_target.get("uuid") }}</span>. This action cannot be undone.</p>
      <div class="mt-5 flex justify-end gap-3">
        <a href="/playground/sessions?tab={{ active_tab }}" class="rounded border border-slate-700 px-3 py-1.5 text-xs text-slate-400 transition-colors hover:border-slate-600 hover:text-slate-200">Cancel</a>
        <form action="/playground/sessions/stop" method="post">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="hidden" name="uuid" value="{{ stop_target.get('uuid') }}">
          <input type="hidden" name="tab" value="{{ active_tab }}">
          <button type="submit" class="rounded bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-500">Stop session</button>
        </form>
      </div>
    </div>
  </div>
{% endif %}
{% endblock %}