{% extends "base.html" %}
{% block head %}<link rel="stylesheet" href="/css/pages/board.css?v={{ local_version }}">{% endblock %}
{% block content %}
<div id="board-feed" data-csrf="{{ csrf_token }}" data-burn="{{ BOARD_POST_AMOUNT }}">
    {% if is_private %}
    <form method="POST" action="/board?page={{ page }}" class="board-compose" id="board-compose"
          data-own-nick="{{ own_nick or '' }}" data-own-icon-idx="{{ own_icon_idx }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="form_token" value="{{ form_token }}">
      <input type="hidden" name="passphrase" id="board-passphrase">
      <input type="hidden" name="profile_changed" id="board-profile-changed" value="">
      <input type="hidden" name="icon" id="board-icon-value" value="{{ own_icon_idx }}">
      <input type="hidden" name="reply_ref" id="board-reply-ref" value="">
      <input type="hidden" name="edit_ref" id="board-edit-ref" value="">
      <input type="hidden" name="edit_orig" id="board-edit-orig" value="">
      <div class="board-compose-title">New post</div>
      <div class="board-error" id="board-compose-error" role="alert"{% if not compose_err %} hidden{% endif %}>{{ compose_err }}</div>

      <div class="board-compose-row board-banner" id="board-reply-banner" hidden>
        <span id="board-reply-text"></span>
        <button type="button" id="board-reply-cancel" title="Cancel reply">&times;</button>
      </div>

      <div class="board-compose-row board-banner" id="board-edit-banner" hidden>
        <span>editing your post: only what you change is sent</span>
        <button type="button" id="board-edit-cancel" title="Cancel edit">&times;</button>
      </div>

      <div class="rc-text" id="board-preview" hidden></div>
      <div class="board-compose-row board-main">
        <button type="button" id="board-icon-btn" class="board-icon-btn" title="Your icon and nickname (they ride along with your next post)">{{ own_icon }}</button>
        <textarea name="message" id="board-message" rows="1"
               placeholder="Say something" autocomplete="off">{{ message_value }}</textarea>
        <button type="submit" id="board-send">Send</button>
      </div>
      <div class="board-compose-row board-compose-sub">
        <span id="board-fee-live" title="Set automatically to whatever clears the next block, never more, plus the {{ BOARD_POST_AMOUNT }}-tick burn. Updates as you type since a longer post (and any icon/nickname/reply riding along) costs more.">fee {{ board_fee_floor }}+</span>
        <span id="board-msg-counter"></span>
        <button type="button" id="board-preview-btn" class="board-link">Preview</button>
        <span id="board-sent" hidden>sent</span>
      <markdown-toolbar for="board-message" class="rc-toolbar" id="board-toolbar">
        <div class="rc-toolbar-group">
          <md-bold class="rc-toolbar-item" title="Bold"><svg viewBox="0 0 10 16" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1 2h3.83c2.48 0 4.3.75 4.3 2.95 0 1.14-.63 2.23-1.67 2.61v.06c1.33.3 2.3 1.23 2.3 2.86 0 2.39-1.97 3.52-4.61 3.52H1V2zm3.66 4.95c1.67 0 2.38-.66 2.38-1.69 0-1.17-.78-1.61-2.34-1.61H3.13v3.3h1.53zm.27 5.39c1.77 0 2.75-.64 2.75-1.98 0-1.27-.95-1.81-2.75-1.81h-1.8v3.8h1.8v-.01z"/></svg></md-bold>
          <md-italic class="rc-toolbar-item" title="Italic"><svg viewBox="0 0 6 16" width="6" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.81 5h1.98L3 14H1l1.81-9zm.36-2.7c0-.7.58-1.3 1.33-1.3.56 0 1.13.38 1.13 1.03 0 .75-.59 1.3-1.33 1.3-.58 0-1.13-.38-1.13-1.03z"/></svg></md-italic>
        </div>
        <div class="rc-toolbar-group">
          <md-quote class="rc-toolbar-item" title="Quote"><svg viewBox="0 0 14 16" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M6.16 3.5C3.73 5.06 2.55 6.67 2.55 9.36c.16-.05.3-.05.44-.05 1.27 0 2.5.86 2.5 2.41 0 1.61-1.03 2.61-2.5 2.61-1.9 0-2.99-1.52-2.99-4.25 0-3.8 1.75-6.53 5.02-8.42L6.16 3.5zm7 0c-2.43 1.56-3.61 3.17-3.61 5.86.16-.05.3-.05.44-.05 1.27 0 2.5.86 2.5 2.41 0 1.61-1.03 2.61-2.5 2.61-1.89 0-2.98-1.52-2.98-4.25 0-3.8 1.75-6.53 5.02-8.42l1.14 1.84h-.01z"/></svg></md-quote>
          <md-code class="rc-toolbar-item" title="Code"><svg viewBox="0 0 14 16" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"/></svg></md-code>
          <md-link class="rc-toolbar-item" title="Link"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"/></svg></md-link>
        </div>
      </markdown-toolbar>
      </div>

      <div class="board-profile-panel" id="board-profile-panel" hidden>
        <input type="text" name="nick" id="board-nick" maxlength="16" placeholder="nickname (optional)"
               value="{{ own_nick or '' }}" autocomplete="off">
        <span id="board-profile-note"></span>
        <div class="board-icon-palette" id="board-icon-palette">
          {% for ic in icon_palette %}
          <button type="button" class="board-icon-choice" data-idx="{{ loop.index0 }}">{{ ic }}</button>
          {% endfor %}
        </div>
      </div>
    </form>
    <script type="module" src="/vendor/markdown-toolbar-element.js"></script>
    {% endif %}
    <section class="board-list">
      <h2 class="board-list-title">Recent threads</h2>
      <div id="board-rows">
        {% include "board_rows.html" %}
      </div>
    </section>
