const viewRoot = document.querySelector("#view");
const titleEl = document.querySelector("#title");
const toastEl = document.querySelector("#toast");
const state = {
  view: "overview",
  summary: null,
  nodes: [],
  users: [],
  withdrawals: [],
  yields: [],
  selected: "",
};

const copy = {
  overview: "总览",
  nodes: "节点",
  ledger: "流水",
  cash: "提现",
};

document.querySelectorAll("#nav button").forEach((button) => {
  button.addEventListener("click", () => go(button.dataset.view));
});
document.querySelector("#refresh").addEventListener("click", () => load().catch(showError));
window.addEventListener("hashchange", syncFromHash);

tick();
setInterval(tick, 1000);
syncFromHash();
load().catch(showError);
probeHealth();

function tick() {
  document.querySelector("#clock").textContent = new Intl.DateTimeFormat("zh-CN", {
    timeZone: "Asia/Shanghai",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false,
  }).format(new Date());
}

function go(view) {
  location.hash = view;
}

async function syncFromHash() {
  const next = (location.hash || "#overview").slice(1);
  state.view = copy[next] ? next : "overview";
  document.querySelectorAll("#nav button").forEach((button) => {
    button.classList.toggle("active", button.dataset.view === state.view);
  });
  titleEl.textContent = copy[state.view];
  if (state.view === "ledger" && state.selected) {
    try {
      state.yields = await api(`/nodes/${encodeURIComponent(state.selected)}/yields`);
    } catch (error) {
      showError(error);
    }
  }
  render();
}

async function load() {
  const [summary, nodes, users, withdrawals] = await Promise.all([
    api("/summary"),
    api("/nodes"),
    api("/users"),
    api("/withdrawals"),
  ]);
  state.summary = summary;
  state.nodes = nodes;
  state.users = users;
  state.withdrawals = withdrawals;
  if (!state.selected && nodes[0]) state.selected = nodes[0].sn;
  if (state.view === "ledger" && state.selected) {
    state.yields = await api(`/nodes/${encodeURIComponent(state.selected)}/yields`);
  }
  render();
}

async function probeHealth() {
  const dot = document.querySelector("#health-dot");
  const text = document.querySelector("#health-text");
  try {
    const res = await fetch("/health");
    if (!res.ok) throw new Error("offline");
    dot.classList.add("on");
    text.textContent = "服务在线";
  } catch {
    text.textContent = "服务未响应";
  }
}

function render() {
  const painters = { overview: paintOverview, nodes: paintNodes, ledger: paintLedger, cash: paintCash };
  viewRoot.innerHTML = painters[state.view]();
  bind();
}

function paintOverview() {
  const s = state.summary || {};
  return `
    <section class="metrics">
      ${metric("授权金额", money(s.authorized_amount), `${s.nodes || 0} 台节点`)}
      ${metric("在线", `${s.online || 0}`, `离线 ${s.offline || 0}`)}
      ${metric("已入账积分", money(s.settled_points), `${s.users || 0} 个钱包`)}
      ${metric("待处理提现", money(s.pending_withdrawals), "占用可用余额")}
    </section>
    <div class="table-wrap" style="margin-top:16px">
      <table>
        <thead><tr><th>节点</th><th>钱包</th><th>购买金额</th><th>状态</th><th>到期</th></tr></thead>
        <tbody>
          ${state.nodes.length ? state.nodes.slice(0, 8).map(nodeRow).join("") : `<tr><td colspan="5" class="empty">还没有节点。下面可以登记第一台。</td></tr>`}
        </tbody>
      </table>
    </div>
    <section class="forms">
      ${userForm()}
      ${nodeForm()}
    </section>
  `;
}

function paintNodes() {
  return `
    <section class="layout">
      <div class="table-wrap">
        <table>
          <thead><tr><th>序列号</th><th>钱包</th><th>购买金额</th><th>状态</th><th>到期</th></tr></thead>
          <tbody>
            ${state.nodes.length ? state.nodes.map(nodeRow).join("") : `<tr><td colspan="5" class="empty">节点列表是空的。</td></tr>`}
          </tbody>
        </table>
      </div>
      ${nodeForm()}
    </section>
  `;
}

