{% extends "base.html" %}
{% import 'partials/_components.html' as components %}
{% block topbar_current %}home{% endblock %}
{% block title %}TESS QuickLook{% endblock %}
{% block head %}
  <style>
    /* Theme variables, * box-sizing, a colour, .btn*, .theme-toggle base,
       @keyframes spin, and the .page-loading family all live in
       static/css/quicklook.css. */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      max-width: 960px; margin: 0 auto; padding: 24px 20px;
      color: var(--text); background: var(--bg); line-height: 1.5;
      transition: background-color 0.3s, color 0.3s;
    }

    /* --- Header --- */
    .header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 4px; position: relative; }
    h1 { text-align: center; font-size: 1.6rem; margin: 0; }
    .subtitle { text-align: center; color: var(--text-sec); font-size: 0.9rem; margin-bottom: 24px; }
    /* Page-specific: pin the toggle to the header's right edge. */
    .header .theme-toggle {
      position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    }

    /* --- Card --- */
    .card {
      background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px;
      padding: 20px 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
    .form-grid .full-width { grid-column: 1 / -1; }
    label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 3px; color: var(--text); }
    .label-row { display: flex; align-items: center; gap: 6px; }
    .help-tip {
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px; border-radius: 50%; font-size: 0.65rem; font-weight: 700;
      background: var(--border); color: var(--text-sec); cursor: help; flex-shrink: 0;
      position: relative; user-select: none;
    }
    .help-tip:hover { background: var(--primary); color: #fff; }
    .help-tip::after {
      content: attr(data-tip);
      position: absolute;
      bottom: calc(100% + 6px); left: 50%;
      transform: translateX(calc(-50% + var(--tip-shift, 0px)));
      background: var(--text); color: var(--card-bg);
      padding: 6px 10px; border-radius: 6px;
      font-size: 0.75rem; font-weight: normal;
      white-space: normal; width: max-content; max-width: 260px;
      text-align: left; line-height: 1.4;
      letter-spacing: normal; text-transform: none;
      opacity: 0; visibility: hidden;
      transition: opacity 0.15s, visibility 0.15s;
      pointer-events: none; z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .help-tip::before {
      content: ''; position: absolute;
      bottom: calc(100% + 1px); left: 50%;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--text);
      opacity: 0; visibility: hidden;
      transition: opacity 0.15s, visibility 0.15s;
      pointer-events: none; z-index: 100;
    }
    .help-tip:hover::after, .help-tip:hover::before,
    .help-tip.active::after, .help-tip.active::before,
    .help-tip:focus::after, .help-tip:focus::before {
      opacity: 1; visibility: visible;
    }
    input[type="text"], input[type="number"], select, textarea {
      width: 100%; padding: 7px 10px; border: 1px solid var(--input-border); border-radius: 5px;
      font-size: 0.9rem; background: var(--input-bg); color: var(--text);
      transition: border-color 0.2s, background-color 0.2s;
    }
    input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); background: var(--card-bg); }
    input.invalid { border-color: var(--red); }
    .validation-msg { color: var(--red); font-size: 0.78rem; margin-top: 2px; display: none; }
    .sector-hint {
      margin-top: 4px; font-size: 0.78rem; color: var(--text-sec);
      display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    }
    .sector-hint:empty { display: none; }
    .sector-hint .sector-chip {
      cursor: pointer; padding: 1px 7px; border-radius: 10px;
      background: var(--input-bg); border: 1px solid var(--border);
      color: var(--text); font-variant-numeric: tabular-nums;
      font-size: 0.75rem; line-height: 1.4;
    }
    .sector-hint .sector-chip:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
    .sector-hint .sector-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
    .sector-hint .sector-chip.warn { background: var(--red); color: #fff; border-color: var(--red); }
    .sector-hint .sector-warn { color: var(--red); font-weight: 600; }
    .checkbox-group { display: flex; gap: 20px; align-items: center; padding-top: 4px; }
    .checkbox-group label { display: flex; align-items: center; gap: 5px; font-weight: normal; cursor: pointer; }

    /* --- Buttons: home page uses chunkier buttons in the form's button
           row and the result download row; everywhere else (topbar, etc.)
           the shared .btn padding applies. .btn-sm is excluded so the
           Reset button stays small. --- */
    .btn-row .btn:not(.btn-sm),
    .result-actions .btn { padding: 10px 24px; font-size: 0.95rem; }
    .btn-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

    /* --- Batch mode --- */
    .batch-toggle { font-size: 0.85rem; color: var(--primary); cursor: pointer; font-weight: 600; background: none; border: none; padding: 0; }
    .batch-section { display: none; margin-top: 10px; }
    .batch-section.visible { display: block; }
    .batch-section textarea { min-height: 80px; font-family: monospace; font-size: 0.85rem; resize: vertical; }
    .batch-hint { font-size: 0.78rem; color: var(--text-sec); margin-top: 4px; }

    /* --- Job queue --- */
    .queue-section { margin-bottom: 16px; }
    .queue-section h2 { font-size: 1rem; margin-bottom: 0; }
    .queue-header {
      display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
    }
    .queue-count { font-size: 0.78rem; color: var(--text-sec); font-weight: 500; }
    .queue-toggle {
      margin-left: auto; font-size: 0.8rem; color: var(--primary); cursor: pointer;
      background: none; border: none; padding: 0; font-weight: 600;
    }
    .queue-toggle:hover { text-decoration: underline; }
    .queue-list { list-style: none; padding: 0; margin: 0; }
    .queue-list.collapsed { display: none; }
    .queue-hidden-hint {
      font-size: 0.78rem; color: var(--text-sec); padding: 6px 12px; font-style: italic;
    }
    .queue-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 12px; background: var(--card-bg); border: 1px solid var(--border);
      border-radius: 6px; margin-bottom: 6px; font-size: 0.85rem;
    }
    .queue-item .job-name { font-weight: 600; flex: 1; }
    .queue-item .job-time { font-size: 0.72rem; color: var(--text-sec); }
    .queue-item .job-error { font-size: 0.72rem; color: var(--red); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .badge {
      display: inline-block; padding: 2px 8px; border-radius: 10px;
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
    }
    .badge-running { background: var(--badge-run-bg); color: var(--badge-run-fg); }
    .badge-done { background: var(--badge-done-bg); color: var(--badge-done-fg); }
    .badge-error { background: var(--badge-err-bg); color: var(--badge-err-fg); }
    .badge-cancelled { background: var(--badge-cancel-bg); color: var(--badge-cancel-fg); }

    /* --- Status bar --- */
    .status-bar {
      display: none; align-items: center; gap: 10px; padding: 10px 16px;
      border-radius: 8px; font-size: 0.9rem; font-weight: 600; margin-bottom: 16px;
    }
    .status-bar.running { display: flex; background: var(--status-run-bg); border: 1px solid var(--status-run-border); color: var(--status-run-fg); }
    /* Queued reuses the running styling so the bar stays visible while the
       watched job is waiting for the worker — without this rule the
       missing-class fallback to base `display:none` made the bar flicker
       every websocket update (~1.5 s). */
    .status-bar.queued { display: flex; background: var(--status-run-bg); border: 1px solid var(--status-run-border); color: var(--status-run-fg); }
    .status-bar.done { display: flex; background: var(--status-done-bg); border: 1px solid var(--status-done-border); color: var(--status-done-fg); }
    .status-bar.error, .status-bar.cancelled {
      display: flex; background: var(--status-err-bg); border: 1px solid var(--status-err-border); color: var(--status-err-fg);
    }
    .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 */
    .status-bar .btn { margin-left: auto; }

    /* --- Progress --- */
    .progress-section { display: none; margin-bottom: 16px; }
    .progress-section.visible { display: block; }
    .progress-bar-wrap { background: var(--progress-bg); border-radius: 6px; height: 8px; overflow: hidden; margin-bottom: 6px; }
    .progress-bar-fill { height: 100%; background: var(--primary); border-radius: 6px; transition: width 0.5s ease; width: 0%; }
    .progress-bar-wrap.done .progress-bar-fill { background: var(--green); }
    .progress-bar-wrap.error .progress-bar-fill, .progress-bar-wrap.cancelled .progress-bar-fill { background: var(--red); }
    .progress-label { font-size: 0.82rem; color: var(--text-sec); }

    /* --- Log --- */
    .log-section { display: none; }
    .log-section.visible { display: block; }
    .log-toggle {
      display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
      font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-bottom: 6px;
      user-select: none; border: none; background: none; padding: 0;
    }
    .log-toggle .arrow { transition: transform 0.2s; }
    .log-toggle.open .arrow { transform: rotate(90deg); }
    pre {
      background: var(--log-bg); color: var(--log-text); padding: 14px; border-radius: 8px;
      max-height: 300px; overflow: auto; white-space: pre-wrap; font-size: 0.78rem;
      line-height: 1.6; margin-top: 0;
    }

    /* --- Result --- */
    /* .result-section show/hide + fade-in live in shared CSS */
    .result-section h2 { font-size: 1.1rem; margin-bottom: 10px; }
    .result-section img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
    .result-actions { display: flex; gap: 12px; margin-top: 12px; justify-content: center; }

    /* --- Recent results --- */
    .recent-section { margin-top: 28px; }
    .recent-section h2 { font-size: 1.1rem; margin-bottom: 12px; }
    .recent-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
    }
    .recent-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;
    }
    .recent-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .recent-card img { width: 100%; height: auto; display: block; cursor: pointer; }
    .recent-card .card-footer {
      display: flex; align-items: center; padding: 4px 8px;
      border-top: 1px solid var(--border-light); gap: 4px;
    }
    .recent-card .card-label {
      flex: 1; font-size: 0.72rem; 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: 1rem;
      padding: 2px 4px; line-height: 1; transition: color 0.15s;
    }
    .delete-btn:hover { color: var(--red); }

    .footer-nav { text-align: center; margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

    /* --- Collapsible sections --- */
    .collapsible {
      background: var(--hover-bg); border: 1px solid var(--border); border-radius: 8px;
      margin-bottom: 12px;
    }
    .collapsible-header { border-radius: 8px; }
    .collapsible.open .collapsible-header { border-radius: 8px 8px 0 0; }
    .collapsible-header {
      display: flex; align-items: center; justify-content: space-between; width: 100%;
      padding: 12px 16px; background: var(--card-bg); border: none; cursor: pointer;
      font-size: 0.95rem; font-weight: 600; color: var(--text); text-align: left;
      transition: background-color 0.15s;
    }
    .collapsible-header:hover { background: var(--hover-bg); }
    .collapsible-header .arrow { transition: transform 0.2s; font-size: 0.75rem; color: var(--text-sec); }
    .collapsible.open .collapsible-header .arrow { transform: rotate(90deg); }
    .collapsible-content {
      display: none; padding: 0 16px 16px; border-top: 1px solid var(--border-light);
    }
    .collapsible.open .collapsible-content { display: block; }

    /* --- Toast notifications --- */
    .toast-container {
      position: fixed; top: 20px; right: 20px; z-index: 9999;
      display: flex; flex-direction: column; gap: 8px; pointer-events: none;
    }
    .toast {
      pointer-events: auto; padding: 10px 16px; border-radius: 8px;
      font-size: 0.85rem; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      animation: toast-in 0.3s ease; max-width: 340px;
      display: flex; align-items: center; gap: 8px;
    }
    .toast.info { background: var(--status-run-bg); color: var(--status-run-fg); border: 1px solid var(--status-run-border); }
    .toast.success { background: var(--status-done-bg); color: var(--status-done-fg); border: 1px solid var(--status-done-border); }
    .toast.error { background: var(--status-err-bg); color: var(--status-err-fg); border: 1px solid var(--status-err-border); }
    .toast.leaving { animation: toast-out 0.3s ease forwards; }
    @keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
    @keyframes toast-out { from { opacity: 1; } to { opacity: 0; transform: translateX(40px); } }
    .toast-close { background: none; border: none; cursor: pointer; font-size: 1rem; color: inherit; opacity: 0.6; padding: 0 0 0 6px; }
    .toast-close:hover { opacity: 1; }

    /* --- Kbd hint --- */
    .kbd-hint { font-size: 0.72rem; color: var(--text-sec); margin-left: 8px; }
    kbd { background: var(--progress-bg); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; font-size: 0.72rem; font-family: inherit; }

    @media (max-width: 600px) {
      .form-grid { grid-template-columns: 1fr; }
      .checkbox-group { flex-wrap: wrap; gap: 10px; }
      .recent-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
      .theme-toggle { position: static; transform: none; }
      .header { flex-wrap: wrap; }
    }
  </style>
{% endblock %}

{% block before_topbar %}
<!-- Toast container -->
<div class="toast-container" id="toastContainer"></div>
{% endblock %}

{% block content %}
<div class="header">
  <h1>TESS QuickLook</h1>
</div>
<p class="subtitle">Transit search pipeline for TESS light curves</p>

<form id="qlForm" class="card">
  <!-- Basic Options -->
  <div class="collapsible open" data-section="basic">
    <button type="button" class="collapsible-header" onclick="toggleCollapsible(this)">
      <span>Basic Options</span>
      <span class="arrow">&#9654;</span>
    </button>
    <div class="collapsible-content">
      <div class="form-grid">
        <div class="full-width">
          <div class="label-row">
            <label for="name">Target Name</label>
            <span class="help-tip" tabindex="0" data-tip="TOI ID (e.g. TOI-1234), TIC ID (e.g. TIC 12345678), or common name (e.g. WASP-21).">?</span>
          </div>
          <input type="text" name="name" id="name" placeholder="e.g. TOI-1234, TIC 12345678" required autofocus>
          <div class="validation-msg" id="nameValidation">Enter a target name (TOI, TIC, or common name)</div>
        </div>
        <div>
          <div class="label-row">
            <label for="sector">Sector</label>
            <span class="help-tip" tabindex="0" data-tip="-1 = latest available sector. Ignored when 'Run each available sector' is checked.">?</span>
          </div>
          <input type="number" name="sector" id="sector" value="-1">
          <div id="sectorHint" class="sector-hint" aria-live="polite"></div>
          <label style="display:flex;align-items:center;gap:5px;margin-top:5px;font-weight:normal;font-size:0.82rem;cursor:pointer;">
            <input type="checkbox" name="each_sector" id="each_sector"> Run each available sector
            <span class="help-tip" tabindex="0" data-tip="Submit one job per available sector for this target instead of just the selected one.">?</span>
          </label>
        </div>
        <div>
          <div class="label-row">
            <label for="pipeline">Pipeline</label>
            <span class="help-tip" tabindex="0" data-tip="Source of TESS light curves. SPOC = official 2-min cadence; TESS-SPOC/QLP/TGLC/CDIPS/PATHOS/TASOC/T16 are HLSP products from FFIs.">?</span>
          </div>
          <select name="pipeline" id="pipeline">
            {# Fallback list mirrors quicklook.tql.ALL_TESS_PIPELINES so the
               dropdown still works if the index() view ever fails to pass
               `pipelines` (e.g. when the running server hasn't been
               reloaded after the route was updated). #}
            {% for p in pipelines | default(['spoc','tess-spoc','qlp','tglc','cdips','pathos','eleanor','t16','gsfc-eleanor-lite','tequila','tica','diamante'], true) %}
            <option value="{{p}}">{{ p | upper }}</option>
            {% endfor %}
          </select>
          <label style="display:flex;align-items:center;gap:5px;margin-top:5px;font-weight:normal;font-size:0.82rem;cursor:pointer;">
            <input type="checkbox" name="each_pipeline" id="each_pipeline"> Run each available pipeline
            <span class="help-tip" tabindex="0" data-tip="Submit one job per available pipeline for this target on the latest sector (mutually exclusive with 'Run each available sector').">?</span>
          </label>
        </div>
        <div>
          <div class="label-row">
            <label for="fluxtype">Flux / LC Type</label>
            <span class="help-tip" tabindex="0" data-tip="SPOC/TESS-SPOC: PDCSAP = systematics-corrected flux (recommended), SAP = raw simple aperture photometry. TGLC: APERTURE vs PSF photometry. Ignored for other pipelines.">?</span>
          </div>
          <select name="fluxtype" id="fluxtype">
            {% for f in ['pdcsap','sap'] %}
            <option value="{{f}}">{{ f | upper }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <div class="label-row">
            <label for="exptime">Exposure Time (s)</label>
            <span class="help-tip" tabindex="0" data-tip="Cadence in seconds: 20 (20s), 120 (2min), 200 (3.3min), 600 (10min), 1800 (30min). Select 'auto' to auto-detect.">?</span>
          </div>
          <select name="exptime" id="exptime">
            <option value="" selected>auto</option>
            {% for e in [20, 120, 200, 600, 1800] %}
            <option value="{{e}}">{{e}}</option>
            {% endfor %}
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Detrending -->
  <div class="collapsible" data-section="detrending">
    <button type="button" class="collapsible-header" onclick="toggleCollapsible(this)">
      <span>Detrending</span>
      <span class="arrow">&#9654;</span>
    </button>
    <div class="collapsible-content">
      <div class="form-grid">
        <div>
          <div class="label-row">
            <label for="quality_bitmask">Quality Bitmask</label>
            <span class="help-tip" tabindex="0" data-tip="How aggressively to drop cadences flagged by SPOC quality flags. 'default' is recommended; 'hardest' rejects the most data.">?</span>
          </div>
          <select name="quality_bitmask" id="quality_bitmask">
            {% for q in ['none','default','hard','hardest'] %}
            <option value="{{q}}" {% if q == 'default' %}selected{% endif %}>{{ q | capitalize }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <div class="label-row">
            <label for="edge_cutoff">Edge Cutoff (days)</label>
            <span class="help-tip" tabindex="0" data-tip="Days to trim from the start and end of each sector to remove edge artifacts and momentum-dump effects.">?</span>
          </div>
          <input type="number" step="0.01" name="edge_cutoff" id="edge_cutoff" value="0.1">
        </div>
        <div>
          <div class="label-row">
            <label for="sigma_clip_raw">Sigma Clip Raw (lo hi)</label>
            <span class="help-tip" tabindex="0" data-tip="Two values: lower and upper sigma bounds for raw light curve clipping. E.g. '10 5' clips below 10-sigma and above 5-sigma.">?</span>
          </div>
          <input type="text" name="sigma_clip_raw" id="sigma_clip_raw" placeholder="10 5" value="10 5">
        </div>
        <div>
          <div class="label-row">
            <label for="sigma_clip_flat">Sigma Clip Flat (lo hi)</label>
            <span class="help-tip" tabindex="0" data-tip="Two values (lo hi), same format as raw. Applied after flattening. Leave blank to skip.">?</span>
          </div>
          <input type="text" name="sigma_clip_flat" id="sigma_clip_flat" placeholder="none">
        </div>
        <div>
          <div class="label-row">
            <label for="flatten_method">Flatten Method</label>
            <span class="help-tip" tabindex="0" data-tip="Detrending algorithm. 'biweight' is robust and fast; 'gp' uses Gaussian Processes; 'notch'/'locor' (Rizzuto et al. 2017) preserve transit shape via a windowed BIC test / rotation-cycle combination, using Window Length as the notch window (days) or LOCoR period (days); others are spline/filter variants (wotan).">?</span>
          </div>
          <select name="flatten_method" id="flatten_method">
            <option value="biweight" selected>biweight</option>
            <option value="gp">gp</option>
            <option value="medfilt">medfilt</option>
            <option value="median">median</option>
            <option value="rspline">rspline</option>
            <option value="hspline">hspline</option>
            <option value="pspline">pspline</option>
            <option value="lowess">lowess</option>
            <option value="cofiam">cofiam</option>
            <option value="supersmoother">supersmoother</option>
            <option value="savgol">savgol</option>
            <option value="notch">notch</option>
            <option value="locor">locor</option>
          </select>
        </div>
        <div>
          <div class="label-row">
            <label for="window_length" id="window_length_label">Window Length (days)</label>
            <span class="help-tip" tabindex="0" id="window_length_tip" data-tip="Window size for detrending in days. Leave blank for automatic selection based on the detected period.">?</span>
          </div>
          <input type="number" step="0.01" name="window_length" id="window_length" placeholder="auto">
        </div>
        <div>
          <div class="label-row">
            <label for="gp_kernel">GP Kernel</label>
            <span class="help-tip" tabindex="0" data-tip="Gaussian Process kernel for GP-based flattening. Only used when Flatten Method is 'gp'.">?</span>
          </div>
          <select name="gp_kernel" id="gp_kernel">
            <option value="periodic_auto" selected>periodic_auto</option>
            <option value="periodic">periodic</option>
            <option value="squared_exp">squared_exp</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Period Search -->
  <div class="collapsible" data-section="period">
    <button type="button" class="collapsible-header" onclick="toggleCollapsible(this)">
      <span>Period Search</span>
      <span class="arrow">&#9654;</span>
    </button>
    <div class="collapsible-content">
      <div class="form-grid">
        <div>
          <div class="label-row">
            <label for="pg_method">Periodogram Method</label>
            <span class="help-tip" tabindex="0" data-tip="GLS = Generalised Lomb-Scargle, LS = classic Lomb-Scargle, BLS = Box Least Squares (transit-shaped; best for shallow transits).">?</span>
          </div>
          <select name="pg_method" id="pg_method">
            {% for pg in ['gls','ls','bls'] %}
            <option value="{{pg}}">{{ pg | upper }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <div class="label-row">
            <label for="period_min">Period Min (days)</label>
            <span class="help-tip" tabindex="0" data-tip="Shortest trial period for the transit search. Default 0.1 days (~2.4 hr).">?</span>
          </div>
          <input type="number" step="0.01" name="period_min" id="period_min" placeholder="0.1">
        </div>
        <div>
          <div class="label-row">
            <label for="period_max">Period Max (days)</label>
            <span class="help-tip" tabindex="0" data-tip="Longest trial period. Defaults to half the data baseline so at least two transits can be detected.">?</span>
          </div>
          <input type="number" step="0.01" name="period_max" id="period_max" placeholder="baseline/2">
        </div>
        <div>
          <div class="label-row">
            <label for="phase_xlim">Phase Panel Half-Width</label>
            <span class="help-tip" tabindex="0" data-tip="Optional phase half-width for panels 7 and 8. 0.1 shows transit phase -0.1..0.1 and eclipse phase 0.4..0.6. Leave blank for automatic zoom.">?</span>
          </div>
          <input type="number" step="0.01" min="0" max="1" name="phase_xlim" id="phase_xlim" placeholder="auto">
        </div>
        <div class="full-width checkbox-group" style="margin-top: 4px;">
          <label><input type="checkbox" name="mask_ephem"> Mask known transits (TOI/custom)</label>
          <span class="help-tip" tabindex="0" data-tip="Remove cadences inside known transits (from the TOI catalog or the Custom Ephemeris field) before running the periodogram search.">?</span>
          <label><input type="checkbox" name="use_priors" id="use_priors" checked> Use star priors (Ms, Rs)</label>
          <span class="help-tip" tabindex="0" data-tip="Pass R_star and M_star (from ExoFOP, ±1σ) to TLS as priors so the transit search uses the host's real properties instead of Sun-like defaults.">?</span>
          <label><input type="checkbox" name="iterative_search" id="iterative_search"> Iterative multi-planet search</label>
          <span class="help-tip" tabindex="0" data-tip="Mask each detected transit and re-run TLS until SDE falls below the minimum (default 5), saving a periodogram + odd-even PNG and a TLS HDF5 for every additional planet.">?</span>
        </div>
        <div class="full-width">
          <div class="label-row">
            <label for="custom_ephem">Custom Ephemeris</label>
            <span class="help-tip" tabindex="0" data-tip="Six space-separated values: Tc Tc_err Period Period_err Tdur Tdur_err (all in days, BJD for Tc).">?</span>
          </div>
          <input type="text" name="custom_ephem" id="custom_ephem" placeholder="Tc Tcerr P Perr Tdur Tdurerr">
        </div>
      </div>
    </div>
  </div>

  <!-- Output -->
  <div class="collapsible" data-section="output">
    <button type="button" class="collapsible-header" onclick="toggleCollapsible(this)">
      <span>Output</span>
      <span class="arrow">&#9654;</span>
    </button>
    <div class="collapsible-content">
      <div class="form-grid">
        <div>
          <div class="label-row">
            <label for="survey">Archival Survey</label>
            <span class="help-tip" tabindex="0" data-tip="Sky survey used for the archival image cutout shown in the QuickLook plot. DSS2 is a good general default.">?</span>
          </div>
          <select name="survey" id="survey">
            {% for s in ['dss1','dss2','dss3','dss4','2mass','sdss','panstarrs'] %}
            <option value="{{s}}">{{ s | upper }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <div class="label-row">
            <label for="suffix">Filename Suffix</label>
            <span class="help-tip" tabindex="0" data-tip="Optional string appended to the output filename, useful for tagging runs (e.g. 'gp_test').">?</span>
          </div>
          <input type="text" name="suffix" id="suffix" placeholder="optional">
        </div>
        <div class="full-width">
          <div class="label-row">
            <label for="outdir">Output Directory</label>
            <span class="help-tip" tabindex="0" data-tip="Where to save the PNG and TLS HDF5 files. Leave blank to use the app's default outputs folder.">?</span>
          </div>
          <input type="text" name="outdir" id="outdir" placeholder="default: app outputs">
        </div>
        <div class="full-width checkbox-group">
          <label>
            <input type="checkbox" name="save" checked> Save outputs
            <span class="help-tip" tabindex="0" data-tip="Save the PNG figure and the TLS results HDF5 file to the output directory.">?</span>
          </label>
          <label>
            <input type="checkbox" name="verbose" checked> Verbose
            <span class="help-tip" tabindex="0" data-tip="Print detailed progress messages to the output log during the run.">?</span>
          </label>
          <label>
            <input type="checkbox" name="overwrite"> Overwrite
            <span class="help-tip" tabindex="0" data-tip="If an output file for this target already exists, re-run and replace it instead of skipping.">?</span>
          </label>
          <label>
            <input type="checkbox" name="show_simbad" checked> Show SIMBAD
            <span class="help-tip" tabindex="0" data-tip="Overplot nearby non-stellar SIMBAD objects (within the archival image FOV) on the QuickLook archival image, labelled by object type (e.g. EclBin).">?</span>
          </label>
        </div>
      </div>
    </div>
  </div>

  <div class="btn-row">
    <button type="submit" class="btn btn-primary" id="submitBtn">Run QuickLook</button>
    <button type="button" class="btn btn-outline btn-sm" id="resetBtn">Reset to Defaults</button>
    <button type="button" class="batch-toggle" id="batchToggleBtn">Batch mode</button>
    <span class="kbd-hint"><kbd>Ctrl</kbd>+<kbd>Enter</kbd> to submit</span>
  </div>
</form>

<!-- Batch submission -->
<div class="batch-section card" id="batchSection">
  <h2 style="font-size: 1rem; margin-top: 0; margin-bottom: 8px;">Batch Submission</h2>
  <p class="batch-hint">Enter one target per line, or comma-separated. All targets use the pipeline settings from the form above.</p>
  <textarea id="batchTargets" name="batch_targets" placeholder="TOI-1234&#10;TOI-5678&#10;TIC 98765432"></textarea>
  <div class="btn-row" style="margin-top: 8px;">
    <button type="button" class="btn btn-primary btn-sm" id="batchSubmitBtn">Submit Batch</button>
    <span id="batchStatus" style="font-size: 0.82rem; color: var(--text-sec);"></span>
  </div>
</div>

<!-- Job queue -->
<div id="queueSection" class="queue-section" style="display:none;">
  <div class="queue-header">
    <h2>Job Queue</h2>
    <span class="queue-count" id="queueCount"></span>
    <button type="button" class="queue-toggle" id="queueToggle"></button>
  </div>
  <ul class="queue-list" id="queueList"></ul>
  <div class="queue-hidden-hint" id="queueHiddenHint" style="display:none;"></div>
</div>

<!-- Status bar -->
<div id="statusBar" class="status-bar">
  <div class="spinner" id="statusSpinner"></div>
  <span id="statusText"></span>
  <button class="btn btn-red btn-sm" id="cancelBtn" style="display:none;" type="button">Cancel</button>
  <button class="btn btn-red btn-sm" id="cancelAllBtn" style="display:none;" type="button" title="Cancel all queued and running jobs">Cancel All Pending</button>
</div>

<!-- Progress -->
<div id="progressSection" class="progress-section">
  <div class="progress-bar-wrap" id="progressWrap">
    <div class="progress-bar-fill" id="progressFill"></div>
  </div>
  <div class="progress-label" id="progressLabel"></div>
</div>

<!-- Log -->
<div id="logSection" class="log-section">
  <button class="log-toggle" id="logToggle" type="button">
    <span class="arrow">&#9654;</span> Output Log
  </button>
  <pre id="log" style="display:none;"></pre>
</div>

<!-- Result -->
<div id="resultSection" class="result-section">
  <h2>Result</h2>
  <img id="resultImage" src="" alt="QuickLook result">
  <div class="result-actions">
    <a id="downloadH5" class="btn btn-green" download>Download TLS (.h5)</a>
    <a id="downloadImg" class="btn btn-outline" download>Download Image</a>
  </div>
</div>

<!-- Recent results -->
<div id="recentSection" class="recent-section">
  <h2>Recent Results</h2>
  <div class="recent-grid" id="recentGrid">
    {% for item in recent_results %}
    <div class="recent-card" data-filename="{{ item.name }}">
      <img src="{{ item.path }}" alt="{{ item.name }}" loading="lazy"
           onclick="window.open('{{ item.path }}', '_blank')">
      <div class="card-footer">
        <span class="card-label" title="{{ item.name }}">{{ item.name }}</span>
        <button class="delete-btn" title="Delete" onclick="deleteOutput('{{ item.name }}', this)">&times;</button>
      </div>
    </div>
    {% endfor %}
  </div>
  {% if not recent_results %}
  <p class="empty-state" id="recentEmpty">
    No results yet &mdash; submit a target above and the rendered thumbnail will appear here.
  </p>
  {% endif %}
</div>

<!-- Quick link to the full gallery below recent results -->
<div class="footer-nav">
  <a href="{{ url_for('gallery') }}" class="btn btn-outline">Browse all results in Gallery &raquo;</a>
</div>
{% endblock %}

{% block scripts %}
<script>
/* =========================================================================
   DOM refs
   ========================================================================= */
const $ = id => document.getElementById(id);
const form = $('qlForm');
const submitBtn = $('submitBtn');
const resetBtn = $('resetBtn');
const statusBar = $('statusBar');
const statusSpinner = $('statusSpinner');
const statusText = $('statusText');
const cancelBtn = $('cancelBtn');
const cancelAllBtn = $('cancelAllBtn');
const progressSection = $('progressSection');
const progressWrap = $('progressWrap');
const progressFill = $('progressFill');
const progressLabel = $('progressLabel');
const logSection = $('logSection');
const logToggle = $('logToggle');
const logElem = $('log');
const resultSection = $('resultSection');
const resultImage = $('resultImage');
const downloadH5 = $('downloadH5');
const downloadImg = $('downloadImg');
const queueSection = $('queueSection');
const queueList = $('queueList');
const queueCount = $('queueCount');
const queueToggle = $('queueToggle');
const queueHiddenHint = $('queueHiddenHint');
const batchSection = $('batchSection');
const batchTargets = $('batchTargets');
const batchSubmitBtn = $('batchSubmitBtn');
const batchStatus = $('batchStatus');
const nameInput = $('name');
const nameValidation = $('nameValidation');
const toastContainer = $('toastContainer');

let activeWs = null;
let activeTarget = null;
let jobRunning = false;

/* =========================================================================
   Help tooltips (hover + click toggle, edge-aware positioning)
   ========================================================================= */
const TIP_MAX_WIDTH = 260;   // matches CSS max-width
const TIP_EDGE_PAD = 8;      // viewport edge padding

function positionTip(tip) {
  // Measure the tooltip via a hidden clone so we get its real width,
  // which is often less than TIP_MAX_WIDTH for short text.
  const rect = tip.getBoundingClientRect();
  const probe = document.createElement('span');
  probe.textContent = tip.getAttribute('data-tip') || '';
  probe.style.cssText =
    'position:fixed;visibility:hidden;pointer-events:none;' +
    'padding:6px 10px;font-size:0.75rem;line-height:1.4;' +
    'max-width:' + TIP_MAX_WIDTH + 'px;width:max-content;white-space:normal;';
  document.body.appendChild(probe);
  const tipWidth = probe.getBoundingClientRect().width;
  document.body.removeChild(probe);

  const center = rect.left + rect.width / 2;
  const halfTip = tipWidth / 2;
  const vw = window.innerWidth;
  let shift = 0;
  if (center - halfTip < TIP_EDGE_PAD) {
    shift = TIP_EDGE_PAD - (center - halfTip);
  } else if (center + halfTip > vw - TIP_EDGE_PAD) {
    shift = -((center + halfTip) - (vw - TIP_EDGE_PAD));
  }
  tip.style.setProperty('--tip-shift', shift + 'px');
}

document.addEventListener('mouseover', (e) => {
  const tip = e.target.closest && e.target.closest('.help-tip');
  if (tip) positionTip(tip);
});
document.addEventListener('focusin', (e) => {
  if (e.target.classList && e.target.classList.contains('help-tip')) positionTip(e.target);
});
window.addEventListener('resize', () => {
  document.querySelectorAll('.help-tip.active').forEach(positionTip);
});

document.addEventListener('click', (e) => {
  const tip = e.target.closest('.help-tip');
  if (tip) {
    e.preventDefault();
    e.stopPropagation();
    const wasActive = tip.classList.contains('active');
    document.querySelectorAll('.help-tip.active').forEach(t => t.classList.remove('active'));
    if (!wasActive) {
      positionTip(tip);
      tip.classList.add('active');
    }
  } else {
    document.querySelectorAll('.help-tip.active').forEach(t => t.classList.remove('active'));
  }
});
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    document.querySelectorAll('.help-tip.active').forEach(t => t.classList.remove('active'));
  }
});

/* Dark-mode handling (applyTheme + init + toggle click) lives in
   static/js/quicklook.js, loaded before this script. */

/* =========================================================================
   Toast notifications
   ========================================================================= */
function showToast(message, type, duration) {
  type = type || 'info';
  duration = duration || 4000;
  const toast = document.createElement('div');
  toast.className = 'toast ' + type;
  toast.innerHTML = '<span>' + message + '</span><button class="toast-close">&times;</button>';
  toastContainer.appendChild(toast);
  const close = () => {
    toast.classList.add('leaving');
    setTimeout(() => toast.remove(), 300);
  };
  toast.querySelector('.toast-close').onclick = close;
  setTimeout(close, duration);
}

function notifyBrowser(title, body) {
  if (!('Notification' in window)) return;
  if (Notification.permission === 'granted') {
    new Notification(title, { body: body, icon: BASE + '/static/favicon.ico' });
  } else if (Notification.permission !== 'denied') {
    Notification.requestPermission().then(p => {
      if (p === 'granted') new Notification(title, { body: body });
    });
  }
}

/* =========================================================================
   Form state persistence (localStorage)
   ========================================================================= */
const FORM_STORAGE_KEY = 'ql-form-state';
const PERSIST_FIELDS = [
  'name','sector','pipeline','fluxtype','exptime','quality_bitmask','flatten_method',
  'window_length','edge_cutoff','gp_kernel','pg_method','period_min','period_max',
  'phase_xlim','sigma_clip_raw','sigma_clip_flat','custom_ephem','survey','outdir','suffix'
];
const PERSIST_CHECKS = ['save','verbose','overwrite','mask_ephem','each_sector','each_pipeline','use_priors','show_simbad','iterative_search'];

function saveFormState() {
  const state = {};
  PERSIST_FIELDS.forEach(f => { const el = form.elements[f]; if (el) state[f] = el.value; });
  PERSIST_CHECKS.forEach(f => { const el = form.elements[f]; if (el) state['chk_' + f] = el.checked; });
  localStorage.setItem(FORM_STORAGE_KEY, JSON.stringify(state));
}

function loadFormState() {
  const raw = localStorage.getItem(FORM_STORAGE_KEY);
  if (!raw) return;
  try {
    const state = JSON.parse(raw);
    PERSIST_FIELDS.forEach(f => { const el = form.elements[f]; if (el && state[f] !== undefined) el.value = state[f]; });
    PERSIST_CHECKS.forEach(f => { const el = form.elements[f]; if (el && state['chk_' + f] !== undefined) el.checked = state['chk_' + f]; });
  } catch(e) {}
}

function resetFormDefaults() {
  localStorage.removeItem(FORM_STORAGE_KEY);
  form.reset();
  // Re-apply defaults
  form.elements['sector'].value = '-1';
  form.elements['edge_cutoff'].value = '0.1';
  form.elements['sigma_clip_raw'].value = '10 5';
  form.elements['gp_kernel'].value = 'periodic_auto';
  form.elements['flatten_method'].value = 'biweight';
  form.elements['save'].checked = true;
  form.elements['verbose'].checked = true;
  form.elements['show_simbad'].checked = true;
  form.elements['each_sector'].checked = false;
  form.elements['each_pipeline'].checked = false;
  showToast('Form reset to defaults', 'info');
}

loadFormState();
resetBtn.addEventListener('click', resetFormDefaults);

/* =========================================================================
   Dependent field state — disable inputs whose value would be ignored
   ========================================================================= */
// Options for the Flux / LC-Type dropdown, keyed by pipeline. SPOC-family
// pipelines choose a flux column; TGLC chooses aperture vs PSF photometry.
// Pipelines absent from this map expose no such choice.
const FLUXTYPE_OPTIONS = {
  'spoc': [['pdcsap', 'PDCSAP'], ['sap', 'SAP']],
  'tess-spoc': [['pdcsap', 'PDCSAP'], ['sap', 'SAP']],
  'tglc': [['aperture', 'APERTURE'], ['psf', 'PSF']],
};

// Rebuild the Flux / LC-Type <option>s to match the selected pipeline,
// preserving the current selection when it stays valid.
function syncFluxtypeOptions(pipelineValue) {
  const fluxtype = form.elements['fluxtype'];
  if (!fluxtype) return;
  const opts = FLUXTYPE_OPTIONS[pipelineValue];
  const prev = fluxtype.value;
  fluxtype.innerHTML = '';
  (opts || [['', 'n/a']]).forEach(function (pair) {
    const o = document.createElement('option');
    o.value = pair[0];
    o.textContent = pair[1];
    fluxtype.appendChild(o);
  });
  if (opts && opts.some(function (pair) { return pair[0] === prev; })) {
    fluxtype.value = prev;
  }
}

function updateFieldStates() {
  const eachSector = form.elements['each_sector'];
  const eachPipeline = form.elements['each_pipeline'];
  const sectorInput = form.elements['sector'];
  const pipelineInput = form.elements['pipeline'];

  // Mutually exclusive: enabling one forces the other off.
  if (eachSector && eachPipeline) {
    if (eachSector.checked && eachPipeline.checked) {
      // last-edited check would need a flag; simplest: if user clicked
      // one while the other was on, the change handler below uncheck
      // the other before this runs. As a safety net, prefer each_sector.
      eachPipeline.checked = false;
    }
  }

  if (eachSector && sectorInput) {
    const disabled = eachSector.checked || (eachPipeline && eachPipeline.checked);
    sectorInput.disabled = disabled;
    sectorInput.title = disabled
      ? 'Ignored — either "Run each available sector" or "Run each available pipeline" is on'
      : '';
    sectorInput.style.opacity = disabled ? '0.5' : '';
  }

  if (eachPipeline && pipelineInput) {
    const disabled = eachPipeline.checked;
    pipelineInput.disabled = disabled;
    pipelineInput.title = disabled ? 'Ignored — "Run each available pipeline" is on' : '';
    pipelineInput.style.opacity = disabled ? '0.5' : '';
    if (eachSector) {
      eachSector.disabled = disabled;
      eachSector.parentElement.style.opacity = disabled ? '0.5' : '';
    }
  }
  if (eachSector && eachPipeline) {
    // when each_sector is on, grey-out each_pipeline too
    if (eachSector.checked) {
      eachPipeline.disabled = true;
      eachPipeline.parentElement.style.opacity = '0.5';
    } else if (!eachPipeline.checked) {
      eachPipeline.disabled = false;
      eachPipeline.parentElement.style.opacity = '';
    }
  }

  const pipeline = form.elements['pipeline'];
  const fluxtype = form.elements['fluxtype'];
  if (pipeline && fluxtype) {
    syncFluxtypeOptions(pipeline.value);
    const hasChoice = Object.prototype.hasOwnProperty.call(FLUXTYPE_OPTIONS, pipeline.value);
    fluxtype.disabled = !hasChoice;
    fluxtype.title = hasChoice
      ? ''
      : 'Ignored — only SPOC, TESS-SPOC, and TGLC pipelines have a flux / LC-type choice';
    fluxtype.style.opacity = hasChoice ? '' : '0.5';
  }

  const flatten = form.elements['flatten_method'];
  const gpKernel = form.elements['gp_kernel'];
  if (flatten && gpKernel) {
    const disabled = flatten.value !== 'gp';
    gpKernel.disabled = disabled;
    gpKernel.title = disabled ? 'Ignored — only used when Flatten Method is "gp"' : '';
    gpKernel.style.opacity = disabled ? '0.5' : '';
  }

  const windowLabel = document.getElementById('window_length_label');
  const windowTip = document.getElementById('window_length_tip');
  if (flatten && windowLabel && windowTip) {
    if (flatten.value === 'locor') {
      windowLabel.textContent = 'Rotation Period (days)';
      windowTip.dataset.tip = 'LOCoR rotation period in days. Leave blank to estimate it automatically from a GLS periodogram.';
    } else {
      windowLabel.textContent = 'Window Length (days)';
      windowTip.dataset.tip = 'Window size for detrending in days. Leave blank for automatic selection based on the detected period.';
    }
  }
}

form.elements['each_sector'].addEventListener('change', () => {
  // Mutually exclusive with each_pipeline.
  if (form.elements['each_sector'].checked) form.elements['each_pipeline'].checked = false;
  updateFieldStates();
});
form.elements['each_pipeline'].addEventListener('change', () => {
  if (form.elements['each_pipeline'].checked) form.elements['each_sector'].checked = false;
  updateFieldStates();
});
form.elements['pipeline'].addEventListener('change', updateFieldStates);
form.elements['flatten_method'].addEventListener('change', updateFieldStates);
updateFieldStates();

/* =========================================================================
   Sector hint — live-fetch available sectors for the current target +
   pipeline so the user can see them before submitting. Click any chip to
   fill the Sector input. Validation in the submit handler uses the same
   list to block submissions for sectors that don't exist.
   ========================================================================= */
let _availableSectors = null;   // null = unknown, [] = none, [int...] = found
let _lastSectorQuery = null;    // dedupe identical name+pipeline lookups

function _sectorHintEl() { return document.getElementById('sectorHint'); }

function renderSectorChips() {
  const hint = _sectorHintEl();
  if (!hint || !_availableSectors) return;
  if (_availableSectors.length === 0) {
    hint.innerHTML = '<span class="sector-warn">No sectors found for this target/pipeline.</span>';
    return;
  }
  const current = parseInt(form.elements['sector'].value, 10);
  let html = '<span>Available:</span>';
  _availableSectors.forEach(s => {
    const cls = (s === current) ? 'sector-chip active' : 'sector-chip';
    html += ' <button type="button" class="' + cls + '" data-sector="' + s + '" title="Use sector ' + s + '">' + s + '</button>';
  });
  hint.innerHTML = html;
  hint.querySelectorAll('.sector-chip').forEach(btn => {
    btn.addEventListener('click', () => {
      form.elements['sector'].value = btn.dataset.sector;
      saveFormState();
      renderSectorChips();
    });
  });
}

async function refreshSectorHint() {
  const hint = _sectorHintEl();
  if (!hint) return;
  const name = nameInput.value.trim();
  const pipeline = form.elements['pipeline'].value || 'spoc';
  if (!name || name.length < 2) {
    hint.innerHTML = '';
    _availableSectors = null;
    _lastSectorQuery = null;
    return;
  }
  const key = name + '|' + pipeline;
  if (key === _lastSectorQuery) { renderSectorChips(); return; }
  _lastSectorQuery = key;
  hint.innerHTML = '<span>Looking up sectors&hellip;</span>';
  try {
    const res = await fetch(BASE + '/available-sectors?name=' + encodeURIComponent(name) + '&pipeline=' + encodeURIComponent(pipeline));
    const data = await res.json();
    if (!data.ok || !Array.isArray(data.sectors) || data.sectors.length === 0) {
      _availableSectors = [];
    } else {
      _availableSectors = data.sectors.map(s => parseInt(s, 10)).filter(n => !isNaN(n));
    }
    renderSectorChips();
  } catch (err) {
    hint.innerHTML = '<span class="sector-warn">Could not fetch sectors: ' + err.message + '</span>';
    _availableSectors = null;
    _lastSectorQuery = null;
  }
}

nameInput.addEventListener('blur', refreshSectorHint);
form.elements['pipeline'].addEventListener('change', () => {
  _lastSectorQuery = null;  // force refetch when pipeline changes
  refreshSectorHint();
});
form.elements['sector'].addEventListener('input', renderSectorChips);
// Auto-fetch once if the form was restored from localStorage with a name.
if (nameInput.value.trim().length >= 2) {
  // Defer so the rest of the page has a chance to settle.
  setTimeout(refreshSectorHint, 100);
}

/* Batch textarea persistence (independent of the main form) */
const BATCH_STORAGE_KEY = 'ql-batch-targets';
(function loadBatchState() {
  const saved = localStorage.getItem(BATCH_STORAGE_KEY);
  if (saved) {
    batchTargets.value = saved;
    // Auto-expand the batch section so the user sees the restored content
    if (saved.trim()) {
      batchSection.classList.add('visible');
      $('batchToggleBtn').textContent = 'Hide batch mode';
    }
  }
})();
batchTargets.addEventListener('input', () => {
  if (batchTargets.value) {
    localStorage.setItem(BATCH_STORAGE_KEY, batchTargets.value);
  } else {
    localStorage.removeItem(BATCH_STORAGE_KEY);
  }
});

// Save state on any input change
form.addEventListener('input', saveFormState);
form.addEventListener('change', saveFormState);

/* =========================================================================
   Collapsible sections (state in localStorage)
   ========================================================================= */
const COLLAPSE_KEY = 'ql-collapse-state';

function getCollapseState() {
  try { return JSON.parse(localStorage.getItem(COLLAPSE_KEY) || '{}'); } catch(e) { return {}; }
}

function saveCollapseState() {
  const state = {};
  document.querySelectorAll('.collapsible[data-section]').forEach(el => {
    state[el.dataset.section] = el.classList.contains('open');
  });
  localStorage.setItem(COLLAPSE_KEY, JSON.stringify(state));
}

function restoreCollapseState() {
  const state = getCollapseState();
  document.querySelectorAll('.collapsible[data-section]').forEach(el => {
    const key = el.dataset.section;
    if (key in state) {
      el.classList.toggle('open', state[key]);
    }
  });
}

function toggleCollapsible(btn) {
  btn.closest('.collapsible').classList.toggle('open');
  saveCollapseState();
}
// Make toggleCollapsible available globally for onclick
window.toggleCollapsible = toggleCollapsible;

restoreCollapseState();

/* =========================================================================
   Inline validation
   ========================================================================= */
nameInput.addEventListener('input', () => {
  const val = nameInput.value.trim();
  if (val.length === 0) {
    nameInput.classList.remove('invalid');
    nameValidation.style.display = 'none';
    return;
  }
  // Accept TOI-*, TIC *, or general names (at least 2 chars)
  const ok = val.length >= 2;
  nameInput.classList.toggle('invalid', !ok);
  nameValidation.style.display = ok ? 'none' : 'block';
});

/* =========================================================================
   Log toggle
   ========================================================================= */
logToggle.addEventListener('click', () => {
  const open = logElem.style.display !== 'none';
  logElem.style.display = open ? 'none' : 'block';
  logToggle.classList.toggle('open', !open);
});

/* =========================================================================
   Status & progress helpers
   ========================================================================= */
function setStatus(state, message) {
  statusBar.className = 'status-bar ' + state;
  // Spin only while the job is actively executing.
  statusSpinner.style.display = state === 'running' ? 'block' : 'none';
  statusText.textContent = message;
  // Cancel is also valid for a queued job (the backend accepts it), and
  // showing the buttons consistently across running/queued avoids any
  // flicker when status alternates between the two on websocket updates.
  const inFlight = state === 'running' || state === 'queued';
  cancelBtn.style.display = inFlight ? '' : 'none';
  cancelAllBtn.style.display = inFlight ? '' : 'none';
}

function formatETA(seconds) {
  if (seconds == null || seconds <= 0) return '';
  if (seconds < 60) return '~' + seconds + 's remaining';
  var m = Math.floor(seconds / 60);
  var s = seconds % 60;
  return '~' + m + 'm ' + s + 's remaining';
}

function setProgress(pct, label, state, eta) {
  progressSection.classList.add('visible');
  progressFill.style.width = pct + '%';
  var text = label;
  if (state === 'running') {
    text += ' (' + pct + '%)';
    var etaStr = formatETA(eta);
    if (etaStr) text += ' \u2014 ' + etaStr;
  }
  progressLabel.textContent = text;
  progressWrap.className = 'progress-bar-wrap' + (state !== 'running' ? ' ' + state : '');
}

/* =========================================================================
   Cancel
   ========================================================================= */
cancelBtn.addEventListener('click', async () => {
  const target = activeTarget;
  // Fast path over the websocket; HTTP path works even if it has dropped.
  if (activeWs && activeWs.readyState === WebSocket.OPEN) {
    activeWs.send(JSON.stringify({action: 'cancel'}));
  }
  if (!target) return;
  cancelBtn.disabled = true;
  let cancelled = true;
  try {
    const res = await fetch(BASE + '/cancel/' + target, {method: 'POST'});
    cancelled = res.ok;
  } catch (err) {
    /* network error — still tear down the running UI below */
  }
  // Close the socket so its 'finish' handler does not double-fire, then
  // update the GUI directly. This also recovers the case where the socket
  // had already dropped during a long job, leaving the GUI stuck.
  if (activeWs) {
    try { activeWs.close(); } catch (e) { /* already closed */ }
    activeWs = null;
  }
  jobRunning = false;
  sessionStorage.removeItem('ql-active-target');
  submitBtn.disabled = false;
  submitBtn.textContent = 'Run QuickLook';
  if (cancelled) {
    setStatus('cancelled', 'Cancelled ' + target);
    setProgress(100, 'Cancelled', 'cancelled', null);
    showToast('Cancelled: ' + target, 'info');
  }
  refreshQueue();
  cancelBtn.disabled = false;
});

cancelAllBtn.addEventListener('click', async () => {
  if (!confirm('Cancel all queued and running jobs?')) return;
  cancelAllBtn.disabled = true;
  try {
    const res = await fetch(BASE + '/cancel-all', {method: 'POST'});
    const data = await res.json();
    if (data.ok) {
      const n = (data.cancelled || []).length;
      showToast(n ? 'Cancelled ' + n + ' pending job' + (n === 1 ? '' : 's') : 'No pending jobs', 'info');
      if (activeWs && activeWs.readyState === WebSocket.OPEN) {
        activeWs.send(JSON.stringify({action: 'cancel'}));
      }
      refreshQueue();
    } else {
      showToast('Cancel-all failed', 'error');
    }
  } catch (err) {
    showToast('Network error: ' + err.message, 'error');
  }
  cancelAllBtn.disabled = false;
});

/* =========================================================================
   AJAX form submission
   ========================================================================= */
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const name = nameInput.value.trim();
  if (!name || name.length < 2) {
    nameInput.classList.add('invalid');
    nameValidation.style.display = 'block';
    nameInput.focus();
    return;
  }

  const eachSector = form.elements['each_sector'] && form.elements['each_sector'].checked;

  // Pre-flight: if we have a known list of available sectors and the user
  // asked for a specific sector that isn't in it, block the submit. (-1
  // means "latest available" and is always valid; each-sector mode picks
  // sectors server-side.)
  const requestedSector = parseInt(form.elements['sector'].value, 10);
  if (!eachSector
      && Number.isInteger(requestedSector)
      && requestedSector !== -1
      && Array.isArray(_availableSectors)
      && _availableSectors.length > 0
      && !_availableSectors.includes(requestedSector)) {
    showToast(
      'Sector ' + requestedSector + ' is not available for ' + name +
      '. Available: ' + _availableSectors.join(', '),
      'error', 8000
    );
    form.elements['sector'].focus();
    form.elements['sector'].classList.add('invalid');
    setTimeout(() => form.elements['sector'].classList.remove('invalid'), 2500);
    return;
  }

  submitBtn.disabled = true;
  submitBtn.textContent = 'Submitting...';
  resultSection.classList.remove('visible');

  const eachPipeline = form.elements['each_pipeline'] && form.elements['each_pipeline'].checked;

  if (eachPipeline) {
    // Each-pipeline mode: query available pipelines, then submit one job
    // per pipeline (each with sector=-1 = latest available for it).
    try {
      const fd = new FormData(form);
      const params = {};
      for (const [key, val] of fd.entries()) {
        if (key !== 'name' && key !== 'each_pipeline' && key !== 'each_sector' && key !== 'pipeline') {
          params[key] = val;
        }
      }
      submitBtn.textContent = 'Querying pipelines...';
      const res = await fetch(BASE + '/available-pipelines?name=' + encodeURIComponent(name));
      const pipeData = await res.json();
      if (!pipeData.ok || !pipeData.pipelines || pipeData.pipelines.length === 0) {
        showToast(pipeData.reason || 'No pipelines found for ' + name, 'error');
        submitBtn.disabled = false;
        submitBtn.textContent = 'Run QuickLook';
        return;
      }
      const pipelines = pipeData.pipelines;
      showToast('Found ' + pipelines.length + ' pipelines: ' + pipelines.join(', '), 'info', 6000);
      submitBtn.textContent = 'Submitting ' + pipelines.length + ' jobs...';

      const batchRes = await fetch(BASE + '/each-pipeline-submit', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ name: name, pipelines: pipelines, params: params }),
      });
      const batchData = await batchRes.json();
      if (batchData.ok) {
        showToast(batchData.submitted.length + ' pipeline jobs submitted', 'success');
        refreshQueue();
        if (batchData.submitted.length > 0) connectWs(batchData.submitted[0]);
      } else {
        showToast(batchData.reason || 'Each-pipeline submission failed', 'error');
      }
    } catch (err) {
      showToast('Network error: ' + err.message, 'error');
    }
    submitBtn.disabled = false;
    submitBtn.textContent = 'Run QuickLook';
    return;
  }

  if (eachSector) {
    // Each-sector mode: query available sectors, then submit one job per sector
    try {
      const fd = new FormData(form);
      const params = {};
      for (const [key, val] of fd.entries()) {
        if (key !== 'name' && key !== 'each_sector') params[key] = val;
      }
      const pipeline = params.pipeline || 'spoc';
      submitBtn.textContent = 'Querying sectors...';
      const res = await fetch(BASE + '/available-sectors?name=' + encodeURIComponent(name) + '&pipeline=' + encodeURIComponent(pipeline));
      const secData = await res.json();
      if (!secData.ok || !secData.sectors || secData.sectors.length === 0) {
        showToast(secData.reason || 'No sectors found for ' + name, 'error');
        submitBtn.disabled = false;
        submitBtn.textContent = 'Run QuickLook';
        return;
      }
      const sectors = secData.sectors;
      showToast('Found ' + sectors.length + ' sectors: ' + sectors.join(', '), 'info', 6000);
      submitBtn.textContent = 'Submitting ' + sectors.length + ' jobs...';

      const batchRes = await fetch(BASE + '/each-sector-submit', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ name: name, sectors: sectors, params: params }),
      });
      const batchData = await batchRes.json();
      if (batchData.ok) {
        const msg = batchData.submitted.length + ' sector jobs submitted';
        showToast(msg, 'success');
        refreshQueue();
        // Watch the first submitted job
        if (batchData.submitted.length > 0) connectWs(batchData.submitted[0]);
      } else {
        showToast(batchData.reason || 'Each-sector submission failed', 'error');
      }
    } catch (err) {
      showToast('Network error: ' + err.message, 'error');
    }
    submitBtn.disabled = false;
    submitBtn.textContent = 'Run QuickLook';
    return;
  }

  try {
    const res = await fetch(BASE + '/submit', { method: 'POST', body: new FormData(form) });
    const data = await res.json();
    if (data.ok) {
      showToast('Job submitted: ' + data.name, 'info');
      connectWs(data.name);
      // Re-enable Submit immediately so additional jobs can be queued while
      // this one runs. Cancel still cancels the currently-watched job
      // (running or queued); Cancel All clears the whole queue.
      submitBtn.disabled = false;
      submitBtn.textContent = 'Run QuickLook';
    } else {
      showToast(data.reason || 'Submission failed', 'error');
      submitBtn.disabled = false;
      submitBtn.textContent = 'Run QuickLook';
    }
  } catch (err) {
    showToast('Network error: ' + err.message, 'error');
    submitBtn.disabled = false;
    submitBtn.textContent = 'Run QuickLook';
  }
});

