{% extends "base.html" %}
{% block title %}E-bog / lydbog{% endblock %}
{% block body %}
<h1>E-bog / lydbog</h1>
<p class="wt-lead">Indsæt et link, så laver serveren en fil du kan hente: en e-bog (.epub) eller en lydbog (.m4b).
  Det kan tage fra få sekunder til et kvarter. Filen kan hentes én gang og slettes ellers af sig selv efter et stykke tid.</p>
{% if saved %}<div class="wt-flash">{{ saved }}</div>{% endif %}

<form id="ep-form" method="post" action="/e-pub/start" autocomplete="off"
      style="margin-top:1.2rem;display:flex;gap:.6rem;flex-wrap:wrap;align-items:center">
  <input class="wt-input" name="link" id="ep-link" required maxlength="2048" placeholder="Indsæt link"
         autocapitalize="off" autocorrect="off" spellcheck="false" style="flex:1 1 22rem;min-width:0">
  <button class="wt-btn wt-btn--primary" type="submit" id="ep-knap">Hent</button>
</form>
<p id="ep-fejl" class="err" hidden></p>

<div id="ep-jobs" style="margin-top:1.4rem;display:grid;gap:1rem"></div>

<script>
(function () {
  var TEKST = { koe: "⏳ I kø", koerer: "⚙️ Arbejder…", faerdig: "✅ Færdig", fejl: "⚠️ Fejlede",
                hentet: "Hentet (slettet fra serveren)", udloebet: "Udløbet (slettet fra serveren)" };
  var $ = function (id) { return document.getElementById(id); };
  var timere = {};

  function str(n) {
    var e = ["B", "KB", "MB", "GB"], i = 0;
    while (n >= 1024 && i < e.length - 1) { n /= 1024; i++; }
    return (i ? n.toFixed(1) : n) + " " + e[i];
  }

  function kort(id) {
    var k = $("ep-" + id);
    if (k) return k;
    k = document.createElement("section");
    k.className = "wt-card"; k.id = "ep-" + id; k.style.padding = "1rem 1.2rem";
    k.innerHTML = '<p class="ep-tilstand" style="margin:0 0 .4rem;font-weight:600"></p>' +
      '<p class="ep-besked wt-muted" style="margin:0 0 .4rem"></p>' +
      '<p class="ep-hent" hidden style="margin:.4rem 0"><a class="wt-btn wt-btn--primary" href="/e-pub/hent/' + id + '">Hent fil</a></p>' +
      '<details><summary class="wt-muted" style="cursor:pointer">Log</summary>' +
      '<pre class="ep-log" style="max-height:16rem;overflow:auto;white-space:pre-wrap;font-size:.85em;margin:.4rem 0 0"></pre></details>';
    $("ep-jobs").insertBefore(k, $("ep-jobs").firstChild);
    k.querySelector(".ep-hent a").addEventListener("click", function () {
      // Filen slettes efter én hentning: knappen forsvinder, og status hentes igen om lidt.
      setTimeout(function () { hent(id); }, 4000);
    });
    return k;
  }

  function vis(st) {
    var k = kort(st.id);
    var t = TEKST[st.tilstand] || st.tilstand;
    if (st.tilstand === "faerdig" && st.filnavn) t += " · " + st.filnavn + " (" + str(st.stoerrelse) + ")";
    k.querySelector(".ep-tilstand").textContent = t;
    k.querySelector(".ep-besked").textContent = st.besked || "";
    k.querySelector(".ep-hent").hidden = st.tilstand !== "faerdig";
    var log = k.querySelector(".ep-log"), nederst = log.scrollTop + log.clientHeight >= log.scrollHeight - 4;
    log.textContent = (st.log || []).join("\n");
    if (nederst) log.scrollTop = log.scrollHeight;
    if (st.tilstand === "koerer" || st.tilstand === "koe") k.querySelector("details").open = true;
    planlaeg(st.id, st.tilstand === "koe" ? 3000 : st.tilstand === "koerer" ? 1500 : st.tilstand === "faerdig" ? 30000 : 0);
  }

  function planlaeg(id, ms) {
    clearTimeout(timere[id]);
    if (ms) timere[id] = setTimeout(function () { hent(id); }, ms);
  }

  function hent(id) {
    fetch("/e-pub/status/" + id, { credentials: "same-origin", cache: "no-store" })
      .then(function (r) {
        if (r.status === 404) { var k = $("ep-" + id); if (k) k.remove(); return null; }
        return r.json();
      })
      .then(function (st) { if (st) vis(st); })
      .catch(function () { planlaeg(id, 5000); });
  }

  $("ep-form").addEventListener("submit", function (e) {
    e.preventDefault();
    $("ep-knap").disabled = true;
    $("ep-fejl").hidden = true;
    fetch("/e-pub/start", { method: "POST", credentials: "same-origin", headers: { Accept: "application/json" },
                            body: new FormData($("ep-form")) })
      .then(function (r) { return r.json(); })
      .then(function (st) {
        if (st.error) { $("ep-fejl").textContent = st.error; $("ep-fejl").hidden = false; return; }
        $("ep-link").value = "";
        vis(st);
      })
      .catch(function () { $("ep-fejl").textContent = "Kunne ikke nå serveren."; $("ep-fejl").hidden = false; })
      .finally(function () { $("ep-knap").disabled = false; });
  });

  document.addEventListener("visibilitychange", function () {
    if (!document.hidden) Object.keys(timere).forEach(hent);
  });
  ({{ jobs | tojson }}).reverse().forEach(vis);
})();
</script>
{% endblock %}