{% extends "base.html" %}
{% import 'partials/_components.html' as components %}
{% block topbar_current %}gallery{% endblock %}
{% block title %}TESS QuickLook Gallery{% 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: 1100px; 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; }

    .controls {
      display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    }
    .search-form { display: flex; gap: 6px; }
    .search-form input {
      padding: 7px 12px; border: 1px solid var(--input-border); border-radius: 6px;
      font-size: 0.9rem; width: 200px; background: var(--input-bg); color: var(--text);
    }
    .search-form input:focus { outline: none; border-color: var(--primary); }

    select.sort-select {
      padding: 7px 10px; border: 1px solid var(--input-border); border-radius: 6px;
      font-size: 0.85rem; background: var(--input-bg); color: var(--text); cursor: pointer;
    }

    /* Bulk controls */
    .bulk-bar {
      display: none; align-items: center; gap: 10px; padding: 8px 12px;
      background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
      margin-bottom: 16px; font-size: 0.85rem;
    }
    .bulk-bar.visible { display: flex; }
    .bulk-bar .count { font-weight: 600; }

    .gallery {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
    }
    .gallery-card {
      background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px;
      overflow: hidden; transition: box-shadow 0.2s, transform 0.15s; position: relative;
    }
    .gallery-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .gallery-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
    .gallery-card img { width: 100%; height: auto; display: block; cursor: pointer; }
    .card-footer {
      display: flex; align-items: center; padding: 6px 10px;
      border-top: 1px solid var(--border-light); gap: 6px;
    }
    .card-check { flex-shrink: 0; cursor: pointer; width: 16px; height: 16px; }
    .card-label {
      flex: 1; font-size: 0.78rem; color: var(--text-sec);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .delete-btn {
      background: none; border: none; cursor: pointer; color: var(--text-sec);
      font-size: 1.1rem; padding: 2px 4px; line-height: 1; transition: color 0.15s;
    }
    .delete-btn:hover { color: var(--red); }
    .empty-msg {
      grid-column: 1 / -1; text-align: center; color: var(--text-sec); padding: 40px 0; font-size: 1rem;
    }
    .gallery-info {
      text-align: center; font-size: 0.82rem; color: var(--text-sec); margin-bottom: 16px;
    }

    /* Pagination */
    .pagination {
      display: flex; justify-content: center; align-items: center; gap: 6px;
      margin-top: 24px; flex-wrap: wrap;
    }
    .pagination a, .pagination span {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 36px; height: 36px; padding: 0 10px;
      border: 1px solid var(--border); border-radius: 6px; font-size: 0.85rem;
      text-decoration: none; color: var(--text); background: var(--card-bg);
      transition: background-color 0.15s;
    }
    .pagination a:hover { background: var(--hover-bg); }
    .pagination .current {
      background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 600;
    }
    .pagination .disabled { opacity: 0.4; pointer-events: none; }
    .per-page-label {
      display: inline-flex; align-items: center; gap: 6px;
      margin-left: 12px; font-size: 0.82rem; color: var(--text-sec);
    }
    /* Neutralise the .pagination span button styles for our inline label. */
    .pagination .per-page-text {
      display: inline; min-width: 0; height: auto; padding: 0;
      border: none; background: transparent; color: var(--text-sec);
      font-size: 0.82rem;
    }
    .per-page-select {
      padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 5px;
      font-size: 0.85rem; background: var(--input-bg); color: var(--text); cursor: pointer;
    }
    .per-page-select:focus { outline: none; border-color: var(--primary); }

    /* Modal */
    .modal {
      display: none; position: fixed; z-index: 1000; inset: 0;
      background: rgba(0,0,0,0.85); align-items: center; justify-content: center; flex-direction: column;
    }
    .modal.open { display: flex; }
    .modal-close {
      position: absolute; top: 16px; right: 24px; color: #fff;
      font-size: 2rem; cursor: pointer; line-height: 1; opacity: 0.8; transition: opacity 0.2s;
    }
    .modal-close:hover { opacity: 1; }
    .modal img { max-width: 92%; max-height: 80vh; border-radius: 6px; cursor: grab; }
    .modal-caption { color: #ccc; margin-top: 10px; font-size: 0.85rem; }
    .modal-actions { margin-top: 10px; display: flex; gap: 8px; }
    .modal-actions .btn { font-size: 0.85rem; }

    /* Running-jobs banner. Prominent so users see their submitted
       job is still alive after switching to the gallery page. */
    .running-banner {
      display: none; align-items: center; gap: 12px; padding: 14px 18px;
      background: var(--status-run-bg, var(--card-bg));
      border: 1px solid var(--status-run-border, var(--border));
      color: var(--status-run-fg, var(--text));
      border-radius: 10px;
      margin-bottom: 16px; font-size: 0.92rem;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .running-banner.visible { display: flex; flex-wrap: wrap; }
    .running-banner .spinner {
      width: 18px; height: 18px; border: 3px solid currentColor; 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 .label { font-weight: 600; }
    .running-banner .hint { color: var(--text-sec); font-size: 0.82rem; margin-left: 6px; }
    .running-banner a { color: inherit; font-weight: 700; text-decoration: underline; }
    .running-banner a:hover { text-decoration: none; }
    .running-banner .job-list { display: flex; gap: 8px; flex-wrap: wrap; }
    .auto-refresh-label {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 0.82rem; color: var(--text-sec); cursor: pointer; white-space: nowrap;
    }

    @media (max-width: 600px) {
      .top-bar { flex-direction: column; align-items: stretch; }
      .search-form input { width: 100%; }
      .gallery { grid-template-columns: 1fr; }
      .controls { flex-direction: column; align-items: stretch; }
    }
  </style>
{% endblock %}

{% block before_topbar %}
  <!-- Running-jobs banner. Stays visible the whole time a job is alive
       on the server, so users who switched to the gallery can see their
       submission is still running. Each job name links back to the
       home page (?watch=…) so they can resume the live status view. -->
  <div class="running-banner" id="runningBanner">
    <div class="spinner"></div>
    <span class="label">Job running:</span>
    <div class="job-list" id="runningJobList"></div>
    <span class="hint">(server-side; clicking the name returns to the live log on the home page)</span>
  </div>
{% endblock %}

{% block content %}
  <h1>Output Gallery</h1>

  <div class="top-bar">
    <div class="top-bar-left"></div>
    <div class="controls">
      <form class="search-form" method="get" action="{{ url_for('gallery') }}">
        <input type="hidden" name="sort" value="{{ sort_by }}">
        <input type="text" name="search" placeholder="Filter by target name" value="{{ search_name or '' }}">
        <button type="submit" class="btn btn-primary btn-sm">Search</button>
      </form>
      <select class="sort-select" id="sortSelect" onchange="applySort(this.value)">
        <option value="date_desc" {% if sort_by == 'date_desc' %}selected{% endif %}>Newest first</option>
        <option value="date_asc" {% if sort_by == 'date_asc' %}selected{% endif %}>Oldest first</option>
        <option value="name_asc" {% if sort_by == 'name_asc' %}selected{% endif %}>Name A-Z</option>
        <option value="name_desc" {% if sort_by == 'name_desc' %}selected{% endif %}>Name Z-A</option>
      </select>
      <label class="auto-refresh-label" title="Reload the gallery automatically when a running job finishes">
        <input type="checkbox" id="autoRefreshToggle"> Auto-refresh
      </label>
    </div>
  </div>

  <div class="gallery-info">
    Showing {{ images|length }} of {{ total }} results
    {% if search_name %} matching "{{ search_name }}"{% endif %}
    (page {{ page }} of {{ total_pages }})
  </div>

  <!-- Bulk action bar -->
  <div class="bulk-bar" id="bulkBar">
    <span class="count"><span id="bulkCount">0</span> selected</span>
    <button class="btn btn-red btn-sm" id="bulkDeleteBtn">Delete selected</button>
    <button class="btn btn-outline btn-sm" id="bulkClearBtn">Clear selection</button>
  </div>

  <div class="gallery" id="galleryGrid">
    {% for item in images %}
      <div class="gallery-card" data-filename="{{ item.name }}">
        <img src="{{ item.path }}" alt="{{ item.name }}" loading="lazy"
             onclick="openModal('{{ item.path }}', '{{ item.name }}')">
        <div class="card-footer">
          <input type="checkbox" class="card-check" data-name="{{ item.name }}" onchange="updateBulk()">
          <span class="card-label" title="{{ item.name }}">{{ item.name }}</span>
          <button class="delete-btn" title="Delete"
                  onclick="event.stopPropagation(); deleteOutput('{{ item.name }}', this)">&times;</button>
        </div>
      </div>
    {% endfor %}
    {% if images | length == 0 %}
      <p class="empty-state">
        {% if search_name %}
          No images match &ldquo;{{ search_name }}&rdquo;. <a href="{{ url_for('gallery') }}">Clear filter</a> to see everything.
        {% else %}
          No images yet &mdash; <a href="{{ url_for('index') }}">run your first target</a> and a thumbnail will appear here.
        {% endif %}
      </p>
    {% endif %}
  </div>

  <!-- Pagination -->
  {% if total_pages > 1 %}
  <div class="pagination">
    {% if page > 1 %}
      <a href="{{ url_for('gallery', search=search_name, sort=sort_by, page=page-1, per_page=per_page) }}">&laquo; Prev</a>
    {% else %}
      <span class="disabled">&laquo; Prev</span>
    {% endif %}

    {% for p in range(1, total_pages + 1) %}
      {% if p == page %}
        <span class="current">{{ p }}</span>
      {% elif p <= 3 or p > total_pages - 3 or (p >= page - 2 and p <= page + 2) %}
        <a href="{{ url_for('gallery', search=search_name, sort=sort_by, page=p, per_page=per_page) }}">{{ p }}</a>
      {% elif p == 4 or p == total_pages - 3 %}
        <span>&hellip;</span>
      {% endif %}
    {% endfor %}

    {% if page < total_pages %}
      <a href="{{ url_for('gallery', search=search_name, sort=sort_by, page=page+1, per_page=per_page) }}">Next &raquo;</a>
    {% else %}
      <span class="disabled">Next &raquo;</span>
    {% endif %}

    <label class="per-page-label" for="perPageSelect" title="Number of images per page">
      <span class="per-page-text">per page</span>
      <select id="perPageSelect" class="per-page-select">
        {% for n in per_page_choices %}
        <option value="{{ n }}" {% if n == per_page %}selected{% endif %}>{{ n }}</option>
        {% endfor %}
      </select>
    </label>
  </div>
  {% endif %}

  <!-- Modal -->
  <div id="modal" class="modal" onclick="if(event.target===this)closeModal()">
    <span class="modal-close" onclick="closeModal()">&times;</span>
    <img id="modalImage" src="" alt="">
    <div class="modal-caption" id="modalCaption"></div>
    <div class="modal-actions">
      <a id="modalDownload" class="btn btn-green" download>Download</a>
      <button id="modalDelete" class="btn btn-red btn-sm">Delete</button>
    </div>
  </div>

{% endblock %}

{% block scripts %}
  <script>
    /* --- Sort --- */
    function applySort(value) {
      const url = new URL(window.location);
      url.searchParams.set('sort', value);
      url.searchParams.set('page', '1');
      window.location = url;
    }

    /* --- Modal --- */
    const modal = document.getElementById('modal');
    const modalImg = document.getElementById('modalImage');
    const modalCaption = document.getElementById('modalCaption');
    const modalDownload = document.getElementById('modalDownload');
    const modalDeleteBtn = document.getElementById('modalDelete');
    let currentModalFilename = '';
    let scale = 1, posX = 0, posY = 0, isDragging = false, startX, startY;

    function openModal(src, name) {
      modal.classList.add('open');
      modalImg.src = src;
      modalImg.style.transform = '';
      modalCaption.textContent = name;
      modalDownload.href = src;
      modalDownload.download = name;
      currentModalFilename = name;
      scale = 1; posX = 0; posY = 0;
      document.body.style.overflow = 'hidden';
    }

    function closeModal() {
      modal.classList.remove('open');
      document.body.style.overflow = '';
    }

    /* Step to the previous/next gallery thumbnail while the modal is open.
       Cards are re-queried live because deletes remove them from the DOM.
       Navigation wraps around the ends of the current page. */
    function navigateModal(direction) {
      const cards = Array.from(document.querySelectorAll('.gallery-card'));
      if (cards.length === 0) return;
      const current = cards.findIndex(c => c.dataset.filename === currentModalFilename);
      const start = current === -1 ? 0 : current;
      const next = (start + direction + cards.length) % cards.length;
      const card = cards[next];
      const img = card.querySelector('img');
      if (img) openModal(img.getAttribute('src'), card.dataset.filename);
    }

    document.addEventListener('keydown', (e) => {
      if (!modal.classList.contains('open')) return;
      if (e.key === 'Escape') { closeModal(); return; }
      if (e.key === 'ArrowRight') { e.preventDefault(); navigateModal(1); }
      else if (e.key === 'ArrowLeft') { e.preventDefault(); navigateModal(-1); }
    });

    modalDeleteBtn.addEventListener('click', async () => {
      if (!currentModalFilename) return;
      if (!confirm('Delete ' + currentModalFilename + ' and its associated files?')) return;
      const ok = await doDelete(currentModalFilename);
      if (ok) {
        closeModal();
        const card = document.querySelector('.gallery-card[data-filename="' + currentModalFilename + '"]');
        if (card) card.remove();
      }
    });

    /* --- Delete --- */
    async function doDelete(filename) {
      try {
        const res = await fetch(BASE + '/delete-output', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({filename: filename}),
        });
        const data = await res.json();
        if (data.ok) return true;
        alert('Delete failed: ' + (data.reason || 'unknown'));
        return false;
      } catch (e) {
        alert('Delete failed: ' + e.message);
        return false;
      }
    }

    async function deleteOutput(filename, btnElem) {
      if (!confirm('Delete ' + filename + ' and its associated files?')) return;
      const ok = await doDelete(filename);
      if (ok) {
        const card = btnElem.closest('.gallery-card');
        if (card) card.remove();
      }
    }

    /* --- Bulk selection --- */
    const bulkBar = document.getElementById('bulkBar');
    const bulkCount = document.getElementById('bulkCount');

    function getSelectedFiles() {
      return Array.from(document.querySelectorAll('.card-check:checked')).map(cb => cb.dataset.name);
    }

    function updateBulk() {
      const sel = getSelectedFiles();
      bulkCount.textContent = sel.length;
      bulkBar.classList.toggle('visible', sel.length > 0);
      document.querySelectorAll('.gallery-card').forEach(card => {
        const cb = card.querySelector('.card-check');
        card.classList.toggle('selected', cb && cb.checked);
      });
    }

    document.getElementById('bulkClearBtn').addEventListener('click', () => {
      document.querySelectorAll('.card-check:checked').forEach(cb => { cb.checked = false; });
      updateBulk();
    });

    document.getElementById('bulkDeleteBtn').addEventListener('click', async () => {
      const files = getSelectedFiles();
      if (files.length === 0) return;
      if (!confirm('Delete ' + files.length + ' selected files and their associated data?')) return;

      try {
        const res = await fetch(BASE + '/bulk-delete', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({filenames: files}),
        });
        const data = await res.json();
        if (data.ok) {
          files.forEach(f => {
            const card = document.querySelector('.gallery-card[data-filename="' + f + '"]');
            if (card) card.remove();
          });
          updateBulk();
        } else {
          alert('Bulk delete failed: ' + (data.reason || 'unknown'));
        }
      } catch (e) {
        alert('Bulk delete failed: ' + e.message);
      }
    });

    /* --- Zoom/pan in modal ---
       Transform order is `translate() scale()` so the translation happens in
       screen-space: panning stays 1:1 with the cursor regardless of zoom level.
       (`scale() translate()` would amplify drags by the scale factor, making
       panning feel jumpy when zoomed in.) DOM writes are coalesced into a
       single requestAnimationFrame so the high-frequency mousemove stream
       repaints at most once per frame instead of thrashing layout. */
    let rafPending = false;
    function applyTransform() {
      rafPending = false;
      modalImg.style.transform =
        'translate(' + posX + 'px, ' + posY + 'px) scale(' + scale + ')';
    }
    function scheduleTransform() {
      if (rafPending) return;
      rafPending = true;
      requestAnimationFrame(applyTransform);
    }

    modalImg.addEventListener('wheel', (e) => {
      e.preventDefault();
      scale = Math.min(Math.max(0.5, scale + e.deltaY * -0.002), 5);
      scheduleTransform();
    });
    modalImg.addEventListener('mousedown', (e) => {
      e.preventDefault();
      isDragging = true; startX = e.clientX - posX; startY = e.clientY - posY;
      modalImg.style.cursor = 'grabbing';
    });
    modalImg.addEventListener('mouseup', () => { isDragging = false; modalImg.style.cursor = 'grab'; });
    modalImg.addEventListener('mouseleave', () => { isDragging = false; modalImg.style.cursor = 'grab'; });
    modalImg.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      posX = e.clientX - startX; posY = e.clientY - startY;
      scheduleTransform();
    });

    /* --- Running-jobs banner + auto-refresh on job completion --- */
    const runningBanner = document.getElementById('runningBanner');
    const runningJobList = document.getElementById('runningJobList');
    const autoRefreshToggle = document.getElementById('autoRefreshToggle');

    /* Restore the auto-refresh preference (default OFF). Auto-reload on
       job-finish used to be on by default but it surprised users — when
       their running job finished while they were browsing the gallery,
       the page would reload out from under them and they'd interpret
       that as the job being "halted". Opt-in only now. */
    (function () {
      let on = false;
      try { on = localStorage.getItem('gallery-auto-refresh') === '1'; } catch (e) {}
      if (autoRefreshToggle) {
        autoRefreshToggle.checked = on;
        autoRefreshToggle.addEventListener('change', () => {
          try {
            localStorage.setItem('gallery-auto-refresh', autoRefreshToggle.checked ? '1' : '0');
          } catch (e) {}
        });
      }
    })();

    // Set of job names that were "running" at the previous poll.
    let prevRunning = null;

    async function pollRunningJobs() {
      try {
        const res = await fetch(BASE + '/jobs-json');
        const jobs = await res.json();
        const running = jobs.filter(j => j.status === 'running');
        const runningNames = new Set(running.map(j => j.name));

        // A job present last poll but absent now has finished. Reload so
        // its output PNG shows up (search/sort/page are URL params, so
        // the current view is preserved across the reload).
        if (prevRunning) {
          let finished = false;
          prevRunning.forEach(name => { if (!runningNames.has(name)) finished = true; });
          if (finished && autoRefreshToggle && autoRefreshToggle.checked) {
            window.location.reload();
            return;
          }
        }
        prevRunning = runningNames;

        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);

    /* Per-page selector: reload the gallery preserving search/sort and
       resetting to page 1 when the user changes the page size. */
    (function () {
      const sel = document.getElementById('perPageSelect');
      if (!sel) return;
      sel.addEventListener('change', () => {
        const url = new URL(window.location.href);
        url.searchParams.set('per_page', sel.value);
        url.searchParams.set('page', '1');
        window.location.href = url.toString();
      });
    })();

    /* 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 %}