{# T36.1 — sandbox editor under the T28 admin layout.                     #}
{# Was a standalone cream-themed page with the old green admin banner;    #}
{# now extends ``admin_layout.html`` so the sidebar nav, header brand,    #}
{# role chip, and Tailwind CDN come from the layout — and "Experiments"   #}
{# lights up while you're on any ``/admin/sandbox/*`` path.               #}
{% extends "admin_layout.html" %}

{% block page_title %}Sandbox · {{ prompt_name }}{% endblock %}

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

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

  {# ===================== Header card ===================== #}
  <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">Prompt sandbox</h1>
    <div class="text-sm text-gray-600 space-y-1">
      <div>
        Source call:
        <code class="font-mono text-xs text-gray-800 bg-gray-100 px-1.5 py-0.5 rounded">{{ source_call_id }}</code>
        {% if scan_id %}
          &middot; scan
          <code class="font-mono text-xs text-gray-800 bg-gray-100 px-1.5 py-0.5 rounded">{{ scan_id }}</code>
        {% endif %}
        &middot; prompt
        <code class="font-mono text-xs text-gray-800 bg-gray-100 px-1.5 py-0.5 rounded">{{ prompt_name }}</code>
      </div>
      <p class="text-gray-500">
        Edit either prompt, pick a model, then click <em>Run experiment</em>.
        This NEVER overwrites the original LLM call &mdash; a new
        <code class="font-mono text-xs">llm_experiments</code> row is created instead.
        Cost is billed to your admin account
        (cap: see <a class="text-blue-600 hover:underline" href="/admin/sandbox/list">/admin/sandbox/list</a>).
      </p>
    </div>
  </section>

  {# T36.4 — empty-state notice when the source dump is missing/malformed. #}
  {# The textareas stay editable; the admin can type fresh prompts.        #}
  {% if not source_dump_available %}
    <section class="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-900">
      <div class="font-medium mb-1">&#9888; Source dump unavailable for this call.</div>
      <div class="text-amber-800">
        This usually means the dump format predates the current schema, or
        the S3 object has been deleted. You can still type fresh prompts
        manually below.
      </div>
    </section>
  {% endif %}

  {# ===================== Form card ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
    <form id="sandbox-form" class="space-y-4">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="flex flex-col">
          <label for="prompt-name" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Prompt name</label>
          <input type="text" id="prompt-name" name="prompt_name" value="{{ prompt_name }}"
                 class="px-3 py-2 text-sm border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
        </div>
        <div class="flex flex-col">
          <label for="model" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Model</label>
          <select id="model" name="model"
                  class="px-3 py-2 text-sm border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500">
            {% for choice in model_choices %}
              <option value="{{ choice }}"{% if choice == model %} selected{% endif %}>{{ choice }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="flex flex-col">
        <label for="system-prompt" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">System prompt</label>
        <textarea id="system-prompt" name="system_prompt"
                  class="px-3 py-2 text-sm font-mono border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500 min-h-[220px] resize-y">{{ system_prompt }}</textarea>
      </div>

      <div class="flex flex-col">
        <label for="user-prompt" class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">User prompt</label>
        <textarea id="user-prompt" name="user_prompt"
                  class="px-3 py-2 text-sm font-mono border border-gray-300 rounded focus:border-blue-500 focus:ring-1 focus:ring-blue-500 min-h-[220px] resize-y">{{ user_prompt }}</textarea>
      </div>

      <div class="flex items-center gap-3">
        <button type="button" id="run-btn"
                class="px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded hover:bg-blue-700">
          Run experiment
        </button>
        <span id="run-status" class="text-sm font-mono"></span>
      </div>
    </form>
  </section>

  {# T36.3 — original response as a chat bubble (was a raw <pre> dump).    #}
  {# We feed the FULL source dump dict into the partial via inline_dump    #}
  {# so the system + user + response render together. The partial gates   #}
  {# on each field being present, so the missing-dump case (where         #}
  {# ``original_dump_json`` is ``{}``) collapses to the partial's empty    #}
  {# "No content." state.                                                  #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6">
    <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">Original response</h2>
    {% with chat_view_id='original-response-' ~ source_call_id, inline_dump=original_dump_json %}
      {% include 'partials/llm_chat_view.html' %}
    {% endwith %}
  </section>

  {# ===================== Footer links ===================== #}
  <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>
    <span class="text-gray-300">&middot;</span>
    <a class="text-blue-600 hover:underline" href="/admin/dashboard">Admin dashboard</a>
    {% if scan_id %}
      <span class="text-gray-300">&middot;</span>
      <a class="text-blue-600 hover:underline" href="/debug/scans/{{ scan_id }}">Source debug page</a>
    {% endif %}
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
(function(){
  // T36.1 — preserved verbatim from the pre-migration template. The form
  // submit handler POSTs JSON to /admin/sandbox/run with the CSRF token
  // pulled from the layout's <meta>. On success it redirects to the
  // freshly-created experiment's diff view.
  const btn = document.getElementById('run-btn');
  const statusEl = document.getElementById('run-status');
  const sourceCallId = {{ source_call_id | tojson }};
  btn.addEventListener('click', async function(){
    btn.disabled = true;
    statusEl.className = 'text-sm font-mono text-gray-600';
    statusEl.textContent = 'Running...';
    const csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
    const body = {
      source_llm_call_id: sourceCallId,
      prompt_name: document.getElementById('prompt-name').value,
      model: document.getElementById('model').value,
      system_prompt: document.getElementById('system-prompt').value,
      user_prompt: document.getElementById('user-prompt').value,
    };
    try {
      const resp = await fetch('/admin/sandbox/run', {
        method: 'POST',
        credentials: 'same-origin',
        headers: {'Content-Type': 'application/json', 'X-CSRF-Token': csrf},
        body: JSON.stringify(body),
      });
      const data = await resp.json();
      if (resp.status === 429) {
        statusEl.className = 'text-sm font-mono text-red-600';
        statusEl.textContent = 'Daily cap reached: $' + data.today_usd + ' / $' + data.limit_usd;
        btn.disabled = false;
        return;
      }
      if (!resp.ok) {
        statusEl.className = 'text-sm font-mono text-red-600';
        statusEl.textContent = 'Error ' + resp.status + ': ' + (data.detail || JSON.stringify(data));
        btn.disabled = false;
        return;
      }
      statusEl.className = 'text-sm font-mono text-green-700';
      statusEl.textContent = 'Created ' + data.experiment_id + ' (' + data.status + '). Redirecting...';
      window.location.href = '/admin/sandbox/' + encodeURIComponent(data.experiment_id);
    } catch (err) {
      statusEl.className = 'text-sm font-mono text-red-600';
      statusEl.textContent = 'Network error: ' + err;
      btn.disabled = false;
    }
  });
})();
</script>
{% endblock %}