{% extends "base.html" %}
{% block content %}
<h2>Send</h2>
{% if alert_ok_tx %}<div class="alert alert-ok">{{ alert_ok_verb }} tx: <span class="hash">{{ alert_ok_tx }}</span></div>{% endif %}
{% if alert_err %}<div class="alert alert-err">{{ alert_err }}</div>{% endif %}
{% if alert_err_lines %}<div class="alert alert-err">{% for line in alert_err_lines %}{{ line }}<br>{% endfor %}</div>{% endif %}

<div class="form-group" style="display:flex;gap:1rem;margin-bottom:.5rem">
  <label><input type="radio" name="asset-picker" value="lapse" {% if asset != 'xlm' %}checked{% endif %}> LAPSE</label>
  <label><input type="radio" name="asset-picker" value="xlm" {% if asset == 'xlm' %}checked{% endif %}> XLM</label>
</div>

<div id="lapse-panel">
<div class="stats">
  <div class="stat" style="flex-basis:280px">
    <div class="stat-label">Your address</div>
    <div class="hash">{{ from_addr }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Balance</div>
    <div class="stat-value" style="color:var(--green);font-size:.95rem">{{ fmt_balance(balance) }}</div>
  </div>
  <div class="stat" style="flex-basis:220px">
    <div class="stat-label">Fee market</div>
    <div class="stat-sub" id="fee-market-live" style="margin-top:0">
      {% if fees.pending == 0 %}Mempool empty; ~{{ "%.3f"|format(fees.next_block) }} ticks/byte (relay floor) clears immediately.
      {% else %}{{ fees.pending }} pending &middot; <strong style="color:var(--accent)">~{{ "%.3f"|format(fees.next_block) }} ticks/byte to clear next block</strong>
      {% endif %}
    </div>
  </div>
</div>
<div class="card">
  <div class="card-title">Outputs, paste CSV (address,amount) or upload file</div>
  <form method="POST" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="asset" value="lapse">
    <div class="form-group">
      <label>CSV outputs (address,amount). Only lines changed to a nonzero amount get sent.
        Use <code>burn</code> in place of an address to destroy it instead of paying anyone.</label>
      <textarea name="outputs" rows="2" placeholder="word1.word2...word12,1000&#10;burn,500">{{ outputs_value }}</textarea>
    </div>
    <div class="form-group" style="display:flex;gap:.75rem;flex-wrap:wrap">
      <div style="flex:0 0 auto">
        <label for="csv_file">Or upload CSV</label>
        <input type="file" id="csv_file" name="csv_file" accept=".csv,.txt">
      </div>
      <div style="flex:3 1 240px">
        <label for="memo-input" title="Plaintext, permanent, visible to everyone; not encrypted.">Memo, optional</label>
        <input type="text" name="memo" id="memo-input" value="{{ memo_value }}"
               placeholder="What this payment is for" style="width:100%">
        <div class="stat-sub" id="memo-counter" style="margin-top:.15rem"></div>
      </div>
    </div>
    <div class="form-group" style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap">
      <div style="flex:1 1 220px">
        <label for="passphrase" title="Fee is set automatically to whatever clears the next block, never more (see fee market above).">Your signing passphrase</label>
        <input type="password" id="passphrase" name="passphrase" placeholder="Passphrase" style="width:100%">
      </div>
      <button type="submit" id="lapse-send" style="flex:0 0 auto">Sign &amp; Send</button>
    </div>
  </form>
</div>
</div>

<div id="xlm-panel">
{% if not xlm_addr %}
<div class="card">
  <div class="card-title">No Stellar trading address yet</div>
  <p>Create one from the <a href="/market">Market</a> page before sending XLM.</p>
</div>
{% else %}
<div class="stats">
  <div class="stat" style="flex-basis:280px">
    <div class="stat-label">Your Stellar address</div>
    <div class="hash">{{ xlm_addr }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Spendable</div>
    <div class="stat-value" style="color:var(--green);font-size:.95rem">{{ fmt_xlm(xlm_spendable) }} XLM</div>
  </div>
  <div class="stat">
    <div class="stat-label">Locked in reserve</div>
    <div class="stat-value" style="font-size:.95rem">{{ fmt_xlm(xlm_locked) }} XLM</div>
  </div>
</div>
<div class="card">
  <div class="card-title">Send XLM</div>
  <form method="POST">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="asset" value="xlm">
    <div class="form-group">
      <label for="xlm-to">Destination Stellar address</label>
      <input type="text" id="xlm-to" name="xlm_to" value="{{ xlm_to_value }}"
             placeholder="G..." style="width:100%">
    </div>
    <div class="form-group" style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap">
      <div style="flex:1 1 160px">
        <label for="xlm-amount">Amount, in XLM</label>
        <input type="text" id="xlm-amount" name="xlm_amount" value="{{ xlm_amount_value }}"
               placeholder="0.0000000" style="width:100%">
      </div>
    </div>
    <div class="form-group" style="display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap">
      <div style="flex:1 1 220px">
        <label for="xlm-passphrase">Your signing passphrase</label>
        <input type="password" id="xlm-passphrase" name="passphrase" placeholder="Passphrase" style="width:100%">
      </div>
      <button type="submit" style="flex:0 0 auto">Sign &amp; Send</button>
    </div>
  </form>
</div>
{% endif %}
</div>

<script>
(function () {
  // Bytes, not characters: the server caps memo by its UTF-8 byte length
  // (see tx.MAX_MEMO_BYTES), and one emoji or accented character can cost
  // several bytes, so a character count here would let the field look
  // fine and still get rejected on submit.
  const max = {{ memo_max_bytes }};
  const input = document.getElementById("memo-input");
  const counter = document.getElementById("memo-counter");
  function refresh() {
    const bytes = new TextEncoder().encode(input.value).length;
    counter.textContent = bytes + " / " + max + " bytes";
    counter.style.color = bytes > max ? "var(--red, #c0392b)" : "var(--muted)";
  }
  input.addEventListener("input", refresh);
  refresh();
})();

(function () {
  // Disabled with the reason on hover rather than left clickable to fail
  // after signing: the common ways a send can't go through (bad/empty
  // outputs, memo too long, balance too low) are all known before
  // anything is signed. Only covers the textarea, not an uploaded CSV
  // file, since that can't be read live without the user picking it
  // first; a file-based send still gets the same check on submit.
  const outputsEl = document.querySelector('textarea[name="outputs"]');
  const memoEl = document.getElementById("memo-input");
  const sendBtn = document.getElementById("lapse-send");
  if (!outputsEl || !sendBtn) return;

  let timer = null;
  let seq = 0;
  function setSendState(disabled, reason) {
    sendBtn.disabled = disabled;
    sendBtn.title = reason;
  }
  function refreshValidity() {
    clearTimeout(timer);
    const outputs = outputsEl.value;
    const memo = memoEl ? memoEl.value : "";
    if (!outputs.trim()) {
      setSendState(true, "No outputs entered.");
      return;
    }
    timer = setTimeout(async () => {
      const s = ++seq;
      try {
        const res = await fetch("/api/send/fee?" + new URLSearchParams({outputs, memo}),
                                {cache: "no-store"});
        if (!res.ok) throw new Error("bad status " + res.status);
        const data = await res.json();
        if (s !== seq) return;
        setSendState(!data.ok, data.reason || "");
      } catch (e) {
        // Quiet failure: leaves whatever state was last known rather than
        // guessing, and the server still validates for real on submit.
      }
    }, 300);
  }
  outputsEl.addEventListener("input", refreshValidity);
  if (memoEl) memoEl.addEventListener("input", refreshValidity);
  refreshValidity();
})();

(function () {
  // The fee market shown at load is only true until the mempool next
  // changes, which is constantly, so it polls rather than sitting stale
  // for as long as the page is open.
  const el = document.getElementById("fee-market-live");
  if (!el) return;
  async function refresh() {
    try {
      const res = await fetch("/api/fees", {cache: "no-store"});
      if (!res.ok) throw new Error("bad status " + res.status);
      const fees = await res.json();
      el.textContent = fees.pending === 0
        ? "Mempool empty; ~" + fees.next_block.toFixed(3) + " ticks/byte (relay floor) clears immediately."
        : fees.pending + " pending · ~" + fees.next_block.toFixed(3) + " ticks/byte to clear next block";
    } catch (e) {
      // Quiet failure: what rendered at load is still a safe, if stale, number.
    }
  }
  setInterval(refresh, 8000);
})();

(function () {
  // Which panel shows is purely a display choice; the server decides which
  // form was actually submitted from the "asset" hidden field each panel
  // carries, so nothing here needs to touch validation.
  const radios = document.querySelectorAll('input[name="asset-picker"]');
  const panels = {lapse: document.getElementById("lapse-panel"),
                  xlm: document.getElementById("xlm-panel")};
  function refresh() {
    const picked = document.querySelector('input[name="asset-picker"]:checked').value;
    for (const key in panels) panels[key].style.display = key === picked ? "" : "none";
  }
  radios.forEach(r => r.addEventListener("change", refresh));
  refresh();
})();
</script>
{% endblock %}