/* =========================================================================
   Batch submission
   ========================================================================= */
$('batchToggleBtn').addEventListener('click', () => {
  batchSection.classList.toggle('visible');
  $('batchToggleBtn').textContent = batchSection.classList.contains('visible') ? 'Hide batch mode' : 'Batch mode';
});

batchSubmitBtn.addEventListener('click', async () => {
  const raw = batchTargets.value.trim();
  if (!raw) { showToast('Enter at least one target', 'error'); return; }

  // Split by newlines or commas
  const targets = raw.split(/[\n,]+/).map(s => s.trim()).filter(Boolean);
  if (targets.length === 0) { showToast('No valid targets found', 'error'); return; }

  // Collect params from form (excluding name)
  const fd = new FormData(form);
  const params = {};
  for (const [key, val] of fd.entries()) {
    if (key !== 'name') params[key] = val;
  }

  batchSubmitBtn.disabled = true;
  batchStatus.textContent = 'Submitting ' + targets.length + ' targets...';

  try {
    const res = await fetch(BASE + '/batch-submit', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({ targets: targets, params: params }),
    });
    const data = await res.json();
    if (data.ok) {
      const msg = data.submitted.length + ' submitted' + (data.skipped.length ? ', ' + data.skipped.length + ' skipped (already running)' : '');
      batchStatus.textContent = msg;
      showToast('Batch: ' + msg, 'success');
      refreshQueue();
      // Auto-watch first submitted job
      if (data.submitted.length > 0) connectWs(data.submitted[0]);
    } else {
      showToast(data.reason || 'Batch failed', 'error');
      batchStatus.textContent = 'Failed';
    }
  } catch (err) {
    showToast('Network error: ' + err.message, 'error');
    batchStatus.textContent = 'Error';
  }
  batchSubmitBtn.disabled = false;
});

