"use strict";

// Accept: application/json markiert diese Aufrufe als API-Zugriffe. Endpunkte,
// die auch ein Browser-Formular bedienen (siehe wantsJSON im Backend),
// antworten daraufhin mit JSON statt mit einem Redirect auf eine HTML-Seite.
const JSON_HEADERS = { Accept: "application/json" };

const api = {
  async get(url) {
    const r = await fetch(url, {
      credentials: "same-origin",
      headers: JSON_HEADERS,
    });
    return r.json();
  },
  async post(url, formData) {
    const r = await fetch(url, {
      method: "POST",
      body: formData,
      credentials: "same-origin",
      headers: JSON_HEADERS,
    });
    return { ok: r.ok, status: r.status, data: await r.json().catch(() => ({})) };
  },
};

// errMsg zieht die Nutzermeldung aus dem Fehlerformat der API:
// {"error": {"code", "message", "field", "fields"}}. Liegen mehrere
// Feldfehler vor (Registrierung), werden sie zu einem Satz zusammengezogen.
// Der code ist bewusst nicht Teil der Anzeige -- er ist für Logik da, nicht
// für Menschen.
function errMsg(data, fallback) {
  const e = data && data.error;
  if (!e) return fallback;
  const fields = e.fields ? Object.values(e.fields) : [];
  if (fields.length) return fields.join(" ");
  return e.message || fallback;
}

// Escaped für Text- UND Attributkontext. Der frühere textContent->innerHTML-
// Trick ließ Anführungszeichen stehen (in Textknoten harmlos); linkify steckt
// den Wert aber in ein href="..."-Attribut, wo ein " ausbrechen würde.
function escapeHtml(s) {
  return String(s ?? "")
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#39;");
}

// avatarUrl liefert den Bildpfad oder das Platzhalterbild bei leerem Avatar.
function avatarUrl(path) {
  return path ? `/${path}` : "/static/assets/no_profile_pic.jpg";
}

function linkify(s) {
  const escaped = escapeHtml(s);
  const url = /https?:\/\/[^\s<]+/g;
  return escaped
    .replace(url, (m) => `<a href="${m}" target="_blank" rel="noopener">${m}</a>`)
    .replace(/\n/g, "<br>");
}

// setupClipboardPaste erlaubt Strg+V eines Bildes aus der Zwischenablage direkt
// im Formular: das Bild wandert in den File-Input (über DataTransfer, weil sich
// .files nicht direkt setzen lässt). Liegt kein Bild vor (Text o. Ä.), tun wir
// nichts und lassen den normalen Paste durchlaufen -> preventDefault nur, wenn
// wir wirklich ein Bild gegriffen haben. msgEl (optional) zeigt den Hinweis.
function setupClipboardPaste(form, msgEl) {
  form.addEventListener("paste", (e) => {
    const item = [...(e.clipboardData?.items ?? [])].find(
      (it) => it.kind === "file" && it.type.startsWith("image/")
    );
    if (!item) return;

    const original = item.getAsFile();
    if (!original) return;
    e.preventDefault();

    // Browser benennt Clipboard-Bilder uneinheitlich ("grafik.png" o. Ä.) -> neu
    // verpacken mit sprechendem Namen. Endung aus dem MIME-Typ, sonst png.
    const ext = (original.type.split("/")[1] || "png").toLowerCase();
    const file = new File([original], `zwischenablage.${ext}`, { type: original.type });

    const input = form.querySelector("input[name='file']");
    const dt = new DataTransfer();
    dt.items.add(file);
    input.files = dt.files;

    if (msgEl) msgEl.textContent = "Bild aus Zwischenablage übernommen.";
  });
}

