{% 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 %}

{% if base_enabled %}
<div class="form-group" style="display:flex;gap:1rem;margin-bottom:.5rem">
  <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 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" data-live="lapse-balance" 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="form_token" value="{{ form_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>

{% if base_enabled %}
<div id="base-panel">
{% if not base_addr %}
<div class="card">
  <div class="card-title">ETH on Base</div>
  <p>This node has no Base gas wallet yet. It is created the next time the node starts.</p>
</div>
{% else %}
<div class="stats">
  <div class="stat" style="flex-basis:280px">
    <div class="stat-label">Your Base address (send ETH on Base here to fund fee requests)</div>
    <div class="hash">{{ base_addr }}</div>
  </div>
  <div class="stat">
    <div class="stat-label">Balance</div>
    <div class="stat-value" data-live="base-balance" style="color:var(--green);font-size:.95rem">{% if base_balance_known %}{{ base_balance }} ETH{% else %}unavailable{% endif %}</div>
  </div>
</div>
<div class="card">
  <div class="card-title">Send from Base</div>
  <form method="POST" id="base-form">
    <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="form-group" style="display:flex;gap:.75rem;flex-wrap:wrap">
      <div style="flex:1 1 180px">
        <label for="base-network">To network</label>
        <select id="base-network" name="base_network" style="width:100%">
          {% for n in base_networks %}<option value="{{ n.slug }}" {% if n.slug == base_network_value %}selected{% endif %}>{{ n.name }}</option>{% endfor %}
        </select>
      </div>
      <div style="flex:1 1 140px">
        <label for="base-token">Token</label>
        <select id="base-token" name="base_token" data-initial="{{ base_token_value }}" style="width:100%"></select>
      </div>
      <div style="flex:0 0 160px">
        <label for="base-amount">ETH to spend</label>
        <input type="text" id="base-amount" name="base_amount" value="{{ base_amount_value }}"
               placeholder="0.01" autocomplete="off" style="width:100%">
      </div>
    </div>
    <div class="form-group">
      <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" style="width:100%">
    </div>
    <p class="stat-sub" id="base-quote"></p>
    <div class="form-group" style="display:flex;gap:.75rem;flex-wrap:wrap">
      <div style="flex:1 1 220px">
        <label for="base-passphrase">Your signing passphrase</label>
        <input type="password" id="base-passphrase" name="passphrase" placeholder="Passphrase" style="width:100%">
      </div>
      <button type="submit" id="base-send" style="flex:0 0 auto" disabled>Sign &amp; Send</button>
    </div>
  </form>
</div>
{% endif %}
</div>
{% endif %}

<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;
    }
    // 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 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) {
        // 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);
  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 %}