{% extends "base.html" %}
{% block title %}New job — Video to LLM{% endblock %}

{% block scripts %}
<script>
  // Choosing a service, and setting one up without leaving this form.
  //
  // The panel is revealed rather than always shown: a list of accounts is noise
  // to someone who has already decided to keep everything on their own machine.
  (function () {
    var panel = document.getElementById("service-picker");
    if (!panel) return;
    var chosenModel = document.getElementById("chosen-model");

    function currentRow() {
      var picked = panel.querySelector('input[name="service"]:checked');
      return picked ? picked.closest(".key-row") : null;
    }

    // The model that travels with the job is the one belonging to the service
    // actually selected — not whichever box was typed in last.
    function syncModel() {
      var row = currentRow();
      var field = row && row.querySelector("[data-model]");
      chosenModel.value = field ? field.value.trim() : "";
    }

    function syncVisible() {
      var external = document.querySelector('input[name="provider"][value="external"]');
      panel.hidden = !(external && external.checked);
      syncModel();
    }

    document.addEventListener("change", function (event) {
      if (event.target.name === "provider" || event.target.name === "service") syncVisible();
    });
    document.addEventListener("input", function (event) {
      if (event.target.hasAttribute && event.target.hasAttribute("data-model")) syncModel();
    });
    panel.addEventListener("submit", function (event) { event.preventDefault(); });

    function post(url, fields) {
      var body = new URLSearchParams();
      Object.keys(fields).forEach(function (k) { body.set(k, fields[k]); });
      return fetch(url, { method: "POST", body: body }).then(function (r) {
        // A 404 means the route is absent from the running process: this screen
        // came from disk and the program did not. Saying "Not Found" would send
        // the user looking for a missing model.
        if (r.status === 404) {
          throw new Error(
            "This needs the application restarted \u2014 the screen is newer than the program running it."
          );
        }
        if (!r.ok) throw new Error("That did not work (" + r.status + ").");
        return r.json();
      });
    }

    document.addEventListener("click", function (event) {
      var row = event.target.closest(".key-row");
      if (!row || !panel.contains(row)) return;

      var result = row.querySelector(".check-result");
      var address = row.querySelector("[data-address]");
      var provider = row.dataset.provider;

      if (event.target.closest("[data-save-key]")) {
        var field = row.querySelector("[data-key-field]");
        result.textContent = "Saving\u2026";
        post("/api/providers/key", { provider: provider, key: field.value })
          .then(function (data) {
            // The field is cleared either way: a key that has been stored is
            // never shown back, and one that was refused should not sit around
            // looking accepted.
            field.value = "";
            result.textContent = data.ok ? "Key saved. It stays on this computer." : data.detail;
          })
          .catch(function (error) { result.textContent = error.message || "Could not save the key."; });
        return;
      }

      if (event.target.closest("[data-check-models]")) {
        var button = event.target.closest("[data-check-models]");
        var list = row.querySelector("datalist");
        button.disabled = true;
        result.textContent = "Checking\u2026";
        post("/api/providers/models", {
          provider: provider,
          base_url: address ? address.value : ""
        })
          .then(function (data) {
            button.disabled = false;
            if (!data.ok) { result.textContent = data.detail || "Could not check."; return; }
            list.innerHTML = "";
            (data.models || []).forEach(function (name) {
              var option = document.createElement("option");
              option.value = name;
              list.appendChild(option);
            });
            result.textContent = data.detail
              || (data.models.length + " available \u2014 the box now suggests them.");
          })
          .catch(function (error) {
            button.disabled = false;
            result.textContent = error.message || "Could not reach this service.";
          });
      }
    });

    syncVisible();
  })();

  // Browse the machine for videos rather than typing absolute paths — the worst
  // interaction in the product, and one a localhost application has no reason to
  // impose.
  (function () {
    var list = document.getElementById("picker-list");
    var here = document.getElementById("picker-here");
    var up = document.getElementById("picker-up");
    var chosenList = document.getElementById("chosen-list");
    var chosenEmpty = document.getElementById("chosen-empty");
    var textarea = document.getElementById("job-paths");
    if (!list) return;

    var chosen = [];
    var parent = "";

    function syncTextarea() {
      textarea.value = chosen.join("\n");
      chosenEmpty.style.display = chosen.length ? "none" : "";
      chosenList.innerHTML = "";

      chosen.forEach(function (path, index) {
        var name = path.split("/").pop();
        var li = document.createElement("li");

        var num = document.createElement("span");
        num.className = "num";
        num.textContent = index + 1;

        var label = document.createElement("span");
        label.className = "grow";
        label.textContent = name;
        label.title = path;

        li.appendChild(num);
        li.appendChild(label);

        [["↑", -1, "Move up"], ["↓", 1, "Move down"], ["✕", 0, "Remove"]].forEach(function (spec) {
          var button = document.createElement("button");
          button.type = "button";
          button.className = "btn btn-ghost";
          button.textContent = spec[0];
          button.setAttribute("aria-label", spec[2] + " " + name);
          button.addEventListener("click", function () {
            if (spec[1] === 0) {
              chosen.splice(index, 1);
            } else {
              var to = index + spec[1];
              if (to < 0 || to >= chosen.length) return;
              var moved = chosen.splice(index, 1)[0];
              chosen.splice(to, 0, moved);
            }
            syncTextarea();
          });
          li.appendChild(button);
        });

        chosenList.appendChild(li);
      });
    }

    function row(label, onClick, size) {
      var button = document.createElement("button");
      button.type = "button";
      button.className = "picker-row";
      button.textContent = label;
      if (size) {
        var span = document.createElement("span");
        span.className = "size";
        span.textContent = size;
        button.appendChild(span);
      }
      button.addEventListener("click", onClick);
      return button;
    }

    function load(path) {
      fetch("/api/browse" + (path ? "?path=" + encodeURIComponent(path) : ""))
        .then(function (r) { return r.json(); })
        .then(function (data) {
          list.innerHTML = "";
          if (!data.ok) { here.textContent = data.detail; return; }

          here.textContent = data.path;
          parent = data.parent;
          up.disabled = !parent;

          data.folders.forEach(function (folder) {
            list.appendChild(row("📁  " + folder.name, function () { load(folder.path); }));
          });

          data.videos.forEach(function (video) {
            list.appendChild(row("🎬  " + video.name, function () {
              if (chosen.indexOf(video.path) === -1) { chosen.push(video.path); syncTextarea(); }
            }, video.size));
          });

          if (!data.folders.length && !data.videos.length) {
            var note = document.createElement("div");
            note.className = "picker-row";
            note.textContent = "Nothing here that can be processed.";
            list.appendChild(note);
          }
        })
        .catch(function () { here.textContent = "That folder could not be read."; });
    }

    up.addEventListener("click", function () { if (parent) load(parent); });
    load("");
    syncTextarea();
  })();

  // "What you'll get", kept in step with the choices above it.
  //
  // The screen used to say nothing until after the job had been created, which
  // meant the moment someone was deciding whether to trust "nothing is
  // uploaded" was the moment it was silent. Every figure comes from the server
  // probing the real files; nothing is computed here, because a second
  // implementation of the frame count is a second answer waiting to disagree.
  (function () {
    var panel = document.getElementById("plan");
    var state = document.getElementById("plan-state");
    var figures = document.getElementById("plan-figures");
    var leaves = document.getElementById("plan-leaves");
    var problems = document.getElementById("plan-problems");
    var problemList = document.getElementById("plan-problem-list");
    var form = panel && panel.closest("form");
    if (!panel || !form) return;

    var timer = null;
    var inFlight = 0;

    function put(term, value) {
      if (!value) return;              // measured or absent, never invented
      var dt = document.createElement("dt");
      dt.textContent = term;
      var dd = document.createElement("dd");
      dd.textContent = value;
      figures.appendChild(dt);
      figures.appendChild(dd);
    }

    function render(data) {
      figures.innerHTML = "";
      problemList.innerHTML = "";

      problems.hidden = !(data.problems && data.problems.length);
      (data.problems || []).forEach(function (text) {
        var li = document.createElement("li");
        li.textContent = text;
        problemList.appendChild(li);
      });

      if (data.ok) {
        put("Videos", data.video_count + (data.video_count === 1 ? " video" : " videos"));
        put("Length", data.duration_label);
        put("Pictures", data.frame_count.toLocaleString());
        put("Disk needed", data.disk_label);
        put("Free on this disk", data.free_label);
        put("Time", data.time_label);
        put("Estimated cost", data.cost_label);
        put("Stops at", data.budget_label);
      }

      // Said in both directions. An absent reassurance reads as a hedge.
      leaves.textContent = data.leaves || "";
      // Plain `.note` is the accent-bordered one, which is the right weight for
      // "something is about to be sent". Neutral for "nothing leaves".
      leaves.className = data.leaves_anything ? "note" : "note note-neutral";
      leaves.hidden = !data.leaves;

      if (data.ok && !data.time_label) {
        state.textContent =
          "How long this takes is not predictable yet — nothing comparable has "
          + "finished on this computer to measure against.";
      } else if (data.ok) {
        state.textContent = "Measured on this computer. Times are approximate.";
      } else {
        state.textContent = "";
      }

      panel.hidden = false;
    }

    function refresh() {
      var body = new URLSearchParams();
      body.set("paths", form.querySelector("#job-paths").value);
      var interval = form.querySelector('input[name="interval"]:checked');
      body.set("interval", interval ? interval.value : "2000");
      var provider = form.querySelector('input[name="provider"]:checked');
      body.set("provider", provider ? provider.value : "none");
      var service = form.querySelector('input[name="service"]:checked');
      body.set("service", service ? service.value : "");
      var model = document.getElementById("chosen-model");
      body.set("model_id", model ? model.value : "");

      if (!body.get("paths").trim()) { panel.hidden = true; return; }

      var ticket = ++inFlight;
      panel.hidden = false;
      state.textContent = "Checking the files…";

      fetch("/api/plan", { method: "POST", body: body })
        .then(function (r) {
          if (r.status === 404) {
            throw new Error(
              "This needs the application restarted — the screen is newer than "
              + "the program running it."
            );
          }
          if (!r.ok) throw new Error("Those files could not be checked (" + r.status + ").");
          return r.json();
        })
        .then(function (data) {
          // A slow reply for a set of files the user has since changed must not
          // overwrite the answer for the files they are looking at now.
          if (ticket !== inFlight) return;
          render(data);
        })
        .catch(function (error) {
          if (ticket !== inFlight) return;
          figures.innerHTML = "";
          leaves.hidden = true;
          problems.hidden = true;
          state.textContent = error.message;
        });
    }

    function schedule() {
      window.clearTimeout(timer);
      // Probing runs ffprobe over every chosen file, so this waits for the user
      // to stop changing their mind rather than firing on each keystroke.
      timer = window.setTimeout(refresh, 400);
    }

    form.addEventListener("change", schedule);
    form.addEventListener("input", schedule);
    // The picker writes paths into the textarea directly, which fires no event.
    var observed = document.getElementById("chosen-list");
    if (observed && window.MutationObserver) {
      new MutationObserver(schedule).observe(observed, { childList: true });
    }
  })();
