/* =============================================================
 *  GM Pay — payment.js
 *  后端对接只需关注:
 *    1. CONFIG.api.supportedAssets — 获取支持的网络和币种
 *    2. CONFIG.api.selectMethod    — Step 1 确认接口（POST 币种/网络，返回收款地址）
 *    3. CONFIG.api.checkStatus     — 轮询接口 URL
 *    4. CONFIG.api.statusMap       — 状态码映射
 *    5. index.html 底部 <script> 中 ORDER 变量
 * ============================================================= */

'use strict';

// ── DOM helpers ───────────────────────────────────────────────
const $ = (id) => document.getElementById(id);
const $$ = (sel) => document.querySelectorAll(sel);
const setText = (id, value) => {
  const el = $(id);
  if (el) el.textContent = value;
  return el;
};
const setHtml = (id, value) => {
  const el = $(id);
  if (el) el.innerHTML = value;
  return el;
};

// ── API 错误码映射 ────────────────────────────────────────────
const API_ERRORS = {
  400:   { en: 'System error',                             zh: '系统错误',               'zh-hk': '系統錯誤',              ja: 'システムエラー',                        ko: '시스템 오류',                  ru: 'Системная ошибка' },
  401:   { en: 'Signature / authentication failed',        zh: '签名/认证失败',           'zh-hk': '簽名/認證失敗',          ja: '署名/認証に失敗しました',               ko: '서명/인증 실패',               ru: 'Ошибка подписи / аутентификации' },
  10001: { en: 'Wallet address already exists',            zh: '钱包地址已存在',          'zh-hk': '錢包地址已存在',         ja: 'ウォレットアドレスが既に存在します',    ko: '지갑 주소가 이미 존재합니다',  ru: 'Адрес кошелька уже существует' },
  10002: { en: 'Order already exists',                     zh: '订单已存在',              'zh-hk': '訂單已存在',             ja: '注文が既に存在します',                  ko: '주문이 이미 존재합니다',       ru: 'Заказ уже существует' },
  10003: { en: 'No wallet address available',              zh: '无可用钱包地址',          'zh-hk': '無可用錢包地址',         ja: '利用可能なウォレットアドレスがありません', ko: '사용 가능한 지갑 주소 없음', ru: 'Нет доступного адреса кошелька' },
  10004: { en: 'Invalid payment amount',                   zh: '无效支付金额',            'zh-hk': '無效支付金額',           ja: '無効な支払い金額',                      ko: '유효하지 않은 결제 금액',      ru: 'Недопустимая сумма платежа' },
  10005: { en: 'No available amount channel',              zh: '无可用金额通道',          'zh-hk': '無可用金額通道',         ja: '利用可能な金額チャンネルがありません',  ko: '사용 가능한 금액 채널 없음',   ru: 'Нет доступного канала суммы' },
  10006: { en: 'Exchange rate calculation failed',         zh: '汇率计算失败',            'zh-hk': '匯率計算失敗',           ja: '為替レート計算に失敗しました',          ko: '환율 계산 실패',               ru: 'Ошибка расчёта курса' },
  10007: { en: 'Block transaction already processed',      zh: '区块交易已处理',          'zh-hk': '區塊交易已處理',         ja: 'ブロックトランザクションは処理済みです', ko: '블록 트랜잭션이 이미 처리됨', ru: 'Транзакция блока уже обработана' },
  10008: { en: 'Order not found',                          zh: '订单不存在',              'zh-hk': '訂單不存在',             ja: '注文が見つかりません',                  ko: '주문 없음',                    ru: 'Заказ не найден' },
  10009: { en: 'Request parameter parsing failed',         zh: '请求参数解析失败',        'zh-hk': '請求參數解析失敗',       ja: 'リクエストパラメータの解析に失敗',      ko: '요청 매개변수 파싱 실패',      ru: 'Ошибка разбора параметров запроса' },
  10010: { en: 'Order status has changed',                 zh: '订单状态已变更',          'zh-hk': '訂單狀態已變更',         ja: '注文ステータスが変更されました',        ko: '주문 상태가 변경됨',           ru: 'Статус заказа изменился' },
  10011: { en: 'Sub-order quantity exceeded',              zh: '子订单数量超限',          'zh-hk': '子訂單數量超限',         ja: 'サブ注文数が超過しました',              ko: '하위 주문 수량 초과',          ru: 'Превышено количество подзаказов' },
  10012: { en: 'Cannot switch network for sub-orders',     zh: '不能对子订单切换网络',    'zh-hk': '不能對子訂單切換網絡',   ja: 'サブ注文のネットワーク切替不可',        ko: '하위 주문에 네트워크 전환 불가', ru: 'Нельзя переключить сеть для подзаказов' },
  10013: { en: 'Order is not in pending payment status',   zh: '订单不是待支付状态',      'zh-hk': '訂單不是待支付狀態',     ja: '注文は支払い待ち状態ではありません',    ko: '주문이 결제 대기 상태가 아님', ru: 'Заказ не в статусе ожидания оплаты' },
};

/**
 * 根据 API 错误码返回当前语言的提示文字；未匹配时返回 null
 * @param {number|string|null|undefined} code
 * @returns {string|null}
 */
function getApiErrorMsg(code) {
  if (code == null) return null;
  const map = API_ERRORS[Number(code)];
  if (!map) return null;
  return map[currentLang] ?? map.en;
}

/** API 业务异常（区别于网络异常），携带错误码 */
class ApiError extends Error {
  constructor(code, message) { super(message); this.code = code; }
}

