{% extends "base.html" %}
{% block title %}Preview{% endblock %}

{% block content %}
<h1>Preview</h1>

<article>
  <p>
    Select an image to see how Spectra will process it — cropped to the
    display aspect ratio, resized, and saturation-adjusted.
  </p>

  <form id="preview-form">
    <label for="preview-image-id">Image</label>
    <select id="preview-image-id" name="image_id" required>
      <option value="">— Select an image —</option>
    </select>
    <button type="button" onclick="loadPreview()" id="preview-btn">Preview</button>
  </form>
</article>

<article id="preview-result" style="display:none;">
  <header>Processed preview</header>
  <div style="text-align:center;">
    <img id="preview-img" style="max-width:100%; border-radius:var(--pico-border-radius);">
  </div>
  <footer>
    <small>
      Original (left) vs Spectra-processed (right) —
      <a id="preview-original-link" href="#" target="_blank">View original</a>
    </small>
  </footer>
</article>

<article id="preview-error" style="display:none; background:var(--pico-color-red-50);">
  <p id="preview-error-msg"></p>
</article>

<script>
  fetch('/api/images')
    .then(function(r) { return r.json(); })
    .then(function(data) {
      var sel = document.getElementById('preview-image-id');
      data.images.forEach(function(img) {
        var opt = document.createElement('option');
        opt.value = img.id;
        opt.textContent = (img.title || img.filename) + ' (' + img.width + '×' + img.height + ')';
        sel.appendChild(opt);
      });
    });

  function loadPreview() {
    var id = document.getElementById('preview-image-id').value;
    var btn = document.getElementById('preview-btn');
    var result = document.getElementById('preview-result');
    var error = document.getElementById('preview-error');
    var img = document.getElementById('preview-img');

    if (!id) return;
    btn.disabled = true;
    btn.textContent = 'Loading...';
    result.style.display = 'none';
    error.style.display = 'none';

    img.onload = function() {
      btn.disabled = false;
      btn.textContent = 'Preview';
      result.style.display = 'block';
    };
    img.onerror = function() {
      btn.disabled = false;
      btn.textContent = 'Preview';
      document.getElementById('preview-error-msg').textContent = 'Failed to generate preview. The image may be corrupted.';
      error.style.display = 'block';
    };

    img.src = '/api/preview/' + id + '?t=' + Date.now();
    document.getElementById('preview-original-link').href = '/api/images/' + id + '/file';
  }
</script>
{% endblock %}