{% extends "base.html" %}
{% block title %}Results · {{ project.name }}{% endblock %}
{% block body %}
{% set active_tab = 'results' %}
{% 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 }}, allTargets: true })' x-init="init()">
  <!-- New vs built-in default tuning -->
  <div class="card">
    <div class="card-head">
      <h2>Calibration results</h2>
      <div class="seg" x-show="hasDefault()" x-cloak>
        <button type="button" :class="{active: view==='new'}" @click="setView('new')">Tuned</button>
        <button type="button" :class="{active: view==='old'}" @click="setView('old')">Existing</button>
      </div>
    </div>
    <div class="muted mt" x-show="view==='new' && runLabel()" x-cloak>Generated <span x-text="runLabel()"></span></div>
    <div class="muted mt" x-show="view==='old'" x-cloak>The sensor's shipped default tuning, evaluated on your captures.</div>
    <div class="banner info mt" x-show="runsMismatch()" x-cloak>⚠ PiSP and VC4 were generated at different times, so the ALSC comparison may be stale — re-run to refresh both.</div>
  </div>

  <!-- Colour accuracy (only present once a run has written the sidecar) -->
  <template x-if="metrics">
    <div class="card mt">
      <div class="card-head">
        <h2>Colour accuracy</h2>
        <span class="qbadge" :class="metrics.ccm_quality.band" x-show="metrics.ccm_quality.band"
              x-text="bandLabel(metrics.ccm_quality.band)"></span>
      </div>
      <template x-if="metrics.ccm.length">
        <div class="stats">
          <div class="stat" x-show="ccmStats().colour !== null"><div class="n" x-text="fmt(ccmStats().colour)"></div><div class="l">Colour ΔE</div></div>
          <div class="stat"><div class="n" x-text="fmt(ccmStats().mean)"></div><div class="l">Mean ΔE</div></div>
          <div class="stat"><div class="n" x-text="fmt(ccmStats().worst)"></div><div class="l">Worst ΔE</div></div>
        </div>
      </template>
      <div class="seg mt" x-show="metrics.ccm.length > 1 && ccmHasPatches()">
        <template x-for="c in metrics.ccm" :key="c.ct">
          <button type="button" :class="{active: ccmCt === c.ct}" @click="setCcmCt(c.ct)" x-text="c.ct + 'K'"></button>
        </template>
      </div>
      <div class="chart-box mt" x-show="metrics.ccm.length"><canvas id="ccmChart"></canvas></div>
      <p class="muted mt" x-show="!metrics.ccm.length" x-cloak>No CCM data (greyscale sensor or CCM disabled).</p>
      <p class="hint">Delta E (CIE2000) per Macbeth patch after matrix optimisation, at the selected colour temperature — each bar is the patch's reference colour; lower is better. <b>Colour ΔE</b> removes the overall-brightness offset (set at runtime by exposure/tone), so it reflects the hue/saturation accuracy the matrix actually controls; the badge is graded on it.</p>
    </div>
  </template>

  <!-- AWB curve + ALSC falloff -->
  <div class="grid cols-2 mt" style="align-items: stretch">

    <div class="card fill-chart" x-show="charts.awb" x-cloak>
      <div class="card-head"><h2>AWB CT curve</h2></div>
      <div class="chart-box compact"><canvas id="awbChart"></canvas></div>
      <p class="hint">White-balance locus — R/G against B/G across the calibrated colour-temperature range (hover for the CT).</p>
    </div>
    <div class="card" x-show="alscView()" x-cloak>
      <div class="card-head">
        <h2>ALSC luminance falloff</h2>
        <div class="seg compact" x-show="targets.length > 1" x-cloak>
          <template x-for="t in targets" :key="t">
            <button type="button" :class="{active: alscTarget===t}" @click="setAlscTarget(t)" x-text="t.toUpperCase()"></button>
          </template>
        </div>
      </div>
      <div class="chart-box compact">
        <canvas id="alscChart" width="320" height="240"></canvas>
        <div class="alsc-tip" x-show="alscHover" x-cloak
             :style="alscHover ? `left:${alscHover.x}px; top:${alscHover.y}px` : ''">
          <span>R <b x-text="fmt(alscHover && alscHover.r)"></b></span>
          <span>G <b x-text="fmt(alscHover && alscHover.g)"></b></span>
          <span>B <b x-text="fmt(alscHover && alscHover.b)"></b></span>
        </div>
      </div>
      <template x-if="metrics && metrics.alsc && metrics.alsc.residuals && metrics.alsc.residuals.length">
        <div>
          <div class="stats compact mt">
            <div class="stat"><div class="n" x-text="metrics.alsc.corner_pct_max + '%'"></div><div class="l">Corner residual</div></div>
            <div class="stat"><div class="n" x-text="metrics.alsc.worst_pct_max + '%'"></div><div class="l">Worst residual</div></div>
            <div class="stat"><div class="n" x-text="metrics.alsc.luminance_strength"></div><div class="l">Strength</div></div>
          </div>
          <p class="hint">Predicted luminance non-uniformity of the flat-fields <em>after</em> this correction
            (worst capture across colour temperatures). With strength &lt; 1 some residual is by design —
            corners are deliberately left slightly darker to limit noise amplification.</p>
        </div>
      </template>
    </div>
  </div>

  <!-- Lux luminance response -->
  <div class="card mt" x-show="metrics && metrics.lux && (metrics.lux.samples || []).length" x-cloak>
    <div class="card-head"><h2>Lux response</h2></div>
    <div class="chart-box"><canvas id="luxChart"></canvas></div>
    <p class="hint">Luminance per lux (Y / lux·exp·gain) for each capture against colour temperature — ideally flat. The dashed line is the value the lux calibration uses. A sloped/scattered response means the sensor's luminance-per-lux is colour-temperature dependent, so a single lux reference will read off away from the anchor.</p>
  </div>

  <!-- Health + Coverage (only present once a run has written the sidecar) -->
  <template x-if="metrics">
    <div>
      <!-- Health -->
      <div class="card mt">
        <div class="card-head"><h2>Health</h2></div>
        <template x-if="!metrics.warnings.length">
          <div class="muted">✓ No warnings — all images used cleanly.</div>
        </template>
        <template x-for="(w, i) in metrics.warnings" :key="i">
          <div class="warnrow" :class="w.level">
            <span class="ic" x-text="w.level === 'error' ? '✗' : '⚠'"></span>
            <span x-text="w.message"></span>
            <span class="muted" x-show="w.image" x-text="'· ' + w.image"></span>
          </div>
        </template>
      </div>

      <!-- Coverage -->
      <div class="card mt">
        <div class="card-head"><h2>Coverage</h2></div>
        <div class="stats">
          <div class="stat"><div class="n" x-text="metrics.counts.macbeth ?? '–'"></div><div class="l">Macbeth imgs</div></div>
          <div class="stat"><div class="n" x-text="metrics.counts.alsc ?? '–'"></div><div class="l">ALSC imgs</div></div>
          <div class="stat"><div class="n" x-text="ctRange()"></div><div class="l">CT range (K)</div></div>
          <div class="stat"><div class="n" x-text="metrics.coverage.ccm_matrices ?? '–'"></div><div class="l">CCM matrices</div></div>
          <div class="stat"><div class="n" x-text="metrics.coverage.awb_points ?? '–'"></div><div class="l">AWB points</div></div>
        </div>
      </div>
    </div>
  </template>

  <!-- Sensor references -->
  <div class="card mt" x-show="charts.lux || charts.noise || summary?.black_level !== undefined" x-cloak>
    <div class="card-head"><h2>Sensor references</h2></div>
    <div class="stats">
      <div class="stat" x-show="charts.lux"><div class="n" x-text="charts.lux && charts.lux.reference_lux"></div><div class="l">Reference lux</div></div>
      <div class="stat" x-show="charts.noise"><div class="n" x-text="charts.noise && fmt(charts.noise.reference_slope)"></div><div class="l">Noise slope</div></div>
      <div class="stat" x-show="charts.noise"><div class="n" x-text="charts.noise && fmt(charts.noise.reference_constant)"></div><div class="l">Noise constant</div></div>
      <div class="stat" x-show="summary?.black_level !== undefined"><div class="n" x-text="summary?.black_level"></div><div class="l">Black level</div></div>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='vendor/alpine.min.js') }}" defer></script>
{% endblock %}