const resource = typeof GetParentResourceName === 'function'
  ? GetParentResourceName()
  : 'devx_banking';
const app = document.querySelector('#app');
const form = document.querySelector('#transferForm');
const transactions = document.querySelector('#transactions');
const errorEl = document.querySelector('#error');
const format = new Intl.NumberFormat('de-DE');

async function post(event, data = {}) {
  const response = await fetch(`https://${resource}/${event}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json; charset=UTF-8' },
    body: JSON.stringify(data)
  });
  return response.json();
}

function showError(text = '') {
  errorEl.textContent = text;
  errorEl.classList.toggle('hidden', !text);
}

function render(overview) {
  const account = overview.account;
  document.querySelector('#accountName').textContent = account.accountName;
  document.querySelector('#accountNumber').textContent = account.accountNumber;
  document.querySelector('#balance').textContent = `${format.format(account.balance)} $`;

  transactions.innerHTML = '';
  for (const entry of overview.transactions || []) {
    const row = document.createElement('div');
    row.className = 'transaction';
    const sign = entry.direction === 'credit' ? '+' : '−';
    row.innerHTML = `
      <div><strong>${escapeHtml(entry.reference)}</strong><br>
      <small>${escapeHtml(entry.counterparty || '')} · ${escapeHtml(String(entry.createdAt))}</small></div>
      <strong class="${entry.direction}">${sign}${format.format(entry.amount)} $</strong>`;
    transactions.appendChild(row);
  }
}

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

document.querySelector('#close').addEventListener('click', () => post('close'));
document.addEventListener('keyup', event => {
  if (event.key === 'Escape') post('close');
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  showError('');
  const result = await post('transfer', Object.fromEntries(new FormData(form)));
  if (!result.ok) {
    showError(result.error || 'Überweisung fehlgeschlagen.');
    return;
  }
  form.reset();
  const refreshed = await post('refresh');
  if (refreshed.ok) render(refreshed.overview);
});

window.addEventListener('message', event => {
  const data = event.data;
  if (data.action === 'open') app.classList.remove('hidden');
  if (data.action === 'close') app.classList.add('hidden');
  if (data.action === 'overview') render(data.overview);
  if (data.action === 'error') showError(data.message);
});