{% extends "base.html" %}
{% block title %}{{ stage | title }} Session — Exp {{ exp_id }} — ABREKA{% endblock %}

{% block extra_css %}
    /* Session-specific styles */
    .session-block {
      margin-bottom: 12px;
      border-radius: 8px;
      border: 1px solid var(--border);
      overflow: hidden;
    }
    .block-header {
      padding: 8px 16px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .block-body {
      padding: 12px 16px;
      background: var(--surface);
    }

    /* User message */
    .block-user .block-header {
      background: #dbeafe;
      color: #1e40af;
    }
    .block-user .block-body {
      background: #f0f7ff;
    }

    /* Assistant message */
    .block-assistant .block-header {
      background: #e0e7ff;
      color: #3730a3;
    }

    /* Tool call */
    .block-tool .block-header {
      background: #f3f4f6;
      color: #374151;
    }
    .block-tool.is-error .block-header {
      background: #fee2e2;
      color: #991b1b;
    }

    /* Thinking block */
    .thinking-block {
      background: #faf5ff;
      border: 1px solid #e9d5ff;
      border-radius: 6px;
      padding: 8px 12px;
      margin-bottom: 8px;
    }
    .thinking-block summary {
      color: #7c3aed;
      font-weight: 500;
    }
    .thinking-content {
      margin-top: 8px;
      color: #6b21a8;
      font-size: 13px;
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* Tool summary line */
    .tool-cmd {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--text);
      word-break: break-all;
    }

    /* Assistant text content */
    .assistant-text {
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 13px;
      line-height: 1.6;
    }
    .assistant-text p { margin: 6px 0; }

    /* Expand all button */
    .controls {
      margin-bottom: 12px;
      display: flex;
      gap: 8px;
    }
    .controls button {
      padding: 4px 12px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--surface);
      cursor: pointer;
      font-size: 12px;
      color: var(--muted);
    }
    .controls button:hover {
      background: var(--primary-light);
      color: var(--primary);
    }
{% endblock %}

{% block content %}
<div class="breadcrumb">
  <a href="/">Dashboard</a> /
  <a href="/experiments">Experiments</a> /
  <a href="/experiments/{{ exp_id }}">{{ exp_id }}</a> /
  {{ stage }} session
</div>

<div class="flex items-center gap-2 mb-2">
  <h1>{{ stage | title }} Session</h1>
  <span class="badge" style="background: {{ exp.status.value | status_color }};">{{ exp.status.value }}</span>
</div>
<p class="text-muted mb-2">Experiment {{ exp_id }} — {{ exp.hypothesis[:80] }}{% if exp.hypothesis|length > 80 %}...{% endif %}</p>

<div class="controls">
  <button onclick="toggleAll(true)">Expand all</button>
  <button onclick="toggleAll(false)">Collapse all</button>
  <span class="text-muted text-sm" style="align-self: center;">{{ blocks | length }} blocks</span>
</div>

{% for block in blocks %}
  {% if block.type == "user" %}
  <div class="session-block block-user">
    <div class="block-header">User Prompt</div>
    <div class="block-body">
      <details>
        <summary>Prompt ({{ block.text | length }} chars)</summary>
        <div class="md-content mt-1">{{ block.text | md }}</div>
      </details>
    </div>
  </div>

  {% elif block.type == "assistant" %}
  <div class="session-block block-assistant">
    <div class="block-header">
      Assistant
      {% if block.model %}<span class="text-sm" style="font-weight: 400; text-transform: none; opacity: 0.7;">{{ block.model }}</span>{% endif %}
      {% if block.usage and block.usage.get('totalTokens') %}
      <span class="text-sm" style="font-weight: 400; text-transform: none; opacity: 0.7;">
        {{ block.usage.totalTokens }} tokens
      </span>
      {% endif %}
    </div>
    <div class="block-body">
      {% if block.thinking %}
      <div class="thinking-block">
        <details>
          <summary>Thinking ({{ block.thinking | length }} chars)</summary>
          <div class="thinking-content">{{ block.thinking }}</div>
        </details>
      </div>
      {% endif %}
      {% if block.text %}
      <div class="assistant-text md-content">{{ block.text | md }}</div>
      {% endif %}
    </div>
  </div>

  {% elif block.type == "tool" %}
  <div class="session-block block-tool {% if block.is_error %}is-error{% endif %}">
    <div class="block-header">
      Tool: {{ block.name }}
      {% if block.is_error %}<span style="color: #ef4444;">ERROR</span>{% endif %}
    </div>
    <div class="block-body">
      <div class="tool-cmd mb-1">{{ block | tool_summary }}</div>
      {% if block.args and block.name not in ('bash',) %}
      <details>
        <summary>Arguments</summary>
        <pre>{{ block.args | tojson(indent=2) }}</pre>
      </details>
      {% endif %}
      {% if block.result %}
      <details>
        <summary>Result ({{ block.result | length }} chars)</summary>
        <pre>{{ block.result }}</pre>
      </details>
      {% endif %}
    </div>
  </div>
  {% endif %}
{% endfor %}

{% if not blocks %}
<div class="card">
  <p class="text-muted">No session data available.</p>
</div>
{% endif %}

<script>
function toggleAll(open) {
  document.querySelectorAll('details').forEach(d => d.open = open);
}
</script>
{% endblock %}