{% extends "base.html" %}
{% block head %}<link rel="stylesheet" href="/css/pages/wallet.css?v={{ local_version }}">
<link rel="stylesheet" href="/css/pages/send.css?v={{ local_version }}">{% endblock %}
{% block content %}
<div class="wl">
<div class="page-head">
<h2>Send</h2>
{% if base_enabled %}
  <div class="seg" role="radiogroup" aria-label="Asset to send">
  <label><input type="radio" name="asset-picker" value="lapse" {% if asset != 'base' %}checked{% endif %}> LAPSE</label>
  <label><input type="radio" name="asset-picker" value="base" {% if asset == 'base' %}checked{% endif %}> ETH on Base</label>
  </div>
{% endif %}
</div>

{% 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 id="lapse-panel" class="wl-grid">
  <section class="panel">
    <div class="panel-head">Send LAPSE</div>
    <form method="POST" enctype="multipart/form-data" class="panel-body">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="form_token" value="{{ form_token }}">
      <input type="hidden" name="asset" value="lapse">
      {% if accounts %}
      <div class="field">
        <label for="from-account">From</label>
        <select name="account" id="from-account">
          {% for a in accounts %}
          <option value="{{ a.index }}" data-addr="{{ a.address }}" data-balance="{{ fmt_balance(a.balance) }}"{% if a.index == selected_account %} selected{% endif %}>{{ a.label or ('Address ' ~ a.index) }} &middot; {{ fmt_balance(a.balance) }}</option>
          {% endfor %}
        </select>
      </div>
      {% endif %}
      <div class="field">
        <label for="outputs">Recipients and amounts</label>
        <textarea name="outputs" id="outputs" rows="4" placeholder="word1.word2...word12,1000&#10;burn,500">{{ outputs_value }}</textarea>
        <div class="hint">One <code>address,amount</code> per line. Only lines changed to a nonzero amount get sent.
          Use <code>burn</code> in place of an address to destroy the amount instead of paying anyone.</div>
        <div class="upload">
          <label for="csv_file">Or upload a CSV file</label>
          <input type="file" id="csv_file" name="csv_file" accept=".csv,.txt">
        </div>
      </div>
      <div class="field memo-field">
        <div class="label-row">
          <label for="memo-input" title="Plaintext, permanent, visible to everyone; not encrypted.">Memo, optional</label>
          <span class="hint" id="memo-counter"></span>
        </div>
        <input type="text" name="memo" id="memo-input" value="{{ memo_value }}" placeholder="What this payment is for">
        <div class="hint">Public and permanent. Not encrypted.</div>
      </div>
      <input type="hidden" name="passphrase" value="">
      <div class="submit-row">
        <button type="submit" id="lapse-send" title="Asks for your passphrase. The fee is set automatically to whatever clears the next block, never more.">Sign &amp; Send</button>
      </div>
    </form>
  </section>
  <aside class="panel panel-side">
    <div class="panel-head">Your wallet</div>
    <dl class="kv">
      <div>
        <dt>Address</dt>
        <dd class="hash" id="from-addr">{{ from_addr }}</dd>
      </div>
      <div>
        <dt>Balance</dt>
        <dd class="num" data-live="lapse-balance">{{ fmt_balance(balance) }}</dd>
      </div>
      <div>
        <dt>Fee market</dt>
        <dd class="fee-market" id="fee-market-live">
          {% if fees.pending == 0 %}Mempool empty; ~{{ "%.3f"|format(fees.next_block) }} ticks/byte (relay floor) clears immediately.
          {% else %}{{ fees.pending }} pending &middot; <strong>~{{ "%.3f"|format(fees.next_block) }} ticks/byte to clear next block</strong>
          {% endif %}
        </dd>
      </div>
    </dl>
  </aside>
</div>

{% if base_enabled %}
<div id="base-panel" class="wl-grid">
{% if not base_addr %}
  <section class="panel">
    <div class="panel-head">ETH on Base</div>
    <div class="panel-body">This node has no Base gas wallet yet. It is created the next time the node starts.</div>
  </section>
{% else %}
  <section class="panel">
    <div class="panel-head">Send from Base</div>
    <form method="POST" id="base-form" class="panel-body">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <input type="hidden" name="form_token" value="{{ form_token }}">
      <input type="hidden" name="asset" value="base">
      <div class="fields base-fields">
        <div class="field">
          <label for="base-network">To network</label>
          <select id="base-network" name="base_network">
            {% for n in base_networks %}<option value="{{ n.slug }}" {% if n.slug == base_network_value %}selected{% endif %}>{{ n.name }}</option>{% endfor %}
          </select>
        </div>
        <div class="field">
          <label for="base-token">Token</label>
          <select id="base-token" name="base_token" data-initial="{{ base_token_value }}"></select>
        </div>
        <div class="field suffix-field">
          <label for="base-amount">ETH to spend</label>
          <div class="suffix">
            <input type="text" id="base-amount" name="base_amount" value="{{ base_amount_value }}"
                   placeholder="0.01" autocomplete="off" inputmode="decimal">
            <span>ETH</span>
          </div>
        </div>
      </div>
      <div class="field">
        <label for="base-to">Destination address</label>
        <input type="text" id="base-to" name="base_to" value="{{ base_to_value }}"
               placeholder="0x..." autocomplete="off" spellcheck="false">
        <p class="hint" id="base-quote"></p>
      </div>
      <input type="hidden" name="passphrase" value="">
      <div class="submit-row">
        <button type="submit" id="base-send" disabled>Sign &amp; Send</button>
      </div>
    </form>
  </section>
  <aside class="panel panel-side">
    <div class="panel-head">Your Base wallet</div>
    <dl class="kv">
      <div>
        <dt>Address</dt>
        <dd><span class="hash">{{ base_addr }}</span>
          <div class="hint">Send ETH on Base here to fund fee requests.</div></dd>
      </div>
      <div>
        <dt>Balance</dt>
        <dd class="num{% if not base_balance_known %} dim{% endif %}" data-live="base-balance">{% if base_balance_known %}{{ base_balance }} ETH{% else %}unavailable{% endif %}</dd>
      </div>
    </dl>
  </aside>
{% endif %}
</div>
{% endif %}
</div>

<dialog id="dlg-pass" class="prompt">
  <form method="dialog" id="dlg-pass-form">
    <h3>Sign &amp; Send</h3>
    <p class="hint">Your wallet passphrase signs this. The fee is set automatically to whatever clears the next block, never more.</p>
    <label for="dlg-pass-input">Wallet passphrase</label>
    <input type="password" id="dlg-pass-input" autocomplete="current-password" required>
    <div class="prompt-actions">
      <button type="button" class="btn-ghost" id="dlg-pass-cancel">Cancel</button>
      <button type="submit">Sign &amp; Send</button>
    </div>
  </form>
</dialog>

<script>
(function () {
  // The passphrase is asked in a prompt when a send is submitted, so the form
  // itself stays short. The forms still post it as the same "passphrase" field.
  const dlg = document.getElementById("dlg-pass");
  const input = document.getElementById("dlg-pass-input");
  let pending = null;
  document.querySelectorAll("form").forEach(function (form) {
    if (!form.querySelector('input[name="passphrase"]')) return;
    form.addEventListener("submit", function (e) {
      if (form.dataset.signed) return;               // the one that follows the prompt
      e.preventDefault();
      pending = form;
      input.value = "";
      dlg.showModal();
      input.focus();
    });
  });
  document.getElementById("dlg-pass-cancel").addEventListener("click", function () {
    pending = null; input.value = ""; dlg.close();
  });
  dlg.addEventListener("click", function (e) { if (e.target === dlg) { pending = null; input.value = ""; dlg.close(); } });
  document.getElementById("dlg-pass-form").addEventListener("submit", function () {
    if (!pending || !input.value) return;
    pending.querySelector('input[name="passphrase"]').value = input.value;
    input.value = "";
    pending.dataset.signed = "1";
    const f = pending; pending = null;
    f.requestSubmit(f.querySelector('button[type="submit"]'));
  });
})();

(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");
  const accountEl = document.getElementById("from-account");
  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;
    }
    // An edit switches it off straight away; only a check of what is in the
    // box now switches it back on.
    setSendState(true, "Checking...");
    timer = setTimeout(async () => {
      const s = ++seq;
      try {
        const params = {outputs, memo};
        if (accountEl) params.account = accountEl.value;
        const res = await fetch("/api/send/fee?" + new URLSearchParams(params),
                                {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) {
        // The check could not be made: let the send through, the server
        // still validates for real on submit.
        if (s === seq) setSendState(false, "");
      }
    }, 300);
  }
  outputsEl.addEventListener("input", refreshValidity);
  if (memoEl) memoEl.addEventListener("input", refreshValidity);
  if (accountEl) accountEl.addEventListener("change", function () {
    // The side panel follows the pick; the address in the URL keeps the page's
    // background refresh on the same account.
    const opt = accountEl.selectedOptions[0];
    const addr = document.getElementById("from-addr");
    if (addr) addr.textContent = opt.dataset.addr;
    const bal = document.querySelector('[data-live="lapse-balance"]');
    if (bal) bal.textContent = opt.dataset.balance;
    const u = new URL(location.href);
    u.searchParams.set("account", accountEl.value);
    u.searchParams.delete("note");
    history.replaceState(null, "", u);
    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);
})();


{% if base_enabled %}
(function () {
  // Which panel shows is purely a display choice; the server decides which
  // form was actually submitted from the "asset" hidden field each form
  // carries, so nothing here needs to touch validation.
  const radios = document.querySelectorAll('input[name="asset-picker"]');
  const panels = {lapse: document.getElementById("lapse-panel"),
                  base: document.getElementById("base-panel")};
  function show() {
    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", show));
  show();
})();
{% endif %}

{% if base_enabled and base_addr %}
(function () {
  const $ = id => document.getElementById(id);
  let timer = null, seq = 0;
  async function loadTokens() {
    const sel = $("base-token"), want = sel.dataset.initial || sel.value;
    const r = await fetch("/api/send/base/tokens?network=" + encodeURIComponent($("base-network").value));
    const d = await r.json();
    sel.textContent = "";
    for (const t of (d.tokens || [])) {
      const o = document.createElement("option");
      o.value = t.address; o.textContent = t.symbol; o.dataset.decimals = t.decimals;
      if (want && t.address.toLowerCase() === want.toLowerCase()) o.selected = true;
      sel.appendChild(o);
    }
    sel.dataset.initial = "";
    quote();
  }
  function fmt(units, decimals) {
    const v = Number(units) / Math.pow(10, decimals);
    return v >= 1 ? v.toFixed(4) : v.toPrecision(3);
  }
  const sendBtn = $("base-send");
  async function quote() {
    const el = $("base-quote"), my = ++seq;
    sendBtn.disabled = true;                      // on again only for a quote of what is in the fields now
    if (!$("base-amount").value.trim() || !$("base-to").value.trim()) { el.textContent = ""; return; }
    const q = new URLSearchParams({network: $("base-network").value, token: $("base-token").value,
                                   to: $("base-to").value.trim(), amount: $("base-amount").value.trim()});
    el.textContent = "Getting a quote...";
    try {
      const d = await (await fetch("/api/send/base/preview?" + q)).json();
      if (my !== seq) return;
      if (!d.ok) { el.textContent = d.error; return; }
      sendBtn.disabled = false;
      el.textContent = d.direct ? "A plain transfer on Base."
        : "You receive about " + fmt(d.receive, d.decimals) + " " + d.symbol + " (at least " +
          fmt(d.minimum, d.decimals) + "), costing about " + d.impact_percent.toFixed(2) + "% in fees.";
    } catch (e) { if (my === seq) el.textContent = "Could not get a quote."; }
  }
  const later = () => { clearTimeout(timer); seq++; sendBtn.disabled = true; $("base-quote").textContent = ""; timer = setTimeout(quote, 500); };
  $("base-network").addEventListener("change", () => { sendBtn.disabled = true; $("base-token").dataset.initial = ""; loadTokens(); });
  ["base-token", "base-amount", "base-to"].forEach(id => $(id).addEventListener("input", later));
  loadTokens();
})();
{% endif %}
</script>
{% endblock %}