/** 错误码 → 终态面板映射；命中即跳转面板，不弹 toast */
const _TERMINAL_ERROR_CODES = {
  10008: 'not-found',   // 订单不存在
  10010: 'expired',     // 订单状态已变更
  10013: 'not-found',   // 订单不是待支付状态
};

/**
 * 统一 API 请求：发送 → 解析 JSON → 校验业务码 → 返回 data
 * 业务异常抛 ApiError，网络/超时异常原样冒泡
 */
async function apiFetch(url, opts = {}) {
  const { timeout = 10000, ...fetchOpts } = opts;
  fetchOpts.headers = { Accept: 'application/json', ...fetchOpts.headers };
  if (!fetchOpts.signal) fetchOpts.signal = AbortSignal.timeout(timeout);
  const res  = await fetch(url, fetchOpts);
  const resp = await res.json().catch(() => null);
  if (!res.ok || (resp?.code != null && resp.code !== 200)) {
    const code = resp?.code ? Number(resp.code) : res.status;
    throw new ApiError(code, getApiErrorMsg(code) ?? resp?.msg ?? `HTTP ${res.status}`);
  }
  return resp?.data ?? resp;
}

/**
 * 统一处理 API 异常：终态错误码 → 跳转面板；其余 → 弹 toast
 * @returns {boolean} true = 终态，已跳转面板
 */
function handleApiError(err) {
  const panel = (err instanceof ApiError) && _TERMINAL_ERROR_CODES[err.code];
  if (panel) { _enterTerminalState(panel); return true; }
  console.error('[API]', err);
  showToast('⚠ ' + (err.message || t('network_timeout')));
  return false;
}

// ── 全局配置（可按项目调整）─────────────────────────────────
const CONFIG = {
  poll: {
    interval:  5000,   // 轮询间隔（毫秒）
    maxErrors: 5,      // 最多连续错误次数，超出进入 timeout 状态
    timeout:   8000,   // 单次请求超时（毫秒）
  },
  redirect: {
    delay: 3000,       // 支付成功后自动跳转延迟（毫秒）
  },
  // ---- 后端接口 ----
  api: {
    // 获取支持的网络和币种
    supportedAssets: () => '/payments/gmpay/v1/supported-assets',
    // 切换网络接口：POST { trade_id, token, network }，返回完整订单对象
    selectMethod: () => '/pay/switch-network',
    // 轮询接口：GET，返回 { data: { status: number } }
    checkStatus: (tradeId) => `/pay/check-status/${encodeURIComponent(tradeId)}`,
    // status 状态码映射
    statusMap: {
      paid:    2,   // 支付成功
      expired: 3,   // 已过期
    },
  },
  // ---- 连接钱包 ----
  wallet: {
    enabled: false,   // false = 隐藏「连接钱包支付」按钮
    // TronLink deeplink，如需支持其他钱包替换此处
    deeplink: (currentUrl) => {
      const param = JSON.stringify({
        url:       currentUrl,
        action:    'open',
        dapp_name: 'GM Pay',
        dapp_icon: 'https://www.gmwallet.app/favicon.png',
      });
      return 'tronlinkoutside://pull.activity?param=' + encodeURIComponent(param);
    },
  },
};


// ═══════════════════════════════════════════════════════════════
//  SECTION 1 — 链图标 / 网络渲染
// ═══════════════════════════════════════════════════════════════

const _CHAIN_PRESETS = {
  Ethereum: { bg: 'hsla(0,0%,55%,0.25)',     color: 'hsla(0,0%,55%,1)',     icon: 'ethereum' },
  Solana:   { bg: 'hsla(256,85%,65%,0.25)',  color: 'hsla(256,85%,65%,1)',  icon: 'solana'   },
  BSC:      { bg: 'hsla(46,91%,49%,0.25)',   color: 'hsla(46,91%,49%,1)',   icon: 'bsc'      },
  Arbitrum: { bg: 'hsla(202,100%,54%,0.25)', color: 'hsla(202,100%,54%,1)', icon: 'arbitrum' },
  TRON:     { bg: 'hsla(350,100%,47%,0.20)', color: 'hsla(350,100%,47%,1)', icon: 'tron'     },
  Polygon:  { bg: 'hsla(263,73%,56%,0.25)',  color: 'hsla(263,73%,56%,1)',  icon: 'polygon'  },
  Base:     { bg: 'hsla(240,100%,61%,0.25)', color: 'hsla(240,100%,61%,1)', icon: 'base'     },
  OP:       { bg: 'hsla(353,99%,51%,0.25)',  color: 'hsla(353,99%,51%,1)',  icon: 'op'       },
  HyperEVM: { bg: 'hsla(166,94%,79%,0.20)', color: 'hsla(166,94%,79%,1)',  icon: 'hyperevm' },
  Plasma:   { bg: 'hsla(166,64%,32%,0.25)',  color: 'hsla(166,64%,32%,1)',  icon: 'plasma'   },
  Bitcoin:  { bg: 'hsla(33,93%,54%,0.20)',   color: 'hsla(33,93%,54%,1)',   icon: 'bitcoin'  },
  Binance:  { bg: 'hsla(46,91%,49%,0.24)',   color: 'hsla(46,91%,49%,1)',   icon: 'binance'  },
};

const _CHAIN_ALIASES = {
  evm:'Ethereum', eth:'Ethereum', ethereum:'Ethereum',
  bsc:'BSC', bnb:'BSC',
  arbitrum:'Arbitrum', arb:'Arbitrum',
  sol:'Solana', solana:'Solana',
  tron:'TRON', trx:'TRON',
  polygon:'Polygon', matic:'Polygon', pol:'Polygon',
  base:'Base',
  op:'OP', optimism:'OP',
  hyperevm:'HyperEVM', hyperliquid:'HyperEVM', hype:'HyperEVM',
  plasma:'Plasma', xpl:'Plasma',
  bitcoin:'Bitcoin', btc:'Bitcoin',
  binance:'Binance', bnb_chain:'Binance',
};

