{% extends "base.html" %}
{% block content %}
<p class="stat-sub" style="margin:.2rem 0 .6rem">
  Public, permanent, on-chain. Posting burns {{ BOARD_POST_AMOUNT }} tick,
  plus a separate network fee, currently {{ board_fee_floor }}+ ticks and rising
  as the board fills up or with congestion.
</p>

<div class="card">
  <div class="card-title">{{ post_count }} post{{ "s" if post_count != 1 }}</div>
  <div class="board" id="board-feed">
    {% if rows %}
      {% for row in rows %}
      {% set mine = row.tx.from == own_addr %}
      <div class="board-row {{ 'mine' if mine }} {{ 'pending' if row.pending }}">
        <div class="board-bubble">
          <div class="board-meta">
            <a href="/address?addr={{ row.tx.from }}" class="hash-short board-addr">{{ row.tx.from }}</a>
          </div>
          <div class="board-text">{{ render_board_text(row.tx.memo[tag_len:]) }}</div>
          <div class="board-ts">
            {% if row.pending %}
              <span title="Submitted, not yet in a block">pending&hellip;</span>
            {% else %}
              <a href="/explorer/tx/{{ row.hash }}" data-ts="{{ row.ts | int if row.ts else 0 }}" title="block {{ row.height }}, verify on the explorer">&nbsp;</a>
            {% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    {% else %}
      <p style="color:var(--muted);text-align:center">Nothing posted yet.</p>
    {% endif %}
    {% if is_private %}
    <form method="POST" action="/board?page={{ page }}" class="board-compose">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="passphrase" id="board-passphrase">
      {% if compose_err %}<div class="alert alert-err" style="margin:0 0 .4rem">{{ compose_err }}</div>{% endif %}
      <div class="board-compose-row">
        <input type="text" name="message" id="board-message" value="{{ message_value }}"
               placeholder="Say something" autocomplete="off" style="flex:1">
        <button type="submit" id="board-send">Send</button>
      </div>
      <div class="board-compose-row board-compose-sub">
        <span class="stat-sub" id="board-fee-live" style="margin:0" 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 costs more.">
          fee: {{ board_fee_floor }}+ ticks
        </span>
        <span class="stat-sub" id="board-msg-counter" style="margin:0"></span>
      </div>
    </form>
    {% endif %}
  </div>
</div>

{% if total_pages > 1 %}
<nav class="pager" aria-label="Pagination">
  {% if has_prev %}<a href="/board?page={{ page - 1 }}">Prev</a>{% endif %}
  {% for p in page_window %}
    {% if p is none %}<span class="pager-ellipsis">&hellip;</span>
    {% elif p == page %}<span class="pager-current">{{ p }}</span>
    {% else %}<a href="/board?page={{ p }}">{{ p }}</a>
    {% endif %}
  {% endfor %}
  {% if has_next %}<a href="/board?page={{ page + 1 }}">Next</a>{% endif %}
</nav>
{% endif %}

<style>
  .board { display: flex; flex-direction: column; gap: .5rem; padding-top: .2rem; }
  .board-row { display: flex; }
  .board-row.mine { justify-content: flex-end; }
  .board-bubble {
    max-width: min(32rem, 80%);
    border: 1px solid var(--rule-lt); background: var(--paper-2);
    padding: .45rem .7rem; border-radius: .6rem .6rem .6rem 0;
  }
  .board-row.mine .board-bubble {
    background: rgba(179,90,12,.08); border-color: var(--accent);
    border-radius: .6rem .6rem 0 .6rem;
  }
  /* Not-yet-mined: same bubble, visibly provisional rather than a
     separate banner elsewhere on the page saying the same thing. */
  .board-row.pending .board-bubble { opacity: .6; border-style: dashed; }
  .board-meta { font-size: .72rem; margin-bottom: .15rem; }
  /* Wallet addresses are one long dot-joined word with no whitespace to
     wrap on; without this the bubble's max-width is powerless (a flex
     item's default min-width is its content's unbroken size) and the
     address forces the whole row wider than the card, exactly like
     board-text needed word-break to avoid the same thing. */
  .board-addr { font-family: var(--mono); word-break: break-word; overflow-wrap: anywhere; }
  .board-text { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
  .board-ts { font-size: .68rem; color: var(--muted); text-align: right; margin-top: .2rem; }

  .board-compose {
    border: 1px solid var(--rule-lt); background: var(--paper-2);
    padding: .5rem .6rem; margin-top: .3rem; border-radius: .5rem;
  }
  .board-compose-row { display: flex; gap: .5rem; align-items: center; }
  .board-compose-row + .board-compose-row { margin-top: .4rem; }
  .board-compose-sub { font-size: .82rem; }
  .board-compose input[type="text"] { padding: .35rem .5rem; }
  #board-send { flex: 0 0 auto; padding: .35rem 1rem; }
</style>
<script>
(function () {
  const PAGE = {{ page }};

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

  document.querySelectorAll(".board-ts a[data-ts]").forEach(el => {
    const ts = parseInt(el.dataset.ts, 10);
    if (ts) el.textContent = fmtTs(ts);
  });

  // Asked for at submit time instead of sitting in the form as a field:
  // it's only ever needed once, right before signing, so there's nothing
  // for a visible input to do between page load and clicking Send except
  // sit there inviting a glance or an autofill.
  const composeForm = document.querySelector(".board-compose");
  if (composeForm) {
    const passInput = document.getElementById("board-passphrase");
    composeForm.addEventListener("submit", (e) => {
      e.preventDefault();
      const passphrase = window.prompt("Passphrase:");
      if (passphrase === null) return;  // cancelled, nothing sent
      passInput.value = passphrase;
      HTMLFormElement.prototype.submit.call(composeForm);  // bypasses this same listener
    });
  }

  // Compose box: bytes, not characters, matching the server's own UTF-8
  // byte-length check (tx.MAX_MEMO_BYTES minus the tag it prepends), and
  // disabled rather than silently truncated once over, so what's typed
  // is always exactly what gets sent.
  const msgInput = document.getElementById("board-message");
  if (msgInput) {
    const maxBytes = {{ MAX_MEMO_BYTES - tag_len }};
    const counter = document.getElementById("board-msg-counter");
    const sendBtn = document.getElementById("board-send");
    const feeEl = document.getElementById("board-fee-live");
    let feeTimer = null;
    let feeSeq = 0;

    // Disabled with the reason on hover, rather than left clickable to
    // fail after signing: the two common ways a post can't go through
    // (too long, balance too low) are both known before anything is
    // signed, so there's nothing to gain by waiting for a submit to say so.
    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 res = await fetch("/api/board/fee?bytes=" + bytes, {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";
          setSendState(!data.ok, 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() {
      const bytes = new TextEncoder().encode(msgInput.value).length;
      const empty = msgInput.value.trim() === "";
      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.");
      } 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);
      }
    }
    msgInput.addEventListener("input", refreshCounter);
    refreshCounter();
  }

  // Only page 1 polls for new posts landing; older pages are history,
  // not a live view, so they stay exactly what was rendered.
  if (PAGE !== 1) return;

  let knownFirstHash = null;
  const first = document.querySelector(".board-row");
  const statusEl = document.getElementById("live-status");

  async function poll() {
    try {
      const res = await fetch("/api/board?page=1", {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const data = await res.json();
      const latest = data.posts[0] && data.posts[0].hash;
      if (knownFirstHash === null) {
        knownFirstHash = latest || "";
      } else if (latest && latest !== knownFirstHash) {
        statusEl.textContent = "new posts – reload to see them";
      }
    } catch (e) {
      // Quiet failure: this is a courtesy nudge, not a required feature.
    }
  }

  poll();
  setInterval(poll, 15000);
})();
</script>
{% endblock %}