{% extends "base.html" %}
{% block title %}Tuning · {{ project.name }}{% endblock %}
{% block body %}
{% set active_tab = 'tuning' %}
{% include '_project_tabs.html' %}

{% if not files %}
  <div class="card"><div class="empty"><div class="big">📄</div>No tuning files yet.
    <a href="{{ url_for('run_page', name=project.name) }}">Run CTT</a> to generate them.</div></div>
{% else %}
<div x-data='resultsApp({ project: {{ project.name|tojson }}, targets: {{ files.keys()|list|tojson }}, runs: {{ runs|tojson }}, showJson: true })' x-init="init()">
  <!-- Tuning files -->
  <div class="card">
    <div class="card-head">
      <h2>Tuning files</h2>
      <div class="seg">
        <template x-for="t in targets" :key="t">
          <button type="button" :class="{active: target===t}" @click="select(t)" x-text="t.toUpperCase()"></button>
        </template>
      </div>
    </div>
    <div class="muted" x-show="runLabel()" x-cloak>Generated <span x-text="runLabel()"></span></div>
    <div class="banner info mt" x-show="runsMismatch()" x-cloak>⚠ PiSP and VC4 were generated at different times — re-run to refresh both.</div>
    <div class="btn-row">
      <a class="btn primary" :href="'/projects/{{ project.name }}/download/json/'+target">⬇ Download JSON</a>
      <a class="btn" x-show="variantId != null" x-cloak
         :href="'/projects/{{ project.name }}/download/custom/'+target+'?variant='+variantId">⬇ Download custom JSON</a>
      <a class="btn" :href="'/projects/{{ project.name }}/download/log/'+target">⬇ Download log</a>
      <a class="btn ghost" href="{{ url_for('download_archive', name=project.name) }}">⬇ Download project (.zip)</a>
    </div>
  </div>

  <!-- File contents (follows the PiSP/VC4 selection above) -->
  <div class="card mt">
    <div class="card-head">
      <h2>File contents</h2>
      <div style="display:flex; gap:10px; align-items:center" x-show="!editing">
        <select @change="selectTuning($event.target.value)" :disabled="editing"
                title="Show the tuned file, the camera's system (built-in) tuning, or a saved custom tuning">
          <option value="original" :selected="tuningSel === 'original'">Tuned</option>
          <option value="existing" :selected="tuningSel === 'existing'" x-show="tuningState.existing">System</option>
          <template x-for="v in tuningState.variants" :key="v.id">
            <option :value="v.id" :selected="tuningSel === v.id"
                    x-text="(v.stale ? '⚠ ' : '') + v.label"></option>
          </template>
        </select>
        <button type="button" class="btn sm" @click="startEdit()" x-text="variantId == null ? '✎ Edit (save as new)' : '✎ Edit'"></button>
        <button type="button" class="btn sm" x-show="variantId != null" x-cloak @click="copyVariant()">⧉ Copy</button>
        <button type="button" class="btn sm ghost" x-show="variantId != null" x-cloak @click="removeVariant()">🗑 Remove</button>
      </div>
    </div>
    <div class="banner error mt" x-show="tuningError" x-text="tuningError" x-cloak></div>
    <template x-if="!editing">
      {# x-html is safe here: highlightJson escapes the text before adding its own spans #}
      <pre class="json-view" x-html="tuningHtml || 'Loading…'"></pre>
    </template>
    <template x-if="editing">
      <div>
        <textarea class="json-edit" x-model="editorText" spellcheck="false"></textarea>
        <div class="btn-row mt">
          <button type="button" class="btn primary" x-show="variantId != null" x-cloak @click="saveEdit()">Save changes</button>
          <button type="button" class="btn" @click="saveAsNew()">Save as new custom tuning…</button>
          <button type="button" class="btn ghost" @click="editing=false; tuningError=''">Cancel</button>
        </div>
        <p class="hint">Custom tunings are saved alongside the generated original (which is never modified) and can be
          previewed live from the Preview tab. They persist when CTT regenerates this target, but are flagged
          <b>⚠ stale</b> once the original has been re-tuned since they were last saved.</p>
      </div>
    </template>
  </div>

  <!-- Diff of the custom edits against the Tuned file (only for a saved variant) -->
  <div class="card mt" x-show="variantId != null && tuningState.diff" x-cloak>
    <div class="card-head">
      <h2>Custom edits diff</h2>
      <span class="muted" x-text="target.toUpperCase()"></span>
    </div>
    <pre class="diff-view" x-html="diffHtml"></pre>
    <p class="hint">Unified diff of the custom file against the generated original.</p>
  </div>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='vendor/alpine.min.js') }}" defer></script>
{% endblock %}