import { layout } from './layout.js';

export function renderPaymentWallets(data) {
  const walletRows = Object.entries(data.wallets).map(([type, addr]) =>
    `<tr>
      <td><strong>${type}</strong></td>
      <td><code>${escapeHtml(addr || 'Not set')}</code></td>
    </tr>`
  ).join('');

  const content = `
    <div class="detail-card">
      <h2>Commission Status</h2>
      <p><strong>Commission:</strong> <span class="badge badge-${data.commissionEnabled ? 'active' : 'banned'}">${data.commissionEnabled ? 'ON' : 'OFF'}</span></p>
      <p><strong>Percentage:</strong> ${data.commissionPercent}%</p>
    </div>

    <div class="detail-card">
      <h2>Commission Wallet Addresses</h2>
      <p class="muted">These are the shop's payment wallets. Edit them in the <code>.env</code> file.</p>
      <table>
        <thead><tr><th>Currency</th><th>Address</th></tr></thead>
        <tbody>${walletRows}</tbody>
      </table>
    </div>
  `;
  return layout('Payment Wallets', content, 'payment-wallets');
}

function escapeHtml(str) {
  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}