(() => {
  const root = document.querySelector('[data-recharge]');
  if (!root) return;

  const packages = Array.from(root.querySelectorAll('[data-recharge-package]'));
  const methodsRoot = root.querySelector('[data-recharge-methods]');
  const methodEmpty = root.querySelector('[data-recharge-method-empty]');
  const payButton = root.querySelector('[data-recharge-pay]');
  const price = root.querySelector('[data-recharge-price]');
  const coins = root.querySelector('[data-recharge-coins]');
  const status = root.querySelector('[data-recharge-status]');
  const rowsRoot = root.querySelector('[data-recharge-rows]');
  const filters = Array.from(root.querySelectorAll('[data-recharge-filter]'));
  const pagination = root.querySelector('[data-recharge-pagination]');
  const pageButtons = root.querySelector('[data-recharge-pages]');
  const previous = root.querySelector('[data-recharge-prev]');
  const next = root.querySelector('[data-recharge-next]');
  const total = root.querySelector('[data-recharge-total]');
  const empty = root.querySelector('[data-recharge-history-empty]');
  const more = root.querySelector('[data-recharge-more]');
  const exportBtn = root.querySelector('[data-recharge-export]');
  const mobile = window.matchMedia('(max-width: 768px)');
  let selectedPackage = null;
  let selectedMethod = '';
  let activeType = 0;
  let currentPage = Number(pagination.dataset.page) || 1;
  let pageSize = Number(pagination.dataset.pageSize) || 5;
  let totalCount = Number(pagination.dataset.total) || 0;
  let expanded = false;

  function showStatus(message, success) {
    status.textContent = message;
    status.hidden = !message;
    status.classList.toggle('is-success', Boolean(success));
  }

  function choose(button, choices) {
    choices.forEach(choice => {
      const isSelected = choice === button;
      choice.classList.toggle('is-selected', isSelected);
      choice.setAttribute('aria-checked', String(isSelected));
    });
  }

  function parseMethods(button) {
    try {
      const parsed = JSON.parse(button.dataset.payMethods || '[]');
      return Array.isArray(parsed) ? parsed : [];
    } catch (_) {
      return [];
    }
  }

  function renderMethods(items) {
    methodsRoot.replaceChildren();
    selectedMethod = '';
    items.forEach((item, index) => {
      const type = String(item.type || '').trim();
      if (!type) return;
      const button = document.createElement('button');
      button.className = 'recharge-method';
      button.type = 'button';
      button.setAttribute('role', 'radio');
      button.dataset.rechargeMethod = type;
      button.innerHTML = '<span class="recharge-method__radio"><img src="/static/images/placeholder.png?v=2" data-src="/static/images/recharge/check.svg" alt="" loading="lazy" decoding="async"></span><span><strong></strong><small>支付成功后到账</small></span>';
      button.querySelector('strong').textContent = item.typeName || type;
      button.addEventListener('click', () => {
        const choices = Array.from(methodsRoot.querySelectorAll('[data-recharge-method]'));
        choose(button, choices);
        selectedMethod = type;
        showStatus('');
      });
      methodsRoot.appendChild(button);
      if (index === 0) {
        button.classList.add('is-selected');
        button.setAttribute('aria-checked', 'true');
        selectedMethod = type;
      } else {
        button.setAttribute('aria-checked', 'false');
      }
    });
    const hasMethod = Boolean(selectedMethod);
    methodEmpty.hidden = hasMethod;
    payButton.disabled = !selectedPackage || !hasMethod;
    if (typeof window.initLazyImages === 'function') {
      window.initLazyImages(methodsRoot);
    }
  }

  function selectPackage(button) {
    selectedPackage = button;
    choose(button, packages);
    price.textContent = button.dataset.price || '—';
    coins.textContent = button.dataset.coins || '—';
    renderMethods(parseMethods(button));
    showStatus('');
  }

  packages.forEach(button => button.addEventListener('click', () => selectPackage(button)));
  const initialPackage = packages.find(button => button.classList.contains('is-selected')) || packages[0];
  if (initialPackage) selectPackage(initialPackage);
  else payButton.disabled = true;

  payButton.addEventListener('click', async () => {
    if (!selectedPackage || !selectedMethod) {
      showStatus('请选择套餐和支付方式');
      return;
    }
    payButton.disabled = true;
    showStatus('正在创建支付订单…');
    const payload = {
      packageId: Number(selectedPackage.dataset.packageId),
      payMode: selectedMethod,
    };
    try {
      let result;
      if (window.HttpRequest && typeof window.HttpRequest.post === 'function') {
        result = await window.HttpRequest.post('/api/coin/buy', payload);
      } else {
        const response = await fetch('/api/coin/buy', {
          method: 'POST',
          credentials: 'same-origin',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify(payload),
        });
        result = await response.json();
      }
      if (!result || Number(result.code) !== 200 || !result.data || !result.data.payUrl) {
        if (result && (Number(result.code) === 401 || Number(result.code) === 1000)) {
          const login = document.querySelector('[data-login-open]');
          if (login) login.click();
          else window.location.href = '/login';
          return;
        }
        throw new Error((result && (result.tip || result.msg)) || '创建支付订单失败');
      }
      showStatus('订单创建成功，正在前往支付…', true);
      openPayInNewWindow(result.data.payUrl);
      payButton.disabled = false;
    } catch (error) {
      showStatus(error.message || '创建支付订单失败，请稍后重试');
      payButton.disabled = false;
    }
  });

  function openPayInNewWindow(url) {
    url = String(url || '').trim();
    if (!url) return;
    let opened = null;
    try {
      opened = window.open(url, '_blank', 'noopener,noreferrer');
    } catch (e) {
      opened = null;
    }
    if (opened) {
      try {
        opened.opener = null;
      } catch (e2) {}
      showStatus('已在新窗口打开支付页面，请完成支付后返回本页', true);
      return;
    }
    const link = document.createElement('a');
    link.href = url;
    link.target = '_blank';
    link.rel = 'noopener noreferrer';
    link.style.display = 'none';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    showStatus('若未打开支付页，请允许本站弹窗后重试', true);
  }

  function appendText(parent, tag, className, value) {
    const node = document.createElement(tag);
    node.className = className;
    node.textContent = value || '';
    parent.appendChild(node);
    return node;
  }

  function renderRows(items) {
    rowsRoot.replaceChildren();
    items.forEach(item => {
      const row = document.createElement('div');
      row.className = 'recharge-history__row';
      row.dataset.rechargeRow = '';
      row.dataset.category = item.category || '';
      appendText(row, 'span', 'recharge-history__kind', item.kind);
      const detail = document.createElement('span');
      detail.className = 'recharge-history__detail-line';
      appendText(detail, 'span', 'recharge-history__description', item.description);
      const time = document.createElement('time');
      time.className = 'recharge-history__time';
      appendText(time, 'span', 'only-desktop', item.time);
      appendText(time, 'span', 'only-mobile', item.mobileTime);
      detail.appendChild(time);
      row.appendChild(detail);
      const amount = appendText(row, 'strong', 'recharge-history__amount', item.amount);
      amount.classList.toggle('is-credit', Boolean(item.credit));
      rowsRoot.appendChild(row);
    });
    empty.hidden = items.length > 0;
    empty.textContent = '暂无记录';
  }

  function renderPagination() {
    const pageCount = Math.ceil(totalCount / pageSize);
    currentPage = Math.min(currentPage, Math.max(1, pageCount));
    pagination.hidden = totalCount === 0;
    more.hidden = totalCount <= 5 && !expanded;
    previous.disabled = currentPage <= 1;
    next.disabled = currentPage >= pageCount;
    total.textContent = '共 ' + totalCount + ' 条';
    pageButtons.replaceChildren();
    const firstPage = Math.max(1, Math.min(currentPage - 1, Math.max(1, pageCount - 3)));
    for (let page = firstPage; page <= Math.min(pageCount, firstPage + 3); page += 1) {
      const button = document.createElement('button');
      button.type = 'button';
      button.textContent = String(page);
      button.classList.toggle('is-active', page === currentPage);
      if (page === currentPage) button.setAttribute('aria-current', 'page');
      button.addEventListener('click', () => loadHistory(page));
      pageButtons.appendChild(button);
    }
  }

  async function loadHistory(page) {
    empty.hidden = false;
    empty.textContent = '加载中…';
    try {
      const query = new URLSearchParams({
        page: String(page),
        pageSize: String(pageSize),
        type: String(activeType),
      });
      const url = '/api/coin/trans/list?' + query.toString();
      let result;
      if (window.HttpRequest && typeof window.HttpRequest.get === 'function') {
        result = await window.HttpRequest.get(url);
      } else {
        const response = await fetch(url, {credentials: 'same-origin'});
        result = await response.json();
      }
      if (!result || Number(result.code) !== 200 || !result.data) {
        throw new Error((result && (result.tip || result.msg)) || '交易明细加载失败');
      }
      currentPage = Number(result.data.pageNum) || page;
      totalCount = Number(result.data.totalCount) || 0;
      renderRows(Array.isArray(result.data.list) ? result.data.list : []);
      renderPagination();
    } catch (error) {
      rowsRoot.replaceChildren();
      empty.hidden = false;
      empty.textContent = error.message || '交易明细加载失败';
      pagination.hidden = true;
    }
  }

  async function exportHistory() {
    if (!exportBtn) return;
    exportBtn.disabled = true;
    exportBtn.classList.add('is-loading');
    try {
      const query = new URLSearchParams({type: String(activeType)});
      const url = '/api/coin/trans/export?' + query.toString();
      const response = await fetch(url, {credentials: 'same-origin'});
      const contentType = (response.headers.get('Content-Type') || '').toLowerCase();
      if (contentType.includes('application/json')) {
        const result = await response.json();
        throw new Error((result && (result.tip || result.msg)) || '导出失败');
      }
      if (!response.ok) {
        throw new Error('导出失败');
      }
      const blob = await response.blob();
      const disposition = response.headers.get('Content-Disposition') || '';
      let filename = 'coin-trans.csv';
      const match = /filename\*?=(?:UTF-8''|")?([^\";]+)/i.exec(disposition);
      if (match && match[1]) {
        filename = decodeURIComponent(match[1].replace(/"/g, '').trim()) || filename;
      }
      const objectURL = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = objectURL;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      link.remove();
      URL.revokeObjectURL(objectURL);
      showStatus('导出成功', true);
    } catch (error) {
      showStatus(error.message || '导出失败', false);
    } finally {
      exportBtn.disabled = false;
      exportBtn.classList.remove('is-loading');
    }
  }

  filters.forEach(button => button.addEventListener('click', () => {
    activeType = Number(button.dataset.rechargeFilter) || 0;
    filters.forEach(option => {
      const selected = option === button;
      option.classList.toggle('is-active', selected);
      option.setAttribute('aria-pressed', String(selected));
    });
    loadHistory(1);
  }));
  previous.addEventListener('click', () => { if (currentPage > 1) loadHistory(currentPage - 1); });
  next.addEventListener('click', () => loadHistory(currentPage + 1));
  if (exportBtn) {
    exportBtn.addEventListener('click', () => exportHistory());
  }
  more.addEventListener('click', () => {
    expanded = !expanded;
    pageSize = expanded ? 100 : 5;
    more.firstChild.textContent = expanded ? '收起 ' : '全部 ';
    more.setAttribute('aria-expanded', String(expanded));
    loadHistory(1);
  });

  renderPagination();
})();