</div>
<script>
(function () {
  const PAGE = {{ page }};
  const TAG_LEN = {{ tag_len }};
  const MAX_MEMO_BYTES = {{ MAX_MEMO_BYTES }};

  function fmtTs(ts) {
    if (!ts) return "";
    const diff = Math.floor(Date.now() / 1000 - ts);
    if (diff < 5) return "just now";
    if (diff < 60) return diff + "s ago";
    if (diff < 3600) return Math.floor(diff / 60) + "m ago";
    if (diff < 86400) return Math.floor(diff / 3600) + "h ago";
    if (diff < 2592000) return Math.floor(diff / 86400) + "d ago";
    return new Date(ts * 1000).toLocaleDateString();
  }

  function updateTimes(root) {
    (root || document).querySelectorAll(".rc-time[data-ts]").forEach(el => {
      const ts = parseInt(el.dataset.ts, 10);
      if (ts) el.textContent = fmtTs(ts);
    });
  }
  updateTimes(document);

  // A vote spends real coins (the same 1-tick burn a post makes, plus a
  // congestion fee), so it gets the exact cost quoted right in the same
  // prompt that asks for the passphrase, not just a bare "Passphrase:"
  // like a free action would get.
  const feedEl = document.getElementById("board-feed");
  const CSRF = feedEl ? feedEl.dataset.csrf : "";
  const BURN = feedEl ? feedEl.dataset.burn : "0";

  async function handleVoteClick(btn) {
    // Disabled for the whole round trip, not just while the request is
    // in flight: the fee lookup and the passphrase prompt both take real
    // time a second click could land inside, and a vote is a paid
    // transaction, not a toggle -- two overlapping submissions is two
    // paid votes, not one.
    if (btn.disabled) return;
    btn.disabled = true;
    try {
      const ref = btn.dataset.ref;
      const dir = btn.dataset.dir;
      let fee = null;
      try {
        const res = await fetch(`/api/board/vote_fee?ref=${encodeURIComponent(ref)}&dir=${encodeURIComponent(dir)}`, {cache: "no-store"});
        const data = await res.json();
        if (!data.ok) { window.alert(data.reason || "Can't vote."); return; }
        fee = data.fee;
      } catch (e) {
        // Fee lookup failed; still lets the vote through with a generic
        // prompt rather than blocking on a courtesy estimate.
      }
      const label = fee !== null
        ? `This vote burns ${BURN} tick + ~${fee} tick fee (real coins). Passphrase:`
        : "Passphrase:";
      const passphrase = window.prompt(label);
      if (passphrase === null) return;  // cancelled, nothing sent
      const body = new URLSearchParams({csrf_token: CSRF, ref, dir, passphrase});
      const res = await fetch(`/board/vote?page=${PAGE}`, {method: "POST", body});
      const data = await res.json().catch(() => ({ok: false, error: "The app did not answer."}));
      if (!data.ok) window.alert(data.error || "That did not go through.");
      pollBoard();
    } finally {
      btn.disabled = false;
    }
  }
  // A delete hides the post from readers; it costs real coins like a vote,
  // and it cannot take the text off the chain, so the prompt says both
  // before it asks for the passphrase.
  async function handleDeleteClick(btn) {
    if (btn.disabled) return;
    btn.disabled = true;
    try {
      const ref = btn.dataset.ref;
      let cost = "";
      try {
        const res = await fetch(`/api/board/delete_fee?ref=${encodeURIComponent(ref)}`, {cache: "no-store"});
        const data = await res.json();
        if (!data.ok) { window.alert(data.reason || "Can't delete."); return; }
        cost = ` This burns ${BURN} tick + ~${data.fee} tick fee (real coins).`;
      } catch (e) {
        // Fee lookup failed; still lets the delete through with a generic prompt.
      }
      const passphrase = window.prompt(
        "Hide this post from readers? Its text stays on the chain for anyone who reads blocks." +
        cost + " Passphrase:");
      if (passphrase === null) return;  // cancelled, nothing sent
      const body = new URLSearchParams({csrf_token: CSRF, ref, passphrase});
      const res = await fetch(`/board/delete?page=${PAGE}`, {method: "POST", body});
      const data = await res.json().catch(() => ({ok: false, error: "The app did not answer."}));
      if (!data.ok) window.alert(data.error || "That did not go through.");
      pollBoard();
    } finally {
      btn.disabled = false;
    }
  }
  if (feedEl) {
    feedEl.addEventListener("click", event => {
      const btn = event.target.closest(".rc-deleteBtn");
      if (btn) handleDeleteClick(btn);
    });
  }
  function wireVoteButtons(root) {
    (root || document).querySelectorAll(".rc-voteButton[data-ref]").forEach(btn => {
      btn.addEventListener("click", () => handleVoteClick(btn));
    });
  }
  wireVoteButtons(document);

  const composeForm = document.getElementById("board-compose");
  if (composeForm) {
    let ownNick    = composeForm.dataset.ownNick || "";
    let ownIconIdx = parseInt(composeForm.dataset.ownIconIdx, 10) || 0;

    const msgInput      = document.getElementById("board-message");
    const nickInput     = document.getElementById("board-nick");
    const iconBtn       = document.getElementById("board-icon-btn");
    const iconPalette   = document.getElementById("board-icon-palette");
    const profilePanel  = document.getElementById("board-profile-panel");
    const iconValue     = document.getElementById("board-icon-value");
    const profileChanged = document.getElementById("board-profile-changed");
    const profileNote   = document.getElementById("board-profile-note");
    const replyRefInput = document.getElementById("board-reply-ref");
    const replyBanner   = document.getElementById("board-reply-banner");
    const replyText     = document.getElementById("board-reply-text");
    const replyCancel   = document.getElementById("board-reply-cancel");
    const editRefInput  = document.getElementById("board-edit-ref");
    const editOrigInput = document.getElementById("board-edit-orig");
    const editBanner    = document.getElementById("board-edit-banner");
    const editCancel    = document.getElementById("board-edit-cancel");
    const counter        = document.getElementById("board-msg-counter");
    const sendBtn         = document.getElementById("board-send");
    const feeEl           = document.getElementById("board-fee-live");
    const previewBtn      = document.getElementById("board-preview-btn");
    const previewEl       = document.getElementById("board-preview");
    const toolbarEl       = document.getElementById("board-toolbar");
    let feeTimer = null;
    let feeSeq = 0;

    // Renders through the server's own render_board_text (see
    // /api/board/preview in api.py) rather than a second, client-side
    // reimplementation of the same regex subset: two copies of "what
    // markdown does this board support" would eventually drift apart,
    // and Preview showing something the real post then renders
    // differently would be worse than not having Preview at all.
    previewBtn.addEventListener("click", async () => {
      const previewing = !previewEl.hidden;
      if (previewing) {
        previewEl.hidden = true;
        msgInput.hidden = false;
        toolbarEl.hidden = false;
        previewBtn.textContent = "Preview";
        return;
      }
      try {
        const body = new URLSearchParams({text: msgInput.value});
        const res = await fetch("/api/board/preview", {method: "POST", body});
        const data = await res.json();
        previewEl.innerHTML = data.html || "<em>Nothing to preview.</em>";
      } catch (e) {
        previewEl.textContent = "Preview failed to load.";
      }
      previewEl.hidden = false;
      msgInput.hidden = true;
      toolbarEl.hidden = true;
      previewBtn.textContent = "Edit";
    });

    function currentIconIdx() {
      return parseInt(iconValue.value, 10) || 0;
    }

    // Only the fields that actually differ from what's already on chain
    // for this address ride along -- an unchanged icon/nickname costs
    // nothing extra, exactly the point of folding this into a post
    // instead of giving it a post of its own.
    function markProfileDirty() {
      const dirty = currentIconIdx() !== ownIconIdx || nickInput.value.trim() !== ownNick;
      profileChanged.value = dirty ? "1" : "";
      profileNote.textContent = dirty ? "icon/nickname will update with this post" : "";
      refreshCounter();
    }

    iconBtn.addEventListener("click", () => {
      profilePanel.hidden = !profilePanel.hidden;
    });
    iconPalette.querySelectorAll(".board-icon-choice").forEach(btn => {
      btn.addEventListener("click", () => {
        iconValue.value = btn.dataset.idx;
        iconBtn.textContent = btn.textContent;
        markProfileDirty();
      });
    });
    nickInput.addEventListener("input", markProfileDirty);

    function leaveEditMode() {
      editRefInput.value = "";
      editOrigInput.value = "";
      editBanner.hidden = true;
    }

    // Editing loads the post into the compose box. The server works out
    // what changed from the original and the new text, so the page only
    // has to say which post, and what it said.
    feedEl.addEventListener("click", event => {
      const edit = event.target.closest(".rc-editBtn");
      if (!edit) return;
      replyRefInput.value = "";
      replyBanner.hidden = true;
      editRefInput.value = edit.dataset.ref;
      editOrigInput.value = edit.dataset.text;
      editBanner.hidden = false;
      msgInput.value = edit.dataset.text;
      msgInput.focus();
      refreshCounter();
      autoGrow();
    });
    editCancel.addEventListener("click", () => {
      leaveEditMode();
      msgInput.value = "";
      refreshCounter();
      autoGrow();
    });

    feedEl.addEventListener("click", event => {
      const btn = event.target.closest(".rc-replyBtn:not(.rc-editBtn):not(.rc-deleteBtn)");
      if (!btn) return;
      if (editRefInput.value) msgInput.value = "";  // the text being edited is not a reply
      leaveEditMode();
      replyRefInput.value = btn.dataset.ref;
      replyText.textContent = "replying to " + btn.dataset.addr.slice(0, 14) + "…: “" + btn.dataset.snippet + "”";
      replyBanner.hidden = false;
      msgInput.focus();
      refreshCounter();
    });
    replyCancel.addEventListener("click", () => {
      replyRefInput.value = "";
      replyBanner.hidden = true;
      refreshCounter();
    });

    // Mirrors build_board_body's header exactly (see api.py) so the byte
    // budget shown here is the real one, not an approximation.
    function cleanNick() {
      return nickInput.value.trim().slice(0, 16).replace(/]/g, "").replace(/\n/g, "");
    }

    function headerBytes() {
      let header = "";
      if (profileChanged.value) {
        header += "[p:" + currentIconIdx() + ":" + cleanNick() + "]";
      }
      if (replyRefInput.value) {
        header += "[r:" + replyRefInput.value + "]";
      }
      return new TextEncoder().encode(header).length;
    }

    function setSendState(disabled, reason) {
      if (!sendBtn) return;
      sendBtn.disabled = disabled;
      sendBtn.title = reason;
    }

    function refreshFee(bytes) {
      clearTimeout(feeTimer);
      feeTimer = setTimeout(async () => {
        const seq = ++feeSeq;
        try {
          const params = new URLSearchParams({bytes: String(bytes)});
          if (profileChanged.value) {
            params.set("icon", String(currentIconIdx()));
            params.set("nick", cleanNick());
          }
          if (replyRefInput.value) params.set("reply_ref", replyRefInput.value);
          if (editRefInput.value) {
            params.set("edit_ref", editRefInput.value);
            params.set("orig", editOrigInput.value);
            params.set("new", msgInput.value);
          }
          const res = await fetch("/api/board/fee?" + params.toString(), {cache: "no-store"});
          if (!res.ok) throw new Error("bad status " + res.status);
          const data = await res.json();
          if (seq !== feeSeq) return;  // a newer keystroke already superseded this one
          feeEl.textContent = "fee: " + data.fee + " ticks";
          // The quote also runs for an empty box (so the real fee shows from
          // the start), and an empty box can never post.
          const empty = msgInput.value.trim() === "";
          setSendState(!data.ok || empty, empty ? "Write something to post." : (data.reason || ""));
        } catch (e) {
          // Quiet failure: the floor shown at page load is still a safe
          // (if stale) lower bound, not a broken page.
        }
      }, 200);
    }

    function refreshCounter() {
      // An edit sends a splice, whose size the server works out (the fee
      // quote below uses it), so what is limited here is the text the post
      // ends up with. Anything else carries its header.
      const maxBytes = editRefInput.value ? MAX_MEMO_BYTES - TAG_LEN
                                          : MAX_MEMO_BYTES - TAG_LEN - headerBytes();
      const bytes = new TextEncoder().encode(msgInput.value).length;
      const empty = msgInput.value.trim() === "";
      const unchanged = editRefInput.value !== "" && msgInput.value === editOrigInput.value;
      const over = bytes > maxBytes;
      counter.textContent = bytes + " / " + maxBytes;
      counter.style.color = over ? "var(--red, #c0392b)" : "var(--muted)";
      if (empty) {
        setSendState(true, "Write something to post.");
        refreshFee(0);  // quote what a post would cost now, not the page-load floor
      } else if (unchanged) {
        setSendState(true, "Nothing changed.");
      } else if (over) {
        const excess = bytes - maxBytes;
        setSendState(true, excess + " byte" + (excess !== 1 ? "s" : "") + " too long.");
      } else {
        setSendState(false, "");  // provisional; refreshFee may re-disable for balance
        refreshFee(bytes);
      }
    }
    // Grows with content instead of scrolling internally, the same
    // behaviour Remark42's own compose box gets from its text-expander
    // element -- a plain textarea has no auto-resize of its own.
    function autoGrow() {
      msgInput.style.height = "auto";
      msgInput.style.height = msgInput.scrollHeight + "px";
    }
    msgInput.addEventListener("input", () => { refreshCounter(); autoGrow(); });
    refreshCounter();
    autoGrow();

    // Sending happens in the background. The page stays where it is, the
    // button says what it is doing, and the new post turns up in the feed
    // through the same poll that brings everyone else's. What comes back is
    // a verdict and the next one-time token, so there is nothing to reload.
    // Without scripts the form still posts and redirects (see forms.py).
    const errorEl   = document.getElementById("board-compose-error");
    const sentEl    = document.getElementById("board-sent");
    const passInput = document.getElementById("board-passphrase");
    const tokenInput = composeForm.querySelector("input[name=form_token]");
    let sending = false;

    function showError(text) {
      errorEl.textContent = text || "";
      errorEl.hidden = !text;
    }

    composeForm.addEventListener("submit", async (e) => {
      e.preventDefault();
      if (sending) return;
      // Asked right before signing, so nothing sits in a visible passphrase
      // field, and gone from the page again the moment it is read.
      const passphrase = window.prompt("Passphrase:");
      if (passphrase === null) return;  // cancelled, nothing sent
      passInput.value = passphrase;
      const body = new FormData(composeForm);
      passInput.value = "";
      sending = true;
      sendBtn.disabled = true;
      sendBtn.textContent = "Sending…";
      showError("");
      try {
        const res = await fetch(composeForm.action, {
          method: "POST", body, headers: {"X-Requested-With": "fetch"}});
        const data = await res.json();
        if (data.form_token) tokenInput.value = data.form_token;
        if (data.ok) {
          if (profileChanged.value) {      // now on the chain: stop sending it
            ownNick = nickInput.value.trim();
            ownIconIdx = currentIconIdx();
            markProfileDirty();
          }
          msgInput.value = "";
          replyRefInput.value = "";
          replyBanner.hidden = true;
          leaveEditMode();
          autoGrow();
          sentEl.hidden = false;
          setTimeout(() => { sentEl.hidden = true; }, 2500);
          pollBoard();
        } else {
          showError(data.error);
        }
      } catch (err) {
        showError("The app did not answer, so it is not known whether that went out. " +
                  "Look at the feed before trying again.");
      } finally {
        sending = false;
        sendBtn.textContent = "Send";
        refreshCounter();
      }
    });
  }

  // One continuous feed: `loaded` chunks of threads are on screen, more
  // are appended as the sentinel scrolls into view, and the poll re-renders
  // exactly what is loaded so new posts and votes show up in place.
  let loaded = PAGE;
  let pollInFlight = false;

  async function pollBoard() {
    if (pollInFlight) return;
    pollInFlight = true;
    try {
      const res = await fetch("/api/board/fragment?page=" + loaded);
      if (!res.ok) throw new Error("bad status " + res.status);
      const html = await res.text();
      const next = document.createElement("template");
      next.innerHTML = html.trim();
      const rows = document.getElementById("board-rows");
      if (!rows || !next.content.firstElementChild) return;
      rows.replaceChildren(...next.content.childNodes);
      updateTimes(rows);
      wireVoteButtons(rows);
      watchSentinel();
    } catch (e) {
      // Keep the current feed usable when a poll is temporarily offline.
    } finally {
      pollInFlight = false;
    }
  }

  let observer = null;
  function watchSentinel() {
    if (observer) observer.disconnect();
    const more = document.getElementById("board-more");
    if (!more || !("IntersectionObserver" in window)) return;
    observer = new IntersectionObserver((entries) => {
      if (entries.some(e => e.isIntersecting) && !pollInFlight) {
        loaded += 1;
        pollBoard();
      }
    }, {rootMargin: "400px"});
    observer.observe(more);
  }

  pollBoard();
  setInterval(pollBoard, 5000);
})();
</script>
{% endblock %}