{% extends "base.html" %}
{% block title %}Erindringer{% endblock %}
{% block body %}
<style>
  /* Ingen vandret scroll på iPhone: alt holder sig inden for kortet, og felter
     har mindst 16 px skrift, ellers zoomer iOS ind. */
  html, body { overflow-x: hidden; }
  .er-side { max-width: 100%; overflow-wrap: anywhere; }
  .er-side audio, .er-side textarea, .er-side .wt-card { max-width: 100%; box-sizing: border-box; }
  .er-side audio { display: block; width: 100%; min-width: 0; }
  .er-side textarea { font-size: 16px !important; min-width: 0; min-height: 7rem; line-height: 1.5; }
  .er-side .wt-btn { white-space: normal; }

  /* Store, rolige knapper til ældre fingre */
  .er-stor { font-size: 1.1rem; padding: .85rem 1.4rem; min-height: 3.2rem; }
  .er-knapper { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1rem; }
  .er-kort { margin: 1rem 0; padding: 1.1rem 1.2rem; }
  .er-emne { display: flex; flex-direction: column; gap: .5rem; }
  .er-emne h3 { margin: 0; font-size: 1.25rem; }
  .er-emne .wt-btn { align-self: flex-start; }

  /* Spørgsmålet: stor skrift, god linjeafstand */
  .er-spoergsmaal { font-size: 1.3rem; line-height: 1.5; margin: .3rem 0 .8rem; font-weight: 600; }

  /* Den runde optage-knap */
  .er-midt { display: flex; flex-direction: column; align-items: center; gap: .8rem; margin: 1.4rem 0; text-align: center; }
  .er-optag {
    width: 7.5rem; height: 7.5rem; min-width: 88px; min-height: 88px; border-radius: 50%;
    border: 3px solid var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: inherit; font: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    transition: transform .15s, background .2s;
  }
  .er-optag:hover { transform: scale(1.04); }
  .er-optag:disabled { opacity: .5; cursor: default; transform: none; }
  .er-optag.optager {
    background: var(--color-bad); border-color: var(--color-bad); color: #fff;
    animation: er-puls 1.3s ease-in-out infinite;
  }
  .er-optag .er-taeller { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; }
  @keyframes er-puls {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-bad) 55%, transparent); }
    50% { box-shadow: 0 0 0 18px transparent; }
  }
  @media (prefers-reduced-motion: reduce) { .er-optag.optager { animation: none; } }

  .er-status { min-height: 1.5rem; font-size: 1.05rem; color: var(--color-muted); }
  .er-status.travl { color: var(--color-accent); font-weight: 600; }
  .er-link { background: none; border: 0; padding: .4rem; color: var(--color-accent); text-decoration: underline;
             cursor: pointer; font: inherit; font-size: 1rem; }

  /* Svar-lister */
  .er-liste { list-style: none; padding: 0; margin: .6rem 0 0; }
  .er-liste li { border-top: 1px solid var(--color-border); padding: .9rem 0; }
  .er-liste li:first-child { border-top: 0; }
  .er-liste .er-q { font-weight: 700; margin: 0 0 .3rem; font-size: 1.05rem; }
  .er-liste .er-meta { color: var(--color-muted); font-size: .9rem; margin: 0 0 .3rem; }
  .er-tekst { margin: 0; white-space: pre-line; line-height: 1.55; font-size: 1.05rem; }
  .er-ret { margin-top: .5rem; }
  .er-ret .wt-btn { font-size: .95rem; }
  .er-dit-svar { background: color-mix(in srgb, var(--color-good) 8%, transparent); border-color: color-mix(in srgb, var(--color-good) 40%, transparent); }
</style>