/* =========================================================================
   Results display
   ========================================================================= */
async function showResults(target) {
  try {
    const res = await fetch(BASE + '/results-json/' + target);
    const data = await res.json();
    if (data.image) {
      // Cache-bust so re-runs with the same target name show the fresh PNG
      // instead of a browser-cached copy of the previous run's image.
      const bust = '?t=' + Date.now();
      resultImage.src = data.image + bust;
      downloadImg.href = data.image;
      downloadImg.download = data.image.split('/').pop();
      if (data.h5) {
        downloadH5.href = data.h5;
        downloadH5.download = data.h5.split('/').pop();
        downloadH5.style.display = '';
      } else {
        downloadH5.style.display = 'none';
      }
      resultSection.classList.add('visible');

      // Live-update the Recent Results grid so newly-finished jobs appear
      // immediately without needing a page reload.
      updateRecentResults(data.image, bust);
    }
  } catch (e) {
    console.error('Failed to load results:', e);
  }
}

function updateRecentResults(imagePath, cacheBust) {
  const recentGrid = document.getElementById('recentGrid');
  const recentSection = document.getElementById('recentSection');
  if (!recentGrid) return;
  const filename = imagePath.split('/').pop();
  const bustedSrc = imagePath + cacheBust;

  // Prefer updating an existing card for this target so the thumbnail
  // refreshes in place; otherwise build a new card matching the Jinja
  // template that the server rendered on initial page load.
  let card = recentGrid.querySelector(
    '.recent-card[data-filename="' + (window.CSS && CSS.escape ? CSS.escape(filename) : filename) + '"]'
  );
  if (card) {
    const img = card.querySelector('img');
    if (img) img.src = bustedSrc;
  } else {
    card = document.createElement('div');
    card.className = 'recent-card';
    card.dataset.filename = filename;

    const img = document.createElement('img');
    img.src = bustedSrc;
    img.alt = filename;
    img.loading = 'lazy';
    img.style.cursor = 'pointer';
    img.addEventListener('click', () => window.open(imagePath, '_blank'));
    card.appendChild(img);

    const footer = document.createElement('div');
    footer.className = 'card-footer';

    const label = document.createElement('span');
    label.className = 'card-label';
    label.title = filename;
    label.textContent = filename;
    footer.appendChild(label);

    const delBtn = document.createElement('button');
    delBtn.className = 'delete-btn';
    delBtn.title = 'Delete';
    delBtn.innerHTML = '&times;';
    delBtn.addEventListener('click', () => deleteOutput(filename, delBtn));
    footer.appendChild(delBtn);

    card.appendChild(footer);
  }

  // Always move (or insert) at the top so the newest result is first.
  if (recentGrid.firstChild !== card) {
    recentGrid.insertBefore(card, recentGrid.firstChild);
  }

  // First card knocks out the empty-state placeholder if it was rendered.
  const empty = document.getElementById('recentEmpty');
  if (empty) empty.remove();
  if (recentSection) recentSection.style.display = '';
}