function renderEntry(e) {
  const el = document.createElement("article");
  el.className = "card";

  const when = new Date(e.created_at * 1000).toLocaleString("de-DE");

  // Soft-gelöschter Beitrag: nur Platzhalter, damit der Thread navigierbar bleibt.
  if (e.deleted) {
    el.innerHTML = `
      <div class="muted byline"><span>[deleted] · ${when}</span></div>
      <div class="threadline-wrapper">
        <div class="threadline"></div>
        <div class="body">
          <div class="content">[deleted]</div>
        </div>
      </div>
    `;
    el.addEventListener("click", (ev) => {
      if (!ev.target.closest("a, button")) location.href = `/e/${e.pid}`;
    });
    return el;
  }

  const user = encodeURIComponent(e.username);
  let media = "";
  if (e.filepath) {
    media = `<img src="/${e.filepath}" alt="" loading="lazy">`;
  }

  // Antwort- und Repost-Zahl wandern in die Buttons unten; in der Byline bleibt
  // nur Name, Zeit und (im Cooldown) der Hinweis bis zum nächsten Repost.
  el.innerHTML = `
    <div class="muted byline">
      <a href="/u/${user}"><img class="avatar avatar-sm" src="${avatarUrl(e.avatar)}" alt="" loading="lazy"></a>
      <span><a href="/u/${user}">${escapeHtml(e.username)}</a> · ${when}<span class="cooldown"></span></span>
      <details class="report">
        <summary>Melden</summary>
        <form class="report-form" method="post" action="/entry/${e.pid}/report">
          <label>Grund <span class="muted">(optional)</span>
            <input type="text" name="reason" maxlength="500" autocomplete="off">
          </label>
          <button type="submit">Absenden</button>
        </form>
      </details>
    </div>
    <div class="threadline-wrapper">
      <div class="threadline"></div>
      <div class="body">
        <div class="content">${linkify(e.content)}</div>
        ${media}
        <div class="interactions">
          <a class="button reply" href="/e/${e.pid}">Antworten (${e.reply_count})</a>
          <div class="row">
            <button class="ghost" data-mode="left">Links</button>
            <span class="muted">– / –</span>
            <button class="ghost" data-mode="right">Rechts</button>
          </div>
          <button class="bump" type="button">Repost (${e.bump_count})</button>
        </div>
      </div>
    </div>
  `;
  setupVoting(el, e.pid);
  setupBump(el, e);
  setupReport(el, e.pid);
  el.addEventListener("click", (ev) => {
    if (!ev.target.closest("a, button")) location.href = `/e/${e.pid}`;
  });
  return el;
}

function setupVoting(el, pid) {
  const box = el.querySelector(".row");
  const counts = box.querySelector("span");
  const buttons = box.querySelectorAll(".ghost");

  function render(state) {
    if (state.error) {
      counts.textContent = errMsg(state, "Fehler");
      return;
    }
    counts.textContent = `${state.left} / ${state.right}`;
    buttons.forEach((b) =>
      b.classList.toggle("selected", b.dataset.mode === state.selected)
    );
  }

  buttons.forEach((b) =>
    b.addEventListener("click", async () => {
      const fd = new FormData();
      fd.append("mode", b.dataset.mode);
      const res = await api.post(`/entry/${pid}/vote`, fd);
      render(res.data);
    })
  );

  api.get(`/entry/${pid}/votes`).then(render);
}

// setupBump verdrahtet den Bump-Button. Der Cooldown wächst pro Beitrag linear
// (Backend, siehe handleBump); hier wird nur angezeigt und auf 429 reagiert. Eine
// Live-Aktualisierung gibt es bewusst nicht: der Zustand stammt aus den
// Beitragsdaten beim Laden, plus die Antwort des eigenen Klicks.
function setupBump(el, e) {
  const btn = el.querySelector(".bump");
  if (!btn) return;
  const cooldown = el.querySelector(".cooldown");

  // sekunden bis zum nächsten erlaubten Bump aus den geladenen Daten.
  const nowSec = () => Math.floor(Date.now() / 1000);

  // lock sperrt den Button; die Restzeit steht jetzt oben in der Byline, auf
  // Stunden aufgerundet (mindestens 1 -> nie "0h", solange Restzeit übrig ist).
  function lock(retryAfter) {
    btn.disabled = true;
    const hours = Math.max(1, Math.ceil(retryAfter / 3600));
    if (cooldown) cooldown.textContent = ` · Repost in ${hours}h`;
  }

  const remaining = e.last_bump + e.bump_count * 86400 - nowSec();
  if (e.bump_count > 0 && remaining > 0) lock(remaining);

  btn.addEventListener("click", async () => {
    const res = await api.post(`/entry/${e.pid}/bump`, new FormData());
    if (res.ok) {
      btn.textContent = `Repost (${res.data.bump_count})`;
      lock(res.data.retry_after || 86400);
    } else if (res.status === 429) {
      lock(res.data.retry_after || 86400);
    } else {
      // 401 (nicht angemeldet) o. Ä. -> Fehlertext zeigen, Button frei lassen.
      btn.textContent = errMsg(res.data, "Fehler");
    }
  });
}

