{# T29 scan debug page -- extends the T28 admin layout.                #}
{# Layout: scan header (always visible) + sticky tab bar + 5 panes.    #}
{# All panes are server-rendered; tiny inline JS toggles visibility on #}
{# click and rewrites the URL via ``history.replaceState`` so a deep   #}
{# link to ``?tab=llm`` survives a reload AND stays shareable.         #}
{% extends "admin_layout.html" %}

{% block page_title %}Scan {{ scan_id_short }}{% endblock %}

{% block breadcrumb %}
  <span class="text-gray-500">Admin</span>
  <span class="px-1.5 text-gray-300">/</span>
  <a href="/admin/scans" class="text-gray-500 hover:text-gray-700">Scans</a>
  <span class="px-1.5 text-gray-300">/</span>
  <span class="text-gray-900 font-medium">{{ scan_id_short }}</span>
{% endblock %}

{% block content %}

{# ------------------------------------------------------------------ #}
{# Status pill helper -- keeps the JSON-shape colour rules in one spot #}
{# rather than re-deriving on every badge.                             #}
{# ------------------------------------------------------------------ #}
{% set status_classes = {
  'ready':       'bg-green-100 text-green-800',
  'success':     'bg-green-100 text-green-800',
  'errored':     'bg-red-100 text-red-800',
  'error':       'bg-red-100 text-red-800',
  'cancelled':   'bg-gray-200 text-gray-700',
  'pending':     'bg-blue-100 text-blue-800',
} %}
{% set status_class = status_classes.get(status, 'bg-gray-100 text-gray-700') %}

{# ================== Scan header (above tabs) ================== #}
<header class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 mb-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div class="min-w-0">
      <h1 class="text-xl font-semibold text-gray-900 mb-1">
        Scan
        <code class="text-base font-mono text-gray-700">{{ scan_id }}</code>
      </h1>
      <div class="text-sm text-gray-600 flex flex-wrap items-center gap-x-3 gap-y-1">
        <span>Target: <code class="font-mono text-gray-800">{{ target_url }}</code></span>
        {% if is_admin and owner_email %}
          <span class="text-gray-400">&middot;</span>
          <span>Owner: <code class="font-mono text-gray-800">{{ owner_email }}</code></span>
        {% endif %}
      </div>
      <div class="text-sm text-gray-500 mt-1">
        Intent: <em>{{ intent_text or '(no intent recorded)' }}</em>
      </div>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ status_class }}">
        {{ status }}
      </span>
      {% if is_admin %}
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
          Viewing as admin
        </span>
      {% endif %}
      {% if deleted_at_display %}
        {# Keep the legacy "(deleted YYYY-MM-DD)" wording so existing #}
        {# soft-delete integration tests don't have to re-snapshot.   #}
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
          (deleted {{ deleted_at_display }})
        </span>
      {% endif %}
    </div>
  </div>
</header>

{# ================== Sticky tab bar ================== #}
{# ``top-14`` lines up with the admin layout's h-14 header so the tab #}
{# bar settles right beneath it when the content area scrolls.        #}
{% set tabs = [
  ('overview', 'Overview'),
  ('capture',  'Capture'),
  ('buckets',  'Buckets'),
  ('llm',      'LLM calls'),
  ('evals',    'Evals'),
  ('audit',    'Audit'),
] %}
<nav class="sticky top-0 z-10 bg-white border border-gray-200 rounded-lg shadow-sm mb-6 -mx-2 px-2 overflow-x-auto"
     aria-label="Scan debug tabs">
  <div class="flex items-center gap-1 min-w-max">
    {% for key, label in tabs %}
      {% set is_active = (active_tab == key) %}
      <a href="?tab={{ key }}"
         data-tab-link="{{ key }}"
         class="inline-flex items-center px-4 py-3 text-sm font-medium border-b-2 transition-colors
                {% if is_active %}border-blue-600 text-blue-600 font-semibold
                {% else %}border-transparent text-gray-600 hover:text-gray-900 hover:border-gray-300{% endif %}">
        {{ label }}
      </a>
    {% endfor %}
  </div>
</nav>

{# ================== Tab pane: Overview ================== #}
<section id="tab-overview"
         data-tab="overview"
         class="{% if active_tab != 'overview' %}hidden{% endif %} space-y-6">

  {# --- Synthesis summary (legacy heading kept for test snapshots) --- #}
  <div 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">Synthesis view</h2>
    {% if not synthesis_view %}
      <p class="text-sm text-gray-400 italic">No synthesis output persisted yet.</p>
    {% else %}
      {% if synthesis_view.report_id %}
        <p class="text-sm mb-4">
          <a href="/reports/{{ synthesis_view.report_id }}"
             class="text-blue-600 hover:text-blue-800 font-medium">
            Full report &rarr;
          </a>
        </p>
      {% endif %}
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
        <div>
          <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Verdict</h3>
          {% if synthesis_view.verdict %}
            <blockquote class="text-sm text-gray-800 border-l-4 border-blue-200 pl-3 py-1">
              {{ synthesis_view.verdict }}
            </blockquote>
          {% else %}
            <p class="text-sm text-gray-400 italic">(empty)</p>
          {% endif %}
        </div>
        <div>
          <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Primary recommendation</h3>
          <p class="text-sm text-gray-800">
            {{ synthesis_view.primary_recommendation or '(none)' }}
          </p>
        </div>
      </div>
      <details class="mt-4">
        <summary class="text-sm text-gray-600 cursor-pointer hover:text-gray-900">
          View recommendation JSON
        </summary>
        <pre class="bg-gray-100 p-4 rounded text-xs overflow-x-auto mt-2">{{ synthesis_view.recommendation | tojson(indent=2) }}</pre>
      </details>
      <details class="mt-2">
        <summary class="text-sm text-gray-600 cursor-pointer hover:text-gray-900">
          View starter_code JSON
        </summary>
        <pre class="bg-gray-100 p-4 rounded text-xs overflow-x-auto mt-2">{{ synthesis_view.starter_code | tojson(indent=2) }}</pre>
      </details>
    {% endif %}
  </div>

  {# --- Bucket distribution + Replay confidence --- #}
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div 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">Bucket distribution</h2>
      <div class="grid grid-cols-3 gap-3">
        <div class="bg-green-50 rounded-md p-4 text-center">
          <div class="text-xs text-green-700 uppercase font-medium tracking-wide">Bucket A</div>
          <div class="text-3xl font-bold text-green-900 mt-1 tabular-nums">{{ bucket_counts.A }}</div>
          <div class="text-[10px] text-green-700 mt-1">target endpoints</div>
        </div>
        <div class="bg-blue-50 rounded-md p-4 text-center">
          <div class="text-xs text-blue-700 uppercase font-medium tracking-wide">Bucket B</div>
          <div class="text-3xl font-bold text-blue-900 mt-1 tabular-nums">{{ bucket_counts.B }}</div>
          <div class="text-[10px] text-blue-700 mt-1">prerequisites</div>
        </div>
        <div class="bg-gray-100 rounded-md p-4 text-center">
          <div class="text-xs text-gray-700 uppercase font-medium tracking-wide">Bucket C</div>
          <div class="text-3xl font-bold text-gray-900 mt-1 tabular-nums">{{ bucket_counts.C }}</div>
          <div class="text-[10px] text-gray-700 mt-1">ignored</div>
        </div>
      </div>
    </div>

    <div 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">Replay confidence</h2>
      {% set replay = (synthesis_view.recommendation or {}).get('replay_confidence') if synthesis_view else None %}
      {% if replay is not none %}
        <div class="text-3xl font-bold text-gray-900 tabular-nums">
          {{ (replay * 100) | round(0, 'floor') | int }}%
        </div>
        <p class="text-sm text-gray-500 mt-1">model-estimated replay survivability</p>
      {% else %}
        <p class="text-sm text-gray-400 italic">No replay-confidence signal on this scan.</p>
      {% endif %}
    </div>
  </div>

  {% if is_super_admin %}
    {# T25: super_admin force-delete affordance. Kept on Overview so the    #}
    {# action is one click away when an admin is reviewing a soft-deleted   #}
    {# scan; the JS handler lower in the file fires the DELETE.             #}
    <div id="hard-delete-affordance"
         class="bg-white border border-red-300 rounded-lg shadow-sm p-6">
      <h2 class="text-sm font-semibold text-red-700 uppercase tracking-wide mb-2">
        Force hard-delete (super_admin)
      </h2>
      <p class="text-sm text-gray-600 mb-3">
        Skips the 30-day grace and wipes the scan + LLM-call rows + S3 objects
        immediately. Audit log entries for this scan are anonymized so the
        compliance trail survives. <strong>This cannot be undone.</strong>
      </p>
      <button type="button"
              id="hard-delete-btn"
              data-scan-id="{{ scan_id }}"
              class="inline-flex items-center px-3 py-1.5 text-sm font-medium bg-red-600 text-white rounded hover:bg-red-700">
        Hard delete now
      </button>
      <span id="hard-delete-status" class="text-sm text-gray-500 ml-2"></span>
    </div>
  {% endif %}
</section>

{# ================== Tab pane: Capture ================== #}
<section id="tab-capture"
         data-tab="capture"
         class="{% if active_tab != 'capture' %}hidden{% endif %} space-y-6">

  {# --- Re-run controls (moved here from the old synthesis section) --- #}
  <div class="bg-white border border-gray-200 rounded-lg shadow-sm p-6"
       id="rerun-stage-controls"
       data-scan-id="{{ scan_id }}">
    <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">Re-run</h2>
    <div class="flex flex-wrap items-center gap-2">
      <button type="button"
              class="rerun-stage-btn inline-flex items-center px-3 py-1.5 text-sm font-medium bg-gray-100 text-gray-800 border border-gray-300 rounded hover:bg-gray-200"
              data-stage="filter">
        Re-run filter
      </button>
      <button type="button"
              class="rerun-stage-btn inline-flex items-center px-3 py-1.5 text-sm font-medium bg-gray-100 text-gray-800 border border-gray-300 rounded hover:bg-gray-200"
              data-stage="synthesis">
        Re-run synthesis
      </button>
      <button type="button"
              class="rerun-stage-btn inline-flex items-center px-3 py-1.5 text-sm font-medium bg-red-600 text-white rounded hover:bg-red-700"
              data-stage="full">
        Re-run full scan
      </button>
      <span id="rerun-stage-status" class="text-sm text-gray-500"></span>
    </div>
    <p class="text-xs text-gray-500 mt-2">
      Filter + synthesis are free; full re-run mints a new scan + costs 1 credit.
    </p>
  </div>

  {# --- Action timeline (legacy heading "Capture timeline" kept) --- #}
  <div 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">Capture timeline</h2>
    {% if not timeline %}
      <p class="text-sm text-gray-400 italic">No segmented actions persisted for this scan.</p>
    {% else %}
      <div class="space-y-4">
        {% for action in timeline %}
          <div class="border-l-4 border-blue-300 pl-4 py-2">
            <div class="text-sm font-semibold text-gray-900">
              {{ loop.index }}. {{ action.label or '(unlabelled click)' }}
              {% if action.started_at %}
                <span class="text-xs text-gray-500 font-normal">
                  &middot; t={{ '%.2f'|format(action.started_at) }}s
                </span>
              {% endif %}
            </div>
            {% if action.click_target %}
              <div class="text-xs text-gray-500 mt-0.5">
                {{ action.click_target.tag or '?' }}
                {%- if action.click_target.text %} &middot; "{{ action.click_target.text }}"{% endif %}
              </div>
            {% endif %}
            {% if action.requests %}
              <div class="mt-2 space-y-1.5">
                {% for req in action.requests %}
                  <div class="border border-gray-200 rounded px-3 py-2 text-sm">
                    <div class="flex items-start gap-2 flex-wrap">
                      <span class="inline-flex items-center justify-center w-6 h-5 rounded-full text-[10px] font-bold
                          {% if req.bucket == 'A' %}bg-green-600 text-white
                          {% elif req.bucket == 'B' %}bg-blue-600 text-white
                          {% elif req.bucket == 'C' %}bg-gray-500 text-white
                          {% else %}bg-gray-200 text-gray-600{% endif %}">
                        {{ req.bucket }}
                      </span>
                      <strong class="text-gray-800">{{ req.method }}</strong>
                      <code class="text-xs font-mono text-gray-700 break-all flex-1 min-w-0">{{ req.url }}</code>
                    </div>
                    {% if req.response_summary %}
                      <details class="mt-2">
                        <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-700">
                          response summary
                        </summary>
                        <pre class="bg-gray-100 p-3 rounded text-xs mt-1 whitespace-pre-wrap">{{ req.response_summary }}</pre>
                      </details>
                    {% endif %}
                  </div>
                {% endfor %}
              </div>
            {% else %}
              <div class="text-xs text-gray-400 italic mt-1">(no requests captured in this action)</div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>
</section>

{# ================== Tab pane: Buckets ================== #}
<section id="tab-buckets"
         data-tab="buckets"
         class="{% if active_tab != 'buckets' %}hidden{% endif %} space-y-6">
  <div 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">Bucket explainer</h2>
    {% if not bucket_explainer %}
      <p class="text-sm text-gray-400 italic">
        No bucket assignment persisted (filter did not run, or legacy scan).
      </p>
    {% else %}
      {# Group by bucket: A first, then B, then C, then '-' #}
      {% set bucket_order = ['A', 'B', 'C', '-'] %}
      {% for bucket_label in bucket_order %}
        {% set group = bucket_explainer | selectattr('bucket', 'equalto', bucket_label) | list %}
        {% if group %}
          <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mt-4 mb-2">
            Bucket {{ bucket_label }} <span class="text-gray-400 font-normal normal-case">({{ group | length }})</span>
          </h3>
          <div class="space-y-2">
            {% for ep in group %}
              <details class="border border-gray-200 rounded">
                <summary class="cursor-pointer px-3 py-2 flex items-center gap-2 flex-wrap text-sm hover:bg-gray-50">
                  <span class="inline-flex items-center justify-center w-6 h-5 rounded-full text-[10px] font-bold
                      {% if ep.bucket == 'A' %}bg-green-600 text-white
                      {% elif ep.bucket == 'B' %}bg-blue-600 text-white
                      {% elif ep.bucket == 'C' %}bg-gray-500 text-white
                      {% else %}bg-gray-200 text-gray-600{% endif %}">
                    {{ ep.bucket }}
                  </span>
                  <strong class="text-gray-800">{{ ep.method }}</strong>
                  <code class="text-xs font-mono text-gray-700 break-all flex-1 min-w-0">{{ ep.url_template }}</code>
                </summary>
                <div class="px-4 py-3 border-t border-gray-200 bg-gray-50">
                  <h4 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Bucket signals</h4>
                  {% if ep.signals %}
                    <dl class="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm">
                      {% for k, v in ep.signals.items() %}
                        <dt class="text-gray-600 font-medium">{{ k }}</dt>
                        <dd class="text-gray-800 break-all">{{ v }}</dd>
                      {% endfor %}
                    </dl>
                  {% else %}
                    <p class="text-xs text-gray-400 italic">No signals captured.</p>
                  {% endif %}
                  {% if ep.rationale %}
                    <h4 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mt-3 mb-1">Filter rationale</h4>
                    <blockquote class="text-sm text-gray-700 border-l-2 border-gray-300 pl-3">
                      {{ ep.rationale }}
                    </blockquote>
                  {% endif %}
                </div>
              </details>
            {% endfor %}
          </div>
        {% endif %}
      {% endfor %}
    {% endif %}
  </div>
</section>

{# ================== Tab pane: LLM calls ================== #}
<section id="tab-llm"
         data-tab="llm"
         class="{% if active_tab != 'llm' %}hidden{% endif %} space-y-6">
  <div 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">LLM call ledger</h2>
    {% if not llm_ledger %}
      <p class="text-sm text-gray-400 italic">No LLM calls recorded for this scan.</p>
    {% else %}
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
          <thead>
            <tr>
              <th class="text-left font-medium text-gray-500 py-2 pr-3 whitespace-nowrap">When</th>
              <th class="text-left font-medium text-gray-500 py-2 px-3">Prompt</th>
              <th class="text-left font-medium text-gray-500 py-2 px-3">Model</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3 whitespace-nowrap">in / out / cache</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">Cost</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">Latency</th>
              <th class="text-left font-medium text-gray-500 py-2 px-3">Status</th>
              <th class="text-left font-medium text-gray-500 py-2 pl-3">Dump</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for call in llm_ledger %}
              <tr class="even:bg-gray-50 align-top">
                <td class="py-2 pr-3 text-xs text-gray-500 whitespace-nowrap">{{ call.created_at }}</td>
                <td class="py-2 px-3 text-gray-800">
                  <code class="text-xs">{{ call.prompt_name }}</code>
                  <div class="text-xs text-gray-500">v{{ call.prompt_version }}</div>
                </td>
                <td class="py-2 px-3 text-xs text-gray-600">{{ call.model }}</td>
                <td class="py-2 px-3 text-right text-xs text-gray-700 tabular-nums whitespace-nowrap">
                  {{ call.input_tokens }} / {{ call.output_tokens }} /
                  {{ call.cache_read_tokens or 0 }}r+{{ call.cache_write_tokens or 0 }}w
                </td>
                <td class="py-2 px-3 text-right text-gray-800 tabular-nums">${{ '%.6f'|format(call.cost_usd) }}</td>
                <td class="py-2 px-3 text-right text-xs text-gray-600 tabular-nums">{{ call.latency_ms }}ms</td>
                <td class="py-2 px-3 text-xs">
                  {% if call.error_class %}
                    <span class="text-red-600 font-medium">{{ call.error_class }}</span>
                    {% if call.error_message %}
                      <div class="text-gray-500">{{ call.error_message }}</div>
                    {% endif %}
                  {% else %}
                    <span class="text-green-700">ok</span>{% if call.retry_count %} (&times;{{ call.retry_count }}){% endif %}
                  {% endif %}
                </td>
                <td class="py-2 pl-3">
                  <div class="flex flex-col gap-1">
                    <button type="button"
                            class="inline-flex items-center px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 border border-gray-300 rounded hover:bg-gray-200"
                            data-call-id="{{ call.id }}"
                            data-scan-id="{{ scan_id }}"
                            onclick="loadDump(this)">
                      Load prompt + response
                    </button>
                    {% if is_admin %}
                      <a class="inline-flex items-center px-2 py-1 text-xs font-medium bg-white text-gray-700 border border-gray-300 rounded hover:bg-gray-50"
                         href="/admin/sandbox/from-call/{{ call.id }}">
                        Sandbox
                      </a>
                    {% endif %}
                  </div>
                </td>
              </tr>
              {# T32 -- full-width expand row. Hidden until the user clicks #}
              {# the "Load prompt + response" button on the main row above. #}
              {# The chat view lives in a single ``<td colspan="8">`` so it #}
              {# spans the entire ledger width rather than being squeezed   #}
              {# into the narrow Dump column. ``data-expand-row-for`` keys  #}
              {# the row to its parent call.id for the toggle handler.     #}
              <tr class="hidden" data-expand-row-for="{{ call.id }}">
                <td colspan="8" class="bg-gray-50 p-6 overflow-hidden">
                  <div class="min-w-0 max-w-full">
                    <div class="max-h-[70vh] overflow-y-auto">
                      {% with chat_view_id='call-' ~ call.id,
                              dump_url='/debug/scans/' ~ scan_id ~ '/llm-calls/' ~ call.id ~ '/dump' %}
                        {% include 'partials/llm_chat_view.html' %}
                      {% endwith %}
                    </div>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </div>
</section>

{# ================== Tab pane: Evals (T48) ================== #}
<section id="tab-evals"
         data-tab="evals"
         class="{% if active_tab != 'evals' %}hidden{% endif %} space-y-6">
  {% include 'partials/evals_matrix.html' %}

  {# T48.1: shared eval-new modal. fixed-scan mode -- scan_id is the #}
  {# page's scan_id, picker hidden. Included exactly once even though #}
  {# the debug page has multiple tabs, because the partial defines a  #}
  {# fixed-id element (``#eval-new-modal``) and double-include would  #}
  {# break the DOM-id uniqueness contract.                             #}
  {% with mode='fixed-scan', fixed_scan_id=scan_id %}
    {% include 'partials/eval_new_modal.html' %}
  {% endwith %}
</section>

{# ================== Tab pane: Audit ================== #}
<section id="tab-audit"
         data-tab="audit"
         class="{% if active_tab != 'audit' %}hidden{% endif %} space-y-6">
  <div 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">Audit log</h2>
    {% if not audit_entries %}
      <p class="text-sm text-gray-400 italic">No audit entries recorded for this scan.</p>
    {% else %}
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
          <thead>
            <tr>
              <th class="text-left font-medium text-gray-500 py-2 pr-3 whitespace-nowrap">Timestamp</th>
              <th class="text-left font-medium text-gray-500 py-2 px-3">Actor</th>
              <th class="text-left font-medium text-gray-500 py-2 px-3">Action</th>
              <th class="text-left font-medium text-gray-500 py-2 pl-3">Metadata</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for entry in audit_entries %}
              <tr class="even:bg-gray-50 align-top">
                <td class="py-2 pr-3 text-xs text-gray-500 whitespace-nowrap">{{ entry.timestamp }}</td>
                <td class="py-2 px-3 text-xs text-gray-700"><code>{{ entry.actor_email }}</code></td>
                <td class="py-2 px-3">
                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-700">
                    {{ entry.action }}
                  </span>
                </td>
                <td class="py-2 pl-3 text-xs">
                  {% if entry.metadata %}
                    <code class="text-gray-700">{{ entry.metadata | tojson }}</code>
                  {% else %}
                    <span class="text-gray-400 italic">&mdash;</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </div>
</section>

{% endblock %}

{% block scripts %}
<script>
// T29: tab switcher. Server renders all five panes; we just toggle the
// ``hidden`` class on click + update the URL so a reload (or share)
// preserves the active tab.
(function(){
  const links = document.querySelectorAll('[data-tab-link]');
  const panes = document.querySelectorAll('[data-tab]');
  function activate(tab) {
    panes.forEach(function(p){
      p.classList.toggle('hidden', p.dataset.tab !== tab);
    });
    links.forEach(function(l){
      const on = l.dataset.tabLink === tab;
      l.classList.toggle('border-blue-600', on);
      l.classList.toggle('text-blue-600', on);
      l.classList.toggle('font-semibold', on);
      l.classList.toggle('border-transparent', !on);
      l.classList.toggle('text-gray-600', !on);
    });
    try {
      const url = new URL(window.location);
      url.searchParams.set('tab', tab);
      window.history.replaceState({}, '', url);
    } catch (e) { /* IE / sandboxed iframes */ }
  }
  links.forEach(function(link){
    link.addEventListener('click', function(e){
      e.preventDefault();
      activate(link.dataset.tabLink);
    });
  });
})();

// T25: super_admin force-delete handler. Confirms via a modal-style
// window.confirm (good enough for a one-off destructive button; a
// richer modal can land later if the UX needs it). Posts DELETE to
// the hard-delete endpoint with ``?force=true`` and reloads the
// dashboard on success (the scan row is gone -- the debug page itself
// would 404 on reload).
(function(){
  const btn = document.getElementById('hard-delete-btn');
  if (!btn) return;
  btn.addEventListener('click', async function(){
    const scanId = btn.dataset.scanId;
    const msg = 'IRREVERSIBLE: This will permanently wipe scan ' + scanId +
                ' and every LLM call + S3 object attached to it. ' +
                'Audit log entries will be anonymized. Continue?';
    if (!window.confirm(msg)) return;
    const statusEl = document.getElementById('hard-delete-status');
    btn.disabled = true;
    statusEl.textContent = ' Deleting...';
    try {
      const url = '/scans/' + encodeURIComponent(scanId) + '/hard-delete?force=true';
      const csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
      const resp = await fetch(url, {
        method: 'DELETE',
        credentials: 'same-origin',
        headers: {'X-CSRF-Token': csrf},
      });
      if (resp.ok) {
        statusEl.textContent = ' Deleted. Redirecting...';
        window.location.href = '/dashboard';
      } else {
        const body = await resp.text();
        statusEl.textContent = ' Error ' + resp.status + ': ' + body;
        btn.disabled = false;
      }
    } catch (err) {
      statusEl.textContent = ' Network error: ' + err;
      btn.disabled = false;
    }
  });
})();

// T21 + T31 + T32: lazy-load + chat-style render of the S3 prompt+
// response dump for one LLM call. T32 moved the chat view into a
// second ``<tr data-expand-row-for>`` that spans the full ledger
// width via ``colspan="8"`` instead of nesting inside the narrow
// Dump column. First click un-hides the expand row + calls
// ``window.llmChatFetch`` (defined in /static/llm_chat_view.js);
// subsequent clicks just toggle the row's ``hidden`` class.
function loadDump(button) {
  const callId = button.dataset.callId;
  const row = document.querySelector('[data-expand-row-for="' + callId + '"]');
  if (!row) return;
  const isHidden = row.classList.contains('hidden');
  if (!isHidden) {
    row.classList.add('hidden');
    button.textContent = 'Load prompt + response';
    return;
  }
  row.classList.remove('hidden');
  if (row.dataset.loaded !== 'true') {
    const chatView = row.querySelector('.llm-chat-view');
    if (chatView && typeof window.llmChatFetch === 'function') {
      window.llmChatFetch(chatView);
    }
    row.dataset.loaded = 'true';
  }
  button.textContent = 'Hide';
}

// T24: stage-level re-run dispatcher. The three buttons share one
// handler; ``data-stage`` picks the stage. ``full`` shows a confirm
// dialog (it costs 1 credit + mints a new scan) and on success
// redirects the browser to /debug/scans/<new_scan_id>. ``filter`` /
// ``synthesis`` are free and reload the current page so the user
// sees the freshly-regenerated synthesis surface.
(function(){
  const controls = document.getElementById('rerun-stage-controls');
  if (!controls) return;
  const scanId = controls.dataset.scanId;
  const statusEl = document.getElementById('rerun-stage-status');
  const btns = controls.querySelectorAll('.rerun-stage-btn');
  btns.forEach(function(btn){
    btn.addEventListener('click', async function(){
      const stage = btn.dataset.stage;
      if (stage === 'full') {
        const msg = 'This creates a new scan and charges 1 credit. Continue?';
        if (!window.confirm(msg)) return;
      }
      btns.forEach(function(b){ b.disabled = true; });
      statusEl.textContent = ' Re-running ' + stage + '...';
      try {
        const csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
        const resp = await fetch(
          '/scans/' + encodeURIComponent(scanId) + '/rerun-stage',
          {
            method: 'POST',
            credentials: 'same-origin',
            headers: {
              'Content-Type': 'application/json',
              'X-CSRF-Token': csrf
            },
            body: JSON.stringify({stage: stage}),
          }
        );
        if (!resp.ok) {
          const body = await resp.text();
          statusEl.textContent = ' Error ' + resp.status + ': ' + body;
          btns.forEach(function(b){ b.disabled = false; });
          return;
        }
        const data = await resp.json();
        if (data.new_scan_id) {
          statusEl.textContent = ' OK -- redirecting to new scan...';
          window.location.href = '/debug/scans/' + encodeURIComponent(data.new_scan_id);
        } else {
          statusEl.textContent =
            ' OK (' + (data.rerun_count || 0) + '/' +
            (data.rerun_count_cap || 0) + ' re-runs used). Reloading...';
          window.location.reload();
        }
      } catch (err) {
        statusEl.textContent = ' Network error: ' + err;
        btns.forEach(function(b){ b.disabled = false; });
      }
    });
  });
})();
</script>
{% endblock %}