const $ = (id) => document.getElementById(id);

function setStatus(msg, danger = false) {
  const el = $("status");
  if (!el) return;
  el.style.color = danger ? "#b42318" : "#0f5f3d";
  el.textContent = msg;
}

function setLoading(button, loading, idleText, loadingText) {
  if (!button) return;
  button.disabled = loading;
  button.textContent = loading ? loadingText : idleText;
}

function importantNotice(message, title = "提示") {
  if (typeof window.uiAlert === "function") {
    void window.uiAlert(message, title);
    return;
  }
  setStatus(message, true);
}

function openPayLink(url) {
  const payUrl = String(url || "").trim();
  if (!payUrl) return false;
  const tab = window.open(payUrl, "_blank", "noopener");
  if (tab) return true;
  window.location.href = payUrl;
  return true;
}

async function postJSON(url, body) {
  const res = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  const data = await res.json();
  if (!res.ok) throw new Error(data.detail || "请求失败");
  return data;
}

async function authMe() {
  const res = await fetch("/api/auth/me");
  const data = await res.json();
  if (!data.logged_in) {
    window.location.href = "/auth?next=/billing";
    return null;
  }
  return data;
}

function fmtTime(ts) {
  const n = Number(ts || 0);
  if (!n) return "-";
  return new Date(n * 1000).toLocaleString();
}

function mapOrderStatus(status) {
  const s = String(status || "").toLowerCase();
  if (s === "paid" || s === "success") return "已支付";
  if (s === "pending") return "待支付";
  if (s === "failed") return "支付失败";
  if (s === "cancelled") return "已取消";
  if (s === "closed") return "已关闭";
  return status || "-";
}

function mapChannel(channel) {
  const c = String(channel || "").toLowerCase();
  if (c === "wechat") return "微信支付";
  if (c === "alipay") return "支付宝";
  if (c === "stripe") return "Stripe";
  return channel || "-";
}

function formatDetail(detail) {
  if (!detail || typeof detail !== "object") return "-";
  const rows = [];
  if (detail.source_chars) rows.push(`原文${detail.source_chars}字`);
  if (detail.body_chars) rows.push(`正文${detail.body_chars}字`);
  if (detail.title_chars) rows.push(`标题${detail.title_chars}字`);
  if (detail.summary_chars) rows.push(`摘要${detail.summary_chars}字`);
  if (detail.image_count) rows.push(`图片${detail.image_count}张`);
  if (detail.prompt_tokens) rows.push(`输入Token:${detail.prompt_tokens}`);
  if (detail.completion_tokens) rows.push(`输出Token:${detail.completion_tokens}`);
  if (detail.total_tokens) rows.push(`总Token:${detail.total_tokens}`);
  if (detail.model) rows.push(`模型:${detail.model}`);
  if (detail.image_model) rows.push(`生图模型:${detail.image_model}`);
  if (detail.image_price_package_images && detail.image_price_package_cny) {
    rows.push(`图片计价:${detail.image_price_package_images}张=${Number(detail.image_price_package_cny).toFixed(2)}元`);
  }
  if (detail.credits_rule) rows.push(`规则:${detail.credits_rule}`);
  if (detail.billed_basis === "usage_tokens") rows.push("按真实Token计费");
  if (detail.billed_basis === "char_estimate") rows.push("按字符估算计费");
  if (detail.paid_amount_cny) rows.push(`实付¥${Number(detail.paid_amount_cny).toFixed(2)}`);
  if (detail.external_txn_id) rows.push(`交易号:${detail.external_txn_id}`);
  if (detail.credit_source && typeof detail.credit_source === "object") {
    const seat = Number(detail.credit_source.seat || 0);
    const shared = Number(detail.credit_source.shared || 0);
    rows.push(`抵扣来源:席位${seat}/共享${shared}`);
  }
  return rows.length ? rows.join(" ｜ ") : "-";
}

