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

<div x-data='resultsApp({ project: {{ project.name|tojson }}, targets: {{ files.keys()|list|tojson }}, runs: {{ runs|tojson }}, customs: {{ customs|tojson }}, hasTuning: {{ (files|length > 0)|tojson }}, autoPreview: true })' x-init="init()">
  <!-- Live preview test -->
  <div class="card">
    <div class="card-head">
      <h2>Live preview test</h2>
      <div class="seg" x-show="testing" x-cloak>
        <button type="button" :class="{active: testKind==='generated'}" @click="startPreviewTest()" :disabled="busy"
                x-show="hasTuning" x-cloak>Tuned</button>
        <button type="button" :class="{active: testKind==='custom'}" @click="startPreviewTest('custom')" :disabled="busy"
                x-show="customs[testTarget]" x-cloak>Custom</button>
        <button type="button" :class="{active: testKind==='standard'}" @click="previewStandard()" :disabled="busy">Existing</button>
      </div>
    </div>
    <div class="banner error mt" x-show="testError" x-text="testError" x-cloak></div>
    <p class="muted" x-show="!testing && hasTuning" x-cloak>
      Restart the camera with the generated tuning and preview it live to judge the
      result. Uses the tuning matching this Pi's ISP; returning to Capture restores the
      default tuning.
    </p>
    <p class="muted" x-show="!testing && !hasTuning" x-cloak>
      No generated tuning yet — <a href="{{ url_for('run_page', name=project.name) }}">Run CTT</a>
      to create one. You can still preview the camera's <b>existing</b> (built-in) tuning live.
    </p>
    <div class="btn-row">
      <button class="btn primary" x-show="!testing" @click="hasTuning ? startPreviewTest() : previewStandard()" :disabled="busy">
        <span x-text="busy ? 'Starting…' : '▶ Start live preview'"></span>
      </button>
      <button class="btn" x-show="testing" @click="capturePng()" :disabled="busy">
        <span x-text="busy ? 'Capturing…' : '⬇ Capture PNG (full res)'"></span>
      </button>
      <button class="btn ghost" x-show="testing" @click="restoreDefault()" :disabled="busy">■ Stop (restore default)</button>
    </div>
    <div x-show="testing" x-cloak>
      <div class="muted mt">
        <template x-if="testKind === 'standard'"><span>Previewing <b>default (built-in)</b> tuning</span></template>
        <template x-if="testKind !== 'standard'">
          <span>Previewing <b x-text="testTuning"></b> · <span x-text="testTarget && testTarget.toUpperCase()"></span><span x-show="genLabel()"> · generated <span x-text="genLabel()"></span></span></span>
        </template>
      </div>
      <div class="preview-wrap big mt" :class="{ louping: loupe.active }" @dragstart.prevent
           @pointerdown="loupeStart($event)" @pointermove="loupeMove($event)"
           @pointerup="loupeEnd($event)" @pointerleave="loupeEnd($event)" @pointercancel="loupeEnd($event)">
        <img id="resultPreviewImg" draggable="false" :src="previewSrc" alt="live tuning preview">
        <div id="resultLoupeMarker" class="loupe-marker" x-show="loupe.active" x-cloak></div>
        <canvas id="resultLoupeCanvas" class="loupe" width="220" height="220" x-show="loupe.active" x-cloak></canvas>
      </div>
      <!-- Live sensor info + flips -->
      <div class="caminfo mt">
        <div class="caminfo-row" style="grid-template-columns: repeat(4, 1fr)">
          <div><span class="k">Sensor</span><span class="v" x-text="camera.model || '—'"></span></div>
          <div>
            <span class="k">Resolution</span>
            <select class="mode-sel" x-show="camera.modes && camera.modes.length" x-cloak :disabled="busy"
                    @change="applyMode($event.target.value)">
              <template x-for="m in camera.modes || []" :key="m.size.join('x')">
                <option :value="m.size.join('x')"
                        :selected="camera.resolution && m.size[0] === camera.resolution[0] && m.size[1] === camera.resolution[1]"
                        x-text="m.size[0] + ' × ' + m.size[1] + ' · ' + m.bit_depth + '-bit'"></option>
              </template>
            </select>
            <span class="v" x-show="!(camera.modes && camera.modes.length)"
                  x-text="camera.resolution ? camera.resolution[0] + ' × ' + camera.resolution[1] : '—'"></span>
          </div>
          <div>
            <span class="k">Flips</span>
            <div class="seg compact" style="align-self:flex-start">
              <button type="button" :class="{active: hflip}" @click="hflip=!hflip; applyTransform()" :disabled="busy" title="Horizontal flip">H</button>
              <button type="button" :class="{active: vflip}" @click="vflip=!vflip; applyTransform()" :disabled="busy" title="Vertical flip">V</button>
            </div>
          </div>
          <div>
            <span class="k">FPS <span style="text-transform:none" x-text="metered.measured_fps ? '· ' + metered.measured_fps + ' actual' : ''"></span> <span class="fps-warn" x-show="fpsUnachievable()" x-cloak :title="'Not achievable in this sensor mode (max ' + fpsMax().toFixed(1) + ' fps) — auto-exposure can use up to the actual frame time'">⚠</span></span>
            <input type="number" min="0" max="120" step="1" x-model.number="fpsTarget" @change="applyFps()"
                   title="Fixed framerate; 0 = unconstrained (variable frame duration, allows long exposures)"
                   style="width:90px; padding:4px 8px; font-size:0.85rem">
          </div>
        </div>
        <div class="caminfo-row" style="grid-template-columns: repeat(4, 1fr)">
          <div><span class="k">Exposure</span><span class="v" x-text="(metered.exposure/1000).toFixed(1) + ' ms'"></span></div>
          <div><span class="k">Gain</span><span class="v" x-text="metered.gain + '×'"></span></div>
          <div><span class="k">Colour temp</span><span class="v" x-text="metered.colour_temp + ' K'"></span></div>
          <div><span class="k">Lux</span><span class="v" x-text="metered.lux + ' lx'"></span></div>
        </div>
      </div>

    </div>
  </div>

  <!-- Exposure + lightbox controls, side by side (exposure full width without a lightbox) -->
  <div class="grid mt" :style="lightbox.present ? 'grid-template-columns: 1fr 1fr' : 'grid-template-columns: 1fr'">
    <!-- Exposure controls -->
    <div class="card" x-show="testing" x-cloak>
      <div class="card-head"><h2>Exposure</h2>
        <label class="flex" style="margin:0;font-weight:600">
          <input type="checkbox" style="width:auto" x-model="controls.auto_exposure" @change="applyControls()"> Auto
        </label>
      </div>
      <div class="field" :style="controls.auto_exposure ? 'opacity:.45;pointer-events:none' : ''">
        <label>Exposure time — <span x-text="(controls.exposure/1000).toFixed(1)"></span> ms
          <span class="muted" x-show="expMax()" x-cloak>(max <span x-text="(expMax()/1000).toFixed(0)"></span> ms at this FPS)</span></label>
        <input type="range" :min="controls.exposure_min" :max="expMax()" step="100"
               x-model.number="controls.exposure" @change="applyControls()">
      </div>
      <div class="field" :style="controls.auto_exposure ? 'opacity:.45;pointer-events:none' : ''">
        <label>Analogue gain — <span x-text="controls.gain"></span>×</label>
        <input type="range" :min="controls.gain_min" :max="controls.gain_max" step="0.1"
               x-model.number="controls.gain" @change="applyControls()">
      </div>
      <div class="field" :style="!controls.auto_exposure ? 'opacity:.45;pointer-events:none' : ''">
        <div class="spread" style="align-items:baseline">
          <label style="margin:0">Exposure compensation — <span x-text="controls.ev.toFixed(1)"></span> EV</label>
          <button type="button" class="btn sm ghost" @click="controls.ev = 0; applyControls()">Reset</button>
        </div>
        <input type="range" min="-8" max="8" step="0.1" x-model.number="controls.ev" @change="applyControls()">
        <div class="hint">Biases auto-exposure brighter/darker (active when Auto is on).</div>
      </div>
    </div>

    <!-- Lightbox (optional device — independent of the preview test) -->
    <div class="card" x-show="lightbox.present" x-cloak>
      <div class="card-head">
        <h2>Lightbox</h2>
        <span class="chip" x-text="lightbox.model + (lightbox.serial ? ' · ' + lightbox.serial : '')"></span>
      </div>
      <div class="field-row" style="align-items:flex-end; flex-wrap:wrap">
        <div class="field" style="flex:0 0 180px; margin:0">
          <label>Illuminant</label>
          <select x-model.number="lightbox.channel" @change="setIlluminant()">
            <template x-for="[ch, name] in Object.entries(lightbox.illuminants)" :key="ch">
              <option :value="Number(ch)" x-text="ch + ' — ' + name"
                      :title="(lightbox.illuminant_labels && lightbox.illuminant_labels[ch]) || name"></option>
            </template>
          </select>
        </div>
        <div class="field" style="flex:1 1 200px; margin:0">
          <label>Intensity</label>
          <div class="flex" style="gap:10px; align-items:center; margin:0">
            <input type="range" min="0" max="100" step="1" class="lb-slider" x-model.number="lightbox.intensity"
                   @change="applyLightbox()" :style="{ '--fill': (lightbox.intensity || 0) + '%', flex: '1' }">
            <input type="number" min="0" max="100" step="1" class="nospin" x-model.number="lightbox.intensity"
                   @change="applyLightbox()" style="width:64px; flex:0 0 auto">
            <span class="muted">%</span>
          </div>
        </div>
        <div class="field" style="flex:0 0 auto; margin:0">
          <button type="button" class="btn ghost" @click="lightboxOff()">Off</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Measured colour accuracy (semi-live, through the real ISP) -->
  <div class="card mt" x-show="testing" x-cloak>
    <div class="card-head">
      <h2>Measured colour accuracy</h2>
      <div class="flex">
        <span class="chip" x-show="liveColour && chartSeen" x-cloak>
          ● chart · conf <span x-text="chartSeen && chartSeen.confidence"></span>
        </span>
        <span class="chip" x-show="liveColour && chartSeen === false" x-cloak>chart not detected</span>
        <label class="flex" style="margin:0;font-weight:600">
          <input type="checkbox" style="width:auto" x-model="liveColour" @change="liveColour && pollColour()"> Live
        </label>
      </div>
    </div>
    <p class="muted" x-show="!colour" x-cloak>
      Point the camera at a Macbeth chart — the measurement updates automatically while it is detected.
    </p>
    <div class="stats" x-show="colour">
      <div class="stat">
        <div class="n">
          <span x-text="colour && colour.colour"></span>
          <span class="muted" style="font-size:0.85rem" x-text="'mean ' + (colour && colour.mean) + ' · worst ' + (colour && colour.worst)"></span>
        </div>
        <div class="l" x-text="'Colour ΔE — ' + (testKind === 'standard' ? 'existing' : 'tuned') + ' tuning'"></div>
      </div>
    </div>
    <div class="banner info mt" x-show="colour && colour.saturated" x-cloak>
      ⚠ Some patches are clipping — reduce exposure.
    </div>
    <div class="chart-box mt" x-show="colour"><canvas id="liveDeChart"></canvas></div>
    <p class="hint">ΔE (CIE2000) per Macbeth patch, measured live through the real ISP with the selected
      tuning loaded — each bar is the patch's reference colour. The headline <b>colour ΔE</b> removes the
      overall-brightness offset, like the calibration metric. Absolute values depend on the illuminant, so
      judge changes under the same light rather than against fixed thresholds.</p>
  </div>

</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='vendor/alpine.min.js') }}" defer></script>
{% endblock %}