{# T36.2 — sandbox diff view under the T28 admin layout.                   #}
{# Two-column compare: original LLM call on the left, experiment on the    #}
{# right, with a token / cost / latency strip on top. The layout already   #}
{# loads Tailwind + marked + DOMPurify + ``llm_chat_view.js``, so the      #}
{# inline CDN tags this template used to carry are gone.                   #}
{% extends "admin_layout.html" %}

{% block page_title %}Sandbox diff · {{ experiment.prompt_name }}{% endblock %}

{% block breadcrumb %}
  <span class="text-gray-500">Admin / Experiments /</span>
  <span class="font-medium text-gray-900">{{ experiment.id }}</span>
{% endblock %}

{% block head_extra %}
<style>
  {# The chat view uses a white card background; force a light surface     #}
  {# inside the diff panels regardless of the operator's theme preference. #}
  .diff-panel .llm-chat-view { background: #fff; color: #111; padding: 0.75em; border-radius: 6px; }
  .diff-panel .llm-chat-view pre { white-space: pre-wrap; word-break: break-word; }
</style>
{% endblock %}

{% block content %}
<div class="space-y-6 max-w-7xl">

  {# ===================== Header ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
    <h1 class="text-xl font-semibold text-gray-900 mb-2">Experiment {{ experiment.id }}</h1>
    <div class="text-sm text-gray-600 flex flex-wrap items-center gap-2">
      <span>Prompt:</span>
      <code class="font-mono text-xs text-gray-800 bg-gray-100 px-1.5 py-0.5 rounded">{{ experiment.prompt_name }}</code>
      <span>&middot;</span>
      <span>Created:</span>
      <code class="font-mono text-xs text-gray-800 bg-gray-100 px-1.5 py-0.5 rounded">{{ experiment.created_at }}</code>
      <span>&middot;</span>
      {% if experiment.error_message %}
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">FAILED</span>
      {% else %}
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">ok</span>
      {% endif %}
    </div>
  </section>

  {# ===================== Compare strip ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-4">
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
      <div>
        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide">Original cost</div>
        <div class="mt-1 text-base font-semibold text-gray-900 tabular-nums">${{ '%.4f'|format(original.cost_usd) }}</div>
      </div>
      <div>
        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide">Experiment cost</div>
        <div class="mt-1 text-base font-semibold text-gray-900 tabular-nums">${{ '%.4f'|format(experiment.cost_usd) }}</div>
      </div>
      <div>
        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide">Original tokens (in / out)</div>
        <div class="mt-1 text-base font-semibold text-gray-900 tabular-nums">{{ original.tokens_in }} / {{ original.tokens_out }}</div>
      </div>
      <div>
        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide">Experiment tokens (in / out)</div>
        <div class="mt-1 text-base font-semibold text-gray-900 tabular-nums">{{ experiment.tokens_in }} / {{ experiment.tokens_out }}</div>
      </div>
      <div>
        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide">Original latency</div>
        <div class="mt-1 text-base font-semibold text-gray-900 tabular-nums">{{ original.latency_ms }}ms</div>
      </div>
      <div>
        <div class="text-xs font-medium text-gray-500 uppercase tracking-wide">Experiment latency</div>
        <div class="mt-1 text-base font-semibold text-gray-900 tabular-nums">{{ experiment.latency_ms }}ms</div>
      </div>
    </div>
  </section>

  {# ===================== Diff grid ===================== #}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

    {# --------- Original panel --------- #}
    <section class="diff-panel bg-white border border-gray-200 rounded-lg shadow-sm p-4" id="panel-original">
      <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-2">
        Original
        {% if original.call_id %}
          <code class="ml-2 font-mono text-xs text-gray-500 normal-case">{{ original.call_id }}</code>
        {% endif %}
      </h2>
      {% if not original.exists %}
        <p class="text-sm text-gray-500 italic">No source LLM call (from-scratch experiment, or source row was deleted).</p>
      {% else %}
        <p class="text-xs text-gray-500 mb-3">
          {% if original.scan_id %}
            Scan <code class="font-mono">{{ original.scan_id }}</code> &middot;
          {% endif %}
          Model <code class="font-mono">{{ original.model }}</code>
        </p>
        {# T31 — chat-style render of the original LLM call dump.          #}
        {% set _orig_dump = {
          'system': original.system or '',
          'user': original.user or '',
          'response': original.response,
          'error': None,
          'metadata': {
            'prompt_name': original.prompt_name,
            'model': original.model,
          }
        } %}
        {% with chat_view_id='diff-original', inline_dump=_orig_dump %}
          {% include 'partials/llm_chat_view.html' %}
        {% endwith %}
      {% endif %}
    </section>

    {# --------- Experiment panel --------- #}
    <section class="diff-panel bg-white border border-gray-200 rounded-lg shadow-sm p-4" id="panel-experiment">
      <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-2">
        Experiment
        <code class="ml-2 font-mono text-xs text-gray-500 normal-case">{{ experiment.id }}</code>
      </h2>
      <p class="text-xs text-gray-500 mb-3">Model <code class="font-mono">{{ experiment.model }}</code></p>
      {% set _exp_dump = {
        'system': experiment.system or '',
        'user': experiment.user or '',
        'response': experiment.response,
        'error': experiment.error_message,
        'metadata': {
          'prompt_name': experiment.prompt_name,
          'model': experiment.model,
        }
      } %}
      {% with chat_view_id='diff-experiment', inline_dump=_exp_dump %}
        {% include 'partials/llm_chat_view.html' %}
      {% endwith %}
    </section>

  </div>

  <div class="text-sm text-gray-500 flex flex-wrap items-center gap-3">
    <a class="text-blue-600 hover:underline" href="/admin/sandbox/list">All experiments</a>
    {% if original.call_id %}
      <span class="text-gray-300">&middot;</span>
      <a class="text-blue-600 hover:underline" href="/admin/sandbox/from-call/{{ original.call_id }}">Re-edit from source</a>
    {% endif %}
    <span class="text-gray-300">&middot;</span>
    <a class="text-blue-600 hover:underline" href="/admin/dashboard">Admin dashboard</a>
  </div>

</div>
{% endblock %}