// setupReport verdrahtet den Melden-Aufklapper. Der <details>-Zweischritt
// (öffnen -> absenden) verhindert versehentliche Meldungen und hält das Grund-
// Feld eingeklappt. Das Formular ist ein echtes method=post-Form, damit es
// später auch ohne JS funktioniert; hier fangen wir den Submit nur ab, um
// Inline-Feedback zu geben statt die Seite neu zu laden. stopPropagation, weil
// die Karte sonst bei jedem Klick nach /e/{pid} navigieren würde.
function setupReport(el, pid) {
  const details = el.querySelector("details.report");
  if (!details) return;
  details.addEventListener("click", (ev) => ev.stopPropagation());

  const form = details.querySelector(".report-form");
  const summary = details.querySelector("summary");
  form.addEventListener("submit", async (ev) => {
    ev.preventDefault();
    const res = await api.post(`/entry/${pid}/report`, new FormData(form));
    if (res.ok) {
      form.remove();
      details.open = false;
      details.classList.add("reported");
      summary.textContent = "Gemeldet – danke";
      return;
    }
    let msg = form.querySelector(".msg");
    if (!msg) {
      msg = document.createElement("span");
      msg.className = "msg";
      form.append(msg);
    }
    msg.textContent = errMsg(res.data, "Fehler beim Melden");
  });
}

// renderAd baut einen In-Feed-Werbeslot: das Banner (selbst gehostet, sonst
// würde die CSP default-src 'self' es blocken), darunter der Pflicht-Hinweis
// "Werbung" und der Link zur Eigenvermarktung. rel="sponsored nofollow" macht
// den bezahlten Charakter für Suchmaschinen kenntlich.
function renderAd() {
  const el = document.createElement("aside");
  el.className = "ad";
  el.innerHTML = `
    <a class="ad-banner" href="/werben" rel="sponsored nofollow noopener">
      <img src="/static/ads/placeholder.png" alt="Werbung" loading="lazy">
    </a>
    <div class="ad-meta muted">
      <span>Werbung</span>
      <a href="/werben">Auf dem Kontrollverlust werben</a>
    </div>
  `;
  return el;
}

// createFeed hängt Infinite-Scroll an feedEl/sentinelEl und lädt Seiten über
// urlFor(page). opts.adEvery (>0) blendet nach je N Beiträgen einen
// Werbebanner ein — nur im Top-Level-Feed, nicht in User-/Thread-Feeds.
// Gibt { reset } zurück, um den Feed neu zu laden.
function createFeed(feedEl, sentinelEl, urlFor, opts = {}) {
  const adEvery = opts.adEvery || 0;
  let page = 0;
  let loading = false;
  let done = false;
  let shown = 0; // fortlaufende Beitragszahl über Seitengrenzen hinweg

  async function loadMore() {
    if (loading || done) return;
    loading = true;

    const entries = await api.get(urlFor(page));
    if (!entries.length) {
      done = true;
      const end = document.createElement("p");
      end.className = "muted";
      end.textContent = "YOU REACHED THE END!";
      feedEl.appendChild(end);
    } else {
      entries.forEach((e) => {
        feedEl.appendChild(renderEntry(e));
        shown++;
        if (adEvery && shown % adEvery === 0) feedEl.appendChild(renderAd());
      });
      page++;
    }
    loading = false;

    // Der IntersectionObserver feuert nur bei Zustandswechseln. Füllt die
    // gerade geladene Seite den Viewport nicht über den Sentinel hinaus, gäbe
    // es keinen Wechsel und nie ein Nachladen -> hier aktiv weiterladen, bis
    // der Sentinel aus dem Sichtbereich wandert oder das Ende erreicht ist.
    if (!done && sentinelVisible()) loadMore();
  }

  function sentinelVisible() {
    return sentinelEl.getBoundingClientRect().top <= window.innerHeight;
  }

  function reset() {
    page = 0;
    done = false;
    shown = 0;
    feedEl.innerHTML = "";
    loadMore();
  }

  // rootMargin lädt schon kurz vor Erreichen des Sentinels nach (flüssiger und
  // robust gegen den Fall eines 0-hohen Sentinels exakt am Dokumentende).
  const observer = new IntersectionObserver(
    (items) => {
      if (items.some((i) => i.isIntersecting)) loadMore();
    },
    { rootMargin: "300px" }
  );
  observer.observe(sentinelEl);

  loadMore();
  return { reset };
}