/* =========================================================================
   Job queue polling
   ========================================================================= */
function formatTime(ts) {
  if (!ts) return '';
  const d = new Date(ts * 1000);
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

const QUEUE_FOLD_THRESHOLD = 8;
const isPending = (s) => s === 'queued' || s === 'running';
let queueFoldMode = null; // null=auto, true=pending-only, false=show-all

function setQueueFoldMode(mode) {
  queueFoldMode = mode;
  try { localStorage.setItem('queueFoldMode', mode === null ? 'auto' : String(mode)); } catch (e) {}
  refreshQueue();
}
try {
  const saved = localStorage.getItem('queueFoldMode');
  if (saved === 'true') queueFoldMode = true;
  else if (saved === 'false') queueFoldMode = false;
} catch (e) {}

queueToggle.addEventListener('click', () => {
  // Toggle between pending-only and show-all (user intent overrides auto).
  setQueueFoldMode(!resolveFolded());
});

function resolveFolded(total) {
  if (queueFoldMode === true) return true;
  if (queueFoldMode === false) return false;
  return (total || 0) > QUEUE_FOLD_THRESHOLD;
}

async function refreshQueue() {
  try {
    const res = await fetch(BASE + '/jobs-json');
    const jobs = await res.json();
    if (jobs.length === 0) { queueSection.style.display = 'none'; return; }

    queueSection.style.display = '';
    // Track the currently-running job so the "Queued: X (waiting for worker)"
    // status line can name *which* job the single worker is busy on.
    const runningJob = jobs.find(j => j.status === 'running');
    window._runningJobName = runningJob ? runningJob.name : null;
    const pendingCount = jobs.filter(j => isPending(j.status)).length;
    const folded = resolveFolded(jobs.length);
    const visibleJobs = folded ? jobs.filter(j => isPending(j.status)) : jobs;
    const hiddenCount = jobs.length - visibleJobs.length;

    queueCount.textContent =
      pendingCount + ' pending / ' + jobs.length + ' total';
    queueToggle.textContent = folded ? 'Show all' : 'Show pending only';

    queueList.innerHTML = '';
    for (const job of visibleJobs) {
      const li = document.createElement('li');
      li.className = 'queue-item';

      const badgeClass = {
        queued: 'badge-running', running: 'badge-running', done: 'badge-done',
        error: 'badge-error', cancelled: 'badge-cancelled'
      }[job.status] || 'badge-running';

      let html = '<span class="job-name">' + job.name + '</span>';
      if (job.submitted_at) html += '<span class="job-time">' + formatTime(job.submitted_at) + '</span>';
      if (job.error && job.status === 'error') html += '<span class="job-error" title="' + job.error.replace(/"/g, '&quot;') + '">' + job.error + '</span>';
      html += '<span class="badge ' + badgeClass + '">' + job.status + '</span>';
      li.innerHTML = html;

      if (job.status === 'running' && job.name !== activeTarget) {
        const watchBtn = document.createElement('button');
        watchBtn.className = 'btn btn-outline btn-sm';
        watchBtn.textContent = 'Watch';
        watchBtn.onclick = () => connectWs(job.name);
        li.appendChild(watchBtn);
      }

      // Finished jobs (done/error/cancelled) keep no live WebSocket, but their
      // captured output persists on disk. Offer a "Log" button that fetches the
      // stored log so users can still review what happened.
      if (job.status === 'done' || job.status === 'error' || job.status === 'cancelled') {
        const logBtn = document.createElement('button');
        logBtn.className = 'btn btn-outline btn-sm';
        logBtn.textContent = 'Log';
        logBtn.title = 'View this job’s output log';
        logBtn.onclick = () => viewJobLog(job.name, job.status);
        li.appendChild(logBtn);
      }

      // Remove-from-queue button (rightmost). Hidden for running jobs —
      // user must cancel them first via the status bar's Cancel.
      if (job.status !== 'running') {
        const delBtn = document.createElement('button');
        delBtn.className = 'delete-btn';
        delBtn.title = 'Remove this entry from the queue';
        delBtn.setAttribute('aria-label', 'Remove ' + job.name + ' from the queue');
        delBtn.innerHTML = '&times;';
        delBtn.onclick = async (e) => {
          e.stopPropagation();
          if (!confirm('Remove "' + job.name + '" from the queue?')) return;
          try {
            const res = await fetch(BASE + '/delete-job/' + encodeURIComponent(job.name), {
              method: 'POST',
            });
            const data = await res.json();
            if (data.ok) {
              showToast('Removed "' + job.name + '" from queue', 'info');
              refreshQueue();
            } else {
              showToast(data.reason || 'Failed to remove from queue', 'error');
            }
          } catch (err) {
            showToast('Network error: ' + err.message, 'error');
          }
        };
        li.appendChild(delBtn);
      }

      queueList.appendChild(li);
    }

    if (folded && hiddenCount > 0) {
      queueHiddenHint.textContent =
        '+ ' + hiddenCount + ' finished job' + (hiddenCount === 1 ? '' : 's') + ' hidden';
      queueHiddenHint.style.display = '';
    } else if (folded && visibleJobs.length === 0) {
      queueHiddenHint.textContent = 'No pending jobs. ' + jobs.length + ' finished.';
      queueHiddenHint.style.display = '';
    } else {
      queueHiddenHint.style.display = 'none';
    }
  } catch (e) {
    console.error('Queue refresh failed:', e);
  }
}

/* =========================================================================
   WebSocket connection
   ========================================================================= */
function connectWs(target) {
  if (activeWs) activeWs.close();
  activeTarget = target;
  jobRunning = true;

  // Persist so we can reconnect after page navigation
  sessionStorage.setItem('ql-active-target', target);

  logSection.classList.add('visible');
  logElem.style.display = 'block';
  logToggle.classList.add('open');
  logElem.textContent = '';
  setStatus('running', 'Running analysis for ' + target + '...');
  setProgress(0, 'Starting', 'running', null);

  // Scroll the status bar into view so the user sees it
  statusBar.scrollIntoView({ behavior: 'smooth', block: 'start' });

  const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
  const ws = new WebSocket(proto + '//' + location.host + BASE + '/ws/' + target);
  activeWs = ws;

  ws.onmessage = function(e) {
    const msg = JSON.parse(e.data);

    if (msg.type === 'update') {
      if (msg.log) {
        logElem.textContent += msg.log;
        logElem.scrollTop = logElem.scrollHeight;
      }
      setProgress(msg.progress, msg.step, msg.status, msg.eta);
      if (msg.status === 'running') {
        setStatus('running', 'Running analysis for ' + target + '...');
      } else if (msg.status === 'queued') {
        // Reflect queued state honestly instead of leaving the optimistic
        // "Running analysis ..." text from connectWs() in place. If the
        // single worker is busy on another job, name it so the user knows
        // why their queued job isn't starting.
        const busy = window._runningJobName;
        const tail = (busy && busy !== target)
          ? ' (worker busy on ' + busy + ')'
          : ' (waiting for worker)';
        setStatus('queued', 'Queued: ' + target + tail);
      }
    } else if (msg.type === 'finish') {
      jobRunning = false;
      sessionStorage.removeItem('ql-active-target');
      submitBtn.disabled = false;
      submitBtn.textContent = 'Run QuickLook';
      if (msg.status === 'done') {
        setStatus('done', 'Analysis complete for ' + target);
        setProgress(100, 'Done', 'done', null);
        showResults(target);
        showToast('Done: ' + target, 'success', 6000);
        notifyBrowser('TESS QuickLook', 'Analysis complete for ' + target);
      } else if (msg.status === 'cancelled') {
        setStatus('cancelled', 'Cancelled ' + target);
        setProgress(100, 'Cancelled', 'cancelled', null);
        showToast('Cancelled: ' + target, 'info');
      } else if (msg.status === 'unknown') {
        // Job not found on server (expired or wrong name)
        setStatus('error', 'Job not found: ' + target);
        setProgress(0, '', 'error', null);
      } else {
        setStatus('error', 'Error: ' + (msg.error || 'Check the log below'));
        setProgress(100, 'Failed', 'error', null);
        showToast('Error: ' + (msg.error || target + ' failed'), 'error', 8000);
        notifyBrowser('TESS QuickLook', 'Error for ' + target);
      }
      refreshQueue();
      // Auto-watch next running job in the queue
      autoWatchNext(target);
      ws.close();
    }
  };

  ws.onerror = function() { console.error('WebSocket error'); };
  ws.onclose = function() { activeWs = null; };
  refreshQueue();
}

// Fetch and display a finished job's persisted output log (no live socket).
async function viewJobLog(target, status) {
  // A finished job has no live WebSocket; close any active one so its updates
  // don't overwrite the static log we're about to show.
  if (activeWs) { activeWs.close(); activeWs = null; }
  activeTarget = target;
  logSection.classList.add('visible');
  logElem.style.display = 'block';
  logToggle.classList.add('open');
  logElem.textContent = 'Loading log…';
  try {
    const res = await fetch(BASE + '/job-log/' + encodeURIComponent(target));
    const data = await res.json();
    if (data.ok) {
      logElem.textContent = data.log || '(log is empty)';
      logElem.scrollTop = logElem.scrollHeight;
      setStatus(status || 'done', 'Output log for ' + target);
    } else {
      logElem.textContent = '(' + (data.reason || 'no log available') + ')';
      showToast(data.reason || 'No log for ' + target, 'info');
    }
  } catch (err) {
    logElem.textContent = '(failed to load log)';
    showToast('Network error: ' + err.message, 'error');
  }
  logSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

// After a job finishes, automatically watch the next running job (for batch)
async function autoWatchNext(finishedTarget) {
  try {
    const res = await fetch(BASE + '/jobs-json');
    const jobs = await res.json();
    const next = jobs.find(j => (j.status === 'running' || j.status === 'queued') && j.name !== finishedTarget);
    if (next) {
      showToast('Watching next job: ' + next.name, 'info');
      connectWs(next.name);
    }
  } catch(e) {}
}

/* =========================================================================
   Delete output
   ========================================================================= */
async function deleteOutput(filename, btnElem) {
  if (!confirm('Delete ' + filename + ' and its associated files?')) return;
  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) {
      const card = btnElem.closest('.recent-card');
      if (card) card.remove();
      const grid = $('recentGrid');
      const section = $('recentSection');
      if (grid && section && grid.children.length === 0) {
        // Last card removed — restore the empty-state placeholder
        // (cheaper than reloading the page).
        if (!document.getElementById('recentEmpty')) {
          const p = document.createElement('p');
          p.id = 'recentEmpty';
          p.className = 'empty-state';
          p.innerHTML = 'No results yet &mdash; submit a target above and the rendered thumbnail will appear here.';
          section.appendChild(p);
        }
      }
      showToast('Deleted ' + filename, 'info');
    } else {
      showToast('Delete failed: ' + (data.reason || 'unknown'), 'error');
    }
  } catch (e) {
    showToast('Delete failed: ' + e.message, 'error');
  }
}
window.deleteOutput = deleteOutput;

/* =========================================================================
   Keyboard shortcuts
   ========================================================================= */
document.addEventListener('keydown', (e) => {
  // Ctrl+Enter or Cmd+Enter to submit
  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
    e.preventDefault();
    if (!submitBtn.disabled) form.requestSubmit();
  }
  // Escape to close modals/log
  if (e.key === 'Escape') {
    if (logElem.style.display !== 'none') {
      logElem.style.display = 'none';
      logToggle.classList.remove('open');
    }
  }
});

