{% extends "base.html" %}
{% block content %}
<h2>Fees</h2>
{% if alert_err %}<div class="alert alert-err">{{ alert_err }}</div>{% endif %}

<div class="card">
  <p>Get gas on another network. Burn {{ lock // 100000000 }} LAPSE and a node operator sends it to you.</p>
  {% if low %}<p class="alert alert-err">You need {{ lock // 100000000 }} LAPSE. Mine some, or get free LAPSE on
     <a href="{{ discord }}" target="_blank" rel="noopener">Discord</a>.</p>{% endif %}

  <form method="POST" action="/fees" id="fees-form" autocomplete="off">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <input type="hidden" name="form_token" value="{{ form_token }}">

    <div class="form-group" style="display:flex;gap:.75rem;flex-wrap:wrap">
      <div style="flex:1 1 200px">
        <label for="network">Network</label>
        <select id="network" name="network" style="width:100%">
          {% for n in networks %}
          <option value="{{ n.slug }}" data-vm="{{ n.vm }}" {% if form.get('network') == n.slug %}selected{% endif %}>{{ n.name }} ({{ n.symbol }})</option>
          {% endfor %}
        </select>
      </div>
      <div style="flex:1 1 240px">
        <label for="action">What do you want to do</label>
        <select id="action" name="action" style="width:100%">
          {% for a in actions %}
          <option value="{{ a.key }}" {% if form.get('action') == a.key %}selected{% endif %}>{{ a.label }}</option>
          {% endfor %}
        </select>
      </div>
    </div>

    <div class="form-group">
      <label for="dest">Your address on that network</label>
      <input type="text" id="dest" name="dest" value="{{ form.get('dest', '') }}"
             placeholder="0x..." autocomplete="off" spellcheck="false" style="width:100%">
    </div>

    <p id="plan-line" class="stat-sub"></p>
    <p id="plan-err" class="alert alert-err" style="display:none"></p>

    <div class="form-group" style="display:flex;gap:.75rem;flex-wrap:wrap">
      <div style="flex:1 1 220px">
        <label for="passphrase">Your signing passphrase</label>
        <input type="password" id="passphrase" name="passphrase" placeholder="Passphrase" required style="width:100%">
      </div>
      <button type="submit" id="submit-btn" style="flex:0 0 auto" disabled>Burn {{ lock // 100000000 }} LAPSE and request</button>
    </div>
    <p class="stat-sub">A free gift, as is. The {{ lock // 100000000 }} LAPSE comes back only if no node offers.</p>
  </form>
</div>

<script>
(function () {
  const $ = id => document.getElementById(id);
  const form = $("fees-form"), btn = $("submit-btn");
  const low = {{ 'true' if low else 'false' }};
  let plan = null, timer = null, seq = 0;

  const coin = (u, d, sym) => { const v = Number(u) / Math.pow(10, d); return (v >= 1 ? v.toFixed(4) : v.toPrecision(2)) + " " + sym; };
  const usd = v => "$" + Number(v).toFixed(2);

  function setErr(msg) { const el = $("plan-err"); el.textContent = msg || ""; el.style.display = msg ? "" : "none"; }
  // Only a result for exactly what is in the fields now can enable the button.
  function refresh() { btn.disabled = low || !(plan && plan.needs_help); }
  function invalidate() { plan = null; seq++; $("plan-line").textContent = ""; setErr(""); refresh(); }

  async function loadPlan() {
    const my = ++seq, dest = $("dest").value.trim();
    if (!dest) { plan = null; refresh(); return; }
    const q = new URLSearchParams({network: $("network").value, action: $("action").value, dest: dest});
    try {
      const p = await (await fetch("/api/fees/plan?" + q)).json();
      if (my !== seq) return;                               // fields changed meanwhile
      if (!p.ok) { plan = null; $("plan-line").textContent = ""; setErr(p.error); refresh(); return; }
      plan = p; setErr("");
      $("plan-line").textContent = !p.needs_help ? "That address already has enough."
        : "Needs about " + coin(p.target, p.decimals, p.symbol) + " (" + usd(p.target_usd) + "). Nodes send up to " + usd(p.cap_usd) +
          (p.covers_share < 1 ? ", which covers " + Math.round(p.covers_share * 100) + "% of it." : ".");
    } catch (e) { if (my === seq) { plan = null; setErr("Could not reach this node."); } }
    refresh();
  }
  const edited = () => { clearTimeout(timer); invalidate(); timer = setTimeout(loadPlan, 400); };
  ["network", "action", "dest"].forEach(id => $(id).addEventListener("input", edited));
  $("network").addEventListener("change", () => {
    $("dest").placeholder = $("network").selectedOptions[0].dataset.vm === "svm" ? "Solana address" : "0x...";
  });
  form.addEventListener("submit", e => {
    if (!(plan && plan.needs_help) || low) { e.preventDefault(); return; }
    btn.disabled = true;
  });

  if ($("dest").value) loadPlan();
})();
</script>
{% endblock %}