function paintLedger() {
  const options = state.nodes.map((node) => `<option value="${esc(node.sn)}" ${node.sn === state.selected ? "selected" : ""}>${esc(node.sn)}</option>`).join("");
  return `
    <div class="toolbar">
      <label class="grow">节点
        <select id="ledger-node">${options || `<option value="">暂无节点</option>`}</select>
      </label>
      <label>清算日期
        <input id="settle-date" type="date" />
      </label>
      <button class="gold" id="settle" type="button">清算</button>
    </div>
    <div class="table-wrap">
      <table>
        <thead><tr><th>日期</th><th>积分</th><th>算力产出</th><th>在线率</th><th>响应率</th><th>表现</th><th>状态</th></tr></thead>
        <tbody>
          ${state.yields.length ? state.yields.map(yieldRow).join("") : `<tr><td colspan="7" class="empty">这一天还没有入账记录。</td></tr>`}
        </tbody>
      </table>
    </div>
  `;
}

function paintCash() {
  return `
    <section class="layout">
      <div class="table-wrap">
        <table>
          <thead><tr><th>单号</th><th>钱包</th><th>金额</th><th>状态</th><th></th></tr></thead>
          <tbody>
            ${state.withdrawals.length ? state.withdrawals.map(cashRow).join("") : `<tr><td colspan="5" class="empty">还没有提现申请。</td></tr>`}
          </tbody>
        </table>
      </div>
      <div class="stack">
        <form class="panel" id="balance-form">
          <h2>可用积分</h2>
          <p class="sub">已入账积分减去待处理和已完成的提现。</p>
          <label>钱包
            <input name="wallet_address" list="wallets" required placeholder="0x..." />
          </label>
          <div class="row-actions" style="margin-top:14px">
            <button class="gold" type="submit">查询</button>
          </div>
          <p class="sub" id="balance-result"></p>
          ${walletList()}
        </form>
        <form class="panel" id="withdraw-form">
          <h2>申请提现</h2>
          <p class="sub">提交后金额会被占用，确认时再写入链上哈希。</p>
          <div class="stack">
            <label>钱包<input name="wallet_address" list="wallets" required /></label>
            <label>金额<input name="amount" required placeholder="1.25" /></label>
            <label>资产<input name="asset_symbol" value="POINT" /></label>
            <button class="gold" type="submit">提交申请</button>
          </div>
        </form>
      </div>
    </section>
  `;
}

function metric(label, value, note) {
  return `<article class="metric"><span>${esc(label)}</span><strong>${esc(value ?? "0")}</strong><em>${esc(note || "")}</em></article>`;
}

function userForm() {
  return `
    <form class="panel" id="user-form">
      <h2>登记钱包</h2>
      <p class="sub">一个钱包可以绑定多台节点。</p>
      <label>钱包地址<input name="wallet_address" required minlength="4" placeholder="0xabc123" /></label>
      <div class="row-actions" style="margin-top:14px"><button class="gold" type="submit">创建用户</button></div>
    </form>
  `;
}

function nodeForm() {
  return `
    <form class="panel" id="node-form">
      <h2>登记节点</h2>
      <p class="sub">授权周期 12 个月，购买金额按天释放。</p>
      ${walletList()}
      <div class="stack">
        <label>钱包<input name="wallet_address" list="wallets" required /></label>
        <label>序列号<input name="sn" required minlength="4" placeholder="NODE-001" /></label>
        <label>购买金额<input name="purchase_amount" required placeholder="365" /></label>
        <label>回调地址<input name="callback_url" placeholder="https:// 可选" /></label>
        <button class="gold" type="submit">创建节点</button>
      </div>
    </form>
  `;
}

function walletList() {
  const options = state.users.map((user) => `<option value="${esc(user.wallet_address)}"></option>`).join("");
  return `<datalist id="wallets">${options}</datalist>`;
}

function nodeRow(node) {
  return `<tr class="clickable" role="button" tabindex="0" data-sn="${esc(node.sn)}">
    <td class="mono">${esc(node.sn)}</td>
    <td class="mono">${esc(short(node.wallet_address))}</td>
    <td>${esc(money(node.purchase_amount))}</td>
    <td>${pill(node.status)}</td>
    <td>${esc(day(node.license_expires_at))}</td>
  </tr>`;
}

function yieldRow(row) {
  return `<tr>
    <td class="mono">${esc(row.yield_date)}</td>
    <td>${esc(money(row.points_delta))}</td>
    <td>${esc(money(row.compute_output))}</td>
    <td>${esc(pct(row.online_rate))}</td>
    <td>${esc(pct(row.task_response_rate))}</td>
    <td>${esc(pct(row.performance))}</td>
    <td>${pill(row.status)}</td>
  </tr>`;
}