</script>
{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <h1>Start a new job</h1>
    <p class="page-sub">Your videos stay where they are. Nothing is copied or moved.</p>
  </div>
</div>

{% if problems %}
<div class="panel" style="border-left:3px solid var(--color-accent)" role="alert">
  <h4 style="margin:0 0 var(--space-2)">This job cannot start yet</h4>
  <ul style="margin:0;padding-left:var(--space-4);font-size:14px">
    {% for problem in problems %}<li>{{ problem }}</li>{% endfor %}
  </ul>
</div>
{% endif %}

<form class="panel" method="post" action="/jobs">
  <div class="field">
    <label for="job-name">What is this job called?</label>
    <input class="input" id="job-name" name="name" value="{{ submitted_name or '' }}" placeholder="Session review — 14 Feb" required>
  </div>

  <div class="field" style="margin-top:var(--space-4)">
    <span class="field-label">Which videos?</span>

    <div class="picker">
      <div class="picker-bar">
        <button class="btn btn-secondary" type="button" id="picker-up">Up one folder</button>
        <span class="here mono" id="picker-here">Loading…</span>
      </div>
      <div class="picker-list" id="picker-list" role="listbox" aria-label="Folders and videos"></div>
    </div>

    <p class="text-muted" style="font-size:12px;margin-top:var(--space-1)">
      .mp4, .mov and .webm. Videos are read where they are and never changed or moved.
    </p>

    <h5 style="margin:var(--space-4) 0 0">Chosen, in order</h5>
    <p class="text-muted" style="font-size:12px;margin:2px 0 0">
      They are processed in this order. Use the arrows to change it — the order is
      yours and is never guessed from the filenames.
    </p>
    <ul class="chosen-list" id="chosen-list"></ul>
    <p class="text-muted" style="font-size:12px" id="chosen-empty">Nothing chosen yet.</p>

    <label for="job-paths" style="display:block;margin-top:var(--space-3);font-size:12px">
      Or type full paths, one per line
    </label>
    <textarea class="input" id="job-paths" name="paths" rows="3"
      placeholder="/path/to/capture_0914.mp4">{{ submitted_paths or "" }}</textarea>
  </div>

  <fieldset style="border:0;padding:0;margin:var(--space-6) 0 0">
    <legend><h4>How often should a picture be taken?</h4></legend>
    <div class="grid grid-4" style="margin-top:var(--space-2)">
      {% for value, title, body in [
          ('1000', 'Close look', 'A picture every second'),
          ('2000', 'Balanced', 'A picture every 2 seconds'),
          ('3000', 'Light', 'A picture every 3 seconds'),
          ('custom', 'Custom…', 'Anywhere from ½ to 10 seconds')] %}
      <label class="pick" style="cursor:pointer">
        <input type="radio" name="interval" value="{{ value }}"
               {% if value == '2000' %}checked{% endif %}
               style="position:absolute;opacity:0;width:0;height:0">
        <span class="pick-title">{{ title }}</span>
        <span class="pick-body">{{ body }}</span>
      </label>
      {% endfor %}
    </div>
  </fieldset>

  <fieldset style="border:0;padding:0;margin:var(--space-6) 0 0">
    <legend><h4>Should the pictures be described?</h4></legend>
    <div class="grid grid-3" style="margin-top:var(--space-2)">
      {% for value, title, body, cost in [
          ('ollama_local', 'On this computer',
           'Uses a model you installed yourself. Frames never leave this machine.',
           'No provider API charge · uses your battery and time'),
          ('external', 'Send to a service',
           'Sends the numbered still pictures — never the video — to a service you have an account with.',
           'Costs money · you set the cap'),
          ('none', 'Skip descriptions',
           'Pictures and spoken words only. Nothing leaves this computer.',
           'No charge · fastest')] %}
      <label class="pick" style="cursor:pointer">
        <input type="radio" name="provider" value="{{ value }}"
               {% if value == 'none' %}checked{% endif %}
               style="position:absolute;opacity:0;width:0;height:0">
        <span class="pick-title">{{ title }}</span>
        <span class="pick-body">{{ body }}</span>
        <span class="pick-body text-muted" style="margin-top:var(--space-2);display:block">{{ cost }}</span>
      </label>
      {% endfor %}
    </div>
    {#
      Revealed by the "Send to a service" card, because a list of accounts is
      noise to someone who has already decided to keep everything local — and
      §12 of the invariants: no API terminology before the user opts in.

      A service with no key is still offered, with the means to set one up right
      here. Hiding it would answer "why is my provider missing" with silence;
      sending the user to Settings would lose the form they have half filled in.
    #}
    <div id="service-picker" hidden style="margin-top:var(--space-3)">
      <h5 style="margin:0 0 var(--space-2)">Which service?</h5>
      <p class="text-muted" style="font-size:13px;margin:0 0 var(--space-2)">
        For a service with no key yet: paste one and press Save key, then Check
        to see which models it offers. Keys are kept on this computer.
      </p>
      <div class="keys">
        {% for svc in services | default([], true) %}
        <div class="key-row" data-provider="{{ svc.provider }}"
             style="display:block;padding:var(--space-3)">
          <label style="display:flex;align-items:center;gap:var(--space-2);cursor:pointer">
            <input type="radio" name="service" value="{{ svc.provider }}"
                   {% if loop.first %}checked{% endif %}>
            <strong>{{ svc.label }}</strong>
            {% if svc.ready %}
              <span class="tag tag-neutral">Key set</span>
            {% else %}
              <span class="text-muted" style="font-size:12px">Needs a key</span>
            {% endif %}
          </label>

          <div style="display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:flex-end;margin-top:var(--space-2)">
            {% if not svc.ready %}
            {# Write-only, exactly as in Settings. Saved to the same secure
               store by the same code — this is another way to ask, not another
               place to keep it. #}
            <div class="field" style="margin:0">
              <label for="job-key-{{ svc.provider }}" style="font-size:12px">Key</label>
              <input class="input" id="job-key-{{ svc.provider }}" type="password"
                     data-key-field autocomplete="off" spellcheck="false"
                     placeholder="Paste a key" style="max-width:220px">
            </div>
            <button class="btn btn-secondary" type="button" data-save-key>Save key</button>
            {% endif %}

            {% if svc.needs_address %}
            <div class="field" style="margin:0">
              <label for="job-url-{{ svc.provider }}" style="font-size:12px">Address</label>
              <input class="input mono" id="job-url-{{ svc.provider }}" name="base_url_display"
                     data-address value="{{ svc.base_url }}" spellcheck="false"
                     placeholder="https://gateway.example/api" style="max-width:240px">
            </div>
            {% endif %}

            <div class="field" style="margin:0;flex:1;min-width:200px">
              <label for="job-model-{{ svc.provider }}" style="font-size:12px">Model</label>
              <input class="input mono" id="job-model-{{ svc.provider }}" data-model
                     list="job-models-{{ svc.provider }}" value="{{ svc.model }}"
                     placeholder="{{ 'Press Check to list models, or type one' if svc.ready
                                     else 'Save a key first, then press Check' }}"
                     spellcheck="false">
              <datalist id="job-models-{{ svc.provider }}"></datalist>
            </div>
            <button class="btn btn-secondary" type="button" data-check-models>Check</button>
            <span class="check-result text-muted" style="font-size:12px" role="status"></span>
          </div>
        </div>
        {% endfor %}
      </div>
      {# The chosen row's model travels with the job, so a later change to the
         global settings cannot retroactively alter what this job was asked to
         use. #}
      <input type="hidden" name="model_id" id="chosen-model">
    </div>

    <p class="note note-neutral" style="margin-top:var(--space-3)">
      Descriptions are optional. A job without them still produces pictures and a
      transcript with the timeline preserved, and you can add descriptions later
      without redoing any of this.
    </p>
  </fieldset>

  {#
    What pressing start would actually do, before it is pressed.

    Everything in here is measured or absent: frame counts and disk come from
    probing the files, durations from finished stages on this machine. A row
    with nothing behind it is not rendered — an invented figure is worse than a
    missing one, because someone plans an afternoon around it.

    The "what leaves this computer" line is never omitted in either direction.
    It is the claim the product rests on, and the moment someone is deciding
    whether to believe it is exactly this one.
  #}
  <section id="plan" class="panel" hidden
           style="margin-top:var(--space-6)" aria-live="polite">
    <h4 style="margin:0 0 var(--space-1)">What you'll get</h4>
    <p class="text-muted" style="font-size:12px;margin:0 0 var(--space-3)" id="plan-state"></p>

    <div id="plan-problems" hidden role="alert"
         style="border-left:3px solid var(--color-accent);padding-left:var(--space-3);margin-bottom:var(--space-3)">
      <ul style="margin:0;padding-left:var(--space-4);font-size:13px" id="plan-problem-list"></ul>
    </div>

    <dl class="plan-grid" id="plan-figures"></dl>

    <p class="note" id="plan-leaves" style="margin-top:var(--space-3)"></p>
  </section>

  <div style="margin-top:var(--space-6);display:flex;gap:var(--space-2)">
    <button class="btn btn-primary" type="submit">Check and continue</button>
    <a class="btn btn-secondary" href="/">Cancel</a>
  </div>

  <p class="text-muted" style="font-size:12px;margin-top:var(--space-3)">
    The same job from a terminal:
    <code class="mono">video-to-llm process &lt;video&gt;</code>
  </p>
</form>
{% endblock %}