<div class="er-side" id="er-side"
     data-api="{{ api }}" data-rod="{{ rod }}" data-noegle="{{ noegle }}" data-valgt="{{ valgt }}">

  <h1>Erindringer</h1>
  <p class="wt-lead">Hej {{ navn }}. Fortæl, så gemmer vi det. Du kan altid holde en pause og komme tilbage.</p>

  {% if saved %}<div class="wt-flash">{{ saved }}</div>{% endif %}
  <div class="wt-flash" id="er-flash" hidden role="status" aria-live="polite"></div>

  <!-- Trin 2: vælg emne -->
  <section id="er-emner">
    <h2>Vælg, hvad du vil fortælle om</h2>
    {% for p in projekter %}
    <div class="wt-card er-kort er-emne" data-slug="{{ p.slug }}" data-titel="{{ p.titel }}">
      <h3>{{ p.titel }}</h3>
      {% if p.beskrivelse %}<p style="margin:0">{{ p.beskrivelse }}</p>{% endif %}
      <p class="wt-muted" style="margin:0"><span class="er-antal">{{ p.antal }}</span> svar indtil nu</p>
      <button type="button" class="wt-btn wt-btn--primary er-stor" data-vaelg="{{ p.slug }}"
              aria-label="Fortæl om {{ p.titel }}">Fortæl</button>
    </div>
    {% else %}
    <p class="wt-muted">Der er ingen emner endnu.</p>
    {% endfor %}
  </section>

  <!-- Trin 3: samtalen -->
  <section id="er-samtale" hidden>
    <h2 id="er-samtale-titel">Samtale</h2>
    <p id="er-dag" hidden class="wt-muted" style="margin:0 0 .8rem">Dagbog for <input type="date" id="er-dato" max="{{ idag }}" value="{{ idag }}" style="font-size:16px;padding:.2rem .4rem"> <span class="wt-muted">(én dag ad gangen; vælg en anden dag for at skrive bagud)</span></p>

    <div class="wt-card er-kort" id="er-spoergsmaal-kort">
      <p class="wt-muted" style="margin:0 0 .2rem">Spørgsmål <span id="er-nr"></span></p>
      <p class="er-spoergsmaal" id="er-spoergsmaal">Henter spørgsmålet…</p>
      <p class="wt-muted" id="er-afrunding" hidden style="margin:0 0 .6rem">Det var det sidste spørgsmål om emnet for nu. Bagefter kan du holde pause, eller fortælle videre, hvis du har lyst.</p>
      <div class="er-knapper" style="justify-content:flex-start">
        <button type="button" class="wt-btn er-stor" id="er-hoer" hidden aria-label="Hør spørgsmålet læst op">🔊 Hør spørgsmålet</button>
        <button type="button" class="wt-btn" id="er-spring" aria-label="Spring dette spørgsmål over">Spring over</button>
      </div>
      <audio id="er-lyd" preload="auto"></audio>
    </div>

    <div class="er-midt" id="er-optagelse">
      <button type="button" class="er-optag" id="er-optag" aria-label="Optag dit svar" aria-pressed="false">
        <span id="er-optag-tekst">Optag</span>
        <span class="er-taeller" id="er-taeller" hidden>0:00</span>
      </button>
      <p class="er-status" id="er-status" aria-live="polite"></p>
      <p class="er-tekst" id="er-live" hidden style="width:100%;max-width:32rem;text-align:left;min-height:2.4rem"><span id="er-live-fast"></span><span id="er-live-delvis" class="wt-muted"></span></p>
      <p class="wt-muted" style="margin:0">Tal bare, som du ville fortælle det til et barnebarn.</p>

      <div id="er-optaget" hidden style="width:100%;max-width:32rem">
        <audio id="er-afspil" controls></audio>
        <div class="er-knapper">
          <button type="button" class="wt-btn wt-btn--primary er-stor" id="er-send">Send svaret</button>
          <button type="button" class="wt-btn er-stor" id="er-om">Tag det om</button>
        </div>
      </div>

      <button type="button" class="er-link" id="er-skriv-link">Skriv i stedet</button>
      <div id="er-skriv" hidden style="width:100%;max-width:32rem;text-align:left">
        <label for="er-tekstfelt" class="wt-muted">Skriv dit svar her</label>
        <textarea id="er-tekstfelt" rows="5"></textarea>
        <div class="er-knapper">
          <button type="button" class="wt-btn wt-btn--primary er-stor" id="er-send-tekst">Send teksten</button>
        </div>
      </div>
    </div>

    <div class="wt-card er-kort er-dit-svar" id="er-svar-kort" hidden>
      <p class="wt-muted" style="margin:0 0 .3rem">Dit svar</p>
      <p class="er-tekst" id="er-svar-tekst"></p>
      <div class="er-ret" id="er-svar-ret"></div>
      <div class="er-knapper">
        <button type="button" class="wt-btn wt-btn--primary er-stor" id="er-naeste">Næste spørgsmål</button>
        <button type="button" class="wt-btn er-stor" id="er-pause">Hold pause</button>
      </div>
    </div>

    <h2>Dine svar i dag</h2>
    <ul class="er-liste" id="er-dagens"></ul>
    <p class="wt-muted" id="er-dagens-tom">Ingen endnu. Dit første svar kommer her.</p>
  </section>

  <!-- Trin 4: tidligere svar, dag for dag; "Afspil begge" spiller spørgsmålet og derefter svaret -->
  <section id="er-tidligere">
    <h2>{% if alle %}Alle svar{% else %}Tidligere svar{% endif %}</h2>
    {% if klip_seneste %}
    <ul class="er-liste">
      {% for k in klip_seneste %}
      {% if loop.first or k.dag != loop.previtem.dag %}
      <li class="er-dagsskel"><h3 style="margin:1.2rem 0 .2rem;font-size:1.05rem"><span data-tid="{{ k.tid }}">{{ k.dag }}</span></h3></li>
      {% endif %}
      <li data-id="{{ k.id }}">
        <p class="er-meta">{{ k.projekt_titel or k.projekt }}{% if k.varighed %} · {{ k.varighed // 60 }}:{{ '%02d' % (k.varighed % 60) }}{% endif %}</p>
        <p class="er-q">{{ k.spoergsmaal }}</p>
        <p class="er-tekst" data-tekst>{{ k.tekst }}</p>
        <div class="er-knapper" style="justify-content:flex-start;margin-top:.4rem">
          <button type="button" class="wt-btn" data-begge="{{ k.id }}" aria-label="Afspil spørgsmål og svar">▶ Spørgsmål og svar</button>
          <button type="button" class="wt-btn" data-ret="{{ k.id }}">Ret teksten</button>
        </div>
        <audio controls preload="none" data-svar="{{ k.id }}" src="{{ rod }}/klip/{{ k.id }}.mp3{% if noegle %}?noegle={{ noegle }}{% endif %}" style="margin-top:.4rem"></audio>
        <div class="er-ret"></div>
      </li>
      {% endfor %}
    </ul>
    {% if not alle and antal_alle > klip_seneste|length %}
    <p><a class="wt-btn" href="{{ rod }}/alle{% if noegle %}/{% endif %}">Se alle {{ antal_alle }} svar</a></p>
    {% endif %}
    {% else %}
    <p class="wt-muted">Ingen svar endnu. Det første gemmes her, når du har fortalt noget.</p>
    {% endif %}
  </section>
</div>

<script>
(function () {
  if (window.__erindringer) return;
  window.__erindringer = true;

  var side = document.getElementById('er-side');
  var API = side.dataset.api, ROD = side.dataset.rod, NOEGLE = side.dataset.noegle || '';
  var MAKS_SEK = 600;              // 10 minutter pr. svar
  var MIMER = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg;codecs=opus'];

  function el(id) { return document.getElementById(id); }
  var ui = {
    emner: el('er-emner'), samtale: el('er-samtale'), titel: el('er-samtale-titel'),
    nr: el('er-nr'), spoergsmaal: el('er-spoergsmaal'), hoer: el('er-hoer'), lyd: el('er-lyd'),
    optagelse: el('er-optagelse'), optag: el('er-optag'), optagTekst: el('er-optag-tekst'), taeller: el('er-taeller'),
    status: el('er-status'), optaget: el('er-optaget'), afspil: el('er-afspil'),
    send: el('er-send'), om: el('er-om'), skrivLink: el('er-skriv-link'), skriv: el('er-skriv'),
    tekstfelt: el('er-tekstfelt'), sendTekst: el('er-send-tekst'),
    svarKort: el('er-svar-kort'), svarTekst: el('er-svar-tekst'), svarRet: el('er-svar-ret'),
    naeste: el('er-naeste'), pause: el('er-pause'), dagens: el('er-dagens'), dagensTom: el('er-dagens-tom'),
    flash: el('er-flash'), afrunding: el('er-afrunding'), spring: el('er-spring'),
    dag: el('er-dag'), dato: el('er-dato'),
    live: el('er-live'), liveFast: el('er-live-fast'), liveDelvis: el('er-live-delvis')
  };

  // Tilstand for den igangværende samtale
  var st = {
    projekt: null, titel: '', samtale: null, spoergsmaal: '', talt: '', lydSha: '', kilde: '', lydUrl: null,
    kladdeId: null, kladdeKlar: false, dato: '', poll: null,
    recorder: null, stream: null, chunks: [], blob: null, mime: '', ext: 'webm',
    timer: null, sekunder: 0, startet: 0, sender: false, sendtIDag: 0, lydAfspillet: false
  };

  /* ---------- Hjælpere ---------- */

  function visFlash(tekst) {
    ui.flash.textContent = tekst;
    ui.flash.hidden = !tekst;
  }
  function status(tekst, travl) {
    ui.status.textContent = tekst || '';
    ui.status.classList.toggle('travl', !!travl);
  }
  function mmss(s) {
    s = Math.max(0, Math.round(s));
    return Math.floor(s / 60) + ':' + ('0' + (s % 60)).slice(-2);
  }
  function datoTekst(iso) {
    try {
      var d = new Date(iso);
      if (isNaN(d)) return iso.slice(0, 10);
      return d.toLocaleDateString('da-DK', { day: 'numeric', month: 'long', year: 'numeric' });
    } catch (e) { return iso.slice(0, 10); }
  }
  function lagerNoegle() { return 'erindringer:samtale:' + st.projekt; }
  function husk(id) { try { sessionStorage.setItem(lagerNoegle(), id); } catch (e) {} }
  function glem() { try { sessionStorage.removeItem(lagerNoegle()); } catch (e) {} }
  function hentHusket() { try { return sessionStorage.getItem(lagerNoegle()); } catch (e) { return null; } }

  // Fælles fetch: JSON-body eller FormData, altid med nøgle og marker-header.
  // Ingen timeout: transskription kan tage lang tid.
  function kald(sti, data) {
    var erForm = data instanceof FormData;
    if (erForm) data.append('noegle', NOEGLE); else data.noegle = NOEGLE;
    var opts = { method: 'POST', credentials: 'same-origin', headers: { 'X-Requested-With': 'fetch' } };
    if (erForm) { opts.body = data; }
    else { opts.headers['Content-Type'] = 'application/json'; opts.body = JSON.stringify(data); }
    return fetch(API + sti, opts).then(function (r) {
      return r.text().then(function (t) {
        var j = null;
        try { j = t ? JSON.parse(t) : null; } catch (e) {}
        if (!r.ok) throw new Error((j && j.fejl) || 'Noget gik galt (' + r.status + '). Prøv igen om lidt.');
        return j || {};
      });
    }, function () {
      throw new Error('Vi kunne ikke få forbindelse. Tjek, at du har net, og prøv igen.');
    });
  }

  /* ---------- Ret teksten (bruges både i dag og i tidligere svar) ---------- */

  // tekstEls: ét eller flere elementer, der viser samme tekst og skal følges ad
  function retTekst(id, tekstEls, holder) {
    if (holder.querySelector('textarea')) return;
    if (!Array.isArray(tekstEls)) tekstEls = [tekstEls];
    holder.innerHTML = '';
    var ta = document.createElement('textarea');
    ta.value = tekstEls[0].textContent;
    ta.rows = 6;
    var gem = document.createElement('button');
    gem.type = 'button'; gem.className = 'wt-btn wt-btn--primary'; gem.textContent = 'Gem';
    var fortryd = document.createElement('button');
    fortryd.type = 'button'; fortryd.className = 'wt-btn'; fortryd.textContent = 'Fortryd';
    var knapper = document.createElement('div');
    knapper.className = 'er-knapper'; knapper.style.justifyContent = 'flex-start';
    knapper.appendChild(gem); knapper.appendChild(fortryd);
    holder.appendChild(ta); holder.appendChild(knapper);
    ta.focus();

    function tilbage() {
      holder.innerHTML = '';
      var b = document.createElement('button');
      b.type = 'button'; b.className = 'wt-btn'; b.textContent = 'Ret teksten';
      b.setAttribute('data-ret', id);
      holder.appendChild(b);
    }
    fortryd.addEventListener('click', tilbage);
    gem.addEventListener('click', function () {
      var ny = ta.value.trim();
      gem.disabled = true; fortryd.disabled = true; gem.textContent = 'Gemmer…';
      kald('/ret', { id: id, tekst: ny }).then(function () {
        tekstEls.forEach(function (t) { t.textContent = ny; });
        tilbage();
        visFlash('Teksten er rettet.');
      }).catch(function (e) {
        gem.disabled = false; fortryd.disabled = false; gem.textContent = 'Gem';
        visFlash(e.message);
      });
    });
  }

  // Alle "Ret teksten"-knapper, også dem der oprettes senere
  document.addEventListener('click', function (e) {
    var b = e.target.closest && e.target.closest('[data-ret]');
    if (!b) return;
    var li = b.closest('[data-id]');
    var tekstEl = li ? li.querySelector('[data-tekst]') : null;
    if (!li || !tekstEl) return;
    var els = [tekstEl];
    // Er det dagens seneste svar, skal "Dit svar"-kortet følge med
    if (!ui.svarKort.hidden && ui.svarKort.dataset.id === b.dataset.ret) els.push(ui.svarTekst);
    retTekst(b.dataset.ret, els, b.parentNode);
  });

  // "Spørgsmål og svar": ÉT afspiller-element spiller først spørgsmålet og skifter så til svaret.
  // (To elementer virker ikke på iPhone: kun det element, man selv trykkede på, må spille videre.)
  document.addEventListener('click', function (e) {
    var b = e.target.closest && e.target.closest('[data-begge]');
    if (!b) return;
    var li = b.closest('[data-id]');
    var sv = li && li.querySelector('audio[data-svar]');
    if (!sv) return;
    document.querySelectorAll('audio').forEach(function (a) { if (a !== sv) { try { a.pause(); } catch (x) {} } });
    var svarSrc = sv.dataset.svarSrc || sv.getAttribute('src');
    sv.dataset.svarSrc = svarSrc;
    var spSrc = svarSrc.replace(/\.mp3(\?|$)/, '-sp.mp3$1');
    var tilSvar = function () {
      sv.onended = null; sv.onerror = null;
      sv.src = svarSrc; sv.currentTime = 0;
      var p = sv.play(); if (p && p.catch) p.catch(function () {});
    };
    sv.onended = tilSvar;
    sv.onerror = tilSvar;            // intet spørgsmål gemt (eller det kunne ikke laves): spil svaret
    sv.src = spSrc; sv.currentTime = 0;
    var p = sv.play(); if (p && p.catch) p.catch(tilSvar);
  });

  // Datoer i "Tidligere svar" på læsbart dansk
  document.querySelectorAll('[data-tid]').forEach(function (s) { s.textContent = datoTekst(s.dataset.tid); });

  /* ---------- Emnevalg ---------- */

  function vaelg(slug) {
    var kort = ui.emner.querySelector('[data-slug="' + slug + '"]');
    if (!kort) return;
    st.projekt = slug;
    st.titel = kort.dataset.titel || slug;
    // Dagbogen føres én dag ad gangen: serveren vælger samtalen ud fra datoen
    st.dato = (slug === 'dagbog') ? ui.dato.value : '';
    ui.dag.hidden = (slug !== 'dagbog');
    st.samtale = (slug === 'dagbog') ? null : hentHusket();
    st.sendtIDag = 0;
    ui.titel.textContent = st.titel;
    ui.dagens.innerHTML = '';
    ui.dagensTom.hidden = false;
    visFlash('');
    ui.emner.hidden = true;
    ui.samtale.hidden = false;
    window.scrollTo({ top: 0, behavior: 'smooth' });
    hentSpoergsmaal(true);
  }

  ui.emner.addEventListener('click', function (e) {
    var b = e.target.closest && e.target.closest('[data-vaelg]');
    if (b) vaelg(b.dataset.vaelg);
  });
  ui.dato.addEventListener('change', function () {
    if (st.projekt !== 'dagbog' || st.sender) return;
    st.dato = ui.dato.value;
    st.samtale = null;
    ui.dagens.innerHTML = ''; ui.dagensTom.hidden = false;
    hentSpoergsmaal(false);
  });

  function holdPause() {
    stopStream();
    stopTimer();
    nulstilOptagelse();
    ui.svarKort.hidden = true;
    ui.samtale.hidden = true;
    ui.emner.hidden = false;
    // Opdatér tællingen på emnekortet
    var kort = ui.emner.querySelector('[data-slug="' + st.projekt + '"] .er-antal');
    if (kort) kort.textContent = (parseInt(kort.textContent, 10) || 0) + st.sendtIDag;
    st.sendtIDag = 0;
    visFlash('Tak for i dag. Dine svar er gemt.');
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }
  ui.pause.addEventListener('click', holdPause);

  /* ---------- Spørgsmål ---------- */

  function hentSpoergsmaal(foersteForsoeg) {
    ui.spoergsmaal.textContent = 'Henter spørgsmålet…';
    ui.nr.textContent = '';
    ui.hoer.hidden = true;
    ui.svarKort.hidden = true;
    nulstilOptagelse();
    ui.optagelse.hidden = false;
    status('');
    kald('/naeste', { projekt: st.projekt, samtale: st.samtale || null, sprunget: hentSprunget(), dato: st.dato || '' }).then(function (j) {
      st.samtale = j.samtale;
      husk(j.samtale);
      st.spoergsmaal = j.spoergsmaal || '';
      st.talt = j.talt || st.spoergsmaal;
      st.lydSha = j.lyd_sha || '';
      st.kilde = j.kilde || '';
      st.lydUrl = j.lyd_url || null;
      ui.spoergsmaal.textContent = st.spoergsmaal;
      ui.afrunding.hidden = !j.afslut;
      ui.nr.textContent = j.nr ? String(j.nr) : '';
      ui.hoer.hidden = !st.lydUrl;
      if (st.lydUrl) {
        ui.lyd.src = st.lydUrl;
        // Afspil automatisk, hvis browseren tillader det; ellers kun på klik
        var p = ui.lyd.play();
        if (p && p.catch) p.catch(function () {});
      }
    }).catch(function (e) {
      // Et gammelt samtale-id kan være udløbet: prøv én gang forfra
      if (foersteForsoeg && st.samtale) { st.samtale = null; glem(); return hentSpoergsmaal(false); }
      ui.spoergsmaal.textContent = 'Vi kunne ikke hente et spørgsmål.';
      visFlash(e.message + ' Du kan holde pause og prøve igen senere.');
    });
  }

  ui.hoer.addEventListener('click', function () {
    try {
      ui.lyd.currentTime = 0;
      var p = ui.lyd.play();
      if (p && p.catch) p.catch(function () { visFlash('Lyden kunne ikke afspilles. Du kan læse spørgsmålet ovenfor.'); });
    } catch (e) {}
  });
  ui.naeste.addEventListener('click', function () { hentSpoergsmaal(false); });

  // Sprungne spørgsmål huskes pr. projekt, så intervieweren ikke stiller dem igen
  function sprungetNoegle() { return 'erindringer:sprunget:' + st.projekt; }
  function hentSprunget() { try { return JSON.parse(sessionStorage.getItem(sprungetNoegle()) || '[]'); } catch (e) { return []; } }
  ui.spring.addEventListener('click', function () {
    if (st.sender || !st.spoergsmaal) return;
    try { ui.lyd.pause(); } catch (e) {}
    var liste = hentSprunget();
    if (liste.indexOf(st.spoergsmaal) < 0) liste.push(st.spoergsmaal);
    try { sessionStorage.setItem(sprungetNoegle(), JSON.stringify(liste.slice(-50))); } catch (e) {}
    hentSpoergsmaal(false);
  });

  /* ---------- Optagelse ---------- */

  function vaelgMime() {
    if (!window.MediaRecorder || !MediaRecorder.isTypeSupported) return '';
    for (var i = 0; i < MIMER.length; i++) if (MediaRecorder.isTypeSupported(MIMER[i])) return MIMER[i];
    return '';
  }
  function endelse(mime) {
    if (mime.indexOf('mp4') > -1) return 'mp4';
    if (mime.indexOf('ogg') > -1) return 'ogg';
    return 'webm';
  }
  function stopStream() {
    if (st.stream) { st.stream.getTracks().forEach(function (t) { t.stop(); }); st.stream = null; }
  }
  function stopTimer() {
    if (st.timer) { clearInterval(st.timer); st.timer = null; }
  }
  function nulstilOptagelse() {
    st.blob = null; st.chunks = []; st.sekunder = 0;
    ui.optag.disabled = false;
    ui.optag.classList.remove('optager');
    ui.optag.setAttribute('aria-pressed', 'false');
    ui.optagTekst.textContent = 'Optag';
    ui.taeller.hidden = true; ui.taeller.textContent = '0:00';
    ui.optag.hidden = false;
    ui.optaget.hidden = true;
    if (ui.afspil.src) { try { URL.revokeObjectURL(ui.afspil.src); } catch (e) {} ui.afspil.removeAttribute('src'); }
    ui.skriv.hidden = true; ui.skrivLink.hidden = false;
    ui.tekstfelt.value = '';
    ui.send.disabled = false; ui.om.disabled = false; ui.sendTekst.disabled = false;
    st.sender = false;
  }

  function startOptagelse() {
    visFlash('');
    var mime = vaelgMime();
    if (!window.MediaRecorder || !navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      visFlash('Din browser kan ikke optage lyd. Brug "Skriv i stedet" herunder.');
      visSkriv();
      return;
    }
    ui.optag.disabled = true;
    status('Gør mikrofonen klar…');
    liveForbered();      // AudioContext skal skabes i klikket (iOS), og tokenet hentes imens
    navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
      st.stream = stream;
      st.chunks = [];
      st.mime = mime;
      st.ext = endelse(mime);
      liveStart(stream);
      try {
        st.recorder = mime ? new MediaRecorder(stream, { mimeType: mime }) : new MediaRecorder(stream);
      } catch (e) {
        stopStream();
        throw new Error('Optageren kunne ikke startes. Brug "Skriv i stedet", eller prøv en anden browser.');
      }
      if (!st.mime) st.mime = st.recorder.mimeType || '';
      st.ext = endelse(st.mime);
      st.recorder.addEventListener('dataavailable', function (e) { if (e.data && e.data.size) st.chunks.push(e.data); });
      st.recorder.addEventListener('stop', optagelseFaerdig);
      st.recorder.addEventListener('error', function () {
        visFlash('Optagelsen blev afbrudt. Prøv igen, eller brug "Skriv i stedet".');
        stopOptagelse();
      });
      st.recorder.start(1000);
      st.startet = Date.now();
      st.sekunder = 0;
      ui.optag.disabled = false;
      ui.optag.classList.add('optager');
      ui.optag.setAttribute('aria-pressed', 'true');
      ui.optag.setAttribute('aria-label', 'Stop optagelsen');
      ui.optagTekst.textContent = 'Stop';
      ui.taeller.hidden = false; ui.taeller.textContent = '0:00';
      ui.skrivLink.hidden = true;
      status('Vi optager. Tryk på knappen, når du er færdig.');
      st.timer = setInterval(function () {
        st.sekunder = Math.round((Date.now() - st.startet) / 1000);
        ui.taeller.textContent = mmss(st.sekunder);
        if (st.sekunder >= MAKS_SEK) {
          stopOptagelse();
          visFlash('Vi stoppede optagelsen efter 10 minutter. Du kan sende svaret nu og fortsætte på næste spørgsmål.');
        }
      }, 1000);
    }).catch(function (e) {
      stopStream();
      ui.optag.disabled = false;
      status('');
      var navn = e && e.name;
      if (navn === 'NotAllowedError' || navn === 'SecurityError' || navn === 'PermissionDeniedError') {
        visFlash('Vi fik ikke lov til at bruge mikrofonen. Tillad mikrofonen i browseren, eller brug "Skriv i stedet".');
      } else if (navn === 'NotFoundError' || navn === 'DevicesNotFoundError') {
        visFlash('Vi kunne ikke finde en mikrofon. Brug "Skriv i stedet".');
      } else {
        visFlash((e && e.message) || 'Mikrofonen kunne ikke startes. Prøv igen, eller brug "Skriv i stedet".');
      }
      visSkriv();
    });
  }

  function stopOptagelse() {
    stopTimer();
    ui.optag.disabled = true;
    status('Gør optagelsen klar…');
    liveStop();
    try {
      if (st.recorder && st.recorder.state !== 'inactive') st.recorder.stop();
      else optagelseFaerdig();
    } catch (e) { optagelseFaerdig(); }
  }

  /* ---------- Live-afskrift (ElevenLabs realtime STT) ----------
     Mikrofonen sendes som 16 kHz PCM direkte til ElevenLabs over en WebSocket med et
     engangs-token fra serveren (API-nøglen bliver på serveren). Teksten vokser, mens man
     taler; ved stop sendes den med optagelsen, så serveren ikke skal skrive af bagefter. */
  var live = { ctx: null, node: null, src: null, ws: null, token: null, fast: '', delvis: '', aktiv: false, luk: null };

  function liveForbered() {
    live.fast = ''; live.delvis = ''; live.aktiv = false; live.token = null;
    try { ui.live.hidden = true; ui.liveFast.textContent = ''; ui.liveDelvis.textContent = ''; } catch (e) {}
    try {
      var AC = window.AudioContext || window.webkitAudioContext;
      if (AC && !live.ctx) {
        try { live.ctx = new AC({ sampleRate: 16000 }); } catch (e) { live.ctx = new AC(); }
      }
      if (live.ctx && live.ctx.state === 'suspended') live.ctx.resume().catch(function () {});
    } catch (e) { live.ctx = null; }
    live.token = kald('/stt-token', {}).catch(function () { return null; });
  }

  function liveStart(stream) {
    if (!live.ctx || !window.WebSocket) return;
    live.token.then(function (t) {
      if (!t || !t.url || !st.stream) return;
      var ws;
      try { ws = new WebSocket(t.url); } catch (e) { return; }
      live.ws = ws;
      ws.onmessage = function (ev) {
        var m; try { m = JSON.parse(ev.data); } catch (e) { return; }
        if (m.message_type === 'partial_transcript') { live.delvis = m.text || ''; }
        else if (m.message_type === 'committed_transcript') {
          if (m.text) live.fast = (live.fast + ' ' + m.text).trim();
          live.delvis = '';
        }
        liveVis();
      };
      ws.onclose = function () { live.aktiv = false; if (live.luk) { live.luk(); live.luk = null; } };
      ws.onerror = function () { live.aktiv = false; };
      ws.onopen = function () {
        if (!st.stream) { try { ws.close(); } catch (e) {} return; }
        live.aktiv = true;
        ui.live.hidden = false;
        try {
          live.src = live.ctx.createMediaStreamSource(stream);
          live.node = live.ctx.createScriptProcessor(4096, 1, 1);
          var faktor = live.ctx.sampleRate / 16000;      // Safari ignorerer af og til ønsket samplerate
          live.node.onaudioprocess = function (e) {
            if (!live.aktiv || ws.readyState !== 1) return;
            var inp = e.inputBuffer.getChannelData(0);
            var n = Math.floor(inp.length / faktor);
            var pcm = new Int16Array(n);
            for (var i = 0; i < n; i++) {
              var v = inp[Math.floor(i * faktor)];
              v = Math.max(-1, Math.min(1, v));
              pcm[i] = v < 0 ? v * 32768 : v * 32767;
            }
            var bytes = new Uint8Array(pcm.buffer), bin = '';
            for (var j = 0; j < bytes.length; j += 8192) bin += String.fromCharCode.apply(null, bytes.subarray(j, j + 8192));
            ws.send(JSON.stringify({ message_type: 'input_audio_chunk', audio_base_64: btoa(bin), commit: false, sample_rate: 16000 }));
          };
          live.src.connect(live.node);
          live.node.connect(live.ctx.destination);
        } catch (e) { live.aktiv = false; }
      };
    });
  }

  function liveVis() {
    ui.liveFast.textContent = live.fast;
    ui.liveDelvis.textContent = live.delvis ? (' ' + live.delvis) : '';
  }

  // Stopper lydstrømmen, beder om den sidste commit og giver teksten max 2,5 s til at lande
  function liveStop() {
    live.aktiv = false;
    try { if (live.node) { live.node.disconnect(); live.node.onaudioprocess = null; } if (live.src) live.src.disconnect(); } catch (e) {}
    live.node = null; live.src = null;
    var ws = live.ws; live.ws = null;
    if (ws && ws.readyState === 1) {
      try { ws.send(JSON.stringify({ message_type: 'input_audio_chunk', audio_base_64: '', commit: true, sample_rate: 16000 })); } catch (e) {}
      live.aktiv = true;                      // modtag stadig beskeder, til vi lukker
      setTimeout(function () { live.aktiv = false; try { ws.close(); } catch (e) {} }, 2500);
    }
  }

  function liveTekst() {
    return (live.fast + (live.delvis ? ' ' + live.delvis : '')).trim();
  }

  function optagelseFaerdig() {
    stopStream();   // ellers bliver den røde mikrofon-prik stående på iPhone
    ui.optag.classList.remove('optager');
    ui.optag.setAttribute('aria-pressed', 'false');
    ui.optag.setAttribute('aria-label', 'Optag dit svar');
    ui.optagTekst.textContent = 'Optag';
    ui.taeller.hidden = true;
    if (!st.chunks.length) {
      nulstilOptagelse();
      status('');
      visFlash('Der kom ingen lyd med. Prøv igen, og tal tæt på telefonen.');
      return;
    }
    st.blob = new Blob(st.chunks, { type: st.mime || 'application/octet-stream' });
    ui.afspil.src = URL.createObjectURL(st.blob);
    ui.optag.hidden = true;
    ui.optaget.hidden = false;
    status('Hør dit svar igennem, og send det, når du er tilfreds.');
    ui.send.focus();
    // Giv live-afskriften op til 2 s til at sende den sidste sætning, før kladden går op
    if (live.ws || live.aktiv) {
      var blob = st.blob, sendt = false;
      var go = function () { if (!sendt && st.blob === blob) { sendt = true; sendKladde(); } };
      live.luk = go;
      setTimeout(go, 2200);
    } else sendKladde();
  }

  // Optagelsen sendes op med det samme som kladde, så afskriften er i gang, mens man lytter.
  // "Send svaret" bekræfter bare; "Tag det om" sletter kladden igen.
  function sendKladde() {
    st.kladdeId = null; st.kladdeKlar = false;
    var form = new FormData();
    form.append('lyd', st.blob, 'svar.' + st.ext);
    form.append('kladde', '1');
    // Live-afskriften (hvis den var med) sendes med, så serveren slipper for at skrive af bagefter.
    // Vent et øjeblik på den sidste committed-besked, så kladden får hele teksten med.
    var t = liveTekst();
    if (t) form.append('tekst', t);
    form.append('projekt', st.projekt);
    form.append('samtale', st.samtale || '');
    form.append('spoergsmaal', st.spoergsmaal);
    form.append('spoergsmaal_talt', st.talt || '');
    form.append('lyd_sha', st.lydSha || '');
    form.append('kilde', st.kilde || '');
    var blob = st.blob;
    kald('/svar', form).then(function (j) {
      if (st.blob !== blob) { kald('/slet', { id: j.id }).catch(function () {}); return; }   // taget om imens
      st.kladdeId = j.id;
      st.kladdeKlar = true;
      if (j.samtale) { st.samtale = j.samtale; if (st.projekt !== 'dagbog') husk(j.samtale); }
      if (st.sender) bekraeft();                 // brugeren trykkede "Send" før kladden var oppe
    }).catch(function () {
      st.kladdeKlar = false;                     // falder tilbage til almindelig sending ved "Send"
    });
  }

  function bekraeft() {
    kald('/bekraeft', { id: st.kladdeId }).then(function (j) {
      st.sendtIDag++;
      visSvar(j);
    }).catch(function (e) {
      st.sender = false;
      ui.send.disabled = false; ui.om.disabled = false; ui.optag.disabled = false;
      status('Svaret blev ikke sendt. Det er stadig her, så prøv igen.');
      visFlash(e.message);
    });
  }

  ui.optag.addEventListener('click', function () {
    if (st.recorder && st.recorder.state === 'recording') stopOptagelse(); else startOptagelse();
  });
  ui.om.addEventListener('click', function () {
    if (st.kladdeId) { kald('/slet', { id: st.kladdeId }).catch(function () {}); }
    st.kladdeId = null; st.kladdeKlar = false;
    nulstilOptagelse();
    status('');
    visFlash('');
  });

  /* ---------- Skriv i stedet ---------- */

  function visSkriv() {
    ui.skriv.hidden = false;
    ui.skrivLink.hidden = true;
    ui.tekstfelt.focus();
  }
  ui.skrivLink.addEventListener('click', visSkriv);

  /* ---------- Send svar ---------- */

  function sendSvar(form) {
    if (st.sender) return;
    st.sender = true;
    ui.send.disabled = true; ui.om.disabled = true; ui.sendTekst.disabled = true; ui.optag.disabled = true;
    status('Gemmer og skriver af… Det kan tage op til et halvt minut.', true);
    visFlash('');
    form.append('projekt', st.projekt);
    form.append('samtale', st.samtale || '');
    form.append('spoergsmaal', st.spoergsmaal);
    form.append('spoergsmaal_talt', st.talt || '');
    form.append('lyd_sha', st.lydSha || '');
    form.append('kilde', st.kilde || '');
    kald('/svar', form).then(function (j) {
      st.sendtIDag++;
      visSvar(j);
    }).catch(function (e) {
      // Behold det optagede, så det kan sendes igen
      st.sender = false;
      ui.send.disabled = false; ui.om.disabled = false; ui.sendTekst.disabled = false; ui.optag.disabled = false;
      status('Svaret blev ikke sendt. Det er stadig her, så prøv igen.');
      visFlash(e.message);
    });
  }

  ui.send.addEventListener('click', function () {
    if (!st.blob) { visFlash('Der er ikke noget optaget endnu. Tryk på Optag først.'); return; }
    if (st.sender) return;
    if (st.kladdeId || st.kladdeKlar !== false) {
      // Kladden er oppe (eller på vej): bekræft, i stedet for at sende lyden igen
      st.sender = true;
      ui.send.disabled = true; ui.om.disabled = true; ui.optag.disabled = true;
      status('Gemmer…', true);
      visFlash('');
      if (st.kladdeId) bekraeft();
      return;
    }
    var form = new FormData();
    form.append('lyd', st.blob, 'svar.' + st.ext);
    sendSvar(form);
  });
  ui.sendTekst.addEventListener('click', function () {
    var t = ui.tekstfelt.value.trim();
    if (!t) { visFlash('Skriv lidt i feltet først.'); ui.tekstfelt.focus(); return; }
    var form = new FormData();
    form.append('tekst', t);
    sendSvar(form);
  });

  function visSvar(j) {
    var venter = (j.status === 'transskriberes');
    var tekst = j.tekst || (venter ? 'Teksten er på vej. Du kan gå videre til næste spørgsmål imens.' : '');
    ui.optagelse.hidden = true;
    status('');
    ui.svarTekst.textContent = tekst;
    ui.svarTekst.classList.toggle('wt-muted', venter);
    ui.svarKort.dataset.id = j.id;
    ui.svarKort.hidden = false;
    var dagensTekst = tilfoejDagens(j, j.tekst || '');
    ui.svarRet.innerHTML = '';
    var ret = document.createElement('button');
    ret.type = 'button'; ret.className = 'wt-btn'; ret.textContent = 'Ret teksten';
    ret.addEventListener('click', function () { retTekst(j.id, [ui.svarTekst, dagensTekst], ui.svarRet); });
    ret.hidden = venter;
    ui.svarRet.appendChild(ret);
    ui.naeste.focus();
    st.kladdeId = null; st.kladdeKlar = false;
    nulstilOptagelse();
    if (venter) ventPaaTekst(j.id, [ui.svarTekst, dagensTekst], ret);
  }

  // Afskriften kommer i baggrunden: spørg hvert par sekunder, og sæt teksten ind, når den er der
  function ventPaaTekst(id, els, retKnap) {
    if (st.poll) clearInterval(st.poll);
    var n = 0;
    st.poll = setInterval(function () {
      n++;
      kald('/status', { id: id }).then(function (j) {
        if (j.status !== 'transskriberes' || n > 60) {
          clearInterval(st.poll); st.poll = null;
          var t = j.tekst || (j.status === 'fejl' ? 'Afskriften lykkedes ikke; lyden er gemt, og du kan skrive teksten selv.' : '');
          els.forEach(function (e) { if (e) { e.textContent = t; e.classList.remove('wt-muted'); } });
          if (retKnap) retKnap.hidden = false;
        }
      }).catch(function () {});
    }, 2000);
  }

  // Sætter svaret øverst i "Dine svar i dag" og returnerer tekst-elementet
  function tilfoejDagens(j, tekst) {
    var li = document.createElement('li');
    li.setAttribute('data-id', j.id);
    var q = document.createElement('p'); q.className = 'er-q'; q.textContent = st.spoergsmaal;
    var t = document.createElement('p'); t.className = 'er-tekst'; t.setAttribute('data-tekst', ''); t.textContent = tekst;
    li.appendChild(q); li.appendChild(t);
    if (j.varighed) {
      var m = document.createElement('p'); m.className = 'er-meta'; m.textContent = 'Varighed ' + mmss(j.varighed);
      li.appendChild(m);
    }
    var knapper = document.createElement('div'); knapper.className = 'er-knapper'; knapper.style.justifyContent = 'flex-start';
    if (!j.skrevet) {
      var begge = document.createElement('button');
      begge.type = 'button'; begge.className = 'wt-btn'; begge.textContent = '▶ Spørgsmål og svar'; begge.setAttribute('data-begge', j.id);
      knapper.appendChild(begge);
    }
    var b = document.createElement('button');
    b.type = 'button'; b.className = 'wt-btn'; b.textContent = 'Ret teksten'; b.setAttribute('data-ret', j.id);
    knapper.appendChild(b); li.appendChild(knapper);
    if (!j.skrevet) {
      var a = document.createElement('audio'); a.controls = true; a.preload = 'none'; a.setAttribute('data-svar', j.id);
      a.src = ROD + '/klip/' + j.id + '.mp3' + (NOEGLE ? ('?noegle=' + encodeURIComponent(NOEGLE)) : '');
      a.style.marginTop = '.4rem'; li.appendChild(a);
    }
    var ret = document.createElement('div'); ret.className = 'er-ret'; li.appendChild(ret);
    ui.dagens.insertBefore(li, ui.dagens.firstChild);
    ui.dagensTom.hidden = true;
    return t;
  }

  // Slip mikrofonen, hvis siden forlades midt i en optagelse
  window.addEventListener('pagehide', function () { stopTimer(); stopStream(); });

  // Åbn et projekt med det samme, hvis serveren bad om det
  if (side.dataset.valgt) vaelg(side.dataset.valgt);
})();
</script>
{% endblock %}