const IMAGE_PREFIX = {
  chain: '/static/images/',
  token: 'https://cdn.jsdmirror.com/gh/atomiclabs/cryptocurrency-icons@1a63530/128/color/',
};

function _resolveChain(name) {
  if (!name) return null;
  const k = name.trim().toLowerCase();
  const canonical = _CHAIN_ALIASES[k] || Object.keys(_CHAIN_PRESETS).find(c => c.toLowerCase() === k);
  return canonical ? { label: canonical, ..._CHAIN_PRESETS[canonical] } : null;
}

/** 用于 order-info 顶部的网络 tag badge */
function networkTag(network) {
  const chain = _resolveChain(network);
  if (!chain) return `<span style="font-weight:600;color:var(--card-foreground)">${network}</span>`;
  return `<span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 4px;border-radius:99px;background:${chain.bg};color:${chain.color};font-size:12px;font-weight:600;line-height:1.6">
    <img src="${IMAGE_PREFIX.chain}${chain.icon}.png" width="14" height="14" style="width:14px;height:14px;border-radius:50%;object-fit:cover;flex-shrink:0" />
    ${chain.label}
  </span>`;
}

/** 选择器触发器显示：网络 */
function _networkTriggerHtml(network) {
  const chain = _resolveChain(network);
  if (!chain) return `<span class="text-sm font-semibold" style="color:var(--card-foreground)">${network || '--'}</span>`;
  return `<span style="display:inline-flex;align-items:center;gap:7px">
    <img src="${IMAGE_PREFIX.chain}${chain.icon}.png" width="18" height="18" style="width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0" />
    <span class="text-sm font-semibold" style="color:var(--card-foreground)">${chain.label}</span>
  </span>`;
}

/** 选择器触发器显示：Token */
function _tokenTriggerHtml(token) {
  if (!token) return `<span class="text-sm font-semibold" style="color:var(--card-foreground)">--</span>`;
  const src = `${IMAGE_PREFIX.token}${token.toLowerCase()}.png`;
  return `<span style="display:inline-flex;align-items:center;gap:7px">
    <img src="${src}" width="18" height="18" style="width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0" onerror="this.style.display='none'" />
    <span class="text-sm font-semibold" style="color:var(--card-foreground)">${token}</span>
  </span>`;
}

