{% 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>

    <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>
      <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>
      <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="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 -->
  <section id="er-tidligere">
    <h2>Tidligere svar</h2>
    {% if klip_seneste %}
    <ul class="er-liste">
      {% for k in klip_seneste[:20] %}
      <li data-id="{{ k.id }}">
        <p class="er-meta"><span data-tid="{{ k.tid }}">{{ k.tid[:10] }}</span> · {{ 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>
        <audio controls preload="none" src="{{ rod }}/klip/{{ k.id }}.mp3{% if noegle %}?noegle={{ noegle }}{% endif %}" style="margin-top:.5rem"></audio>
        <div class="er-ret"><button type="button" class="wt-btn" data-ret="{{ k.id }}">Ret teksten</button></div>
      </li>
      {% endfor %}
    </ul>
    {% 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')
  };

  // Tilstand for den igangværende samtale
  var st = {
    projekt: null, titel: '', samtale: null, spoergsmaal: '', lydUrl: 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);
  });

  // 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;
    st.samtale = 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);
  });

  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 }).then(function (j) {
      st.samtale = j.samtale;
      husk(j.samtale);
      st.spoergsmaal = j.spoergsmaal || '';
      st.lydUrl = j.lyd_url || null;
      ui.spoergsmaal.textContent = st.spoergsmaal;
      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); });

  /* ---------- 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…');
    navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
      st.stream = stream;
      st.chunks = [];
      st.mime = mime;
      st.ext = endelse(mime);
      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…');
    try {
      if (st.recorder && st.recorder.state !== 'inactive') st.recorder.stop();
      else optagelseFaerdig();
    } catch (e) { optagelseFaerdig(); }
  }

  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();
  }

  ui.optag.addEventListener('click', function () {
    if (st.recorder && st.recorder.state === 'recording') stopOptagelse(); else startOptagelse();
  });
  ui.om.addEventListener('click', function () {
    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);
    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; }
    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 tekst = j.tekst || '';
    ui.optagelse.hidden = true;
    status('');
    ui.svarTekst.textContent = tekst;
    ui.svarKort.dataset.id = j.id;
    ui.svarKort.hidden = false;
    var dagensTekst = tilfoejDagens(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); });
    ui.svarRet.appendChild(ret);
    ui.naeste.focus();
    nulstilOptagelse();
  }

  // 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 ret = document.createElement('div'); ret.className = 'er-ret';
    var b = document.createElement('button');
    b.type = 'button'; b.className = 'wt-btn'; b.textContent = 'Ret teksten'; b.setAttribute('data-ret', j.id);
    ret.appendChild(b); 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 %}