<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>SubFox</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 760px;
      margin: 40px auto;
      padding: 0 16px;
      line-height: 1.4;
    }
    h1 {
      margin-bottom: 8px;
    }
    .card {
      border: 1px solid #ddd;
      border-radius: 12px;
      padding: 16px;
      margin-top: 20px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .full {
      grid-column: 1 / -1;
    }
    label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
    }
    input, select, button {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
    }
    button {
      cursor: pointer;
      font-weight: 700;
    }
    progress {
      width: 100%;
      height: 22px;
    }
    .muted {
      color: #666;
      font-size: 14px;
    }
    .hidden {
      display: none;
    }
    #statusBox {
      margin-top: 16px;
    }
    #downloadLink {
      display: inline-block;
      margin-top: 12px;
      font-weight: 700;
    }
    pre {
      white-space: pre-wrap;
      word-break: break-word;
      background: #f7f7f7;
      padding: 12px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>SubFox</h1>
  <div class="muted">Subtitle translator with per-job settings</div>

  <div class="card">
    <form id="uploadForm">
      <div class="grid">
        <div class="full">
          <label for="file">SRT file</label>
          <input id="file" name="file" type="file" accept=".srt" required />
        </div>

        <div>
          <label for="mode">Mode</label>
          <select id="mode" name="mode">
            <option value="fast" selected>fast</option>
          </select>
        </div>

        <div>
          <label for="target_lang">Target language</label>
          <select id="target_lang" name="target_lang">
            <option value="da" selected>Danish</option>
            <option value="en">English</option>
            <option value="de">German</option>
            <option value="sv">Swedish</option>
            <option value="no">Norwegian</option>
          </select>
        </div>

        <div>
          <label for="source_lang">Source language</label>
          <select id="source_lang" name="source_lang">
            <option value="auto" selected>auto</option>
            <option value="en">English</option>
            <option value="da">Danish</option>
            <option value="de">German</option>
            <option value="sv">Swedish</option>
            <option value="no">Norwegian</option>
          </select>
        </div>

        <div>
          <label for="model">Model</label>
          <select id="model" name="model">
            <option value="gpt-4o-mini" selected>gpt-4o-mini</option>
            <option value="gpt-4.1-mini">gpt-4.1-mini</option>
          </select>
        </div>

        <div>
          <label for="workers">Workers</label>
          <input id="workers" name="workers" type="number" min="1" max="16" value="4" />
        </div>

        <div class="full">
          <button type="submit">Start translation</button>
        </div>
      </div>
    </form>

    <div id="statusBox" class="hidden">
      <p><strong>Status:</strong> <span id="statusText">queued</span></p>
      <p><strong>Progress:</strong> <span id="progressText">0%</span></p>
      <progress id="progressBar" value="0" max="100"></progress>

      <div class="card">
        <div><strong>Job settings</strong></div>
        <pre id="jobMeta"></pre>
      </div>

      <a id="downloadLink" class="hidden" href="#">Download translated file</a>

      <div id="errorBox" class="hidden">
        <strong>Error</strong>
        <pre id="errorText"></pre>
      </div>
    </div>
  </div>

  <script>
    const form = document.getElementById("uploadForm");
    const statusBox = document.getElementById("statusBox");
    const statusText = document.getElementById("statusText");
    const progressText = document.getElementById("progressText");
    const progressBar = document.getElementById("progressBar");
    const downloadLink = document.getElementById("downloadLink");
    const errorBox = document.getElementById("errorBox");
    const errorText = document.getElementById("errorText");
    const jobMeta = document.getElementById("jobMeta");

    let pollTimer = null;

    function setStatus(job) {
      statusBox.classList.remove("hidden");
      statusText.textContent = job.status ?? "unknown";
      progressText.textContent = `${job.progress ?? 0}%`;
      progressBar.value = job.progress ?? 0;

      jobMeta.textContent = JSON.stringify({
        mode: job.mode,
        source_lang: job.source_lang,
        target_lang: job.target_lang,
        model: job.model,
        workers: job.workers,
        blocks: job.blocks
      }, null, 2);

      if (job.done) {
        downloadLink.href = `/download/${jobId}`;
        downloadLink.classList.remove("hidden");
      } else {
        downloadLink.classList.add("hidden");
      }

      if (job.status === "error") {
        errorBox.classList.remove("hidden");
        errorText.textContent = job.error || "Unknown error";
      } else {
        errorBox.classList.add("hidden");
        errorText.textContent = "";
      }
    }

    let jobId = null;

    async function pollStatus() {
      if (!jobId) return;

      const res = await fetch(`/status/${jobId}`);
      const job = await res.json();
      setStatus(job);

      if (job.done || job.status === "error") {
        if (pollTimer) {
          clearTimeout(pollTimer);
          pollTimer = null;
        }
        return;
      }

      pollTimer = setTimeout(pollStatus, 800);
    }

    form.addEventListener("submit", async (e) => {
      e.preventDefault();

      if (pollTimer) {
        clearTimeout(pollTimer);
        pollTimer = null;
      }

      downloadLink.classList.add("hidden");
      errorBox.classList.add("hidden");
      progressBar.value = 0;
      progressText.textContent = "0%";
      statusText.textContent = "uploading...";
      statusBox.classList.remove("hidden");

      const formData = new FormData(form);

      const res = await fetch("/start", {
        method: "POST",
        body: formData
      });

      const data = await res.json();

      if (!res.ok) {
        statusText.textContent = "error";
        errorBox.classList.remove("hidden");
        errorText.textContent = data.error || "Upload failed";
        return;
      }

      jobId = data.job_id;
      pollStatus();
    });
  </script>
</body>
</html>