function cashRow(row) {
  const actions = row.status === "pending"
    ? `<div class="row-actions">
        <input data-hash="${row.id}" placeholder="交易哈希" />
        <button class="texty" data-confirm="${row.id}" type="button">确认</button>
        <button class="texty" data-reject="${row.id}" type="button">拒绝</button>
      </div>`
    : `<span class="mono">${esc(row.tx_hash || "—")}</span>`;
  return `<tr>
    <td class="mono">#${row.id}</td>
    <td class="mono">${esc(short(row.wallet_address))}</td>
    <td>${esc(money(row.amount))} ${esc(row.asset_symbol)}</td>
    <td>${pill(row.status)}</td>
    <td>${actions}</td>
  </tr>`;
}

function pill(status) {
  const label = {
    online: "在线",
    offline: "离线",
    pending: "待处理",
    completed: "已完成",
    rejected: "已拒绝",
    failed: "失败",
    settled: "已入账",
    void: "作废",
  }[status] || status;
  return `<span class="pill ${esc(status)}"><i></i>${esc(label)}</span>`;
}

function bind() {
  const userFormEl = document.querySelector("#user-form");
  const nodeFormEl = document.querySelector("#node-form");
  const balanceForm = document.querySelector("#balance-form");
  const withdrawForm = document.querySelector("#withdraw-form");
  if (userFormEl) userFormEl.addEventListener("submit", onCreateUser);
  if (nodeFormEl) nodeFormEl.addEventListener("submit", onCreateNode);
  if (balanceForm) balanceForm.addEventListener("submit", onBalance);
  if (withdrawForm) withdrawForm.addEventListener("submit", onWithdraw);
  document.querySelectorAll("tr.clickable").forEach((row) => row.addEventListener("click", () => openNode(row.dataset.sn)));
  const ledgerNode = document.querySelector("#ledger-node");
  if (ledgerNode) {
    ledgerNode.addEventListener("change", async () => {
      state.selected = ledgerNode.value;
      state.yields = state.selected ? await api(`/nodes/${encodeURIComponent(state.selected)}/yields`) : [];
      render();
    });
  }
  const settle = document.querySelector("#settle");
  if (settle) settle.addEventListener("click", onSettle);
  document.querySelectorAll("[data-confirm]").forEach((button) => button.addEventListener("click", () => onConfirm(button.dataset.confirm)));
  document.querySelectorAll("[data-reject]").forEach((button) => button.addEventListener("click", () => onReject(button.dataset.reject)));
}

async function onCreateUser(event) {
  event.preventDefault();
  const body = Object.fromEntries(new FormData(event.target));
  await run(() => api("/users", { method: "POST", body: JSON.stringify(body) }), "钱包已登记");
}

async function onCreateNode(event) {
  event.preventDefault();
  const body = Object.fromEntries(new FormData(event.target));
  if (!body.callback_url) delete body.callback_url;
  await run(() => api("/nodes", { method: "POST", body: JSON.stringify(body) }), "节点已登记");
}

async function onBalance(event) {
  event.preventDefault();
  const wallet = new FormData(event.target).get("wallet_address");
  const data = await api(`/users/${encodeURIComponent(wallet)}/balance`);
  document.querySelector("#balance-result").textContent = `${data.wallet_address} 可用 ${money(data.available_points)}`;
}

async function onWithdraw(event) {
  event.preventDefault();
  const body = Object.fromEntries(new FormData(event.target));
  await run(() => api("/withdrawals", { method: "POST", body: JSON.stringify(body) }), "提现申请已提交");
}

async function onSettle() {
  try {
    const date = document.querySelector("#settle-date").value;
    const query = date ? `?yield_date=${date}` : "";
    const result = await api(`/yield/settle${query}`, { method: "POST" });
    showToast(`已清算 ${result.yield_date}，新增 ${result.created} 条，积分 ${money(result.total_points)}`);
    await load();
  } catch (error) {
    showError(error);
  }
}

async function onConfirm(id) {
  const hash = document.querySelector(`[data-hash="${id}"]`).value.trim();
  if (!hash) return showToast("请先填写交易哈希");
  await run(() => api(`/withdrawals/${id}/confirm`, { method: "POST", body: JSON.stringify({ tx_hash: hash }) }), "提现已确认");
}

async function onReject(id) {
  await run(() => api(`/withdrawals/${id}/reject`, { method: "POST", body: JSON.stringify({ note: "控制台拒绝" }) }), "提现已拒绝");
}

