{% extends "base.html" %}
{% import 'partials/_components.html' as components %}
{% block topbar_current %}compare{% endblock %}
{% block title %}TESS QuickLook - Compare{% endblock %}
{% block head %}
  <style>
    /* Page-specific (theme vars, buttons, theme-toggle, page-loading
       and @keyframes spin live in static/css/quicklook.css). */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      max-width: 1400px; margin: 0 auto; padding: 24px 20px;
      color: var(--text); background: var(--bg); line-height: 1.5;
      transition: background-color 0.3s, color 0.3s;
    }
    h1 { text-align: center; font-size: 1.5rem; margin-bottom: 16px; }

    .top-bar {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 10px; margin-bottom: 20px;
    }
    .top-bar-left { display: flex; gap: 8px; align-items: center; }

    /* Selectors */
    .selectors {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
    }
    .selector-group label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; }
    .selector-group select {
      width: 100%; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 6px;
      font-size: 0.85rem; background: var(--input-bg); color: var(--text);
    }
    .selector-group select:focus { outline: none; border-color: var(--primary); }

    /* Comparison area */
    .compare-area {
      display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
    }
    .compare-panel {
      background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
      overflow: hidden; min-height: 200px; display: flex; align-items: center; justify-content: center;
    }
    .compare-panel img { width: 100%; height: auto; display: block; }
    .compare-panel .placeholder { color: var(--text-sec); font-size: 0.9rem; padding: 40px; text-align: center; }
    .panel-label {
      text-align: center; font-size: 0.78rem; color: var(--text-sec); margin-top: 4px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* Overlay mode */
    .overlay-controls {
      display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 16px;
    }
    .overlay-controls label { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 6px; cursor: pointer; }
    .overlay-area {
      display: none; position: relative; background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 8px; overflow: hidden; margin-bottom: 20px;
    }
    .overlay-area.visible { display: block; }
    .overlay-area img {
      width: 100%; height: auto; display: block;
    }
    .overlay-area .overlay-img {
      position: absolute; top: 0; left: 0; width: 100%; height: auto;
      mix-blend-mode: difference;
    }
    .opacity-slider { width: 200px; }

    /* Swap button */
    .swap-btn { font-size: 1.2rem; padding: 4px 12px; }

    /* Running-jobs banner */
    .running-banner {
      display: none; align-items: center; gap: 10px; padding: 10px 16px;
      background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
      margin-bottom: 16px; font-size: 0.85rem;
    }
    .running-banner.visible { display: flex; flex-wrap: wrap; }
    .running-banner .spinner {
      width: 14px; height: 14px; border: 2px solid var(--primary); border-top-color: transparent;
      border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0;
    }
    /* @keyframes spin + .page-loading family live in shared CSS */
    .running-banner a { color: var(--primary); font-weight: 600; text-decoration: none; }
    .running-banner a:hover { text-decoration: underline; }
    .running-banner .job-list { display: flex; gap: 8px; flex-wrap: wrap; }

    @media (max-width: 768px) {
      .selectors { grid-template-columns: 1fr; }
      .compare-area { grid-template-columns: 1fr; }
    }
  </style>
{% endblock %}

{% block before_topbar %}
  <!-- Running jobs banner -->
  <div class="running-banner" id="runningBanner">
    <div class="spinner"></div>
    <span>Running:</span>
    <div class="job-list" id="runningJobList"></div>
  </div>
{% endblock %}

{% block content %}
  <h1>Compare Results</h1>

  <!-- Image selectors -->
  <div class="selectors">
    <div class="selector-group">
      <label for="leftSelect">Left image</label>
      <select id="leftSelect">
        <option value="">-- Select --</option>
        {% for item in images %}
        <option value="{{ item.path }}" data-name="{{ item.name }}" {% if left == item.name %}selected{% endif %}>{{ item.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="selector-group">
      <label for="rightSelect">Right image</label>
      <select id="rightSelect">
        <option value="">-- Select --</option>
        {% for item in images %}
        <option value="{{ item.path }}" data-name="{{ item.name }}" {% if right == item.name %}selected{% endif %}>{{ item.name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div style="text-align: center; margin-bottom: 12px;">
    <button class="btn btn-outline btn-sm swap-btn" id="swapBtn" title="Swap left and right">&#8646; Swap</button>
  </div>

  <!-- Side by side -->
  <div class="compare-area" id="compareArea">
    <div>
      <div class="compare-panel" id="leftPanel">
        <div class="placeholder">Select a left image</div>
      </div>
      <div class="panel-label" id="leftLabel"></div>
    </div>
    <div>
      <div class="compare-panel" id="rightPanel">
        <div class="placeholder">Select a right image</div>
      </div>
      <div class="panel-label" id="rightLabel"></div>
    </div>
  </div>

  <!-- Overlay controls -->
  <div class="overlay-controls">
    <label>
      <input type="checkbox" id="overlayToggle"> Overlay mode (difference blend)
    </label>
    <label>
      Opacity: <input type="range" class="opacity-slider" id="opacitySlider" min="0" max="100" value="50">
    </label>
  </div>

  <!-- Overlay area -->
  <div class="overlay-area" id="overlayArea">
    <img id="overlayBase" src="" alt="Base">
    <img id="overlayTop" class="overlay-img" src="" alt="Overlay">
  </div>

{% endblock %}

{% block scripts %}
  <script>
    /* --- Elements --- */
    const leftSelect = document.getElementById('leftSelect');
    const rightSelect = document.getElementById('rightSelect');
    const leftPanel = document.getElementById('leftPanel');
    const rightPanel = document.getElementById('rightPanel');
    const leftLabel = document.getElementById('leftLabel');
    const rightLabel = document.getElementById('rightLabel');
    const overlayToggle = document.getElementById('overlayToggle');
    const overlayArea = document.getElementById('overlayArea');
    const overlayBase = document.getElementById('overlayBase');
    const overlayTop = document.getElementById('overlayTop');
    const opacitySlider = document.getElementById('opacitySlider');
    const compareArea = document.getElementById('compareArea');

    function updatePanel(selectEl, panelEl, labelEl) {
      const opt = selectEl.options[selectEl.selectedIndex];
      const src = selectEl.value;
      const name = opt ? opt.dataset.name || '' : '';
      if (src) {
        panelEl.innerHTML = '<img src="' + src + '" alt="' + name + '" onclick="window.open(\'' + src + '\', \'_blank\')">';
        labelEl.textContent = name;
      } else {
        panelEl.innerHTML = '<div class="placeholder">Select an image</div>';
        labelEl.textContent = '';
      }
      updateOverlay();
    }

    function updateOverlay() {
      const lsrc = leftSelect.value;
      const rsrc = rightSelect.value;
      if (overlayToggle.checked && lsrc && rsrc) {
        overlayArea.classList.add('visible');
        compareArea.style.display = 'none';
        overlayBase.src = lsrc;
        overlayTop.src = rsrc;
        overlayTop.style.opacity = opacitySlider.value / 100;
      } else {
        overlayArea.classList.remove('visible');
        compareArea.style.display = '';
      }
    }

    leftSelect.addEventListener('change', () => updatePanel(leftSelect, leftPanel, leftLabel));
    rightSelect.addEventListener('change', () => updatePanel(rightSelect, rightPanel, rightLabel));
    overlayToggle.addEventListener('change', updateOverlay);
    opacitySlider.addEventListener('input', () => {
      overlayTop.style.opacity = opacitySlider.value / 100;
    });

    document.getElementById('swapBtn').addEventListener('click', () => {
      const lv = leftSelect.value;
      const rv = rightSelect.value;
      leftSelect.value = rv;
      rightSelect.value = lv;
      updatePanel(leftSelect, leftPanel, leftLabel);
      updatePanel(rightSelect, rightPanel, rightLabel);
    });

    // Init with preselected values
    if (leftSelect.value) updatePanel(leftSelect, leftPanel, leftLabel);
    if (rightSelect.value) updatePanel(rightSelect, rightPanel, rightLabel);

    /* --- Running-jobs banner --- */
    const runningBanner = document.getElementById('runningBanner');
    const runningJobList = document.getElementById('runningJobList');

    async function pollRunningJobs() {
      try {
        const res = await fetch(BASE + '/jobs-json');
        const jobs = await res.json();
        const running = jobs.filter(j => j.status === 'running');
        if (running.length === 0) {
          runningBanner.classList.remove('visible');
          return;
        }
        runningBanner.classList.add('visible');
        runningJobList.innerHTML = running.map(j =>
          '<a href="' + BASE + '/?watch=' + encodeURIComponent(j.name) + '">' + j.name + '</a>'
        ).join(', ');
      } catch(e) {}
    }
    pollRunningJobs();
    setInterval(pollRunningJobs, 5000);

    /* Show the shared loading overlay when navigating to the (potentially
       slow) TLS Summary page. The overlay markup is parsed after this
       script, so we look it up lazily inside the click handler. */
    (function () {
      const link = document.getElementById('summaryLink');
      if (!link) return;
      link.addEventListener('click', (e) => {
        if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
        const overlay = document.getElementById('pageLoading');
        if (overlay) overlay.classList.add('show');
      });
    })();
  </script>

  {{ components.page_loading('Loading TLS Summary…', 'Scanning saved results') }}
{% endblock %}