import {
  fetchTransactions,
} from "../lib/mockData";
import type { TransactionSummary } from "../lib/models";

export const transactionsTitle = "Transactions";

export function renderTransactionsPage(): string {
  return `
    <section class="transactions">
      <header class="section-header">
        <h2>Recent Transactions</h2>
        <p class="lead">Latest transactions on the AITBC network.</p>
      </header>
      <table class="table transactions__table">
        <thead>
          <tr>
            <th scope="col">Hash</th>
            <th scope="col">Block</th>
            <th scope="col">From</th>
            <th scope="col">To</th>
            <th scope="col">Value</th>
            <th scope="col">Status</th>
          </tr>
        </thead>
        <tbody id="transactions-table-body">
          <tr>
            <td class="placeholder" colspan="6">Loading transactions…</td>
          </tr>
        </tbody>
      </table>
    </section>
  `;
}

export async function initTransactionsPage(): Promise<void> {
  const tbody = document.querySelector<HTMLTableSectionElement>(
    "#transactions-table-body",
  );
  if (!tbody) {
    return;
  }

  const transactions = await fetchTransactions();
  if (!transactions || transactions.length === 0) {
    tbody.innerHTML = `
      <tr>
        <td class="placeholder" colspan="6">No transactions available.</td>
      </tr>
    `;
    return;
  }

  tbody.innerHTML = transactions.map(renderTransactionRow).join("");
}

function renderTransactionRow(tx: TransactionSummary): string {
  return `
    <tr>
      <td><code>${tx.hash.slice(0, 18)}…</code></td>
      <td>${tx.block}</td>
      <td><code>${tx.from.slice(0, 12)}…</code></td>
      <td><code>${tx.to ? tx.to.slice(0, 12) + '…' : 'null'}</code></td>
      <td>${tx.value}</td>
      <td>${tx.status}</td>
    </tr>
  `;
}