async function openNode(sn) {
  const node = state.nodes.find((item) => item.sn === sn);
  if (!node) return;
  let yields = [];
  try {
    yields = await api(`/nodes/${encodeURIComponent(sn)}/yields`);
  } catch (error) {
    showError(error);
  }
  const mask = document.createElement("div");
  mask.className = "mask";
  mask.innerHTML = `
    <aside class="drawer">
      <header>
        <div>
          <p class="eyebrow">节点</p>
          <h2>${esc(node.sn)}</h2>
        </div>
        <button class="ghost" type="button" data-close>关闭</button>
      </header>
      <div style="margin-top:16px">${pill(node.status)}</div>
      <div class="kv">
        <span>钱包</span><b class="mono">${esc(node.wallet_address)}</b>
        <span>购买</span><b>${esc(money(node.purchase_amount))}</b>
        <span>开始</span><b>${esc(when(node.licensed_at))}</b>
        <span>到期</span><b>${esc(when(node.license_expires_at))}</b>
        <span>心跳</span><b>${esc(when(node.last_heartbeat_at))}</b>
      </div>
      <button class="gold" type="button" id="beat">发送心跳</button>
      <h2 style="margin-top:28px">最近流水</h2>
      <div class="table-wrap" style="margin-top:12px;box-shadow:none">
        <table>
          <thead><tr><th>日期</th><th>积分</th><th>在线率</th></tr></thead>
          <tbody>${yields.slice(0, 6).map((row) => `<tr><td class="mono">${esc(row.yield_date)}</td><td>${esc(money(row.points_delta))}</td><td>${esc(pct(row.online_rate))}</td></tr>`).join("") || `<tr><td colspan="3" class="empty">暂无流水</td></tr>`}</tbody>
        </table>
      </div>
    </aside>
  `;
  mask.addEventListener("click", (event) => {
    if (event.target === mask || event.target.closest("[data-close]")) mask.remove();
  });
  mask.querySelector("#beat").addEventListener("click", async () => {
    await run(() => api("/node/heartbeat", { method: "POST", body: JSON.stringify({ sn }) }), "心跳已记录");
    mask.remove();
  });
  document.body.appendChild(mask);
}

async function run(action, message) {
  try {
    await action();
    showToast(message);
    await load();
  } catch (error) {
    showError(error);
  }
}

async function api(path, options = {}) {
  const res = await fetch(`/api/v1${path}`, {
    ...options,
    headers: { "Content-Type": "application/json", ...(options.headers || {}) },
  });
  const text = await res.text();
  const data = text ? JSON.parse(text) : null;
  if (!res.ok) throw new Error(errorText(data));
  return data;
}

function errorText(data) {
  const detail = data && data.detail;
  if (typeof detail === "string") return detail;
  if (Array.isArray(detail)) return detail.map((item) => item.msg).join("；");
  return "请求失败";
}

function showToast(message) {
  toastEl.textContent = message;
  toastEl.classList.add("show");
  clearTimeout(showToast.timer);
  showToast.timer = setTimeout(() => toastEl.classList.remove("show"), 2600);
}

function showError(error) {
  showToast(error.message || "操作失败");
}

function money(value) {
  if (value == null || value === "") return "0";
  const raw = String(value);
  const neg = raw.startsWith("-");
  const [whole, frac = ""] = raw.replace("-", "").split(".");
  const grouped = whole.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  const trimmed = frac.replace(/0+$/, "");
  return `${neg ? "-" : ""}${trimmed ? `${grouped}.${trimmed}` : grouped}`;
}

function pct(value) {
  const number = Number(value);
  if (!Number.isFinite(number)) return "—";
  return `${(number * 100).toFixed(1)}%`;
}

function when(value) {
  if (!value) return "—";
  return new Intl.DateTimeFormat("zh-CN", {
    timeZone: "Asia/Shanghai",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    hour12: false,
  }).format(new Date(value));
}

function day(value) {
  if (!value) return "—";
  return new Intl.DateTimeFormat("zh-CN", { timeZone: "Asia/Shanghai", year: "numeric", month: "2-digit", day: "2-digit" }).format(new Date(value));
}

function short(value) {
  const text = String(value || "");
  return text.length > 16 ? `${text.slice(0, 8)}…${text.slice(-4)}` : text;
}

function esc(value) {
  return String(value ?? "").replace(/[&<>"']/g, (char) => ({
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#39;",
  }[char]));
}