function renderRechargeRecords(records) {
  const el = $("rechargeRecords");
  if (!el) return;
  const list = Array.isArray(records) ? records : [];
  if (!list.length) {
    el.innerHTML = '<p class="muted small">暂无充值记录</p>';
    return;
  }
  const rows = list
    .map((r) => {
      const statusText = mapOrderStatus(r.status);
      const statusClass =
        statusText === "已支付"
          ? "paid"
          : statusText === "待支付"
            ? "pending"
            : statusText === "支付失败"
              ? "failed"
              : "closed";
      return `<tr>
        <td class="mono">${r.order_no || "-"}</td>
        <td><span class="billing-badge ${statusClass}">${statusText}</span></td>
        <td>${mapChannel(r.channel)}</td>
        <td>${Number(r.token_amount || 0)}</td>
        <td>¥${Number(r.amount_cny || 0).toFixed(2)}</td>
        <td>${fmtTime(r.created_at)}</td>
        <td>${r.paid_at ? fmtTime(r.paid_at) : "-"}</td>
        <td>${
          statusText === "待支付"
            ? `<button class="primary pay-now-btn" data-order-no="${r.order_no || ""}" type="button">立即支付</button>`
            : "-"
        }</td>
      </tr>`;
    })
    .join("");
  el.innerHTML = `<table class="billing-table">
    <thead>
      <tr>
        <th>订单号</th>
        <th>状态</th>
        <th>渠道</th>
        <th>Credits</th>
        <th>金额</th>
        <th>创建时间</th>
        <th>支付时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>${rows}</tbody>
  </table>`;
}

function renderConsumeRecords(records) {
  const el = $("consumeRecords");
  if (!el) return;
  const list = Array.isArray(records) ? records : [];
  if (!list.length) {
    el.innerHTML = '<p class="muted small">暂无消费记录</p>';
    return;
  }
  const kindTextMap = {
    trial_grant: "试用赠送",
    paid_recharge: "充值到账",
    manual_recharge: "手动充值",
    rewrite: "AI改写",
    cover_generate: "封面生成",
    poster_generate: "段落海报",
    usage: "模型调用",
  };
  const rows = list
    .map((r) => {
      const kindText = kindTextMap[r.kind] || r.kind || "-";
      const delta = `${r.direction === "out" ? "-" : "+"}${Number(r.token_change || 0)}`;
      const ref = `${r.ref_type || "-"} ${r.ref_id || ""}`.trim();
      const detail = formatDetail(r.detail);
      return `<tr>
        <td>${kindText}</td>
        <td class="${r.direction === "out" ? "out" : "in"}">${delta}</td>
        <td>${Number(r.balance_after || 0)}</td>
        <td>${ref}</td>
        <td>${detail}</td>
        <td>${fmtTime(r.created_at)}</td>
      </tr>`;
    })
    .join("");
  el.innerHTML = `<table class="billing-table">
    <thead>
      <tr>
        <th>类型</th>
        <th>Credits变动</th>
        <th>余额</th>
        <th>关联</th>
        <th>明细</th>
        <th>时间</th>
      </tr>
    </thead>
    <tbody>${rows}</tbody>
  </table>`;
}

async function refreshBilling() {
  const data = await fetch("/api/billing/overview").then((r) => r.json());
  if (!data.ok) throw new Error(data.detail || "账单加载失败");
  renderRechargeRecords(data.recharge_records || []);
  renderConsumeRecords(data.consume_records || []);
}

const createRechargeOrderBtn = $("createRechargeOrderBtn");
const refreshBillingBtn = $("refreshBillingBtn");
const logoutBtn = $("logoutBtn");
const billingRechargeTokensInput = $("billingRechargeTokens");
const billingRechargeAmountInput = $("billingRechargeAmount");

function packageRate() {
  const credits = Number((billingRechargeTokensInput && billingRechargeTokensInput.dataset.packageCredits) || "1500");
  const amount = Number((billingRechargeAmountInput && billingRechargeAmountInput.dataset.packageAmount) || "19.9");
  return {
    packageCredits: Number.isFinite(credits) && credits > 0 ? credits : 1500,
    packageAmount: Number.isFinite(amount) && amount > 0 ? amount : 19.9,
  };
}