/** 下拉菜单中的网络选项 */
function _networkMenuItemHtml(opt, selected) {
  const chain = _resolveChain(opt.network);
  const icon = chain
    ? `<img src="${IMAGE_PREFIX.chain}${chain.icon}.png" width="16" height="16" style="width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0" />`
    : '';
  return `<div class="select-option menu-item${selected ? ' is-selected' : ''}"
    onclick="step1SetNetwork('${opt.network}')"
    style="display:flex;align-items:center;gap:8px">${icon}${chain ? chain.label : opt.network}</div>`;
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 2 — 主题 & Lucide 图标
// ═══════════════════════════════════════════════════════════════

if (typeof lucide !== 'undefined') lucide.createIcons();

let currentTheme = localStorage.getItem('theme') || 'dark';
applyTheme(currentTheme);

function applyTheme(t) {
  currentTheme = t;
  document.documentElement.setAttribute('data-theme', t);
  localStorage.setItem('theme', t);
  const moon = $('icon-moon'); if (moon) moon.style.display = t === 'light' ? 'block' : 'none';
  const sun  = $('icon-sun');  if (sun)  sun.style.display  = t === 'dark'  ? 'block' : 'none';
}

function toggleTheme(e) {
  const next = currentTheme === 'light' ? 'dark' : 'light';
  if (!document.startViewTransition) { applyTheme(next); return; }
  const x = e ? e.clientX : window.innerWidth / 2;
  const y = e ? e.clientY : window.innerHeight / 2;
  const r = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
  document.startViewTransition(() => applyTheme(next)).ready.then(() => {
    document.documentElement.animate(
      { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${r}px at ${x}px ${y}px)`] },
      { duration: 420, easing: 'ease-in-out', pseudoElement: '::view-transition-new(root)' }
    );
  });
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 3 — 国际化 (i18n)
// ═══════════════════════════════════════════════════════════════

const LANGS = {
  en: {
    scan_title:          'Scan or copy address to pay',
    amount_to_pay:       'Amount to pay',
    payment_address:     'Payment address',
    i_have_transferred:  'I have transferred',
    checking_blockchain: 'Checking blockchain…',
    expires:             'Expires',
    copied:              'Copied to clipboard',
    verifying:           'Verifying…',
    payment_success:     'Payment Successful',
    redirecting:         'Redirecting…',
    payment_expired:     'Payment Expired',
    expired_sub:         'Please initiate a new payment',
    order_id:            'Order ID',
    order_amount:        'Order amount',
    network_timeout:     'Connection Timeout',
    timeout_sub:         'Unable to connect to the payment server',
    retry:               'Retry',
    back:                'Back',
    order_not_found:     'Order Not Found',
    not_found_sub:       'The order does not exist or has already expired',
    select_method:       'Select payment method',
    currency_label:      'Currency',
    network_label:       'Network',
    confirm:             'Confirm',
    connect_wallet:      'Connect Wallet to Pay',
  },
  zh: {
    scan_title:          '扫码或复制地址付款',
    amount_to_pay:       '付款金额',
    payment_address:     '付款地址',
    i_have_transferred:  '我已转账',
    checking_blockchain: '链上核验中…',
    expires:             '到期时间',
    copied:              '已复制到剪贴板',
    verifying:           '核验中…',
    payment_success:     '支付成功',
    redirecting:         '正在跳转…',
    payment_expired:     '支付已过期',
    expired_sub:         '请重新发起支付',
    order_id:            '订单 ID',
    order_amount:        '订单金额',
    network_timeout:     '连接超时',
    timeout_sub:         '无法连接至支付服务器',
    retry:               '重试',
    back:                '返回',
    order_not_found:     '订单不存在',
    not_found_sub:       '待支付订单不存在或已过期',
    select_method:       '选择支付方式',
    currency_label:      '币种',
    network_label:       '网络',
    confirm:             '确认',
    connect_wallet:      '连接钱包支付',
  },
  ja: {
    scan_title:          'アドレスをスキャンまたはコピーして支払う',
    amount_to_pay:       '支払い金額',
    payment_address:     '支払いアドレス',
    i_have_transferred:  '送金しました',
    checking_blockchain: 'ブロックチェーン確認中…',
    expires:             '有効期限',
    copied:              'コピーしました',
    verifying:           '確認中…',
    payment_success:     '支払い完了',
    redirecting:         'リダイレクト中…',
    payment_expired:     '支払い期限切れ',
    expired_sub:         '新しい支払いを開始してください',
    order_id:            '注文 ID',
    order_amount:        '注文金額',
    network_timeout:     '接続タイムアウト',
    timeout_sub:         '支払いサーバーに接続できません',
    retry:               '再試行',
    back:                '戻る',
    order_not_found:     '注文が見つかりません',
    not_found_sub:       '注文が存在しないか、すでに期限切れです',
    select_method:       '支払い方法を選択',
    currency_label:      '通貨',
    network_label:       'ネットワーク',
    confirm:             '確認',
    connect_wallet:      'ウォレットで支払う',
  },
  ko: {
    scan_title:          '주소를 스캔하거나 복사하여 결제',
    amount_to_pay:       '결제 금액',
    payment_address:     '결제 주소',
    i_have_transferred:  '이체 완료',
    checking_blockchain: '블록체인 확인 중…',
    expires:             '만료 시간',
    copied:              '복사됨',
    verifying:           '확인 중…',
    payment_success:     '결제 성공',
    redirecting:         '리다이렉트 중…',
    payment_expired:     '결제 만료',
    expired_sub:         '새로운 결제를 시작하세요',
    order_id:            '주문 ID',
    order_amount:        '주문 금액',
    network_timeout:     '연결 시간 초과',
    timeout_sub:         '결제 서버에 연결할 수 없습니다',
    retry:               '다시 시도',
    back:                '돌아가기',
    order_not_found:     '주문 없음',
    not_found_sub:       '주문이 존재하지 않거나 이미 만료되었습니다',
    select_method:       '결제 수단 선택',
    currency_label:      '통화',
    network_label:       '네트워크',
    confirm:             '확인',
    connect_wallet:      '지갑으로 결제',
  },
  'zh-hk': {
    scan_title:          '掃碼或複製地址付款',
    amount_to_pay:       '付款金額',
    payment_address:     '付款地址',
    i_have_transferred:  '我已轉帳',
    checking_blockchain: '鏈上核驗中…',
    expires:             '到期時間',
    copied:              '已複製到剪貼簿',
    verifying:           '核驗中…',
    payment_success:     '支付成功',
    redirecting:         '正在跳轉…',
    payment_expired:     '支付已過期',
    expired_sub:         '請重新發起支付',
    order_id:            '訂單 ID',
    order_amount:        '訂單金額',
    network_timeout:     '連線逾時',
    timeout_sub:         '無法連線至支付伺服器',
    retry:               '重試',
    back:                '返回',
    order_not_found:     '訂單不存在',
    not_found_sub:       '待支付訂單不存在或已過期',
    select_method:       '選擇支付方式',
    currency_label:      '幣種',
    network_label:       '網絡',
    confirm:             '確認',
    connect_wallet:      '連接錢包支付',
  },
  ru: {
    scan_title:          'Отсканируйте или скопируйте адрес для оплаты',
    amount_to_pay:       'Сумма к оплате',
    payment_address:     'Адрес для оплаты',
    i_have_transferred:  'Я перевёл',
    checking_blockchain: 'Проверка блокчейна…',
    expires:             'Истекает',
    copied:              'Скопировано',
    verifying:           'Проверка…',
    payment_success:     'Оплата прошла успешно',
    redirecting:         'Перенаправление…',
    payment_expired:     'Срок оплаты истёк',
    expired_sub:         'Пожалуйста, создайте новый платёж',
    order_id:            'Заказ ID',
    order_amount:        'Сумма заказа',
    network_timeout:     'Тайм-аут подключения',
    timeout_sub:         'Не удалось подключиться к серверу',
    retry:               'Повторить',
    back:                'Назад',
    order_not_found:     'Заказ не найден',
    not_found_sub:       'Заказ не существует или уже истёк',
    select_method:       'Выберите способ оплаты',
    currency_label:      'Валюта',
    network_label:       'Сеть',
    confirm:             'Подтвердить',
    connect_wallet:      'Оплатить через кошелёк',
  },
};

const LANG_LABELS    = { en: 'EN', zh: '中文', 'zh-hk': '繁體', ja: '日本語', ko: '한국어', ru: 'RU' };
const SUPPORTED_LANGS = Object.keys(LANGS);
let currentLang = 'en';

const t = (key) => LANGS[currentLang]?.[key] ?? key;

function detectLang() {
  const saved = localStorage.getItem('lang');
  if (saved && SUPPORTED_LANGS.includes(saved)) return saved;
  for (const nav of (navigator.languages || [navigator.language])) {
    const lc = nav.toLowerCase();
    if (lc.startsWith('zh-hk') || lc.startsWith('zh-tw') || lc.startsWith('zh-mo')) return 'zh-hk';
    if (lc.startsWith('zh')) return 'zh';
    if (lc.startsWith('ja')) return 'ja';
    if (lc.startsWith('ko')) return 'ko';
    if (lc.startsWith('ru')) return 'ru';
    if (lc.startsWith('en')) return 'en';
  }
  return 'en';
}

function setLang(lang) {
  currentLang = lang;
  localStorage.setItem('lang', lang);
  $$('[data-i18n]').forEach(el => {
    const v = t(el.dataset.i18n);
    if (v) el.textContent = v;
  });
  setText('lang-label', LANG_LABELS[lang]);
  $$('#dd-lang-menu .select-option').forEach(o =>
    o.classList.toggle('is-selected', o.dataset.lang === lang));
  closeAllSelects();
  // 重新渲染含翻译文案的动态行
  renderOrderCard();
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 4 — 下拉选择器
// ═══════════════════════════════════════════════════════════════

function toggleSelect(id) {
  const wrap    = $(id);
  const trigger = wrap.querySelector('.select-trigger');
  const menu    = wrap.querySelector('.select-menu');
  const wasOpen = menu.classList.contains('is-open');
  closeAllSelects();
  if (!wasOpen) {
    menu.classList.add('is-open');
    trigger?.classList.add('is-open');
  }
}

function closeAllSelects() {
  $$('.select-menu.is-open').forEach(m => {
    m.classList.remove('is-open');
    m.closest('.select-wrap')?.querySelector('.select-trigger')?.classList.remove('is-open');
  });
}

document.addEventListener('click', (e) => {
  if (!e.target.closest('.select-wrap')) closeAllSelects();
});


// ═══════════════════════════════════════════════════════════════
//  SECTION 5 — Toast & Clipboard
// ═══════════════════════════════════════════════════════════════

const CHECK_ICON = '<i data-lucide="check" width="15" height="15" stroke-width="2.5" color="#22c55e"></i>';

function showToast(msg) {
  const el = $('toast');
  if (!el) return;
  el.textContent = msg || t('copied');
  el.style.opacity   = '1';
  el.style.transform = 'translateX(-50%) translateY(0)';
  clearTimeout(el._tid);
  el._tid = setTimeout(() => {
    el.style.opacity   = '0';
    el.style.transform = 'translateX(-50%) translateY(10px)';
  }, 2000);
}

function flashCheck(btnId) {
  const btn = $(btnId);
  if (!btn) return;
  const orig = btn.innerHTML;
  btn.innerHTML = CHECK_ICON;
  lucide.createIcons({ nodes: [btn] });
  setTimeout(() => { btn.innerHTML = orig; lucide.createIcons({ nodes: [btn] }); }, 1800);
}

let _clipboard = null;

function initClipboard() {
  const targets = [
    { id: 'copy-addr-box',   text: ORDER.receiveAddress, iconId: 'btn-copy-addr'   },
    { id: 'btn-copy-amount', text: ORDER.actualAmount,   iconId: 'btn-copy-amount' },
  ];
  targets.forEach(({ id, text }) => $(id)?.setAttribute('data-clipboard-text', text));

  if (typeof ClipboardJS !== 'undefined') {
    _clipboard?.destroy();
    _clipboard = new ClipboardJS(targets.map(c => '#' + c.id).join(', '));
    _clipboard.on('success', e => {
      e.clearSelection();
      const tgt = targets.find(c => c.id === e.trigger.id);
      showToast();
      if (tgt) flashCheck(tgt.iconId);
    });
  }
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 6 — 面板切换 & 导航
// ═══════════════════════════════════════════════════════════════

const PANEL_IDS = {
  step1:       'step1-panel',
  payment:     'payment-panel',
  success:     'screen-success',
  expired:     'screen-expired',
  timeout:     'screen-timeout',
  'not-found': 'screen-not-found',
};
const PANEL_ORDER = ['step1', 'payment', 'success', 'expired', 'timeout', 'not-found'];
let _currentPanel = 'step1';

function slideTo(name, dir) {
  const fromEl   = $(PANEL_IDS[_currentPanel]);
  const toEl     = $(PANEL_IDS[name]);
  const viewport = $('panel-viewport');
  if (!toEl || name === _currentPanel) return;

  const d = dir ?? (PANEL_ORDER.indexOf(name) >= PANEL_ORDER.indexOf(_currentPanel) ? 1 : -1);
  _currentPanel = name;

  if (viewport) viewport.style.overflowX = 'hidden'; // 动画期间裁剪

  if (fromEl) {
    Object.assign(fromEl.style, { position: 'absolute', top: '0', left: '0', width: '100%' });
    fromEl.style.animation = `${d > 0 ? 'slide-out-l' : 'slide-out-r'} 0.38s cubic-bezier(.4,0,.2,1) forwards`;
    fromEl.addEventListener('animationend', () => {
      fromEl.style.cssText = 'display:none';
      if (viewport) viewport.style.overflowX = '';
    }, { once: true });
  } else if (viewport) {
    setTimeout(() => { viewport.style.overflowX = ''; }, 420);
  }

  toEl.style.display   = '';
  toEl.style.animation = `${d > 0 ? 'slide-in-r' : 'slide-in-l'} 0.38s cubic-bezier(.4,0,.2,1) forwards`;
}

function showStatePanel(state) {
  const isNotFound = state === 'not-found';
  const orderInfo = $('order-info');
  const stepProgress = $('step-progress');
  if (orderInfo) orderInfo.style.display = isNotFound ? 'none' : '';
  if (stepProgress) stepProgress.style.display = isNotFound ? 'none' : '';
  slideTo(state);
}

function hideStatePanel() {
  const orderInfo = $('order-info');
  const stepProgress = $('step-progress');
  if (orderInfo) orderInfo.style.display = '';
  if (stepProgress) stepProgress.style.display = '';
  slideTo('payment', -1);
}

function goBack() {
  if (ORDER?.redirectUrl && !ORDER.redirectUrl.startsWith('{{')) {
    window.location.href = ORDER.redirectUrl;
  } else if (document.referrer) {
    window.location.href = document.referrer;
  } else {
    history.back();
  }
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 7 — 步骤进度条
// ═══════════════════════════════════════════════════════════════

function setStepBar(step) {
  const f1 = $('step-fill-1');
  const f2 = $('step-fill-2');
  if (!f1) return;
  const BASE = 'height:100%;border-radius:9999px;background:var(--foreground);';
  if (step === 1) {
    f1.style.cssText = BASE + 'animation:fill-bar 0.9s ease-out forwards';
    f2.style.cssText = BASE + 'width:0%';
  } else {
    f1.style.cssText = BASE + 'width:100%';
    f2.style.cssText = BASE + 'animation:fill-bar 0.9s ease-out forwards';
  }
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 8 — Step 1 — 币种 & 网络选择
// ═══════════════════════════════════════════════════════════════

/**
 * 从后端获取支持的网络和币种，转换为 PAYMENT_OPTIONS 格式
 * @returns {Array|null} 成功返回选项数组，失败返回 null
 */
async function fetchSupportedAssets() {
  try {
    const data = await apiFetch(CONFIG.api.supportedAssets());
    if (!data?.supports?.length) return null;
    return data.supports.flatMap(s => s.tokens.map(token => ({ token, network: s.network })));
  } catch (e) {
    console.warn('[supportedAssets]', e);
    return null;
  }
}

let _step1Token = null;
let _step1Opt   = null;

function initStep1() {
  _step1Opt   = PAYMENT_OPTIONS[0];
  _step1Token = _step1Opt.token;
  _renderNetworkMenu();
  _renderTokenMenu();
}

function _renderTokenMenu() {
  // 按当前选中网络过滤可用币种
  const opts = PAYMENT_OPTIONS.filter(o => o.network === _step1Opt?.network);
  const tokens = [...new Set(opts.map(o => o.token))];
  // 若当前 token 在新网络下不存在则重置为第一个
  if (!tokens.includes(_step1Token)) {
    _step1Token = tokens[0] ?? null;
    _step1Opt   = opts[0] ?? _step1Opt;
  }
  const menu = $('dd-token-menu');
  if (!menu) return;
  menu.innerHTML = tokens.map(tok => {
    const src = `${IMAGE_PREFIX.token}${tok.toLowerCase()}.png`;
    return `<div class="select-option menu-item${tok === _step1Token ? ' is-selected' : ''}"
      onclick="step1SetToken('${tok}')"
      style="display:flex;align-items:center;gap:8px">
      <img src="${src}" width="16" height="16" style="width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0" onerror="this.style.display='none'" />
      ${tok}
    </div>`;
  }).join('');
  setHtml('token-label', _tokenTriggerHtml(_step1Token));
}

function _renderNetworkMenu() {
  // 去重，每个网络只显示一项
  const seen = new Set();
  const networkOpts = PAYMENT_OPTIONS.filter(o => {
    if (seen.has(o.network)) return false;
    seen.add(o.network);
    return true;
  });
  const menu = $('dd-network-menu');
  if (menu) menu.innerHTML = networkOpts.map(opt => _networkMenuItemHtml(opt, opt.network === _step1Opt?.network)).join('');
  setHtml('network-label', _networkTriggerHtml(_step1Opt?.network || '--'));
}

function step1SetToken(tok) {
  _step1Token = tok;
  // 在当前网络下找对应 opt
  _step1Opt = PAYMENT_OPTIONS.find(o => o.network === _step1Opt?.network && o.token === tok) ?? _step1Opt;
  setHtml('token-label', _tokenTriggerHtml(tok));
  $$('#dd-token-menu .select-option').forEach(o =>
    o.classList.toggle('is-selected', o.textContent.trim() === tok));
  closeAllSelects();
}

function step1SetNetwork(networkName) {
  // 找该网络下第一个 opt 作为默认
  _step1Opt = PAYMENT_OPTIONS.find(o => o.network === networkName) ?? _step1Opt;
  const chain = _resolveChain(networkName);
  const label = chain ? chain.label : networkName;
  $$('#dd-network-menu .select-option').forEach(o =>
    o.classList.toggle('is-selected', o.textContent.trim() === label));
  setHtml('network-label', _networkTriggerHtml(_step1Opt.network));
  _renderTokenMenu();
  closeAllSelects();
}

/** 用后端返回的订单字段更新 ORDER */
function _applyOrderData(data, opt) {
  ORDER.tradeId = data?.trade_id ?? ORDER.tradeId;
  if (data?.trade_id) {
    const _url = new URL(window.location.href);
    _url.pathname = _url.pathname.replace(/\/[^/]+$/, '/' + encodeURIComponent(data.trade_id));
    history.replaceState(null, '', _url.toString());
    renderOrderCard();
  }
  ORDER.token          = data?.token           ?? opt.token;
  ORDER.network        = data?.network         ?? opt.network;
  ORDER.actualAmount   = data?.actual_amount   != null ? String(data.actual_amount) : ORDER.actualAmount;
  ORDER.amount         = data?.amount          != null ? String(data.amount)         : ORDER.amount;
  ORDER.currency       = data?.currency        ?? ORDER.currency;
  ORDER.receiveAddress = data?.receive_address ?? ORDER.receiveAddress;
  if (data?.expiration_time != null) ORDER.expirationTime = String(data.expiration_time);
  if (data?.created_at      != null) ORDER.createdAt      = String(data.created_at);
  if (data?.redirect_url)            ORDER.redirectUrl    = data.redirect_url;
}

async function confirmStep1() {
  const opt = _step1Opt;
  const btn  = $('btn-confirm-step1');
  const span = btn?.querySelector('span') ?? btn;
  const origText = span?.textContent;

  // 1. 乐观 UI：禁用按钮防止重复提交
  if (btn) { btn.disabled = true; if (span) span.textContent = '…'; }

  try {
    const data = await apiFetch(CONFIG.api.selectMethod(), {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' },
      body:    JSON.stringify({
        trade_id: ORDER.tradeId,
        token:    opt.token.toLowerCase(),
        network:  opt.network.toLowerCase(),
      }),
    });

    _applyOrderData(data, opt);
    setStepBar(2);
    slideTo('payment');
    initOrder();
  } catch (err) {
    handleApiError(err);
  } finally {
    if (btn) { btn.disabled = false; if (span && origText) span.textContent = origText; }
  }
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 9 — 订单渲染 & 倒计时
// ═══════════════════════════════════════════════════════════════

function formatAddr(addr) {
  if (!addr || addr.length <= 10) return addr;
  return `<span style="font-weight:800;color:var(--primary)">${addr.slice(0, 4)}</span>`
       + `<span style="color:var(--muted-foreground)">${addr.slice(4, -6)}</span>`
       + `<span style="font-weight:800;color:var(--primary)">${addr.slice(-6)}</span>`;
}

function renderRow(id, label, value) {
  const el = $(id);
  if (el) el.innerHTML = `
    <td style="width:1%;white-space:nowrap;padding-right:0.75em">${label}</td>
    <td style="color:var(--card-foreground);font-weight:500;word-break:break-all">${value}</td>`;
}

/** 填充订单信息卡片（订单号 + 法币金额行） */
function renderOrderCard() {
  if (ORDER?.tradeId && !ORDER.tradeId.startsWith('{{')) {
    renderRow('display-order-id', t('order_id'), ORDER.tradeId);
  }
  if (ORDER?.amount && !ORDER.amount.startsWith('{{')) {
    renderRow('display-fiat', t('order_amount'), `${ORDER.amount} ${ORDER.currency || ''}`);
  }
}

function initOrder() {
  if (!ORDER?.tradeId || ORDER.tradeId.startsWith('{{')) { showNotFound(); return; }

  setText('display-amount', `${ORDER.actualAmount} ${ORDER.token}`);
  setHtml('field-address', formatAddr(ORDER.receiveAddress));
  setHtml('display-network', networkTag(ORDER.network));
  renderOrderCard();

  const qrcodeEl = $('qrcode');
  if (qrcodeEl) {
    qrcodeEl.innerHTML = ''; // 防止重复调用时叠加渲染
    new QRCode(qrcodeEl, {
      text:         ORDER.receiveAddress,
      width:        176,
      height:       176,
      colorDark:    '#111111',
      colorLight:   '#ffffff',
      correctLevel: QRCode.CorrectLevel.M,
    });
  }

  initCountdown();
  checkOrderStatus();
  initClipboard();
}

// 倒计时内部状态
const CIRCUMFERENCE = 2 * Math.PI * 20;
const _pad = (n) => String(n).padStart(2, '0');
let _countdownInterval = null;
let _totalSeconds      = 0;
let _expiresAt         = null;

function _lerpColor(a, b, ratio) {
  return `rgb(${[0,1,2].map(i => Math.round(a[i] + (b[i] - a[i]) * ratio)).join(',')})`;
}
function _ratioColor(ratio) {
  if (ratio >= 0.5) return '#22c55e';
  if (ratio >= 0.2) return _lerpColor([34,197,94], [249,115,22], (0.5 - ratio) / 0.3);
  return _lerpColor([249,115,22], [239,68,68], (0.2 - ratio) / 0.2);
}

function initCountdown() {
  // 清除上一次的倒计时（initOrder 可能被重复调用）
  if (_countdownInterval) { clearInterval(_countdownInterval); _countdownInterval = null; }
  const parseTime = (raw) => new Date(/^\d+$/.test(String(raw)) ? Number(raw) : raw);
  _expiresAt = parseTime(ORDER.expirationTime);
  const remaining = Math.max(0, Math.round((_expiresAt - Date.now()) / 1000));
  if (remaining <= 0) { showExpired(); return; }

  const created = parseTime(ORDER.createdAt);
  _totalSeconds = (!isNaN(created) && !isNaN(_expiresAt))
    ? Math.max(1, Math.round((_expiresAt - created) / 1000))
    : 600;

  $('ring').style.strokeDasharray = CIRCUMFERENCE;
  _expiresAt = new Date(_expiresAt.getTime() - 1000); // 避免初始渲染停顿
  _tickCountdown();
  _countdownInterval = setInterval(_tickCountdown, 1000);
}

function _tickCountdown() {
  const remaining = Math.max(0, Math.round((_expiresAt - Date.now()) / 1000));
  const h = Math.floor(remaining / 3600);
  const m = Math.floor((remaining % 3600) / 60);
  const s = remaining % 60;
  const timeStr = h > 0 ? `${_pad(h)}:${_pad(m)}:${_pad(s)}` : `${_pad(m)}:${_pad(s)}`;
  const color   = _ratioColor(_totalSeconds > 0 ? remaining / _totalSeconds : 0);
  const offset  = CIRCUMFERENCE * (1 - (_totalSeconds > 0 ? remaining / _totalSeconds : 0));

  const cdEl   = $('countdown');
  const ringEl = $('ring');
  if (cdEl)   { cdEl.textContent = timeStr; cdEl.style.color = color; }
  if (ringEl) { ringEl.style.stroke = color; ringEl.style.strokeDashoffset = offset; }

  const inlineEl = $('countdown-inline');
  if (inlineEl) { inlineEl.textContent = timeStr; inlineEl.style.color = color; }

  if (remaining <= 0) { clearInterval(_countdownInterval); showExpired(); }
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 10 — API 轮询
//  后端对接：修改 CONFIG.api.checkStatus 与 CONFIG.api.statusMap
// ═══════════════════════════════════════════════════════════════

let _pollTimer   = null;
let _pollStopped = false;
let _pollErrors  = 0;

async function checkOrderStatus() {
  if (_pollStopped || !ORDER?.tradeId || ORDER.tradeId.startsWith('{{')) return;

  try {
    const data = await apiFetch(CONFIG.api.checkStatus(ORDER.tradeId), {
      timeout: CONFIG.poll.timeout,
    });
    _pollErrors = 0;
    const { paid, expired } = CONFIG.api.statusMap;
    if (data?.status === paid)         onPaymentSuccess();
    else if (data?.status === expired) showExpired();
    else                               _scheduleNextPoll();
  } catch (err) {
    if (err instanceof ApiError) {
      _pollErrors = 0;
      if (!handleApiError(err)) _scheduleNextPoll();
    } else {
      // 网络 / 超时异常：累计错误次数
      if (++_pollErrors >= CONFIG.poll.maxErrors) showTimeout();
      else _scheduleNextPoll();
    }
  }
}

function _scheduleNextPoll() {
  if (!_pollStopped) _pollTimer = setTimeout(checkOrderStatus, CONFIG.poll.interval);
}

function stopPolling() {
  _pollStopped = true;
  clearTimeout(_pollTimer);
}

/** 重置轮询状态并立即发起一次请求 */
function _resumePolling() {
  _pollErrors  = 0;
  _pollStopped = false;
  clearTimeout(_pollTimer);
  checkOrderStatus();
}

function retryPolling() {
  hideStatePanel();
  _resumePolling();
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 11 — 支付状态处理
// ═══════════════════════════════════════════════════════════════

/** 进入终态面板：停止轮询，可选清除倒计时 / 禁用转账按钮 */
function _enterTerminalState(panel, { clearTimer = true, disableBtn = true } = {}) {
  stopPolling();
  if (clearTimer && _countdownInterval) { clearInterval(_countdownInterval); _countdownInterval = null; }
  if (disableBtn) { const btn = $('btn-transferred'); if (btn) btn.disabled = true; }
  showStatePanel(panel);
}

function onPaymentSuccess() {
  _enterTerminalState('success');
  if (ORDER?.redirectUrl && !ORDER.redirectUrl.startsWith('{{')) {
    setTimeout(() => { window.location.href = ORDER.redirectUrl; }, CONFIG.redirect.delay);
  }
}

function showExpired()  { _enterTerminalState('expired'); }
function showTimeout()  { _enterTerminalState('timeout', { clearTimer: false, disableBtn: false }); }
function showNotFound() { _enterTerminalState('not-found'); }


// ═══════════════════════════════════════════════════════════════
//  SECTION 12 — 转账按钮 & 连接钱包
// ═══════════════════════════════════════════════════════════════

function handleTransfer() {
  const btn  = $('btn-transferred');
  if (!btn) return;
  const span = btn.querySelector('span');
  if (!span) return;
  span.textContent = t('verifying');
  btn.disabled     = true;
  _resumePolling();
  setTimeout(() => {
    span.textContent = t('i_have_transferred');
    btn.disabled     = false;
  }, 4000);
}

function connectWallet() {
  window.location.href = CONFIG.wallet.deeplink(window.location.href);
}


// ═══════════════════════════════════════════════════════════════
//  SECTION 13 — 初始化入口
// ═══════════════════════════════════════════════════════════════

document.addEventListener('DOMContentLoaded', async () => {
  setLang(detectLang());

  if (!ORDER?.tradeId || ORDER.tradeId.startsWith('{{')) {
    showNotFound();
    return;
  }

  // 在 Step 1 阶段就填充订单信息卡片
  renderOrderCard();
  if (ORDER.amount && !ORDER.amount.startsWith('{{')) {
    setText('display-amount', `${ORDER.amount} ${ORDER.currency || ''}`);
  }

  // 从 API 获取支持的网络和币种
  window.PAYMENT_OPTIONS = await fetchSupportedAssets();
  if (!PAYMENT_OPTIONS?.length) return;

  // isselect=true 时跳过 Step 1，直接进入支付面板
  const _isSelect = ORDER.is_selected && ORDER.is_selected !== 'false' && !ORDER.is_selected.startsWith('{{');
  if (_isSelect) {
    $('step1-panel').style.display = 'none';
    $('payment-panel').style.display = '';
    _currentPanel = 'payment';
    setStepBar(2);
    initOrder();
  } else {
    initStep1();
    setStepBar(1);
  }

  // 连接钱包按钮开关
  const walletBtn = $('btn-connect-wallet');
  if (walletBtn) walletBtn.style.display = CONFIG.wallet.enabled ? '' : 'none';
});