{% extends 'base.html' %}
{% block title %}Control{% endblock %}
{% block page_refresh %}{% endblock %}
{% block content %}
<div class="batch-controls">
  <h1 id="control-heading" class="sr-only">Control</h1>
  <div class="control-panel">
    {% include 'logo.html' %}
    <div class="control-settings">
      <section id="batch-controls-section" aria-labelledby="control-heading"{% if automatic_processing or matching_job %} class="control-occupied"{% endif %}>
      {% if automatic_processing or matching_job %}
      <dl class="control-values">
        <div class="media-directory"><dt>Source</dt><dd>{{ workspace.source_directory }}</dd></div>
        <div class="media-directory"><dt>Destination</dt><dd>{{ workspace.destination_directory or 'Not available' }}</dd></div>
        <div><dt>TV destination</dt><dd>{{ workspace.tv_destination_directory or 'Not available' }}</dd></div>
        <div><dt>Batch Size</dt><dd>{{ workspace.requested_size }}</dd></div>
      </dl>
      {% else %}
      <form method="post" action="{{ settings.NEW_BATCH_URL }}" aria-label="New batch" id="new-batch-form">
        <input type="hidden" name="refresh" value="{{ refresh }}">
        <label class="media-directory" for="media-directory">Source
          <input id="media-directory" name="input_directory" type="text" value="{{ input_directory }}" required>
        </label>
        <label class="media-directory" for="output-directory">Destination
          <input id="output-directory" name="output_directory" type="text" value="{{ output_directory or '' }}" required>
        </label>
        <label for="batch-size">Batch Size
          <input id="batch-size" name="batch_size" type="number" min="1" max="{{ settings.MAX_BATCH_SIZE }}" step="1" value="{{ batch_size }}" required>
        </label>
      </form>

      {% endif %}
      </section>
      <form method="get" action="/control" aria-label="Control refresh" id="control-refresh">
        <label>Refresh
          <select name="refresh">
            {% for seconds, label in [(0, 'Manual'), (5, '5 seconds'), (30, '30 seconds'), (60, '1 minute')] %}<option value="{{ seconds }}" {% if refresh == seconds %}selected{% endif %}>{{ label }}</option>{% endfor %}
          </select>
        </label>
        <button type="submit">Update</button>
      </form>
      <div class="batch-buttons">
        <div id="new-batch-action">
          {% if automatic_processing or matching_job %}
          <button type="button" disabled aria-describedby="batch-processing">New Batch</button>
          {% else %}
          <button form="new-batch-form" type="submit">New Batch</button>
          {% endif %}
        </div>
        <button id="stop-batch" type="button"{% if not stop_ready %} disabled{% endif %}>Stop Batch</button>
        <button id="clear-batch" type="button"{% if workspace is none %} disabled{% endif %}>Clear Current Batch</button>
      </div>
  {% if workspace is not none %}
  <p id="batch-processing" role="status">{% if automatic_processing or matching_job %}{% if workspace.stop_requested %}Stopping after the current operation...{% else %}Current Task:{% endif %}{% if latest_event %} <a href="/events/{{ latest_event.event_id }}">{{ latest_event_message | striptags }}</a>{% endif %}{% elif workspace.stop_requested %}Batch stopped. Completed work has been preserved.{% else %}Batch processing has stopped. Review the results below.{% endif %}</p>
  {% endif %}
      <p role="status" id="stop-feedback"></p>
      <p role="status" id="clear-feedback"></p>
    </div>
  </div>
  <div class="batch-panel">
  <div class="batch-heading">
    <h2>Current Batch</h2>
    <span class="last-updated">Updated: <time datetime="{{ last_updated | utc_iso }}" data-local-time="batch">—</time></span>
  </div>
  {% if workspace is not none %}
  {% include 'workspace.html' %}
  {% endif %}
  </div>
  {% if result %}
  <p role="status">
    {% if result == messages.ACCEPTED %}
      Batch accepted. Follow progress in the <a href="/events">event log</a>. The server returns to idle when processing finishes.
    {% elif result == messages.BUSY %}
      A batch is already running. No additional batch was queued.
    {% elif result == messages.INVALID_PARAMETERS %}
      Supply absolute input and output directory paths and a positive whole-number batch size.
    {% elif result == messages.NOT_CONFIGURED %}
      The identification server is not configured to accept batches. Check its model URL and startup options.
    {% elif result == messages.UNAVAILABLE %}
      Batch acceptance could not be confirmed. Check the event log and service journal before trying again; the request may have reached the server.
    {% else %}
      The batch request was rejected. Check the service journal for details.
    {% endif %}
  </p>
  {% endif %}
</div>
<script>
  let clearingWorkspace = false;
  const clearBatch = document.getElementById('clear-batch');
  {% if workspace is not none %}
  clearBatch.addEventListener('click', async () => {
    clearingWorkspace = true;
    clearBatch.disabled = true;
    document.getElementById('stop-batch').disabled = true;
    document.querySelector('#new-batch-action button').disabled = true;
    const feedback = document.getElementById('clear-feedback');
    feedback.textContent = 'Clearing current batch...';
    try {
      const response = await fetch({{ settings.CLEAR_BATCH_URL | tojson }}, {
        method: 'POST', body: new URLSearchParams({batch_id: {{ workspace.id | tojson }}})
      });
      if (!response.ok) throw new Error();
      const result = await response.json();
      if (!result.accepted) throw new Error();
      async function pollClear() {
        try {
          const response = await fetch('/workspace/clear/status/' + encodeURIComponent(result.job_id), {cache: 'no-store'});
          if (!response.ok) throw new Error();
          const job = await response.json();
          if (job.status === 'completed') { window.location.replace({{ control_url | tojson }}); return; }
          if (job.status !== 'running') throw new Error();
          window.setTimeout(pollClear, 1000);
        } catch {
          feedback.textContent = 'Could not clear the workspace. Refresh to check its status.';
          clearBatch.disabled = false;
        }
      }
      pollClear();
    } catch {
      feedback.textContent = 'Could not clear the workspace. Refresh to check its status.';
      clearBatch.disabled = false;
    }
  });
  {% endif %}
  const refreshForm = document.getElementById('control-refresh');
  let refreshSeconds = {{ refresh | tojson }};
  let refreshTimer;
  async function refreshTable() {
    try {
      if (window.refreshWorkspace) await window.refreshWorkspace();
    } catch {
      // Keep the last snapshot; the next interval can retry the read.
    }
    scheduleRefresh();
  }
  function scheduleRefresh() {
    window.clearTimeout(refreshTimer);
    if (refreshSeconds) refreshTimer = window.setTimeout(refreshTable, refreshSeconds * 1000);
  }
  function applyRefresh() {
    refreshSeconds = Number(refreshForm.elements.refresh.value);
    const url = new URL(window.location.href);
    url.searchParams.delete('result');
    if (refreshSeconds) url.searchParams.set('refresh', refreshSeconds);
    else url.searchParams.delete('refresh');
    window.history.replaceState(null, '', url);
    const batchRefresh = document.querySelector('form[aria-label="New batch"] input[name="refresh"]');
    if (batchRefresh) batchRefresh.value = refreshSeconds;
    window.clearTimeout(refreshTimer);
    refreshTable();
  }
  refreshForm.addEventListener('submit', event => { event.preventDefault(); applyRefresh(); });
  scheduleRefresh();
</script>
{% if result == messages.ACCEPTED %}
<script>
  window.setTimeout(() => window.location.replace({{ control_url | tojson }}), 2000);
</script>
{% endif %}
{% endblock %}