function syncBillingAmount() {
  if (!billingRechargeTokensInput || !billingRechargeAmountInput) return;
  const credits = Number((billingRechargeTokensInput.value || "0").trim());
  if (!Number.isFinite(credits) || credits <= 0) return;
  const { packageCredits, packageAmount } = packageRate();
  const amount = (credits / packageCredits) * packageAmount;
  billingRechargeAmountInput.value = amount.toFixed(2);
}

if (billingRechargeTokensInput) billingRechargeTokensInput.addEventListener("input", syncBillingAmount);
if (billingRechargeAmountInput) billingRechargeAmountInput.readOnly = true;

if (createRechargeOrderBtn) {
  createRechargeOrderBtn.addEventListener("click", async () => {
    setLoading(createRechargeOrderBtn, true, "创建充值订单", "创建中...");
    try {
      const tokens = Number((($("billingRechargeTokens") && $("billingRechargeTokens").value) || "0").trim());
      const amount = Number((($("billingRechargeAmount") && $("billingRechargeAmount").value) || "0").trim());
      if (!Number.isFinite(tokens) || tokens <= 0) {
        setStatus("请输入正确的充值 Credits 数量", true);
        return;
      }
      if (!Number.isFinite(amount) || amount <= 0) {
        setStatus("请输入正确的支付金额", true);
        return;
      }
      const out = await postJSON("/api/pay/wechat/", {
        tokens: Math.round(tokens),
        amount_cny: Number(amount.toFixed(2)),
        channel: "wechat",
      });
      if (!out.ok) {
        setStatus(out.detail || "创建订单失败", true);
        return;
      }
      const orderNo = out.order && out.order.order_no ? out.order.order_no : "";
      if (out.pay_url) {
        openPayLink(out.pay_url);
      } else {
        importantNotice("订单已创建，但未获取到支付链接，请检查支付网关配置。", "支付链接缺失");
      }
      setStatus(`订单已创建：${orderNo}`);
      await refreshBilling();
    } catch (e) {
      setStatus(e.message || "创建订单失败", true);
    } finally {
      setLoading(createRechargeOrderBtn, false, "创建充值订单", "创建中...");
    }
  });
}

const rechargeRecordsWrap = $("rechargeRecords");
if (rechargeRecordsWrap) {
  rechargeRecordsWrap.addEventListener("click", async (evt) => {
    const btn = evt.target && evt.target.closest ? evt.target.closest(".pay-now-btn") : null;
    if (!btn) return;
    const orderNo = (btn.getAttribute("data-order-no") || "").trim();
    if (!orderNo) return;
    setLoading(btn, true, "立即支付", "拉起中...");
    try {
      const out = await postJSON("/api/billing/recharge/pay-now", { order_no: orderNo });
      if (!out.ok) {
        setStatus(out.detail || "拉起支付失败", true);
        await refreshBilling();
        return;
      }
      if (out.pay_url) {
        openPayLink(out.pay_url);
      } else {
        importantNotice("未获取到支付链接，请检查支付网关配置。", "立即支付失败");
      }
      setStatus(`订单 ${orderNo} 已拉起支付。`);
      await refreshBilling();
    } catch (e) {
      setStatus(e.message || "拉起支付失败", true);
      await refreshBilling();
    } finally {
      setLoading(btn, false, "立即支付", "拉起中...");
    }
  });
}

if (refreshBillingBtn) {
  refreshBillingBtn.addEventListener("click", async () => {
    setLoading(refreshBillingBtn, true, "刷新账单记录", "刷新中...");
    try {
      await refreshBilling();
      setStatus("账单已刷新。");
    } catch (e) {
      setStatus(e.message || "账单刷新失败", true);
    } finally {
      setLoading(refreshBillingBtn, false, "刷新账单记录", "刷新中...");
    }
  });
}

if (logoutBtn) {
  logoutBtn.addEventListener("click", async () => {
    try {
      await postJSON("/api/auth/logout", {});
    } finally {
      window.location.href = "/auth?next=/";
    }
  });
}

(async () => {
  const me = await authMe();
  if (!me) return;
  syncBillingAmount();
  await refreshBilling();
})();