/* =========================================================================
   Prevent accidental navigation while a job is running
   ========================================================================= */
window.addEventListener('beforeunload', (e) => {
  if (jobRunning) {
    e.preventDefault();
    e.returnValue = '';
  }
});

/* =========================================================================
   Request notification permission early
   ========================================================================= */
if ('Notification' in window && Notification.permission === 'default') {
  // Request on first user interaction
  document.addEventListener('click', function askPerm() {
    Notification.requestPermission();
    document.removeEventListener('click', askPerm);
  }, { once: true });
}

/* =========================================================================
   Init: reconnect to running job after page navigation
   ========================================================================= */
(async function init() {
  await refreshQueue();

  // 1. Check for ?watch= query param (from gallery/compare links)
  const urlParams = new URLSearchParams(window.location.search);
  const watchParam = urlParams.get('watch');
  if (watchParam) {
    // Clean the URL so refresh doesn't re-trigger
    history.replaceState(null, '', '/');
    try {
      const res = await fetch(BASE + '/jobs-json');
      const jobs = await res.json();
      const job = jobs.find(j => j.name === watchParam);
      if (job && job.status === 'running') {
        connectWs(watchParam);
        return;
      }
    } catch(e) {}
  }

  // 2. Reconnect to the job we were watching before navigating away
  const savedTarget = sessionStorage.getItem('ql-active-target');
  if (savedTarget) {
    try {
      const res = await fetch(BASE + '/jobs-json');
      const jobs = await res.json();
      const job = jobs.find(j => j.name === savedTarget);
      if (job && job.status === 'running') {
        connectWs(savedTarget);
        return;
      } else {
        sessionStorage.removeItem('ql-active-target');
      }
    } catch(e) {}
  }

  // 3. Otherwise, auto-watch first running job if any
  try {
    const res = await fetch(BASE + '/jobs-json');
    const jobs = await res.json();
    const running = jobs.find(j => j.status === 'running' || j.status === 'queued');
    if (running) connectWs(running.name);
  } catch(e) {}
})();

setInterval(refreshQueue, 5000);

/* Show a full-page loading overlay when the user clicks "TLS Summary".
   /tls-summary walks every *_tls.h5 in the chosen folder and can take a
   few seconds, so we give immediate visual feedback. */
(function () {
  const link = document.getElementById('summaryLink');
  if (!link) return;
  link.addEventListener('click', (e) => {
    // Ignore modifier-click / middle-click (new-tab) so we don't flash
    // the overlay on the current page when the user opens it elsewhere.
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
    // Look up the overlay lazily — it sits after this <script> in the
    // source, so it doesn't exist when the IIFE first runs.
    const overlay = document.getElementById('pageLoading');
    if (overlay) overlay.classList.add('show');
  });
})();
</script>

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