{# T55 sandbox editor — terminal-brutalist re-skin.                       #}
{# system + user prompt textareas + model dropdown + run button.          #}
{% extends "admin_layout.html" %}

{% block page_title %}admin :: sandbox :: {{ prompt_name }}{% endblock %}

{% block breadcrumb %}
  <a href="/admin/dashboard">admin</a><span class="sep">/</span>
  <a href="/admin/sandbox/list">experiments</a><span class="sep">/</span>
  <span class="here">{{ prompt_name }}</span>
{% endblock %}

{% block content %}
<div class="t55-eyebrow">08.1 — prompt sandbox</div>
<h1 class="t55-h1">Tune the prompt. <span class="em">{{ prompt_name }}</span></h1>
<p class="t55-lede">Edit either prompt, pick a model, then <code>[run experiment]</code>. This never overwrites the original call — a fresh <code>llm_experiments</code> row is created. Cost is billed to your admin account (see the daily cap on <a href="/admin/sandbox/list" style="color: var(--accent);">/admin/sandbox/list</a>).</p>

{# ===================== Source meta ===================== #}
<section class="t55-card">
  <div class="t55-card-head"><span class="t55-card-title">source</span></div>
  <div style="display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 12px;">
    <div><span class="t55-label" style="display: inline; margin-right: 8px;">source call</span><code>{{ source_call_id }}</code></div>
    {% if scan_id %}
      <div><span class="t55-label" style="display: inline; margin-right: 8px;">scan</span><code>{{ scan_id }}</code></div>
    {% endif %}
    <div><span class="t55-label" style="display: inline; margin-right: 8px;">prompt</span><code>{{ prompt_name }}</code></div>
  </div>
</section>

{# T36.4 — empty-state notice when the source dump is missing/malformed. #}
{% if not source_dump_available %}
  <section class="t55-card warn">
    <div class="t55-card-head"><span class="t55-card-title" style="color: var(--warn);">[!] source dump unavailable</span></div>
    <p style="color: var(--ink-2); font-size: 12px;">
      The dump format predates the current schema, or the S3 object was deleted. You can still type fresh prompts manually below.
    </p>
  </section>
{% endif %}

{# ===================== Form ===================== #}
<section class="t55-card">
  <div class="t55-card-head"><span class="t55-card-title">editor</span></div>
  <form id="sandbox-form">
    <div class="t55-grid-2" style="margin-bottom: 16px;">
      <div class="t55-field">
        <label class="t55-label" for="prompt-name">prompt name</label>
        <input type="text" id="prompt-name" name="prompt_name" value="{{ prompt_name }}" class="t55-input">
      </div>
      <div class="t55-field">
        <label class="t55-label" for="model">model</label>
        <select id="model" name="model" class="t55-select">
          {% for choice in model_choices %}
            <option value="{{ choice }}"{% if choice == model %} selected{% endif %}>{{ choice }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="t55-field" style="margin-bottom: 16px;">
      <label class="t55-label" for="system-prompt">system prompt</label>
      <textarea id="system-prompt" name="system_prompt" class="t55-textarea">{{ system_prompt }}</textarea>
    </div>

    <div class="t55-field" style="margin-bottom: 16px;">
      <label class="t55-label" for="user-prompt">user prompt</label>
      <textarea id="user-prompt" name="user_prompt" class="t55-textarea">{{ user_prompt }}</textarea>
    </div>

    <div style="display: flex; align-items: center; gap: 12px;">
      <button type="button" id="run-btn" class="t55-btn primary">run experiment</button>
      <span id="run-status" style="font-family: var(--mono); font-size: 11px; color: var(--ink-3);"></span>
    </div>
  </form>
</section>

{# T36.3 — original response as a chat bubble. #}
<section class="t55-card">
  <div class="t55-card-head"><span class="t55-card-title">original response</span></div>
  {% with chat_view_id='original-response-' ~ source_call_id, inline_dump=original_dump_json %}
    {% include 'partials/llm_chat_view.html' %}
  {% endwith %}
</section>

<div style="font-size: 11px; color: var(--ink-3); margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap;">
  <a href="/admin/sandbox/list" style="color: var(--accent);">all experiments</a>
  <span style="color: var(--ink-4);">&middot;</span>
  <a href="/admin/dashboard" style="color: var(--accent);">admin dashboard</a>
  {% if scan_id %}
    <span style="color: var(--ink-4);">&middot;</span>
    <a href="/debug/scans/{{ scan_id }}" style="color: var(--accent);">source debug page</a>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
(function(){
  // T36.1 — POSTs JSON to /admin/sandbox/run with CSRF from the layout's
  // <meta>. On success it redirects to the freshly-created experiment.
  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.style.color = 'var(--ink-2)';
    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.style.color = 'var(--danger)';
        statusEl.textContent = 'daily cap reached: $' + data.today_usd + ' / $' + data.limit_usd;
        btn.disabled = false;
        return;
      }
      if (!resp.ok) {
        statusEl.style.color = 'var(--danger)';
        statusEl.textContent = 'error ' + resp.status + ': ' + (data.detail || JSON.stringify(data));
        btn.disabled = false;
        return;
      }
      statusEl.style.color = 'var(--ok)';
      statusEl.textContent = 'created ' + data.experiment_id + ' (' + data.status + '). redirecting...';
      window.location.href = '/admin/sandbox/' + encodeURIComponent(data.experiment_id);
    } catch (err) {
      statusEl.style.color = 'var(--danger)';
      statusEl.textContent = 'network error: ' + err;
      btn.disabled = false;
    }
  });
})();
</script>
{% endblock %}