{% extends 'base.html' %}
{% block content %}
<h1>Add processed results</h1>
<p>Select a previously approved query, load its public directory listing, and pair each record with one sample folder. After scanning, review all six output links for every data name; confirming the results attaches them to the original records as pending curator approval.</p>

<section class="card">
      <h2>Choose a previously submitted query</h2>
  <form method="post" class="processed-load-form">
    {% csrf_token %}
    <label>Previously approved submission query
      <select name="batch_id" required>
        <option value="">Select an approved query…</option>
        {% for batch in batches %}
        <option value="{{ batch.id }}" {% if batch.id == selected_batch %}selected{% endif %}>{{ batch.label }}</option>
        {% endfor %}
      </select>
    </label>
    <button class="primary" name="load_folder" value="1">Load query and directory</button>
  </form>
</section>

{% if directory %}
<section class="card">
  <div class="section-heading">
    <div>
      <h2>Match submitted records to folders</h2>
      <p class="muted">Loaded {{ directory.folders|length }} folders, including {{ directory.candidate_folder_count }} Processed_ sample folders. Each sample folder may be assigned once.</p>
    </div>
    <div class="processed-sort-controls">
      <label>Sort records
        <select id="record-sort">
          <option value="type">Data type</option>
          <option value="name">Data name</option>
          <option value="sample">Sample name</option>
          <option value="fastq">FASTQ filename</option>
        </select>
      </label>
      <label>Sort folder choices
        <select id="folder-sort">
          <option value="match">Suggested matches first</option>
          <option value="name">Folder name A–Z</option>
        </select>
      </label>
    </div>
  </div>
  <p class="muted"><strong>Selected parent:</strong> <span class="uri">{{ directory.source }}</span></p>
  <form method="post" id="folder-map-form">
    {% csrf_token %}
    <input type="hidden" name="scan_mapping" value="1">
    <div class="table-wrap processed-map-wrap">
      <table class="processed-map-table">
        <thead><tr><th>Submitted record</th><th>Possible sample folder</th></tr></thead>
        <tbody id="folder-map-rows">
          {% for row in directory.records %}
          <tr data-type="{{ row.data_type|lower }}" data-name="{{ row.data_name|lower }}" data-sample="{{ row.sample_name|lower }}" data-fastq="{{ row.fastq_r1|lower }}">
            <td class="processed-record-cell">
              <strong>{{ row.data_type }}</strong>
              <span>{{ row.data_name }}</span>
              {% if row.sample_name %}<small>Sample: {{ row.sample_name }}</small>{% endif %}
              {% if row.fastq_r1 %}<small title="{{ row.fastq_r1 }}">FASTQ R1: {{ row.fastq_r1 }}</small>{% endif %}
            </td>
            <td>
              <select class="folder-choice" name="folder_{{ row.id }}" data-record-id="{{ row.id }}" required>
                <option value="">Choose a folder…</option>
                {% for candidate in row.candidates %}
                <option value="{{ candidate.url }}" data-name="{{ candidate.name|lower }}" data-rank="{{ candidate.rank }}" {% if candidate.url == row.suggested_url %}selected{% endif %}>{{ candidate.name }} · {{ candidate.reason }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <p id="folder-map-status" role="status" class="muted">Review each suggested pair. Every record needs a different folder.</p>
    <p id="scan-progress" class="notice" role="status" hidden></p>
    <button class="primary" id="scan-mapped-folders" type="submit">Scan matched folders</button>
  </form>
</section>
{% endif %}

{% if preview %}
<section class="card">
  <h2>Confirm processed data</h2>
  {% for sample in preview.samples %}
  <article class="processed-preview-row">
    <p><strong>{{ sample.data_name }}</strong> · Sample: {{ sample.sample_name }}</p>
    <p>Matched folder: <span class="uri">{{ sample.sample_folder_url }}</span></p>
    <p>{{ sample.annotation }} · {{ sample.count_unit }} · {{ sample.normalization }} · {{ sample.gene_count }} genes</p>
    {% if sample.log_reports_failure %}<p class="notice">The processing log reports a failure. Review before approval.</p>{% endif %}
    <h3>Processed files</h3>
    <ul class="processed-output-links">
      {% for kind,url in sample.outputs.items %}<li><strong>{% if kind == 'counts' %}Counts table{% elif kind == 'summary' %}Counts summary{% elif kind == 'qc' %}QC report{% elif kind == 'log' %}Processing log{% elif kind == 'signal' %}Signal track{% elif kind == 'signal_index' %}Signal index{% else %}{{ kind|title }}{% endif %}:</strong> <a href="{{ url }}" target="_blank" rel="noopener">Open processed file</a> <span class="uri">{{ url }}</span></li>{% endfor %}
    </ul>
  </article>
  {% endfor %}
  <form method="post">{% csrf_token %}<button class="primary" name="confirm_scan" value="1">Confirm and submit for approval</button></form>
</section>
{% endif %}

{% for error in errors %}<p class="notice error">{{ error }}</p>{% endfor %}
{% if success %}<p class="notice">{{ success }}</p>{% endif %}

<section class="card">
  <h2>Upload an existing processed manifest</h2>
  <form method="post" enctype="multipart/form-data">{% csrf_token %}<label>Processed manifest JSON <input type="file" name="json" accept=".json,application/json" required></label><button>Submit processed data</button></form>
</section>

<section class="card">
  <h2>Processed submissions</h2>
  <table><thead><tr><th>Data name</th><th>Sample</th><th>Status</th><th>Review</th></tr></thead>
    <tbody>{% for item in items %}<tr><td><a href="{{ lab_prefix }}/records/{{ item.record.pk }}/">{{ item.record.name }}</a></td><td>{{ item.payload.sample_name }}</td><td>{{ item.state }}</td><td>{% if can_edit and item.state == 'pending' %}<form method="post">{% csrf_token %}<button name="approve" value="{{ item.pk }}">Approve</button></form>{% endif %}</td></tr>{% endfor %}</tbody>
  </table>
</section>

<script>
(() => {
  const rows = document.getElementById('folder-map-rows');
  if (!rows) return;
  const recordSort = document.getElementById('record-sort');
  const folderSort = document.getElementById('folder-sort');
  const selects = [...rows.querySelectorAll('.folder-choice')];
  const status = document.getElementById('folder-map-status');
  const submit = document.getElementById('scan-mapped-folders');
  const form = document.getElementById('folder-map-form');
  const progress = document.getElementById('scan-progress');
  const compare = (a, b) => a.localeCompare(b, undefined, {numeric:true, sensitivity:'base'});

  recordSort.addEventListener('change', () => {
    const key = recordSort.value;
    [...rows.querySelectorAll('tr')]
      .sort((a,b) => compare(a.dataset[key] || '', b.dataset[key] || ''))
      .forEach(row => rows.appendChild(row));
  });

  folderSort.addEventListener('change', () => {
    selects.forEach(select => {
      const selected = select.value;
      const placeholder = select.options[0];
      const options = [...select.options].slice(1).sort((a,b) => {
        if (folderSort.value === 'name') return compare(a.dataset.name || '', b.dataset.name || '');
        return Number(a.dataset.rank) - Number(b.dataset.rank) || compare(a.dataset.name || '', b.dataset.name || '');
      });
      select.replaceChildren(placeholder, ...options);
      select.value = selected;
    });
    updatePairs();
  });

  function updatePairs() {
    const chosen = selects.map(s => s.value).filter(Boolean);
    const duplicates = chosen.length !== new Set(chosen).size;
    const missing = selects.some(s => !s.value);
    selects.forEach(select => {
      const others = new Set(selects.filter(s => s !== select).map(s => s.value).filter(Boolean));
      [...select.options].forEach(option => {
        option.disabled = !!option.value && option.value !== select.value && others.has(option.value);
      });
    });
    submit.disabled = duplicates || missing;
    status.textContent = duplicates
      ? 'A folder is assigned more than once. Choose a unique folder for each record.'
      : missing
        ? 'Choose one folder for every record. A folder can be assigned only once.'
        : 'All records have unique folder assignments. Review the pairs, then scan.';
    status.classList.toggle('error', duplicates || missing);
  }
  selects.forEach(select => select.addEventListener('change', updatePairs));
  form.addEventListener('submit', event => {
    if (submit.disabled || !form.reportValidity()) {
      event.preventDefault();
      return;
    }
    submit.disabled = true;
    progress.hidden = false;
    progress.textContent = `Scanning ${selects.length} matched folders. Counts, summaries, QC and logs are being checked; this can take a few minutes.`;
  });
  updatePairs();
})();
</script>
{% endblock %}